@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; }