/* Big Tablet to 1200px (width smaller than 1140px row */


.view-content {
    margin: 10px;
    margin-top: 0px;
}

.photorwd {
    width: 180%;
    max-width: 180%;
    position: fixed;
    top: 45vh;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Big Tablet to 1200px (width smaller than 1140px row */

.view-img0 {
    margin-top: 5vh;
    margin-left: -16.66%;
}

.view-img {
    width: 150%;
    max-width: 150%;
}

@media only screen and (max-width: 1200px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: -18%;
    }

    .view-img {
        width: 145%;
        max-width: 145%;
    }

    .photorwd {
        width: 175%;
        max-width: 175%;
    }
}

@media only screen and (max-width: 1183px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: -18%;
    }

    .view-img {
        width: 145%;
        max-width: 145%;
    }

    .photorwd {
        width: 170%;
        max-width: 170%;
    }
}

@media only screen and (max-width: 1100px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: -21%;
    }

    .view-img {
        width: 145%;
        max-width: 145%;
    }

    .photorwd {
        width: 165%;
        max-width: 165%;
    }
}

/* Small Tablet to Big Tablet from 768 to 1023px */
@media only screen and (max-width: 990px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: -23%;
    }

    .view-img {
        width: 145%;
        max-width: 145%;
    }

    .photorwd {
        width: 160%;
        max-width: 160%;
    }
}

@media only screen and (max-width: 960px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: -24%;
    }

    .view-img {
        width: 145%;
        max-width: 145%;
    }

    .photorwd {
        width: 155%;
        max-width: 155%;
    }
}

@media only screen and (max-width: 930px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: -25%;
    }

    .view-img {
        width: 145%;
        max-width: 145%;
    }

    .photorwd {
        width: 150%;
        max-width: 150%;
    }
}

@media only screen and (max-width: 900px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: -22%;
    }

    .view-img {
        width: 140%;
        max-width: 140%;
    }

    .photorwd {
        width: 145%;
        max-width: 145%;
    }


}

@media only screen and (max-width: 850px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: -21%;
    }

    .view-img {
        width: 135%;
        max-width: 135%;
    }

    .photorwd {
        width: 140%;
        max-width: 140%;
    }
}

@media only screen and (max-width: 820px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: -18.5%;
    }

    .view-img {
        width: 130%;
        max-width: 130%;
    }

    .photorwd {
        width: 135%;
        max-width: 135%;
    }
}

@media only screen and (max-width: 800px) {
    .photorwd {
        width: 135%;
        max-width: 135%;
    }

}

@media only screen and (max-width: 790px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: -13%;
    }

    .view-img {
        width: 120%;
        max-width: 120%;
    }

    .photorwd {
        width: 130%;
        max-width: 130%;
    }

}

/* Small Phones to small Tablet 481-767px(Ipad) */
@media only screen and (max-width: 768px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: -13%;
    }

    .view-img {
        width: 120%;
        max-width: 120%;
    }

    .photorwd {
        width: 130%;
        max-width: 130%;
    }
}

/* Small Phones to small Tablet 481-767px(Ipad) */
@media only screen and (max-width: 690px) {

    .photorwd {
        width: 125%;
        max-width: 125%;
    }
}

@media only screen and (max-width: 680px) {

    .photorwd {
        width: 120%;
        max-width: 120%;
    }
}

@media only screen and (max-width: 660px) {

    .photorwd {
        width: 115%;
        max-width: 115%;
    }
}


@media only screen and (max-width: 640px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: -8%;
    }

    .view-img {
        width: 110%;
        max-width: 110%;
    }
}


@media only screen and (max-width: 575px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: 0%;
    }

    .view-img {
        width: 100%;
        max-width: 100%;
    }

    .photorwd {
        width: 100%;
        max-width: 100%;
    }
}


@media only screen and (max-width: 505px) {
    .view-img0 {
        margin-top: 5vh;
    }

    .view-img {
        width: 100%;
        max-width: 100%;
    }

}

/*手機*/
@media only screen and (max-width: 430px) {
    .view-img0 {
        margin-top: 5vh;
    }

    .view-img {
        width: 100%;
        max-width: 100%;
    }

    .view-content {
        margin: 10px;
        margin-top: 0px;

        overflow-y: auto;
        /*設定卷軸 auto 是有超過我的高度的時候才會出現卷軸*/
        height: 195px;
        /*自己設定*/
        display: block;
    }
}

@media only screen and (max-width: 382px) {
    .view-img0 {
        margin-top: 5vh;
    }

    .view-img {
        width: 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 345px) {
    .view-img0 {
        margin-top: 5vh;
    }

    .view-img {
        width: 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 317px) {
    .view-img0 {
        margin-top: 5vh;
    }

    .view-img {
        width: 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 270px) {
    .view-img0 {
        margin-top: 5vh;
        margin-left: 0%;
    }

    .view-img {
        width: 100%;
        max-width: 100%;
    }
}