锘緻charset "utf-8"; .wrapper { padding-top: 100vh; } .banner { overflow: hidden; height: 100vh; position: fixed; top: 0; left: 0; width: 100%; } .banner .swiper-container { --swiper-navigation-color: #fff; --swiper-navigation-size: 20px; } .banner .swiper-container, .banner .swiper-slide, .banner .pic, .banner .pic1 { height: 100%; width: 100%; overflow: hidden; } .banner .swiper-slide { position: relative; } .banner .pic, .banner .pic1 { background-repeat: no-repeat; background-position: center; background-size: cover; } .banner .pic1 { display: none; } .banner .content { position: absolute; top: 0; left: 50%; margin-left: -600px; z-index: 1; height: 100%; } .banner img { position: absolute; top: 30%; left: 0; } @-webkit-keyframes slide_on1 { 0% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes slide_on1 { 0% { transform: scale(1.1); } 100% { transform: scale(1); } } .slide_on1 { -webkit-animation-name: slide_on1; animation-name: slide_on1; } .banner .swiper-slide-active .pic { animation: slide_on1 4s linear forwards; -webkit-animation: slide_on1 4s linear forwards; -ms-animation: slide_on1 4s linear forwards; -moz-animation: slide_on1 4s linear forwards; -o-animation: slide_on1 4s linear forwards; } .banner .swiper-button-prev, .banner .swiper-button-next { color: #fff; opacity: 0; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; width: 66px; height: 66px; background: rgba(0, 0, 0, .5); } .banner .swiper-button-next:after, .banner .swiper-button-prev:after { font-family: 'iconfont'; font-size: 20px; } .banner .swiper-button-next:after { margin-left: 5px; content: '\e817'; } .banner .swiper-button-prev:after { margin-right: 5px; content: '\e818'; } .banner:hover .swiper-button-prev, .banner:hover .swiper-button-next { opacity: 1; } .banner .slides { position: absolute; bottom: 36px; text-align: center; width: 100px; left: 50%; margin-left: -50px; z-index: 1; } .banner .slides p { color: #fff; font-size: 12px; margin-top: 6px; } .banner .slides i { display: block; margin: 0 auto; width: 2px; height: 30px; background: #fff; animation: a_banner_s_line 3s 0.3s linear both infinite; -webkit-animation: a_banner_s_line 3s 0.3s linear both infinite; -ms-animation: a_banner_s_line 3s 0.3s linear both infinite; -moz-animation: a_banner_s_line 3s 0.3s linear both infinite; -o-animation: a_banner_s_line 3s 0.3s linear both infinite; } @keyframes a_banner_s_line { 0% { transform: scale(1, 1); -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; opacity: 1; } 20% { transform: scale(1, 0.01); -webkit-transform: scale(1, 0.01); -ms-transform: scale(1, 0.01); -moz-transform: scale(1, 0.01); -o-transform: scale(1, 0.01); transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; opacity: 1; } 30% { transform: scale(1, 0.01); -webkit-transform: scale(1, 0.01); -ms-transform: scale(1, 0.01); -moz-transform: scale(1, 0.01); -o-transform: scale(1, 0.01); transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; opacity: 0; } 31% { transform: scale(1, 0.01); -webkit-transform: scale(1, 0.01); -ms-transform: scale(1, 0.01); -moz-transform: scale(1, 0.01); -o-transform: scale(1, 0.01); transform-origin: 50% 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -o-transform-origin: 50% 0; opacity: 0; } 50% { transform: scale(1, 1); -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform-origin: 50% 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -o-transform-origin: 50% 0; opacity: 1; } 100% { transform: scale(1, 1); -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; opacity: 1; } } .banner .txt { /*background: -moz-linear-gradient(left, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); background: -webkit-linear-gradient(left, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); new gradient for Webkit*/ /*background: -o-linear-gradient(left, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); background: linear-gradient(to right, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));*/ position: absolute; top: 30%; height: 320px; width: 820px; color: #fff; /* font-family: 'SourceHanSansCN'; */ font-family: 'Microsoft Yahei', Helvetica, sans-serif; font-weight: lighter; padding: 20px 0 0 50px; line-height: 1.2; text-shadow: 2px 3px 5px rgba(0, 0, 0, .25); } .banner .txt .t1 { font-size: 120px; } .ios .banner .txt .t1, .ios .banner .txt .t2 { font-family: Helvetica, sans-serif; } .banner .txt .t2 { font-size: 36px; padding-left: 72px; letter-spacing: 2px; } .banner .txt .t3 { font-size: 32px; padding-left: 72px; margin-top: 20px; letter-spacing: 2px; } .main { background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, .1); position: relative; z-index: 3; } .main-1 { padding-top: 55px; overflow: hidden; background: url(../images/a_09.jpg) no-repeat right bottom; background-size: cover; height: 445px; } .main-1-content { width: 1000px; margin: 0 auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .main-ch { font-size: 24px; color: #252525; text-align: center; line-height: 1.5; letter-spacing: 2px; } .main-ch a { color: #252525; } .main-ch a:hover, .main-en a:hover { color: red; } .main-1-content .txt { margin-left: 53px; } .main-1-content img { width: 130px; height: 301px; display: block; } .main-en { font-size: 16px; color: #868686; text-align: center; line-height: 1.5; text-transform: uppercase; letter-spacing: 2px; margin-top: 2px; display: none; } .main-en a { color: #868686; } .main-info { margin-top: 32px; line-height: 1.7; font-size: 16px; text-align: center; color: #565656; } .main-more { margin: 45px auto 0; display: block; font-size: 14px; color: #868686; text-align: center; width: 160px; height: 48px; line-height: 46px; border: 1px solid #acacac; } a.main-more:hover, .main .links a:hover { color: red; border-color: red; } .swiper2 { position: relative; } .swiper2 .swiper-container, .swiper2 .swiper-slide, .swiper2 .pic { height: 100%; width: 100%; overflow: hidden; } .swiper2 .swiper-slide { position: relative; } .swiper2 .pic { background-repeat: no-repeat; background-position: right center; background-size: cover; width: 50%; float: left; } .swiper2 .txt { float: right; width: 50%; padding: 30px 3.3% 0; color: #252525; } .swiper2 .swiper-button-prev, .swiper2 .swiper-button-next { bottom: 0; top: auto; left: 50%; right: auto; width: 66px; height: 66px; background: #2e2e2e; color: #fff; opacity: 1; } .swiper2 .swiper-button-prev { margin-left: -66px; } .swiper2 .swiper-button-disabled { background: #5c5c5c; } .swiper2 .swiper-container { --swiper-navigation-size: 16px; } .swiper2 .tit { font-size: 24px; text-align: center; } .swiper2 .en { text-align: center; color: #868686; font-size: 16px; text-transform: uppercase; margin-top: 7px; } .swiper2 .title { color: #565656; margin-top: 42px; font-size: 22px; } .swiper2 .date { font-size: 16px; color: #868686; margin-top: 12px; margin-bottom: 10px; } .swiper2 .info { font-size: 16px; color: #868686; line-height: 30px; } .main-2 { margin: 5px 0; } .swiper2 .swiper-pagination-bullet-active { background: red; } .swiper2 .pic img { width: 100%; display: block; height: auto; } .swiper2 .swiper-pagination { display: block !important; left: auto; right: 0; width: 50%; bottom: 15px; font-size: 0; } .main-3, .main-4, .main-5, .main-6, .main-7, .main-8, .main-11, .main-12, .main-13, .main-14, .main-15, .main-16 { position: relative; height: 445px; background-size: cover; background-repeat: no-repeat; background-position: left center; background-image: url(../images/bs3.jpg); margin: 5px 0; font-size: 0; } .main-4 { background-image: url(../images/d_15.jpg); background-position: right center; } .main-5 { background-image: url(../images/e_19.jpg); } .main-6 { background-image: url(../images/ff_23.jpg); background-position: right center; } .main-7 { background-image: url(../images/g_27.jpg); } .main-8 { background-image: url(../images/h_31.jpg); background-position: center; } .main-9 { height: 440px; background: #111111 url(../images/f_23.jpg) no-repeat center; background-size: auto 100%; } .main-3 { padding-top: 55px; } .main .links a { font-size: 16px; color: #565656; display: block; height: 48px; line-height: 46px; text-align: center; border: 1px solid #acacac; margin: 0 5px 10px; padding: 0 20px; white-space: nowrap; } .main .links { justify-content: center; margin-top: 35px; } .main-4 .txt { width: 500px; position: absolute; top: 95px; left: 18%; } .main-7 .links a { width: 260px; height: 60px; line-height: 58px; padding-left: 76px; text-align: left; margin: 0 0 10px 0; position: relative; font-size: 18px; } .main-7 .links a:after { content: ''; font-family: 'iconfont'; display: block; position: absolute; top: 0; left: 25px; height: 58px; width: 36px; color: #868686; text-align: center; -webkit-transition: color .3s; -o-transition: color .3s; transition: color .3s; line-height: 60px; font-size: 25px; } .main-4 .links .phone:after, .main-7 .links .phone:after { content: '\e679'; } .main-4 .links .email:after { content: '\e609'; } .main-4 .links a:hover:after, .main-7 .links a:hover:after { color: red; } .main-5 .txt { top: 90px; right: 16%; width: 464px; height: 226px; position: absolute; } .main-6 .txt { position: absolute; top: 90px; left: 20%; } .main-7 .txt { width: 552px; height: 267px; position: absolute; top: 70px; right: 16%; text-align: center; } .main-7 .links a { margin: 0 auto; } .main-7 .main-info1 { font-size: 16px; color: #868686; line-height: 36px; margin-top: 15px; } .main-7 .main-info2 { font-size: 16px; color: #565656; margin-top: 25px; } .stock-info { overflow: hidden; margin-top: 30px; width: 365px; } .stock-info .left { font-size: 18px; color: #565656; line-height: 30px; } .stock-info .right { font-size: 60px; color: red; line-height: 1.1; } .stock-info .right.green { color: green; } .main-8 .txt { position: absolute; top: 85px; right: 19%; width: 441px; } .stock-info1 { font-size: 14px; color: #868686; line-height: 30px; margin-top: 19px; } .stock-info1 span { color: red; } .stock-info1 span.green { color: green; } .stock-info1 a { color: #868686; } .main-8 .txt a:hover { color: red; } .main-11 { background-image: url(../images/11.jpg); padding-top: 90px; background-position: center; } .main-11 .links a { min-width: 160px; } .main-12 { background-image: url(../images/12.jpg); background-position: center; padding-top: 90px; } .main-12 .txt, .main-13 .txt { float: left; } .main-3 .txt, .main-15 .txt { float: right; } .main-13 .txt { margin-left: 130px; } .main-13 { background-image: url(../images/13.jpg); background-position: center; padding-top: 90px; } .main-14 { background-image: url(../images/ff_23.jpg); background-position: center; padding-top: 90px; } .main-14 .txt { float: left; } .main-15 { background-image: url(../images/15.jpg); background-position: right center; padding-top: 90px; } @media screen and (max-width: 1700px) { .swiper2 .info { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .swiper2 .title { margin-top: 30px; } .swiper2 .txt { padding-top: 25px; } .main-4.pc { background-position: 78% center; } } @media screen and (max-width: 1400px) { .swiper2 .info { -webkit-line-clamp: 2; } .swiper2 .title { margin-top: 20px; font-size: 20px; } .swiper2 .txt { padding-top: 20px; } .main-4 { background-position: 72% center; } .main-6 { background-position: 78% center; } .main-4.pc .txt { left: 7%; } } @media screen and (max-width: 1200px) { .swiper2 .info { -webkit-line-clamp: 1; } .main .txt .links.flex { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (max-width: 1100px) { .swiper2 .info { display: none; } } @media screen and (max-width: 1028px) { .swiper2 .pic { float: none; width: 100%; background-position: center; } .swiper2 .txt { float: none; width: 100%; padding-bottom: 40px; } .swiper2 .info { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .swiper2 .swiper-pagination { width: 100%; } .main-4.pc .txt { left: 4%; } } @media screen and (max-width: 768px) { .banner { position: static; height: 3rem; } .wrapper { padding-top: 0; } .banner .pic { display: none; } .banner .pic1 { display: block; } .banner img { width: 100%; left: -1%; } .banner .txt { width: 86%; height: 1.1rem; top: auto; bottom: 0; padding: 0.08rem 0 0 0.2rem; } .banner .txt .t1 { font-size: 0.4rem; } .banner .txt .t2 { font-size: 0.12rem; padding-left: 0.23rem; } .banner .txt .t3 { font-size: 0.11rem; padding-left: 0.23rem; margin-top: 0.07rem; } .banner .swiper-button-prev, .banner .swiper-button-next { display: none; } .main-1 { background: url(../images/mobile/images/main1.jpg) no-repeat center bottom; background-size: cover; height: 4.4rem; padding-top: 0.35rem; } .main-1-content { width: 100%; } .main-1 .txt { width: 100%; padding: 0 0.25rem; margin: 0; } .main-ch { font-size: 0.15rem; } .main-en { font-size: 0.09rem; } .main-info { margin-top: 0.13rem; font-size: 0.1rem; line-height: 1.8; text-align: left; } .main-more, .main .links a { font-size: 0.09rem; height: 0.24rem; border: none; position: relative; line-height: 0.24rem; margin-top: 0.18rem; } .main-more:before, .main .links a:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid #acacac; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; z-index: 1; } a.main-more:hover, .main .links a:hover, .main .links a:hover:after { color: #868686; } .swiper2 {} .swiper2 .pic {} .swiper2 .pic img {} .swiper2 .txt { padding: 0.2rem 0.21rem 0.4rem; } .swiper2 .tit { font-size: 0.15rem; } .swiper2 .en { font-size: 0.09rem; margin-top: 0.08rem; } .swiper2 .title { margin-top: 0.15rem; font-size: 0.12rem; line-height: 1.4; } .swiper2 .date { font-size: 0.1rem; margin-top: 0.06rem; margin-bottom: 10px; } .swiper2 .info { font-size: 0.1rem; line-height: 0.18rem; -webkit-line-clamp: 2; margin-top: 0.05rem; } .main-3, .main-4, .main-5, .main-6, .main-7, .main-8, .main-11, .main-12, .main-13, .main-14, .main-15 { height: 4.4rem; background-position: center; } .main-3 { background-image: url(../images/mobile/images/main3.jpg); } .main-4 { background-image: url(../images/mobile/images/main4.jpg); } .main-5 { background-image: url(../images/mobile/images/main5.jpg); } .main-6 { background-image: url(../images/mobile/images/main6.jpg); } .main-7 { background-image: url(../images/mobile/images/main7.jpg); } .main-8 { background-image: url(../images/mobile/images/main8.jpg); } .main-9 { background-image: url(../images/mobile/images/footer_27.jpg); height: 1.2rem; } .swiper2 .swiper-pagination { display: block; bottom: 0.12rem; font-size: 0; } .main .links { margin-top: 0.18rem; } .main .links a { margin-top: 0; } .main-4 .txt { top: 0.36rem; left: 0; width: 100%; } .main-5 .txt { padding: 0 0.25rem; top: 0.32rem; width: 100%; height: auto; right: 0; } .main-6 .txt { padding: 0 0.25rem; top: 0.34rem; width: 100%; height: auto; left: 0; } .main-7 .txt { padding: 0 0.24rem; top: 0.34rem; width: 100%; height: auto; right: 0; text-align: left; } .main-7 .main-info1 { font-size: 0.08rem; line-height: 0.18rem; margin-top: 0.1rem; } .main-7 .main-info2 { font-size: 0.1rem; margin-top: 0.1rem; } .main-7 .links a { margin: 0; width: 1.3rem; height: 0.3rem; padding-left: 0.37rem; line-height: 0.3rem; } .main-7 .links a:after { line-height: 0.3rem; height: 0.3rem; width: 0.15rem; font-size: 0.12rem; left: 0.13rem; } .main-8 .txt { padding: 0 0.35rem; top: 0.34rem; width: 100%; left: 0; } .stock-info { width: 100%; margin-top: 0.12rem; padding-right: 0.1rem; } .stock-info .left { font-size: 0.12rem; line-height: 1.5; margin-top: 0.02rem; } .stock-info .right { font-size: 0.3rem; } .stock-info1 { margin-top: 0.08rem; line-height: 2; font-size: 0.1rem; } .main-11 { background-image: url(../images/mobile/images/11.jpg); } .main-12 { background-image: url(../images/mobile/images/12.jpg); } .main-13 { background-image: url(../images/mobile/images/13.jpg); } .main-15 { background-image: url(../images/mobile/images/15.jpg); } .main-14 { background-image: url(../images/mobile/images/main6.jpg); } .main-11 .links a { min-width: 0; } .main-12 .txt, .main-13 .txt, .main-14 .txt { float: none; margin: 0; } .main-11, .main-12, .main-13, .main-14, .main-15 { padding-top: 35px; } .main-11 .main-info, .main-3 .main-info, .main-13 .main-info, .main-15 .main-info, .main-14 .main-info { padding: 0 0.25rem; } .main-info br { display: none; } }