html {
    box-sizing: border-box;
    height: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}


body {
    margin: 0;
    min-width: 320px
}

#wrapper {
    position: relative;
    overflow: hidden;
}

.gallery-container {
    max-width: 1440px;
    padding: 0 15px;
    margin: 0 auto;
    margin-top: 20px;
}

.gallery-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -5px;
}

    .gallery-row .gallery-col {
        padding: 0 3px;
        width: 50%;
        height: 480px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .gallery-row a {
        display: block;
        width: 100%;
        height: 100%;
    }

        .gallery-row a img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 50%;
        }

    .gallery-row .item-holder {
        width: calc(50% - 6px);
        padding: 0 6px 0 3px;
        height: calc(50% - 3px);
    }

        .gallery-row .item-holder:nth-child(3),
        .gallery-row .item-holder:nth-child(4) {
            margin: 6px 0 0;
        }


.gallery-detail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 15px 0;
}

    .gallery-detail .gallery-box {
        width: 100%;
        text-align: center;
    }

    .gallery-detail .img {
        width: 20px;
        display: inline-block;
        vertical-align: middle;
        margin: 0 5px 0 0;
    }

        .gallery-detail .img img {
            width: 100%;
            height: auto;
            vertical-align: top;
        }

    .gallery-detail a {
        text-decoration: none;
       /* color: #6fb044;*/
        display: inline-block;
        vertical-align: top;
    }

        .gallery-detail a .num {
            color: #666;
        }

.hide-img {
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 1023px) {
    .gallery-row .item-holder:nth-child(3),
    .gallery-row .item-holder:nth-child(4) {
        display: none;
    }

    .gallery-row .item-holder {
        width: 100%;
    }

        .gallery-row .item-holder + .item-holder {
            margin: 6px 0 0;
        }
}

@media (max-width: 767px) {
    .gallery-row .gallery-col {
        width: 100%;
        height: auto;
    }

        .gallery-row .gallery-col:nth-child(2) {
            display: none;
        }

    .gallery-row a {
        height: auto;
    }

        .gallery-row a img {
            width: 100%;
            height: auto;
            vertical-align: top;
        }
}

@media (min-width: 1600px) {
    .play-button {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 140px;
        left: 494px;
    }
}

@media (max-width: 767px) {
    .play-button {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 100px;
        left: 290.5px;
    }
}


@media (max-width: 540px) {
    .play-button {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 60px;
        left: 172px;
    }
}

@media (min-width: 514px) and (max-width: 540px) {
    .play-button {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 60px;
        left: 190px;
    }
}

@media (min-width: 414px) and (max-width: 514px) {
    .play-button {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 9.14px;
        left: 132px;
    }
}

@media (min-width: 0px) and (max-width: 321px) {
    .play-button {
        width: 200px;
        height: 200px;
        position: absolute;
        top: -6px;
        left: 85px;
    }
}

@media (min-width:321px) and (max-width: 370px) {
    .play-button {
        width: 200px;
        height: 200px;
        position: absolute;
        top: -6px;
        left: 100px;
    }
}

@media (min-width: 376px) and (max-width: 411px) {
    .play-button {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 8.28px;
        left: 125.5px;
    }
}


@media (min-width: 375px) and (max-width: 376px) {
    .play-button {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 1.845px;
        left: 122.5px;
    }
}


@media (min-width: 1023px) and (max-width: 1600px) {
    .play-button {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 160px;
        left: 183px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .play-button {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 160px;
        left: 119px;
    }
}