/* * Prefixed by https://autoprefixer.github.io * PostCSS: v8.3.6, * Autoprefixer: v10.3.1 * Browsers: last 4 version */ .swiper-container { width: 100%; height: 0px; padding-bottom: 27%; } .swiper-slide img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .pagination { position: absolute; z-index: 20; bottom: 10px; right: 48%; width: 100%; text-align: right; } .swiper-pagination-switch { display: inline-block; width: 13px; height: 13px; border-radius: 8px; background: #fff; margin: 0 5px; opacity: 0.8; cursor: pointer; } .swiper-active-switch { background: #ffad2d; } .part-1 { width: 47.5%; float: left; margin-top: 22px; } .more { float: right; color: #3c3c3c; font-size: 14px; margin-top: 6px; } #tabs { float: left; } #tabs > li { float: left; font-size: 22px; color: #454545; margin-right: 40px; cursor: pointer; } #tabs > li > .line { width: 0px; } #tabs > li.active > .line { width: 90%; background-color: #812990; height: 4px; border-radius: 2px; margin: 5px auto; } #tabs > li > .more { float: none; position: absolute; right: 0; top: 0; display: none; } #tabs > li.active > .more { display: block; } #tab-content { margin-top: 15px; } #tab-content > ul { display: none; } @keyframes tabContentShow { from { opacity: 0; } to { opacity: 1; } } #tab-content > ul.show { display: block; animation-name: tabContentShow; animation-fill-mode: both; animation-duration: 1s; } .part-2 { width: 32.86%; float: left; margin-top: 22px; margin-left: 3.6%; } .part-2 .section-title { float: left; font-size: 22px; color: #454545; } .part-2 .section-title .line { width: 90%; background-color: #812990; height: 4px; border-radius: 2px; margin: 5px auto; } .part-2 .list { margin-top: 15px; } .part-2 .contact-container { background-color: #f4f4f4; height: 93px; text-align: center; margin-top: 20px; } .part-2 .contact-container .contact-container-2 { margin: 0 auto; top: 8px; display: inline-block; *display: inline; *zoom: 1; } .part-2 .contact-container .contact-container-2 > a { display: block; width: 71px; height: 56px; float: left; position: relative; } .part-2 .contact-container .contact-container-2 > a span { font-size: 14px; } .part-2 .contact-container .contact-container-2 > a:first-child + a { margin: 0 40px; width: 70px; } .part-2 .contact-container .contact-container-2 > a:hover > img.scitcapp { display: block; } img.scitcapp { display: none; width: 150px; height: 150px; position: absolute; bottom: 62px; left: -45px; box-shadow: -5px -5px 5px #ddd; } img.scitcapp1 { display: block; width: 100%; position: absolute; bottom: 62px; left: 0px !important; top:0px !important; } .part-3 { width: 12.43%; float: right; margin-top: 22px; } .part-3 > li { margin-top: 9px; } .part-3 li:nth-child(4) a{ /* 杩欎釜li闇€瑕佹崲琛 */ line-height: 54px; } .part-3 li:nth-child(4) a img{ width: 28px; height: 26px; } .part-3 > li > a { display: block; position: relative; height: 53px; line-height: 53px; color: #fff; } .part-3 > li > a > img.scitcapp1 { display: block; height: 210px; } .part-3 > li > a > img { position: relative; top: 6px; left: 15px; } .part-3 > li > a > span { position: absolute; left: 50px; font-size: 13px; } .part-3 > li:first-child { margin-top: 0px; background-color: #812990; } .part-3 > li:first-child:hover { background-color: #70247e; } .part-3 > li:first-child + li { background-color: #f7941e; } .part-3 > li:first-child + li:hover { background-color: #e98d1d; } .part-3 > li:first-child + li > a > img { top: 10px; } .part-3 > li:first-child + li + li { background-color: #2ca1b7; } .part-3 > li:first-child + li + li:hover { background-color: #2895a8; } .part-3 > li:first-child + li + li > a > img { top: 8px; } .part-3 > li:first-child + li + li + li { background-color: #4286F3; } .part-3 > li:first-child + li + li + li:hover { background-color: #4286F3; } .part-3 > li:first-child + li + li + li + li { background-color: #7bb1c7; } .part-3 > li:first-child + li + li + li + li:hover { background-color: #6fa2b6; } .part-3 > li:first-child + li + li + li + li + li { background-color: #8a99af; } .part-3 > li:first-child + li + li + li + li + li:hover { background-color: #7f8ca1; } .part-3 > li:first-child + li + li + li + li + li + li { background-color: #74b0bd; } .part-3 > li:first-child + li + li + li + li + li + li:hover { background-color: #679fac; } .part-3 > li:first-child + li + li + li + li + li + li > a > img { top: 4px; } .part-4 { width: 81.7%; margin-top: 30px; height: 89px; overflow: hidden; box-sizing: border-box; } .part-4 .swiper-wrapper { width: 800%; } .part-4 .swiper-slide { /* padding-right: 1%; */ /* margin-right: 8px; */ color: #fff; font-size: 16px; box-sizing: border-box; text-align: center; width: 250px; } .part-4 .swiper-slide a { width: 97%; height: 89px; line-height: 89px; text-align: center; display: block; } .part-4 .swiper-button-prev, .part-4 .swiper-button-next { position: absolute; z-index: 999; top: 50%; left: 10px; margin-top: -30px; width: 60px; height: 60px; background: url(../images/swiper-btn.png); cursor: pointer; display: none; } .part-4 .swiper-button-next { background-position: 0 -60px; left: auto; right: 10px; } .part-4:hover .swiper-button-prev, .part-4:hover .swiper-button-next { display: block; }