#viewer {
    margin: 0 auto;
    width: 100%;
    height: 627px;
    text-align: left;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

#viewer img {
    top: 0;
    left: 0;
    position: absolute;
    height:100%;
    width:auto;
}


#viewer02 {
    position: relative;
    overflow: hidden;
    height: 500px;
    z-index: -1;
}

#viewer02 img {
    top: 0;
    left: 0;

    position: absolute;
}

@media screen and (max-width: 440px) {
    #viewer{
        height:450px;
    }

    #viewer img {
        width: 100%;
        height: 450px;
        display: block;
        text-align: center;
        overflow: hidden;
        object-fit:cover;
    }

        #viewer02 {
        height: 270px;
            margin-bottom: 50px;
    }

    #viewer02 img {
        width: 300%;
        height: auto;
        display: block;
        text-align: center;
        overflow: hidden;
        margin-left: -100%
    }

    #viewer02 .img01{
         margin-left: -50%
    }
}