#gallery {
    margin: 0 auto;
}

#gallery img
{
    width: 30%; /* 140 */
    margin: 0.5%;
    border-color: #f9f7f5;
    box-sizing: border-box;
    border: 3px solid rgba( 255, 255, 255, .5 ); /* 10 */

    -webkit-box-shadow: 0 0 0.4em rgba( 0, 0, 0, .05 ); /* 5 */
    box-shadow: 0 0 0.4em rgba( 0, 0, 0, .05 ); /* 5 */

    -webkit-transition: -webkit-box-shadow .3s ease, border-color .3s ease;
    transition: box-shadow .3s ease, border-color .3s ease;
}
    #gallery img:hover,
    #gallery img:focus
    {
        border-color: #fff;

        -webkit-box-shadow: 0 0 0.938em rgba( 0, 0, 0, .25 ); /* 15 */
        box-shadow: 0 0 0.938em rgba( 0, 0, 0, .25 ); /* 15 */
    }
#gallery{
	text-align: center;
}
.gallery {
	width: 100%;
}

.gallery li {
    width: 17.4%;
    margin: 0 0.3%;
    float: left;
    list-style-type: none;
    min-width: 102px;
}

.clear {
    zoom: 1; /* float解除 for IE6/7  */
}

.clear:before,
.clear:after {
    content: "";
    clear: both;
    display: block;
}

.left {
    float: left;
}

.right {
    float: right;
}

#gallery-button-area {
    margin: 0 auto;
}

.gallery-button-area {
    text-align: center;
    padding: 0;
    margin: 0;
}

.split6 {
	width: 16.5%;
}

.gallery-button-on {
    width: 100%;
    font-weight: 600;
    display: inline-block;
    padding: 12px;
    border: 1px solid #fff;
    background-color: #f66e29;
    color: #fff;
}

.gallery-button-on:hover {
    text-decoration: none;
    background-color: #f66e29;
    color: #fff;
}

.gallery-button-off {
    width: 100%;
    font-weight: 600;
    display: inline-block;
    padding: 12px;
    border: 1px solid #fff;
    background-color: #b2b2b2;
    color: #fff;
}

.gallery-button-off:hover {
    text-decoration: none;
    background-color: #f66e29;
    color: #fff;
}


/**************************** MOBILE ****************************/

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

    .left {
        width: 33%;
    }

    .right {
        width: 33%;
    }

    .gallery-button-on {
       font-size: 90%;
    }

    .gallery-button-off {
       font-size: 90%;
    }

}

@media screen and (min-width:768px) and ( max-width:1024px) {

    #gallery img {
        width: 18%;
        border: 6px solid rgba( 255, 255, 255, .5 );
    }

    .gallery li {
        width: 19.4%;
    }

}

@media only screen and (min-width: 1025px) {

    #gallery img {
        width: 18%;
        border: 6px solid rgba( 255, 255, 255, .5 );
    }

    .gallery li {
        width: 19.4%;
    }

}