.aling-center1 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .aling-center2 { position: absolute; top: 0; bottom: 0; margin: auto 0; } .aling-center3 { position: absolute; left: 0; right: 0; margin: 0 auto; } .text-hidden1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cover-style { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999; } .cover-style .mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.8; filter: alpha(opacity=80); } body { padding-top: 130px; } header.common-header { position: fixed; top: 0; left: 0; } .banner { overflow: hidden; position: relative; } .banner img { width: 100%; } .banner .banner-pagination { position: absolute; left: 9%; bottom: 10%; padding: 10px 15px; } .banner .banner-pagination span { background-color: #fff; display: inline-block; margin-left: 24px; opacity: 1; height: 15px; width: 15px; border-radius: 50%; cursor: pointer; } .banner .banner-pagination span:first-child { margin-left: 0; } .banner .banner-pagination .swiper-active-switch { background-color: #cd0111; } .content1 { background-color: #fbfbfb; padding: 100px 0 100px; text-align: center; } .content1 .title1 { font-size: 18px; margin-bottom: 14px; font-weight: bold; color: #bdbdbd; } .content1 .title2 { font-size: 42px; margin-bottom: 20px; color: #cd0111; } .content1 .yybm { width: 130px; height: 2px; margin: 0 auto 110px; background-color: #efe4e4; text-align: center; line-height: 0; } .content1 .yybm span { display: inline-block; height: 2px; width: 30px; background-color: #cd0111; vertical-align: top; } .content1 .item { background: no-repeat center center; background-size: 100% auto; width: 230px; height: 230px; float: left; margin-left: 93.333px; position: relative; transition: all 0.3s 0s ease; -o-transition: all 0.3s 0s ease; -ms-transition: all 0.3s 0s ease; -moz-transition: all 0.3s 0s ease; -webkit-transition: all 0.3s 0s ease; } .content1 .item a { display: block; height: 100%; overflow: hidden; } .content1 .item:first-child { margin-left: 0; } .content1 .item .icon { position: absolute; top: 45px; width: 80px; left: 0; right: 0; margin: 0 auto; } .content1 .item strong { font-size: 20px; display: block; line-height: 42px; margin-top: 120px; transition: all 0.3s 0s ease; -o-transition: all 0.3s 0s ease; -ms-transition: all 0.3s 0s ease; -moz-transition: all 0.3s 0s ease; -webkit-transition: all 0.3s 0s ease; } .content1 .item span { display: block; font-size: 16px; color: #e2e2e2; transition: all 0.3s 0s ease; -o-transition: all 0.3s 0s ease; -ms-transition: all 0.3s 0s ease; -moz-transition: all 0.3s 0s ease; -webkit-transition: all 0.3s 0s ease; } .content1 .item:hover { background-image: ; } .content1 .item:hover strong { color: #fff; font-size: 24px; } .content1 .item:hover span { color: #cd0111; } .content2 { padding: 80px 0 100px; } .content2 .img { float: left; width: 480px; } .content2 .img img { width: 100%; } .content2 .text { float: right; width: 630px; padding-top: 45px; } .content2 .text h3 { font-size: 36px; margin-bottom: 18px; } .content2 .text p { font-size: 16px; color: #666; text-align: justify; line-height: 28px; } .content3 { position: relative; overflow: hidden; cursor: pointer; } .content3 .bg { width: 100%; } .content3 > div { text-align: center; position: absolute; left: 0; right: 0; top: -10px; bottom: 0; margin: auto; height: 170px; width: 500px; } .content3 .icon { width: 90px; margin: 0 auto; } .content3 .icon img { width: 100%; } .content3 p { font-size: 32px; color: #fff; margin-bottom: 36px; } .content3:hover .icon img { -webkit-animation: pulsate-fwd 0.8s ease-in-out infinite both; animation: pulsate-fwd 0.8s ease-in-out infinite both; } .video-cover { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999; } .video-cover .mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.8; filter: alpha(opacity=80); } .video-cover video { width: 980px; position: absolute; left: 0; right: 0; top: -2000px; bottom: 0; margin: auto; } @-webkit-keyframes pulsate-fwd { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulsate-fwd { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes tracking-in-expand { 0% { letter-spacing: -0.5em; opacity: 0; } 40% { opacity: 0.6; } 100% { opacity: 1; } } @keyframes tracking-in-expand { 0% { letter-spacing: -0.5em; opacity: 0; } 40% { opacity: 0.6; } 100% { opacity: 1; } } @-webkit-keyframes tracking-out-contract { 0% { opacity: 1; } 50% { opacity: 1; } 100% { letter-spacing: -0.5em; opacity: 0; } } @keyframes tracking-out-contract { 0% { opacity: 1; } 50% { opacity: 1; } 100% { letter-spacing: -0.5em; opacity: 0; } } @-webkit-keyframes heartbeat { from { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 10% { -webkit-transform: scale(0.91); transform: scale(0.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 17% { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 33% { -webkit-transform: scale(0.87); transform: scale(0.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes heartbeat { from { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 10% { -webkit-transform: scale(0.91); transform: scale(0.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 17% { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 33% { -webkit-transform: scale(0.87); transform: scale(0.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .content4 { text-align: center; padding: 80px 0 120px; } .content4 h3 { font-size: 36px; margin-bottom: 12px; } .content4 .layout > span { display: block; margin: 0 auto; height: 2px; width: 62px; background-color: #cd0111; } .content4 p { font-size: 16px; color: #666; line-height: 28px; margin: 14px auto 50px; width: 880px; } .content4 .item { float: left; width: 358px; position: relative; overflow: hidden; text-align: center; margin-left: 63px; box-shadow: 0 0 0 #000; } .content4 .item:first-child { margin-left: 0; } .content4 .item a { display: block; height: 100%; position: absolute; width: 100%; top: 0; left: 0; } .content4 .item img { width: 100%; } .content4 .item .bottom-cover { background-color: #cd0111; position: absolute; width: 100%; left: 0; right: 0; bottom: 0; margin: 0 auto; font-size: 18px; font-weight: bold; height: 56px; color: #fff; text-align: center; transition: height 0.3s 0s ease; -o-transition: height 0.3s 0s ease; -ms-transition: height 0.3s 0s ease; -moz-transition: height 0.3s 0s ease; -webkit-transition: height 0.3s 0s ease; } .content4 .item .bottom-cover div { height: 56px; line-height: 56px; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; transition: bottom 0.6s 0s ease; -o-transition: bottom 0.6s 0s ease; -ms-transition: bottom 0.6s 0s ease; -moz-transition: bottom 0.6s 0s ease; -webkit-transition: bottom 0.6s 0s ease; } .content4 .item:hover .bottom-cover { height: 100%; } .content4 .item:hover .bottom-cover div { bottom: 50%; } .content5 { height: 730px; background-color: #f8f8f8; } .content5 .map-container { width: 60%; height: 100%; background-color: #bbb; float: left; position: relative; } .content5 .map-container .more { width: 70px; height: 70px; border-radius: 50%; background: #e60012 no-repeat center center; position: absolute; top: 0; bottom: 0; margin: auto 0; right: -35px; transition: all 1s 0s ease; -o-transition: all 1s 0s ease; -ms-transition: all 1s 0s ease; -moz-transition: all 1s 0s ease; -webkit-transition: all 1s 0s ease; } .content5 .map-container .more a { display: block; height: 100%; } .content5 .map-container .more:hover { transform: rotate(360deg); } .content5 #map { width: 100%; height: 100%; } .content5 #map .base { padding: 5px 8px; } .content5 #map .base p { font-size: 16px; } .content5 #map .base .address { font-size: 14px; padding-top: 10px; } .content5 #map .base .tel { padding-top: 4px; font-size: 14px; color: #cd0111; } .content5 .bmap_cpyctrl, .content5 .anchorbl { display: none; } .content5 .btn-group { position: absolute; bottom: 10%; left: 26%; width: 700px; } .content5 .btn-group:after { content: ''; display: block; width: 0; height: 0; float: none; clear: both; } .content5 .btn-group div { cursor: pointer; float: left; font-size: 24px; margin-left: 42px; margin-bottom: 20px; width: 128px; height: 56px; line-height: 56px; border: 2px solid #fff; color: #cd0111; background-color: #fff; border-radius: 30px; transition: all 0.3s 0s ease; -o-transition: all 0.3s 0s ease; -ms-transition: all 0.3s 0s ease; -moz-transition: all 0.3s 0s ease; -webkit-transition: all 0.3s 0s ease; } .content5 .btn-group div:before { content: ''; display: inline-block; width: 9px; height: 9px; vertical-align: middle; margin: 0 20px; border-radius: 50%; background-color: #cd0111; transition: background-color 0.3s 0s ease; -o-transition: background-color 0.3s 0s ease; -ms-transition: background-color 0.3s 0s ease; -moz-transition: background-color 0.3s 0s ease; -webkit-transition: background-color 0.3s 0s ease; } .content5 .btn-group div.on { border-color: #cd0111; } .content5 .btn-group div:not(.on):hover { transform: translatey(-10px); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); background-color: #cd0111; color: #fff; border-color: #cd0111; } .content5 .btn-group div:not(.on):hover:before { background-color: #fff; } .content5 .right { float: left; width: 35%; margin-left: 5%; height: 100%; } .content5 .right h3 { color: #cd0111; width: 300px; font-size: 42px; line-height: 62px; margin: 66px 0 20px; } .content5 .right .sub-title { font-size: 22px; color: #c6c6c6; } .content5 .right .count { margin: 60px 0 30px; font-size: 24px; color: #cd0111; } .content5 .right .count span { color: #333; vertical-align: bottom; } .content5 .right .count span:first-child { letter-spacing: -6px; font-size: 98px; color: #cd0111; line-height: 88px; } .content5 .right p { font-size: 18px; line-height: 36px; width: 425px; text-align: justify; } .content5 .right .more { margin-top: 46px; width: 300px; line-height: 64px; font-size: 16px; border: 1px solid #e5e1e1; border-radius: 33px; font-weight: bold; overflow: hidden; } .content5 .right .more a { display: block; color: #cd0111; padding-left: 34px; } .content5 .right .more i { background: no-repeat 50% 46%; display: inline-block; width: 64px; height: 64px; vertical-align: middle; margin-left: 80px; } .content5 .right .more:hover i { animation: more 1.4s; } @-webkit-keyframes more { 0% { background-position-x: 50%; } 50% { background-position-x: 240%; } 50.1% { background-position-x: -160%; } 100% { background-position-x: 50%; } } @keyframes more { 0% { background-position-x: 50%; } 50% { background-position-x: 240%; } 50.1% { background-position-x: -160%; } 100% { background-position-x: 50%; } } @media screen and (max-width: 1600px) { .content1 { padding: 50px 0 50px; } .content1 .title1 { font-size: 16px; margin-bottom: 6px; } .content1 .title2 { font-size: 36px; margin-bottom: 12px; } .content1 .yybm { margin-bottom: 60px; } .content2 { padding: 54px 0 70px; } .content4 { padding: 48px 0 90px; } .content5 { height: 650px; } .content5 .btn-group { width: 570px; } .content5 .btn-group div { font-size: 22px; width: 110px; height: 48px; line-height: 48px; margin-left: 28px; } .content5 .btn-group div:before { margin: 0 15px; } .content5 .right h3 { width: 276px; font-size: 38px; line-height: 56px; margin: 48px 0 16px; } .content5 .right .sub-title { font-size: 20px; } .content5 .right .count { margin: 52px 0 26px; font-size: 22px; } .content5 .right .count span:first-child { font-size: 86px; line-height: 76px; } .content5 .right p { font-size: 16px; line-height: 32px; } .content5 .right .more { margin-top: 58px; width: 270px; line-height: 56px; } .content5 .right .more i { margin-left: 46px; height: 56px; } } @media screen and (max-width: 1440px) { body { padding-top: 90px; } .content1 { padding: 32px 0 32px; } .content1 .title1 { margin-bottom: 3px; } .content1 .title2 { font-size: 32px; margin-bottom: 10px; } .content1 .yybm { margin-bottom: 40px; } .more1 { width: 64px; height: 40px; } .content3 p { font-size: 24px; } .content3 .icon { width: 72px; } .content3 div { height: 140px; } .content4 { padding: 48px 0 90px; } .content5 { height: 560px; left: 38%; } .content5 .btn-group { width: 570px; } .content5 .btn-group div { font-size: 18px; width: 90px; height: 38px; line-height: 38px; margin-left: 22px; } .content5 .btn-group div:before { margin: 0 13px; } .content5 .right h3 { width: 228px; font-size: 32px; line-height: 44px; margin: 36px 0 14px; } .content5 .right .sub-title { font-size: 18px; } .content5 .right .count { margin: 36px 0 20px; font-size: 20px; } .content5 .right .count span:first-child { font-size: 68px; line-height: 60px; } .content5 .right p { width: 284px; line-height: 28px; } .content5 .right .more { margin-top: 48px; } } @media screen and (max-width: 1365px) { .content1 .item { width: 200px; height: 200px; margin-left: 66.666px; } .content1 .item .icon { top: 40px; width: 62px; } .content1 .item strong { font-size: 18px; line-height: 32px; } .content1 .item span { font-size: 14px; } .content1 .item:hover strong { font-size: 20px; } .content2 .img { width: 430px; } .content2 .text { padding-top: 20px; width: 530px; } .content2 .text h3 { font-size: 32px; } .content4 h3 { font-size: 32px; } .content4 p { width: 800px; } .content4 .item { width: 300px; margin-left: 50px; } } @media screen and (max-width: 1024px) { body { padding-top: 3rem; } .banner .banner-pagination { padding-top: 0; bottom: 5%; width: 60%; text-align: center; left: 20%; line-height: 0; } .banner .banner-pagination span { width: 0.4rem; height: 0.4rem; margin: 0 0.3rem; } .content1 { padding: 1.6rem 0 1.8rem; } .content1 .title { margin-bottom: 3px; font-size: 0.8rem; } .content1 .title2 { font-size: 1.6rem; margin-bottom: 0.5rem; } .content1 .content1 .yybm { margin-bottom: 2rem; width: 6.5rem; height: 0.1rem; } .content1 .content1 .yybm span { width: 1.5rem; } .content1 .item-wrap { display: flex; flex-wrap: wrap; justify-content: space-around; } .content1 .item { float: none; margin-left: 0; width: 7.5rem; height: 7.5rem; margin-bottom: 1rem; } .content1 .item .icon { top: 1.2rem; width: 2.7rem; } .content1 .item strong { font-size: 0.8rem; margin-top: 3.9rem; } .content1 .item span { font-size: 0.7rem; } .content1 .item:active { background-image: ; } .content1 .item:active .icon2 { opacity: 0; } .content1 .item:active strong { color: #fff; font-size: 0.9rem; } .content1 .item:active span { color: #cd0111; } .content2 .img { width: 100%; float: none; } .content2 .text { float: none; width: 100%; text-align: center; } .content2 .text h3 { font-size: 1.3rem; margin-bottom: 0.7rem; } .content2 .text p { font-size: 0.7rem; line-height: 1.2rem; } .content3 { position: relative; height: 9rem; } .content3 .bg { height: 100%; width: auto; position: absolute; top: 0; left: -10rem; right: -10rem; margin: 0 auto; } .content3 div { width: 100%; height: 4.8rem; } .content3 .icon { width: 2.8rem; } .content3 p { opacity: 1; font-size: 1rem; margin-bottom: 0.7rem; } .content3 p.in, .content3 p.out { animation: none; } .video-cover video { width: 86%; } .content4 { padding: 2rem 0 2.5rem; } .content4 h3 { font-size: 1.5rem; } .content4 .layout > span { width: 3.1rem; height: 0.1rem; } .content4 p { width: 100%; font-size: 0.6rem; line-height: 0.9rem; margin: 0.7rem auto 2.5rem; } .content5 { background-color: #fff; height: auto; } .content5 .map-container { height: 12rem; float: none; width: 100%; } .content5 .map-container .more { display: none; } .content5 #map { width: 100%; height: 100%; } .content5 #map .base { padding: 0; } .content5 #map .base p { font-size: 0.7rem; } .content5 #map .base .address { font-size: 0.6rem; padding-top: 0.4rem; } .content5 #map .base .tel { padding-top: 0.15rem; font-size: 0.6rem; } .content5 .btn-group { position: static; width: 92%; padding: 0 4%; margin: 1rem auto 0.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; } .content5 .btn-group div { border-color: #fff; border-radius: 1rem; margin-left: 0; text-align: center; height: 2rem; width: 20%; font-size: 0.8rem; box-shadow: 0 0 8px 0 #ccc; } .content5 .btn-group div:before { content: none; } .content5 .btn-group:after { content: none; } .content5 .right { padding: 1.2rem 0 1.5rem; text-align: center; margin: 8rem auto 0; height: auto; float: none; width: 92%; background-color: #f8f8f8; } .content5 .right h3 { width: 11rem; font-size: 1.5rem; line-height: 2rem; margin: 0 auto 0.7rem; } .content5 .right .count { display: none; } .content5 .right p { width: 89%; margin: 1rem auto; } .content5 .right .more { margin: 0 auto; } .content4 .item { width: 100%; height: auto; box-shadow: 0 0 #000; margin-bottom: 1.5rem; margin-left:0; } .content4 .item img { width: 80%; } .content4 .item .content { height: 7.2rem; } .content4 .item .title { font-size: 0.9rem; width: 5.5rem; height: 5.5rem; line-height: 5.5rem; margin-bottom: 0.8rem; } .content4 .item .text { font-size: 0.7rem; } .content4 .item a { width: 80%; right: 0; margin: 0 auto; } .content4 .item .bottom-cover { width: 80%; height: 2.2rem; font-size: 0.9rem; } .content4 .item .bottom-cover div { height: 2.2rem; line-height: 2.2rem; } .content4 .item:hover .bottom-cover { height: 2.2rem; } .content4 .item:hover .bottom-cover div { bottom: 0; } }