@charset "UTF-8";

#gallerybox {width: 96%;max-width: 1200px;margin:0 auto;}
#gallerybox .item_select {width: 100%;max-width: 900px;margin: 60px auto 0;display: flex;flex-wrap: wrap;border-top: 1px solid #EB0020;border-left: 1px solid #EB0020;}
#gallerybox .item_select li {display: block;width: 33.3%;margin: 0;background: #fff;padding: 10px 0 10px 30px;border-right: 1px solid #EB0020;border-bottom: 1px solid #EB0020;box-sizing: border-box;}
#gallerybox .item_select li.active {background:#ECB1A9;}
#gallerybox .item_select li a {color:#333;}
#gallerybox .item_select li img {display:inline-block;margin:0 20px 0 0px;transform: translateY(-4px);}
#gallerybox .item_select2 {margin: 20px auto 0;border-top: 1px solid #41A8DB;border-left: 1px solid #41A8DB;}
#gallerybox .item_select2 li {border-right: 1px solid #41A8DB;border-bottom: 1px solid #41A8DB;}
#gallerybox .item_select2 li.active {background:#91C9EE;}

#gallerybox .gr_list {width: 96%;max-width: 1174px;margin: 100px auto 190px;}
#gallerybox .gr_list ul {display: flex;flex-wrap: wrap;}
#gallerybox .gr_list ul li {display: block;width: 24.4%;margin: 0 0.8% 10px 0;}
#gallerybox .gr_list ul li:nth-child(4n) {margin-right: 0;}
#gallerybox .gr_list ul li img {width: 100%;height: auto;}
#gallerybox .gr_list ul li figure {display: block;box-shadow: 0 0 0 1px #ddd;border: 4px solid #fff;position: relative;}
#gallerybox .gr_list ul li figcaption {display: block;position: absolute;top:0;left:0;width: 100%;height: 100%;transition-duration: 0.5s;background-color: rgba(0,0,0,.6);color: #fff;font-size: 16px;text-align: center;cursor: pointer;opacity: 0;}
#gallerybox .gr_list ul li figcaption:hover {opacity: 1;}
#gallerybox .gr_list ul li .caption-inner {width: 100%;max-height: 100%;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
#gallerybox .gr_list ul li .caption-inner:before {content: "";display: inline-block;width: 30px;height: 32px;margin: 10px 0 5px;background-image: url(../images/plus.png);}
#gallerybox .gr_list ul li .caption-title {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 5px;box-sizing: border-box;}


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

#gallerybox {width: 100%;min-width: 100%;}
#gallerybox .item_select {width: 96%;max-width: 1200px;margin: 50px auto 0;display: flex;flex-wrap: wrap;}
#gallerybox .item_select li {padding: 10px 0 10px 10px;font-size:14px;}
#gallerybox .gr_list {width: 96%;max-width: 1200px;margin: 50px auto;}

}


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

#gallerybox {width: 100%;min-width: 100%;}
#gallerybox .item_select {width: 96%;max-width: 1200px;margin: 50px auto 0;display: flex;flex-wrap: wrap;}
#gallerybox .item_select li {width: 50%;}

#gallerybox .gr_list {width: 96%;max-width: 1200px;margin: 50px auto;}
#gallerybox .gr_list ul {display: flex;flex-wrap: wrap;}
#gallerybox .gr_list ul li {display: block;width: 49.5%;margin: 0 1% 10px 0;}
#gallerybox .gr_list ul li:nth-child(3n) {margin-right: 1%;}
#gallerybox .gr_list ul li:nth-child(2n) {margin-right: 0;}
#gallerybox .gr_list ul li img {width: 100%;height: auto;}
#gallerybox .gr_list ul li figure {display: block;box-shadow: 0 0 0 1px #ddd;border: 4px solid #fff;position: relative;}
#gallerybox .gr_list ul li figcaption {display: block;position: absolute;top:0;left:0;width: 100%;height: 100%;transition-duration: 0.5s;background-color: rgba(0,0,0,.6);color: #fff;font-size: 16px;text-align: center;cursor: pointer;opacity: 0;}
#gallerybox .gr_list ul li figcaption:hover {opacity: 1;}
#gallerybox .gr_list ul li .caption-inner {width: 100%;max-height: 100%;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
#gallerybox .gr_list ul li .caption-inner:before {content: "";display: inline-block;width: 30px;height: 32px;margin: 10px 0 5px;background-image: url(../images/plus.png);}
#gallerybox .gr_list ul li .caption-title {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 5px;box-sizing: border-box;}

}

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

#gallerybox .item_select li {width: 100%;}
#gallerybox .gr_list ul li {width: 100%;margin: 0 auto 10px;}
#gallerybox .gr_list ul li:nth-child(3n) {margin-right: auto;}
#gallerybox .gr_list ul li:nth-child(2n) {margin-right: auto;}

}