@font-face { font-family: 'fontawesome'; src: url('../fonts/fontawesome/fontawesome.eot?-e43dk9'); src: url('../fonts/fontawesome/fontawesome.eot?#iefix-e43dk9') format('embedded-opentype'), url('../fonts/fontawesome/fontawesome.woff?-e43dk9') format('woff'), url('../fonts/fontawesome/fontawesome.ttf?-e43dk9') format('truetype'), url('../fonts/fontawesome/fontawesome.svg?-e43dk9#fontawesome') format('svg'); font-weight: normal; font-style: normal; } /* Made with http://icomoon.io/app */
/* General style */
.grid-gallery ul { list-style: none; margin: 0; padding: 0; }
.grid-gallery figure { margin: 0; }
/* Grid style */
.grid-wrap { margin: 0 auto; }
.grid { margin: 0 auto; }
.grid li { width: calc(33.3333% - 15px); float: left; cursor: pointer; margin-right: 15px; margin-bottom: 15px; background-color: #fff; border-radius: 8px; overflow: hidden }
.grid li:nth-child(2n) { }
.grid figure { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
.grid figure img{ width:100%}
.grid li:hover figure { opacity: 0.7;}
.grid li figcaption { padding: 15px; }
.grid li figcaption h3 { font-size: 14px; ; }
/* Slideshow style */
.slideshow { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 500; opacity: 0; visibility: hidden; overflow: hidden; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; background-color: rgba(0,0,0,0.6); background-image: url(../img/bj.jpg); background-repeat: no-repeat; background-position: center top; background-size: 100% 100% }
.slideshow-open .slideshow { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.slideshow ul { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 150px); transform: translate3d(0, 0, 150px); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }
.slideshow ul.animatable li { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }
.slideshow-open .slideshow ul { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slideshow li {
width: calc(100vw*0.375);
height: calc(100vh*0.657); position: absolute; top: calc(100vh*0.1715);
left: calc(100vw*0.3125);
visibility: hidden;  text-align: center; background-image: linear-gradient(145deg, #222222, #2a2a2a); box-shadow: 3px 3px 5px #9d9999; }
/*.slideshow li { width: 660px; height: 560px; position: absolute; top: 50%; left: 50%; margin: -280px 0 0 -330px; visibility: hidden; }*/


.slideshow li.show { visibility: visible; }
.slideshow li:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255,255,255,0.8); -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.slideshow li.current:after { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s, visibility 0s 0.3s; transition: opacity 0.3s, visibility 0s 0.3s; }
/* Navigation */
.slideshow nav span { position: fixed; z-index: 1000; color: #ca5f5f; text-align: center; padding: 3%; cursor: pointer; font-size: 2.2em; }
.slideshow nav span.nav-prev, .slideshow nav span.nav-next { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.slideshow nav span.nav-next { right: 0; }
.slideshow nav span.nav-close { top: 0; right: 0; padding: 0.5em 1em; color: #fff;  }
.icon:before, .icon:after { font-family: 'fontawesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
span.nav-prev:before { content: "\e601"; }
span.nav-next:before { content: "\e600"; }
span.nav-close:before { content: "\e602"; }
/* Info on arrow key navigation */
.info-keys { position: fixed; top: 0px; width: 100%; font-size: 14px;  color: #fff;  text-align: center; line-height:3.4vh; }
.info-nums { top: 0;left: 0;padding: 1.5em;color: #fff;font-size: 14px;position: fixed;}

/* Example media queries (reduce number of columns and change slideshow layout) */

 

 @media screen and (max-width: 24em) {
.grid li { width: 100%; }
}

.slideshow figure{width: calc(100% - 20px); height: calc(100% - 20px); overflow: hidden; background-color: #eeeeee; margin-top: 10px; margin-left: 10px; }
.slideshow .pic { width:100%; height:100%;cursor: pointer;}
.slideshow li .pic .map { display: block; width: calc(100% - 40px); height: calc(100% - 40px); margin: 20px; text-align: center; margin-bottom: 10px; display: flex; align-items: center; /* 垂直居中 */ justify-content: center;}
.slideshow li .pic .map img {  max-width: 100%; max-height: calc(100% - 40px); }

.clickview {position:absolute; right:-100px; bottom:30px; z-index:999; }
.clickview span{ padding-right:10px;cursor:pointer;}


.clickview span i{ font-size:22px; color:#33333} 
.clickview span:hover{cursor: pointer; color:#CA181B}
.slideshow .txt { display:none }
.slideshow-open .slideshow .txt{ background-color:#fefefe;width:calc(100% - 40px); height:calc(100% - 40px);box-shadow: 3px 3px 10px #9d9999; margin:20px;}
.slideshow-open .slideshow .txt a .guanbi{ display:block; float:right; width:30px; height:30px; border-radius:50%; color:#fff; background-color:#a3a3a3; font-size:16px; text-align:center; line-height:30px; margin-top:15px; margin-right:15px;cursor: pointer;}
.slideshow-open .slideshow .txt a .guanbi:hover{ color:#fff; background-color:#c95f5f; }
.slideshow-open .slideshow .txt .face{float:left;margin-left: 40px;font-size: 18px;margin-right:40px;margin-top:40px; }
.slideshow-open .slideshow .txt .face .faceimg{ float:left; width:50px; height:50px; border-radius:50%; overflow:hidden}
.slideshow-open .slideshow .txt .face img{ width:100%}
.slideshow-open .slideshow .txt .face p.uname{ float:left;}
.slideshow-open .slideshow .txt .face p.uname em{ display:block; height:3px; width:30px; background-color:#c95f5f; font-size:0; margin-top:10px;}
.slideshow-open .slideshow .txt h3{ display:block; padding-top:15px; text-align:left; margin-left:40px; margin-right:40px;}
.slideshow-open .slideshow .txt .miaoshu{display:block; padding-top:10px; text-align:left; margin-left:40px; line-height:1.5; margin-right:40px;}