@font-face { font-family: "DINA"; /* Project id 2428390 */ src: url("../fonts/DINPro/fonteditor.woff2") format("woff2"), url("../fonts/DINPro/fonteditor.woff") format("woff"), url("../fonts/DINPro/fonteditor.ttf") format("truetype"); } .inBanner .img-box { height: 4.2rem; background-size: cover; background-position: center center; } .bathroom .setDetails { padding: 0; } .bathroom .swiper-container .img-box { height: 5.4rem; background-position: center center; background-size: cover; } .bathroom .pagination { position: absolute; left: 50%; bottom: 8px; padding: 0 5px; background-color: rgba(0, 0, 0, 0.2); z-index: 2; width: auto; border-radius: 20px; transform: translateX(-50%); } .bathroom .pagination .swiper-pagination-bullet { margin: 0 3px; background: #fff; width: 8px; height: 8px; opacity: 1; } .bathroom .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #2fc7a1; } .bathroom .section1 { padding: 35px 0 25px; font-size: 16px; color: #646464; } .bathroom .section1 .lll { padding-right: 10%; } .bathroom .section1 .rrr { padding: 20px 3%; } .bathroom .section1 .rrr .text { text-align: justify; } .bathroom .section1 .rrr .text p { font-size: 15px; color: #666; line-height: 2; } .bathroom .section1 .rrr .text p + p { margin-top: 8px; } .bathroom .common-title { color: #2fc7a1; margin-bottom: 30px; } .bathroom .common-title.center { text-align: center; } .bathroom .common-title .cn { font-size: 36px; } .bathroom .common-title .en { font-size: 18px; text-transform: uppercase; } .bathroom .section2 { padding-top: 25px; } .bathroom .section2 .setDetails { padding-top: 25px; } .bathroom .section3 { padding: 40px 0 60px; } .bathroom .section3 .swiper-container { background-image: url(../images/bathroom-img5.jpg); background-size: 200% auto; background-repeat: no-repeat; background-position: center 30%; margin-top: 30px; } .bathroom .section3 .swiper-slide { position: relative; } .bathroom .section3 .swiper-slide::after { content: ""; position: absolute; width: 64%; padding-top: 64%; border-radius: 50%; background-image: linear-gradient(to bottom, #72d9bf, rgba(114, 217, 191, 0)); left: 50%; top: 20%; transform: translateX(-50%) scale(0.5); opacity: 0; transition: all 0.25s; } .bathroom .section3 .swiper-slide img { width: 100%; position: relative; z-index: 2; transform: scale(0.8); transition: all 0.25s; } .bathroom .section3 .swiper-slide .text { opacity: 0; transition: opacity 0.25s; text-align: center; padding: 0 5%; line-height: 1.5; } .bathroom .section3 .swiper-slide .text .suname { font-size: 20px; color: #353535; font-weight: 700; } .bathroom .section3 .swiper-slide .text .name { font-size: 16px; text-transform: uppercase; color: #535353; } .bathroom .section3 .swiper-slide .text .des { line-height: 1.7; font-size: 14px; color: #a0a0a0; margin-top: 5px; } .bathroom .section3 .swiper-slide.swiper-slide-active::after { opacity: 1; transform: translateX(-50%) scale(1); } .bathroom .section3 .swiper-slide.swiper-slide-active img { transform: scale(1); } .bathroom .section3 .swiper-slide.swiper-slide-active .text { opacity: 1; } .bathroom .section4 { position: relative; padding-bottom: 25px; } .bathroom .section4 .img-box { height: 6rem; background-position: center center; background-size: cover; } .bathroom .section5 { padding: 25px 0; } .bathroom .section5 .news-lists { padding: 50px 3% 20px; display: flex; flex-wrap: wrap; } .bathroom .section5 .news-lists .news-item { display: block; background-color: #fff; font-size: 16px; color: #646464; position: relative; box-shadow: 0 0 10px rgba(0, 0, 0, 0.08); padding: 0 15px 15px; border-radius: 10px; width: calc(50% - 5px); margin-right: 10px; text-align: center; } .bathroom .section5 .news-lists .news-item img { width: 50px; height: 50px; margin: -25px auto 0; } .bathroom .section5 .news-lists .news-item .index { font-size: 60px; color: #f8f8f8; line-height: 1; position: absolute; right: 20px; bottom: -20px; font-family: "DINA"; } .bathroom .section5 .news-lists .news-item .title { font-size: 17px; color: #2fc7a1; margin-bottom: 5px; margin-top: 10px; font-weight: 700; } .bathroom .section5 .news-lists .news-item .des { text-align: left; line-height: 1.8; font-size: 13px; } .bathroom .section5 .news-lists .news-item:nth-child(2n) { margin-right: 0; } .bathroom .section5 .news-lists .news-item:nth-child(n + 3) { margin-top: 40px; } .links { display: flex; flex-wrap: wrap; width: 100%; padding: 3% 3% 0; } .links a:nth-child(n + 4) { margin-top: 2%; } .links a:nth-child(3n) { margin-right: 0; } .links a { display: flex; flex-direction: column; justify-content: center; align-items: center; color: #2fc7a1; background-color: #fff; width: 32%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.08); padding: 5% 0; border-radius: 10px; margin-right: 2%; } .links a p { font-size: 12px; } .links a .img { position: relative; margin-bottom: 5px; width: 30px; } .links a .img img + img { position: absolute; left: 0; top: 0; opacity: 0; } .links a:active, .links a.active { background-color: #2fc7a1; color: #fff; } .links a:active .img img, .links a.active .img img { opacity: 0; } .links a:active .img img + img, .links a.active .img img + img { opacity: 1; } .bathroom-detail { padding: 25px 3% 40px; } .bathroom-detail .links { padding: 25px 0 15px; } .bathroom-detail .detial-lists { padding-bottom: 30px; display: flex; flex-wrap: wrap; } .bathroom-detail .detial-lists a { display: block; position: relative; width: calc((100% - 10px) / 2); margin-right: 10px; margin-bottom: 10px; background-color: #fff; box-shadow: 0 0 15px rgba(55, 55, 55, 0.08); padding: 10px; border-radius: 10px; } .bathroom-detail .detial-lists a img { border-radius: 8px; } .bathroom-detail .detial-lists a .title { line-height: 1; font-size: 15px; color: #3e3e3e; text-align: center; padding: 10px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bathroom-detail .detial-lists a:nth-child(2n) { margin-right: 0; } /* 閫氱敤鍒嗛〉鏍峰紡 */ #page { display: block; text-align: center; } #page li { display: inline-block; min-width: 35px; height: 35px; cursor: pointer; color: #fff; font-size: 13px; line-height: 33px; background-color: #d1d1d1; border: 1px solid #d1d1d1; text-align: center; margin: 0 4px; -webkit-appearance: none; border-radius: 35px; } .xl-nextPage, .xl-prevPage { width: 80px; color: #2fc7a1; height: 28px; display: none !important; } #page li.xl-disabled { opacity: 0.5; cursor: no-drop; } #page li.xl-disabled:hover { background-color: #f9f9f9 !important; border: 1px solid #dce0e0 !important; color: #666 !important; } #page li.xl-active { background-color: #2fc7a1; border-color: #2fc7a1; color: #fff; } #page li:hover { background-color: #2fc7a1 !important; border-color: #2fc7a1; color: #fff; } #page li.xl-jumpText { background-color: rgba(0, 0, 0, 0); border-color: rgba(0, 0, 0, 0); opacity: 1; } #page li.xl-jumpText:hover { background-color: rgba(0, 0, 0, 0) !important; border-color: rgba(0, 0, 0, 0) !important; } #page li.xl-jumpButton { padding: 0 5px; } #xlJumpNum { width: 40px; margin: 0 3px; } /*# sourceMappingURL=./main.mobile.css.map */