@charset "utf-8"; /* CSS Document */ .index-solutions { text-align: center; overflow: hidden; position: relative; border-bottom: 1px solid #ddd; } .index-solutions .header { position: absolute; width: 480px; left: 0; top: 0; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 3%; background-color: #f4f3f9; } .index-solutions h2 { font-size: 28px; margin: 0; padding: 0; color: #000; display: inline-block; /* font-family: "Maven Pro", sans-serif, Microsoft JhengHei; */ font-weight: bold; margin-bottom: 20px; } .index-solutions .header p { font-size: 14px; line-height: 2; margin-bottom: 20px; } .index-solutions .header .btn { border-radius: 50%; background-color: #505050; color: #fff; width: 40px; height: 40px; text-align: center; line-height: 40px; margin: 0 5px; padding: 0; text-decoration: none; font-size: 1rem; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; position: relative; border: 1px solid transparent; display: inline-block; font-weight: normal; } .index-solutions .header .btn:before { line-height: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top: -10px; position: relative; /* margin-left: -3px; */ } .icon-left-open-big:before { content: '\e6b0'; } .icon-right-open-big:before { content: '\e6af'; } .index-solutions .header .btn.slider-next:before { /* right: -3px; */ } .index-solutions .list-wp { padding-left: 480px; } .slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; height: 100%; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; height: 100%; } .slick-slider .slick-track, .slick-slider .slick-list { height: 100%; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { /* position: relative; */ /* display: block; */ /* height: 100%; */ } .index-solutions .list .swiper-slide { text-align: center; opacity: 1; width: 240px; border-right: 1px solid #ddd; box-sizing: border-box; } .index-solutions .list .swiper-slide .inner { display: block; overflow: hidden; position: relative; text-decoration: none; } .jqimgFill { position: relative; overflow: hidden; position: relative; overflow: hidden; width: 100%; height: 100%; display: inline-block; } .index-solutions .list .swiper-slide .pic { height: 240px; position: relative; z-index: 1; } .jqimgFill img { position: absolute; left: 0; top: 0; margin: 0; display: block; width: auto; height: auto; min-width: 100%; min-height: 100%; max-height: none; max-width: none; } .index-solutions .list .swiper-slide .pic img { opacity: 1; display: none; transition: all 0.3s ease-out; display: block!important; width: 100%; height: 100%; object-fit: cover; } .index-solutions .list .swiper-slide .pic .mark { width: 100%; height: 100%; position: absolute; opacity: 0.5; transition: opacity 0.3s ease-out; background-color: #a9aaac; } .index-solutions .list .swiper-slide:hover .pic .mark { opacity: 0; transition: opacity 0.3s ease-out; } .index-solutions .list .swiper-slide:hover .pic img { transform:scale(1.1); transition: all 0.3s ease-out; } .index-solutions .list .swiper-slide .pics { position: absolute; left: 50%; margin-left: -37px; top: 200px; z-index: 2; width: 74px; height: 74px; background-color: #bfbfbf; border-radius: 50%; } .index-solutions .list .swiper-slide .pics svg.icon { /* background-color: #bfbfbf; */ /* border-radius: 50%; */ /* padding: 10px; */ width: 50px; height: 50px; margin: 10px; } .index-solutions .list .swiper-slide .title { height: 120px; background-color: #fff; font-size: 1.05rem; text-align: center; padding: 50px 25px 0 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight: normal; } @media only screen and (max-width: 768px){ .index-solutions .header { width: 100%; position: relative; height: auto; padding: 30px 3%; } .index-solutions .list-wp { padding-left: 0; } }