45 lines
3.6 KiB
CSS
Executable File
45 lines
3.6 KiB
CSS
Executable File
@charset "utf-8";
|
|
/* CSS Document */
|
|
|
|
html, body { position: relative; height: 100%; }
|
|
body { background: rgba(0,0,0,0.9); font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; }
|
|
ul, li { list-style: none; padding: 0; margin: 0; }
|
|
.swiper-container { width: 100%; height: 300px; margin-left: auto; margin-right: auto; -webkit-transition:ease-out 0.2s; -moz-transition:ease-out 0.2s; -o-transition:ease-out 0.2s; transition:ease-out 0.2s; }
|
|
.swiper-slide { background-size: cover; background-position: center; }
|
|
.gallery-top { height: 100%; width: 100%; }
|
|
/*.gallery-top:after { content: ""; z-index: 99; background: rgba(0,0,0,0.7); position: absolute; left: 0; width: 100%; bottom: 0; height: 50px; }*/
|
|
.gallery-thumbs { height: 0; box-sizing: border-box; padding: 0; }
|
|
.gallery-thumbs .swiper-slide { width: 25%; height: 100%; opacity: 0.4; }
|
|
.gallery-thumbs .swiper-slide-active { opacity: 1; }
|
|
.swiper-button-white { background-color: rgba(0,0,0,0.7); margin-top: -35px; outline: none; }
|
|
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { padding: 20px 0px 20px 40px; right: 0; border-radius: 50px 0 0 50px; }
|
|
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { padding: 20px 40px 20px 0; left: 0; border-radius: 0 50px 50px 0; }
|
|
.sw_tit { padding: 20px; position: absolute; width: 100%; left: 0; bottom: 0; background: rgba(0,0,0,0.6); color: #fff; overflow: hidden; display: table; }
|
|
.sw_tit, .sw_tit * { box-sizing: border-box; }
|
|
.sw_tit > ul { display: table-cell; vertical-align: middle; }
|
|
.sw_tit > ul > li:nth-child(1) { -webkit-line-clamp:1; -webkit-box-orient:vertical; display:-webkit-box; text-overflow:ellipsis; overflow:hidden; font-size: 14px; }
|
|
.sw_tit > ul > li:nth-child(2) { font-size: 12px; padding-top: 5px; color: rgba(255,255,255,0.5); }
|
|
.swbtn1 { display: table-cell; vertical-align: middle; width: 80px; text-align: center; }
|
|
.swbtn1 a { display: inline-block; border: 1px solid #fff; color: #fff; font-size: 14px; line-height: 16px; padding: 6px 10px; border-radius: 15px; text-decoration: none; }
|
|
.swbtn1 a:after { font-family:xeicon; content: "\e945"; margin-left: 5px; }
|
|
.swbtn2 { display: table-cell; vertical-align: middle; width: 20px; text-align: right; }
|
|
.swbtn2 a { display: inline-block; font-size: 20px; line-height: 40px; color: #fff; padding-top: 4px; }
|
|
|
|
.sw_img { position: relative; top: 0; left: 0; width: 100%; height: 100%; }
|
|
.sw_img img { max-width: 100%; max-height: 300px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
|
|
|
|
.photos.active .gallery-top { height: 85%; width: 100%; }
|
|
.photos.active .gallery-thumbs { height: 15%; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.2); }
|
|
.photos.active .swbtn1 a:after { font-family:xeicon; content: "\e942"; margin-left: 5px; }
|
|
|
|
.ph_back { display: block; position: fixed; top: 0; left: 0; padding: 15px; color: #fff; font-size: 20px; z-index: 999; }
|
|
|
|
.sw_set { display: none; z-index: 99; padding: 25px 35px; position: absolute; width: 100%; left: 0; bottom: 0; background: rgba(0,0,0,0.6); color: #fff; overflow: hidden; }
|
|
.sw_set, .sw_set * { box-sizing: border-box; }
|
|
.sw_set ul { display: table; width: 100%; }
|
|
.sw_set ul li { display: table-cell; width: 33.3333%; text-align: center; }
|
|
.sw_set ul li a { display: inline-block; color: #fff; font-size: 30px; line-height: 30px; }
|
|
.sw_set ul li:nth-child(1) { text-align: left; }
|
|
.sw_set ul li:nth-child(3) { text-align: right; }
|
|
.swiper-wrapper.set .sw_set { display: block; border-top: 1px solid rgba(255,255,255,0.18); }
|
|
.swiper-wrapper.set .sw_tit { bottom: 84px; } |