html, body { position: relative; height: 100%; }
body { background: #000; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; }
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,img,input,li,ol,p,pre,td,textarea,th,ul{padding:0;margin:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{vertical-align:top;border:0}
address,caption,cite,code,dfn,em,i,th,var{font-weight:400;font-style:normal}
li,ol,ul{list-style:none}
dd,div,dl,dt,li,ol,ul{zoom:1;}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-weight:400;font-size:100%}
.fl{float: left !important;}
.fr{float: right !important;}

.swiper-container { width: 100%; margin-left: auto; margin-right: auto; }
@media (min-width: 480px) {
.swiper-container { min-height: 320px; }
}
.swiper-container-wrapper { display: flex; flex-flow: column nowrap; height: 100vh; width: 100vw; }
@media (min-width: 480px) {
.swiper-container-wrapper { flex-flow: row nowrap; }
}
.swiper-button-next, .swiper-button-prev { color: #fff; }
.swiper-slide-duplicate, .swiper-slide { text-align: center; background-size: cover; background-position: center; background-color: #fff; /* Center slide text vertically */
display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;/* Slide content */
}
.bg1 { background: url(../pic_files/1.jpg) no-repeat 0 100%; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; }
.bg2 { background: url(../pic_files/2.jpg) no-repeat 0 100%; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; }
.bg3 { background: url(../pic_files/3.jpg) no-repeat 0 100%; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; }
.bg4 { background: url(../pic_files/4.jpg) no-repeat 0 100%; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; }
.swiper-slide .title  { font-size:24px}
.swiper-slide-duplicate .description, .swiper-slide-duplicate .title, .swiper-slide .description, .swiper-slide .title { display: block; opacity: 0;}
.swiper-slide-duplicate-active .description, .swiper-slide-duplicate-active .title, .swiper-slide-active .description, .swiper-slide-active .title { opacity: 1; }
.swiper-slide-duplicate-active .title, .swiper-slide-active .title { margin-bottom: 0.5rem; font-size: 24px; color: #fff; }
.swiper-slide-duplicate-active .description, .swiper-slide-active .description { font-size: 16px; color: #fff;}

.head { height: 30px; line-height: 30px; padding: 15px 0px; background: rgba(0,0,0,.40); ; margin-bottom: 5px; position: absolute; z-index: 99; width: 100%; }
.head ul { position: relative; padding: 0px 50px; }
.head ul li.title { font-size: 24px; background: url(../images/sub_icon.png) no-repeat left center; padding-left: 25px; float: left; color: #FFF; }
.head ul li select { width: 200px; height: 30px; line-height: 30px; border: 0; background: #fff; color: #666; font-size: 14px; padding-left: 20px; margin-left: 18px; }




.gallery-top { width: 100%; height: 75vh; }
@media (min-width: 480px) {
.gallery-top { width: 80%; height: 100vh; margin-right: 10px; }
}
.gallery-thumbs { width: 100%; height: 25vh; padding-top: 10px; }
@media (min-width: 480px) {
.gallery-thumbs { width: 20%; height: 100vh; padding: 0; }
}
.gallery-thumbs .swiper-wrapper { flex-direction: row; }
@media (min-width: 480px) {
.gallery-thumbs .swiper-wrapper { flex-direction: column; }
}
.gallery-thumbs .swiper-slide { width: 25%; flex-flow: row nowrap; height: 100%; opacity: 0.75; cursor: pointer; }
@media (min-width: 480px) {
.gallery-thumbs .swiper-slide { flex-flow: column nowrap; width: 100%; color: #fff; font-size: 16px; }
}
.gallery-thumbs .swiper-slide-thumb-active { opacity: 1; }