.banner { width: 100%; height: calc(100vh - 94px); margin-top: 94px; display: block; } .banner .swiper1 { width: 100%; height: 100%; } .banner .swiper1 .swiper-slide { width: 100%; height: 100%; } .banner .swiper1 .swiper-slide .slide-box { width: 100%; height: 100%; position: relative; } .banner .swiper1 .swiper-slide .slide-box .img { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: -1000px; right: -1000px; margin: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } .banner .swiper1 .swiper-slide .slide-box .img video { position: relative; height: calc(100vh - var(--browser-address-bar, 0px)); object-fit: cover; object-position: 50% 50%; width: 100%; z-index: -1; } .banner .swiper1 .swiper-slide .slide-box .text { position: absolute; left: 5.78125%; top: 30vh; } .banner .swiper1 .swiper-slide .slide-box .text .h4 { overflow: hidden; } .banner .swiper1 .swiper-slide .slide-box .text .h4 span { display: block; font-size: 32px; line-height: 53px; color: #ffffff; text-shadow: 0px 2px 9px rgba(0, 0, 0, 0.5); padding-left: 5px; } .banner .swiper1 .swiper-slide .slide-box .text .h2 { margin-top: 20px; overflow: hidden; } .banner .swiper1 .swiper-slide .slide-box .text .h2 span { display: block; font-size: 76px; line-height: 98px; font-weight: bold; color: #ffffff; text-shadow: 0px 2px 9px rgba(0, 0, 0, 0.5); padding-left: 5px; } .banner .swiper-container-horizontal > .swiper-pagination-bullets, .banner .swiper-pagination-custom, .banner .swiper-pagination-fraction { bottom: 7.4479vw; left: 6.25%; width: auto; } .banner .swiper-pagination-bullet { width: 8px; height: 21px; display: inline-block; border-radius: 0; background: #fff; opacity: 0.3; transform: skewx(20deg); margin: 0 10px; } .banner .swiper-pagination-bullet-active { opacity: 1; background: #fff; } .banner .swiper-button-next, .banner .swiper-button-prev { position: absolute; top: auto; bottom: 4.5833vw; width: 70px; height: 70px; margin-top: 0; z-index: 10; border-radius: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; border: solid 1px #fff; transition: 0.5s; } .banner .swiper-button-next::after, .banner .swiper-button-prev::after { font-size: 24px; font-weight: bold; } .banner .swiper-button-next:hover, .banner .swiper-button-prev:hover { background-color: rgba(4, 27, 89, 0.5); border: solid 1px rgba(4, 27, 89, 0.5); } .banner .swiper-button-prev { left: auto; right: calc(5.729% 87px); } .banner .swiper-button-next { right: 5.729%; left: auto; } .banner2 { display: none; } .news { width: 100%; height: 955px; position: relative; } .news .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } .news .bg img { height: 100%; position: absolute; top: 0; left: -500px; right: -500px; margin: auto; } .news .news-box { width: 88.541%; margin: 0 auto; position: relative; padding-top: 116px; } .news .news-box .title-box .h1 { font-size: 56px; font-weight: bold; line-height: 56px; letter-spacing: -1px; color: #333333; } .news .news-box .title-box .en { font-family: "arial"; font-size: 24px; font-weight: bold; line-height: 24px; letter-spacing: -1px; color: #dadada; margin-top: 18px; } .news .news-box .button { position: absolute; right: 0; top: 143px; width: 65px; height: 65px; background-color: #294dc9; border-radius: 100%; transition: 0.5s; } .news .news-box .button a { width: 100%; height: 100%; display: block; font-size: 50px; color: white; text-align: center; line-height: 55px; font-weight: lighter; } .news .news-box .button:hover { background-color: #c0a56e; } .news .news-box .tabs { width: 100%; margin-top: 80px; position: relative; } .news .news-box .tabs .horizontal { position: absolute; top: -117px; right: 155px; } .news .news-box .tabs .horizontal li { font-size: 20px; font-weight: bold; line-height: 20px; color: #333333; float: left; margin-left: 40px; position: relative; transition: 0.5s; } .news .news-box .tabs .horizontal li::after { content: ""; width: 0; height: 2px; background-color: #1e3b9f; position: absolute; left: 0; bottom: -8px; transition: 0.5s; } .news .news-box .tabs .horizontal li:hover { color: #1e3b9f; } .news .news-box .tabs .horizontal li:hover::after { width: 100%; } .news .news-box .tabs .horizontal li.selectactive { color: #1e3b9f; } .news .news-box .tabs .horizontal li.selectactive::after { width: 100%; } .news .news-box .tabs .tab { width: 100%; } .news .news-box .tabs .tab .left { width: 61.176%; height: 585px; float: left; } .news .news-box .tabs .tab .left .swiper-container { width: 100%; height: 100%; } .news .news-box .tabs .tab .left .swiper-container .swiper-slide { width: 100%; height: 100%; } .news .news-box .tabs .tab .left .swiper-container .swiper-slide .slide-box { width: 100%; height: 100%; } .news .news-box .tabs .tab .left .swiper-container .swiper-slide .slide-box a { width: 100%; height: 100%; display: block; position: relative; } .news .news-box .tabs .tab .left .swiper-container .swiper-slide .slide-box a .img { width: 100%; height: 100%; position: relative; overflow: hidden; display: block; } .news .news-box .tabs .tab .left .swiper-container .swiper-slide .slide-box a .img img { height: 100%; position: absolute; top: 0; left: -200px; right: -200px; margin: auto; transition: 0.5s; } .news .news-box .tabs .tab .left .swiper-container .swiper-slide .slide-box a .title { position: absolute; left: 0; bottom: 0; width: calc(100% - 244px); height: 111px; background-color: rgba(41, 77, 201, 0.9); font-size: 32px; font-weight: bold; line-height: 111px; color: #ffffff; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding-left: 122px; padding-right: 122px; } .news .news-box .tabs .tab .left .swiper-container .swiper-slide .slide-box a .title::after { content: ""; width: 8px; height: 28px; display: block; background: #fff; transform: skewx(20deg); position: absolute; left: 86px; top: 41px; } .news .news-box .tabs .tab .left .swiper-container .swiper-slide .slide-box:hover a .img img { transform: scale(1.1); } .news .news-box .tabs .tab .left .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 45px; left: auto; right: 74px; width: auto; } .news .news-box .tabs .tab .left .swiper-pagination-bullet { width: 14px; height: 14px; display: inline-block; border-radius: 100%; background: #fff; opacity: 0.6; margin: 0 8px; } .news .news-box .tabs .tab .left .swiper-pagination-bullet-active { opacity: 1; background: #fff; } .news .news-box .tabs .tab .right { width: 37.3529%; float: right; } .news .news-box .tabs .tab .right .list { width: 100%; } .news .news-box .tabs .tab .right .list .item { width: 100%; height: 184px; margin-bottom: 16.5px; background-color: white; } .news .news-box .tabs .tab .right .list .item a { width: 100%; height: 100%; display: block; } .news .news-box .tabs .tab .right .list .item a .time { float: left; display: block; margin-left: 63px; margin-top: 48px; } .news .news-box .tabs .tab .right .list .item a .time .data { font-family: "din-bold"; font-size: 67px; line-height: 67px; color: #333333; transition: 0.5s; } .news .news-box .tabs .tab .right .list .item a .time .year { font-family: "din-regular"; font-size: 19px; line-height: 19px; color: #666666; text-align: center; } .news .news-box .tabs .tab .right .list .item a .title { float: left; width: calc(100% - 265px); font-size: 18px; font-weight: bold; line-height: 29px; height: 58px; color: #333333; margin-top: 69px; margin-left: 34px; padding-left: 26px; position: relative; align-items: center; transition: 0.5s; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .news .news-box .tabs .tab .right .list .item a .title::after { content: ""; width: 2px; height: 47px; background-color: #d7d7d7; position: absolute; top: 5px; left: 0; } .news .news-box .tabs .tab .right .list .item:hover a .time .data { color: #294dc9; } .news .news-box .tabs .tab .right .list .item:hover a .title { color: #294dc9; } .business { width: 100%; height: 937px; position: relative; overflow: hidden; } .business .left { width: 33%; height: 100%; position: relative; } .business .left .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } .business .left .bg img { height: 100%; position: absolute; top: 0; left: -100px; right: -100px; margin: auto; } .business .left .text { position: relative; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } .business .left .text .h1 { font-size: 56px; font-weight: bold; line-height: 56px; letter-spacing: -1px; color: #ffffff; padding-top: 151px; margin-left: 18%; } .business .left .text .en { font-family: 'arial'; font-size: 24px; font-weight: bold; line-height: 24px; letter-spacing: -1px; color: #ffffff; opacity: 0.5; padding-top: 17px; margin-left: 18%; margin-bottom: 127px; } .business .left .text .h3 { font-size: 20px; font-weight: bold; line-height: 20px; color: #ffffff; margin-bottom: 49px; margin-left: 18%; position: relative; } .business .left .text .h3::after { content: ""; width: 0; height: 2px; background-color: #c0a56e; position: absolute; left: 0; bottom: -12px; transition: 0.5s; } .business .left .text .h3.active { color: #c0a56e; } .business .left .text .h3.active::after { width: 120px; } .business .left .text .h4 { font-size: 20px; font-weight: bold; line-height: 20px; color: #ffffff; margin-left: 18%; position: relative; } .business .left .text .h4::after { content: ""; width: 0; height: 2px; background-color: #c0a56e; position: absolute; left: 0; bottom: -12px; transition: 0.5s; } .business .left .text .h4.active { color: #c0a56e; } .business .left .text .h4.active::after { width: 220px; } .business .right { width: 68%; height: 100%; position: absolute; top: 0; left: 32%; } .business .right .box { transition: 0.5s; transition-timing-function: ease; -webkit-transition-timing-function: ease; /* safari and chrome */ overflow: hidden; } .business .right .box a { width: 100%; height: 100%; display: block; } .business .right .box a .img { width: 100%; height: 100%; position: relative; overflow: hidden; display: block; } .business .right .box a .img img { height: 100%; position: absolute; top: 0; left: -200px; right: -200px; margin: auto; } .business .right .box a .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } .business .right .box a .icon { width: 111px; height: 107px; position: absolute; top: 159px; left: calc(50% - 55px); } .business .right .box a .icon img { width: 100%; position: absolute; top: 0; left: 0; transition: 0.5s; transition-timing-function: ease; -webkit-transition-timing-function: ease; /* safari and chrome */ } .business .right .box a .icon img.gray { opacity: 1; } .business .right .box a .icon img.yellow { opacity: 0; } .business .right .box a .line { width: 1px; height: 0; background-color: #fff; position: absolute; top: 284px; left: 50%; transition: 0.5s; transition-timing-function: ease; -webkit-transition-timing-function: ease; /* safari and chrome */ } .business .right .box a .title { width: 261px; font-size: 38px; font-weight: bold; line-height: 46px; letter-spacing: -1px; color: #ffffff; position: absolute; top: 400px; left: calc(50% - 130px); text-align: center; transition: 0.5s; transition-timing-function: ease; -webkit-transition-timing-function: ease; /* safari and chrome */ } .business .right .box a .p { width: 547px; font-size: 14px; line-height: 26px; color: #ffffff; position: absolute; top: 500px; left: calc(50% - 273px); opacity: 0; transition: 0.5s; transition-timing-function: ease; -webkit-transition-timing-function: ease; /* safari and chrome */ } .business .right .box a .button { width: 65px; height: 65px; background-color: #ffffff; border-radius: 100%; position: absolute; top: 750px; left: calc(50% - 32.5px); font-size: 50px; color: #c0a56e; text-align: center; line-height: 55px; font-weight: lighter; opacity: 0; transition: 0.5s; transition-timing-function: ease; -webkit-transition-timing-function: ease; /* safari and chrome */ } .business .right .box a .button:hover { background-color: #c0a56e; color: white; transform: rotate(360deg); } .business .right .box a .bus-page { position: absolute; top: 790px; left: 200px; font-family: "din-bold"; font-size: 36px; line-height: 36px; color: #ffffff; opacity: 0; transition: 0.5s; transition-timing-function: ease; -webkit-transition-timing-function: ease; /* safari and chrome */ } .business .right .box a .bus-page b { display: inline-block; font-size: 12px; line-height: 12px; color: #dddddd; } .business .right .box a .bus-page::after { content: ""; width: 47px; height: 2px; background-color: #c0a56e; position: absolute; left: 0; bottom: -15px; } .business .right .box a .bus-page::before { content: ""; width: 128px; height: 1px; background-color: #e6e6e6; position: absolute; left: 0; bottom: -15px; } .business .right .one { width: 33%; height: 100%; position: absolute; top: 0; left: 0; } .business .right .one.active { width: 67%; height: 100%; position: absolute; top: 0; left: 0; } .business .right .one.active a .icon img.gray { opacity: 0; } .business .right .one.active a .icon img.yellow { opacity: 1; } .business .right .one.active a .line { height: 97px; } .business .right .one.active a .title { color: #c0a56e; } .business .right .one.active a .p { opacity: 1; } .business .right .one.active a .button { top: 639px; opacity: 1; } .business .right .one.active a .bus-page { opacity: 1; left: 18.45%; } .business .right .two { width: 33%; height: 100%; position: absolute; top: 0; left: 67%; } .business .right .two.active { width: 67%; height: 100%; position: absolute; top: 0; left: 33%; } .business .right .two.active a .icon img.gray { opacity: 0; } .business .right .two.active a .icon img.yellow { opacity: 1; } .business .right .two.active a .line { height: 97px; } .business .right .two.active a .title { color: #c0a56e; } .business .right .two.active a .p { opacity: 1; } .business .right .two.active a .button { top: 639px; opacity: 1; } .business .right .two.active a .bus-page { opacity: 1; left: 18.45%; } .case { width: 100%; height: 938px; background-color: #fafafa; } .case .box { width: 88.541%; margin: 0 auto; position: relative; } .case .box .title-box { padding-top: 135px; } .case .box .title-box .h1 { font-size: 56px; font-weight: bold; line-height: 56px; letter-spacing: -1px; color: #333333; } .case .box .title-box .en { font-family: 'arial'; font-size: 24px; font-weight: bold; line-height: 24px; letter-spacing: -1px; color: #dadada; margin-top: 18px; } .case .box .swiper5 { width: 100%; margin-top: 33px; padding: 30px 0; } .case .box .swiper5 .swiper-slide { width: 23.76%; } .case .box .swiper5 .swiper-slide .slide-box { width: 100%; box-shadow: 0px 0px 30px 0px rgba(204, 204, 204, 0.25); } .case .box .swiper5 .swiper-slide .slide-box a { width: 100%; height: 100%; display: block; } .case .box .swiper5 .swiper-slide .slide-box a .img { display: block; width: 100%; height: 228px; position: relative; overflow: hidden; } .case .box .swiper5 .swiper-slide .slide-box a .img img { height: 100%; position: absolute; top: 0; left: -100px; right: -100px; margin: auto; transition: 0.5s; } .case .box .swiper5 .swiper-slide .slide-box a .text { display: block; width: 100%; height: 273px; position: relative; overflow: hidden; background-color: white; } .case .box .swiper5 .swiper-slide .slide-box a .text .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(41, 76, 201, 0); transition: 0.1s; } .case .box .swiper5 .swiper-slide .slide-box a .text .bg img { height: 100%; position: absolute; top: 0; left: -100px; right: -100px; margin: auto; opacity: 0; transition: 0.5s; } .case .box .swiper5 .swiper-slide .slide-box a .text .title { position: relative; font-size: 26px; font-weight: bold; line-height: 32px; height: 62px; color: #333333; margin-top: 62px; margin-left: 34px; margin-right: 34px; transition: 0.5s; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .case .box .swiper5 .swiper-slide .slide-box a .text .button { position: relative; font-family: 'arial'; font-size: 14px; line-height: 14px; color: #242424; margin-top: 73px; margin-left: 34px; transition: 0.5s; } .case .box .swiper5 .swiper-slide .slide-box a .text .button i { font-size: 12px; margin-left: 14px; transition: 0.5s; color: #242424; } .case .box .swiper5 .swiper-slide .slide-box a .text .icon { width: 71px; height: 69px; position: absolute; bottom: 39px; right: 37px; } .case .box .swiper5 .swiper-slide .slide-box a .text .icon img { width: 100%; position: absolute; top: 0; left: 0; transition: 0.5s; } .case .box .swiper5 .swiper-slide .slide-box a .text .icon img.white { opacity: 0; } .case .box .swiper5 .swiper-slide .slide-box a .text .icon img.gray { opacity: 1; } .case .box .swiper5 .swiper-slide .slide-box:hover a .img img { transform: scale(1.1); } .case .box .swiper5 .swiper-slide .slide-box:hover a .text .bg { background-color: #294dc9; } .case .box .swiper5 .swiper-slide .slide-box:hover a .text .bg img { opacity: 1; } .case .box .swiper5 .swiper-slide .slide-box:hover a .text .title { color: white; } .case .box .swiper5 .swiper-slide .slide-box:hover a .text .button { color: white; } .case .box .swiper5 .swiper-slide .slide-box:hover a .text .button i { color: white; margin-left: 20px; } .case .box .swiper5 .swiper-slide .slide-box:hover a .text .icon img.white { opacity: 1; } .case .box .swiper5 .swiper-slide .slide-box:hover a .text .icon img.gray { opacity: 0; } .case .box .swiper-button-next, .case .box .swiper-button-prev { position: absolute; top: 155px; width: 71px; height: 70px; border: solid 1px #7b7b7b; border-radius: 100%; margin-top: 0; z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #7f7f7f; transition: 0.5s; } .case .box .swiper-button-next::after, .case .box .swiper-button-prev::after { font-size: 16px; font-weight: bold; } .case .box .swiper-button-next:hover, .case .box .swiper-button-prev:hover { border: solid 1px #294dc9; background-color: #294dc9; color: white; } .case .box .swiper-button-next, .case .box .swiper-container-rtl .swiper-button-prev { right: 0; left: auto; } .case .box .swiper-button-prev, .case .box .swiper-container-rtl .swiper-button-next { right: 87px; left: auto; } .map { width: 100%; height: 940px; position: relative; } .map .bg { width: 100%; height: 100%; position: relative; overflow: hidden; } .map .bg img { position: absolute; top: 0; left: -500px; right: -500px; margin: auto; height: 100%; } .map .title-box { position: absolute; top: 94px; left: 109px; z-index: 3; } .map .title-box .h1 { font-size: 56px; font-weight: bold; line-height: 56px; letter-spacing: -1px; color: #333333; } .map .title-box .en { font-family: 'arial'; font-size: 24px; font-weight: bold; line-height: 24px; letter-spacing: -1px; color: #dadada; margin-top: 18px; } .map .map-box { width: 901px; height: 745px; position: absolute; top: 98px; left: 9.6875%; } .map .map-box img { width: 100%; } .map .map-box .circle { width: 24px; height: 24px; border-radius: 100%; text-align: center; position: absolute; } .map .map-box .circle span { display: block; font-family: 'din-bold'; font-size: 15px; line-height: 24px; color: #ffffff; position: relative; z-index: 2; } .map .map-box .circle::after { content: ""; width: 44px; height: 44px; border-radius: 100%; opacity: 0.2; position: absolute; top: -10px; left: -10px; animation: r2 1.3s; animation-iteration-count: infinite; animation-timing-function: linear; } .map .map-box .circle1 { background-color: #294dc9; top: 41.073%; left: 66.0377%; } .map .map-box .circle1::after { background-color: #294dc9; } .map .map-box .circle1 .line { width: 0; height: 194px; overflow: hidden; position: absolute; left: 24px; bottom: 24px; } .map .map-box .circle1 .line .line-box { width: 452px; height: 194px; } .map .map-box .circle1 .line .line-box img { width: 100%; } .map .map-box .circle2 { background-color: #294dc9; top: 36.375%; left: 76.3596%; } .map .map-box .circle2::after { background-color: #294dc9; } .map .map-box .circle2 .line { width: 0; height: 94px; overflow: hidden; position: absolute; left: 24px; bottom: 24px; } .map .map-box .circle2 .line .line-box { width: 360px; height: 94px; } .map .map-box .circle2 .line .line-box img { width: 100%; } .map .map-box .circle3 { background-color: #c0a56e; top: 49.3959%; left: 70.588%; } .map .map-box .circle3::after { background-color: #c0a56e; } .map .map-box .circle3 .line { width: 0; height: 94px; overflow: hidden; position: absolute; left: 24px; bottom: 24px; } .map .map-box .circle3 .line .line-box { width: 410px; height: 94px; } .map .map-box .circle3 .line .line-box img { width: 100%; } .map .map-box .circle4 { background-color: #c0a56e; top: 52.214765%; left: 69.7%; } .map .map-box .circle4::after { background-color: #c0a56e; } .map .map-box .circle4 .line { width: 0; height: 61px; overflow: hidden; position: absolute; left: 34px; bottom: 6px; } .map .map-box .circle4 .line .line-box { width: 410px; height: 61px; } .map .map-box .circle4 .line .line-box img { width: 100%; } .map .map-box .circle5 { background-color: #c0a56e; top: 54.362%; left: 66.37%; } .map .map-box .circle5::after { background-color: #c0a56e; } .map .map-box .circle5 .line { width: 0; height: 2px; overflow: hidden; position: absolute; left: 34px; bottom: 6px; } .map .map-box .circle5 .line .line-box { width: 440px; height: 2px; } .map .map-box .circle5 .line .line-box img { width: 100%; } .map .map-box .circle6 { background-color: #c0a56e; top: 57.583%; left: 69.589%; } .map .map-box .circle6::after { background-color: #c0a56e; } .map .map-box .circle6 .line { width: 0; height: 28px; overflow: hidden; position: absolute; left: 34px; bottom: -28px; } .map .map-box .circle6 .line .line-box { width: 416px; height: 28px; } .map .map-box .circle6 .line .line-box img { width: 100%; } .map .map-box .circle7 { background-color: #d8261b; top: 68.59%; left: 76.0266%; } .map .map-box .circle7::after { background-color: #d8261b; } .map .map-box .circle7 .line { width: 0; height: 48px; overflow: hidden; position: absolute; left: 30px; bottom: -48px; } .map .map-box .circle7 .line .line-box { width: 360px; height: 48px; } .map .map-box .circle7 .line .line-box img { width: 100%; } .map .map-box .circle8 { background-color: #d8261b; top: 72.751%; left: 75.804%; } .map .map-box .circle8::after { background-color: #d8261b; } .map .map-box .circle8 .line { width: 0; height: 82px; overflow: hidden; position: absolute; left: 30px; bottom: -82px; } .map .map-box .circle8 .line .line-box { width: 363px; height: 82px; } .map .map-box .circle8 .line .line-box img { width: 100%; } .map .map-box .circle9 { background-color: #d8261b; top: 73.557%; left: 72.031%; } .map .map-box .circle9::after { background-color: #d8261b; } .map .map-box .circle9 .line { width: 0; height: 143px; overflow: hidden; position: absolute; left: 30px; bottom: -143px; } .map .map-box .circle9 .line .line-box { width: 400px; height: 143px; } .map .map-box .circle9 .line .line-box img { width: 100%; } .map .name { width: 502px; height: 46px; background-image: linear-gradient(91deg, #eeeded 0%, #ffffff 100%), linear-gradient(#eaebec, #eaebec); background-blend-mode: normal, normal; font-family: 'din-bold'; font-size: 15px; line-height: 24px; color: #ffffff; text-align: center; position: absolute; } .map .name::after { content: ""; width: 7px; height: 100%; background-color: #294dc9; position: absolute; top: 0; left: 0; } .map .name .circle { width: 24px; height: 24px; border-radius: 100%; background-color: #294dc9; float: left; margin-top: 12px; margin-left: 17px; } .map .name .text { float: left; font-size: 18px; font-weight: bold; line-height: 46px; color: #333333; margin-left: 13px; transition: 0.5s; } .map .name:hover .text { margin-left: 20px; } .map .name1 { top: 183px; right: 6.77083%; } .map .name2 { top: 253px; right: 6.77083%; } .map .name3 { top: 352px; right: 6.77083%; } .map .name3::after { background-color: #c0a56e; } .map .name3 .circle { background-color: #c0a56e; } .map .name4 { top: 419px; right: 6.77083%; } .map .name4::after { background-color: #c0a56e; } .map .name4 .circle { background-color: #c0a56e; } .map .name5 { top: 488px; right: 6.77083%; } .map .name5::after { background-color: #c0a56e; } .map .name5 .circle { background-color: #c0a56e; } .map .name6 { top: 556px; right: 6.77083%; } .map .name6::after { background-color: #c0a56e; } .map .name6 .circle { background-color: #c0a56e; } .map .name7 { top: 653px; right: 6.77083%; } .map .name7::after { background-color: #d8261b; } .map .name7 .circle { background-color: #d8261b; } .map .name8 { top: 720px; right: 6.77083%; } .map .name8::after { background-color: #d8261b; } .map .name8 .circle { background-color: #d8261b; } .map .name9 { top: 789px; right: 6.77083%; } .map .name9::after { background-color: #d8261b; } .map .name9 .circle { background-color: #d8261b; } @keyframes r2 { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } } @-webkit-keyframes r2 { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } } .profile { width: 100%; height: 903px; } .profile::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .profile .left { width: 50%; float: left; height: 100%; position: relative; } .profile .left .bg { width: 100%; height: 100%; position: relative; overflow: hidden; } .profile .left .bg img { height: 100%; position: absolute; top: 0; left: -100px; right: -100px; margin: auto; transition: 0.5s; } .profile .left .text { position: absolute; top: 121px; left: 11.354%; width: 80%; } .profile .left .text .title-box .h1 { font-size: 56px; font-weight: bold; line-height: 56px; letter-spacing: -1px; color: #ffffff; } .profile .left .text .title-box .en { font-family: 'arial'; font-size: 24px; font-weight: bold; line-height: 24px; letter-spacing: -1px; color: #ffffff; margin-top: 18px; } .profile .left .text .p { width: 100%; font-size: 22px; font-weight: bold; line-height: 42px; color: #ffffff; opacity: 0.5; margin-top: 47px; } .profile .left .text .button { width: 65px; height: 65px; background-color: #ffffff; border-radius: 50%; margin-top: 29px; transition: 0.5s; } .profile .left .text .button a { width: 100%; height: 100%; display: block; font-size: 50px; color: #1e3b9f; text-align: center; line-height: 55px; font-weight: lighter; transition: 0.5s; } .profile .left .text .button:hover { background-color: #c0a56e; } .profile .left .text .button:hover a { color: white; transform: rotate(360deg); } .profile .left:hover .bg img { transform: scale(1.1); } .profile .right { width: 50%; float: left; } .profile .right .top { width: 100%; height: 502px; position: relative; } .profile .right .top .bg { width: 100%; height: 100%; position: relative; overflow: hidden; } .profile .right .top .bg img { height: 100%; position: absolute; top: 0; left: -100px; right: -100px; margin: auto; transition: 0.5s; } .profile .right .top .text { position: absolute; top: 119px; left: 8.6458%; } .profile .right .top .text .number { font-family: "din-bold"; font-size: 166px; line-height: 166px; color: #c0a56e; } .profile .right .top .text .number span { font-size: 30px; line-height: 30px; color: #333333; } .profile .right .top .text .p { font-size: 30px; font-weight: bold; line-height: 30px; color: #333333; margin-top: 32px; } .profile .right .top .text .button { width: 65px; height: 65px; background-color: #c0a56e; border-radius: 50%; margin-top: 29px; transition: 0.5s; } .profile .right .top .text .button a { width: 100%; height: 100%; display: block; font-size: 50px; color: #fff; text-align: center; line-height: 55px; font-weight: lighter; transition: 0.5s; } .profile .right .top .text .button:hover { background-color: #fff; } .profile .right .top .text .button:hover a { color: #c0a56e; transform: rotate(360deg); } .profile .right .top:hover .bg img { transform: scale(1.1); } .profile .right .bottom { width: 100%; height: 401px; } .profile .right .bottom .bottom-left { width: 50%; height: 100%; float: left; } .profile .right .bottom .bottom-left a { width: 100%; height: 100%; display: block; position: relative; } .profile .right .bottom .bottom-left a .bg { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; } .profile .right .bottom .bottom-left a .bg img { height: 100%; position: absolute; top: 0; left: -100px; right: -100px; margin: auto; transition: 0.5s; } .profile .right .bottom .bottom-left a .text { position: absolute; top: 92px; left: 16.458%; } .profile .right .bottom .bottom-left a .text .h2 { font-size: 38px; font-weight: bold; line-height: 38px; letter-spacing: -1px; color: #ffffff; } .profile .right .bottom .bottom-left a .text .en { font-family: 'arial'; font-size: 24px; font-weight: bold; line-height: 24px; letter-spacing: -1px; color: #ffffff; opacity: 0.3; margin-top: 27px; } .profile .right .bottom .bottom-left a .icon { width: 93px; height: 87px; position: absolute; right: 18.333%; bottom: 58px; } .profile .right .bottom .bottom-left a .icon img { width: 100%; } .profile .right .bottom .bottom-left:hover a .bg img { transform: scale(1.1); } .profile .right .bottom .bottom-left:hover a .icon img { animation: shake-lr 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 1 both; } .profile .right .bottom .bottom-right { width: 50%; height: 100%; float: left; } .profile .right .bottom .bottom-right a { width: 100%; height: 100%; display: block; position: relative; } .profile .right .bottom .bottom-right a .bg { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; } .profile .right .bottom .bottom-right a .bg img { height: 100%; position: absolute; top: 0; left: -100px; right: -100px; margin: auto; transition: 0.5s; } .profile .right .bottom .bottom-right a .text { position: absolute; top: 92px; left: 16.458%; } .profile .right .bottom .bottom-right a .text .h2 { font-size: 38px; font-weight: bold; line-height: 38px; letter-spacing: -1px; color: #ffffff; } .profile .right .bottom .bottom-right a .text .en { font-family: 'arial'; font-size: 24px; font-weight: bold; line-height: 24px; letter-spacing: -1px; color: #ffffff; opacity: 0.3; margin-top: 27px; } .profile .right .bottom .bottom-right a .icon { width: 89px; height: 85px; position: absolute; right: 18.333%; bottom: 58px; } .profile .right .bottom .bottom-right a .icon img { width: 100%; } .profile .right .bottom .bottom-right:hover a .bg img { transform: scale(1.1); } .profile .right .bottom .bottom-right:hover a .icon img { animation: shake-lr 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 1 both; } @-webkit-keyframes shake-lr { 0%, 50%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 5% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 10%, 20%, 30% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 15%, 25%, 35% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 40% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } 45% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } } @keyframes shake-lr { 0%, 50%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 5% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 10%, 20%, 30% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 15%, 25%, 35% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 40% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } 45% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } } @media screen and (max-width: 1730px) { .map .map-box { left: 5%; } } @media screen and (max-width: 1630px) { .map .map-box { width: 700px; height: 578.8px; position: absolute; top: 200px; } .map .name1 { top: 220px; right: 5%; } .map .name2 { top: 293px; right: 5%; } .map .name3 { top: 368px; right: 5%; } .map .name4 { top: 435px; right: 5%; } .map .name5 { top: 508px; right: 5%; } .map .name6 { top: 560px; right: 5%; } .map .name7 { top: 640px; right: 5%; } .map .name8 { top: 700px; right: 5%; } .map .name9 { top: 765px; right: 5%; } } @media screen and (max-width: 1560px) { .banner { width: 100%; height: calc(100vh - 80px); margin-top: 80px; } } @media screen and (max-width: 1360px) { .banner { width: 100%; height: calc(100vh - 60px); margin-top: 60px; } .news .news-box .tabs .tab .left .swiper-container .swiper-slide .slide-box a .title { width: calc(100% - 182px); font-size: 20px; padding-left: 60px; padding-right: 122px; } .news .news-box .tabs .tab .left .swiper-container .swiper-slide .slide-box a .title::after { width: 8px; height: 20px; left: 30px; top: 43px; } .news .news-box .tabs .tab .left .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 45px; left: auto; right: 20px; width: auto; } .news .news-box .tabs .tab .right .list .item a .time { float: left; display: block; margin-left: 20px; margin-top: 48px; } .news .news-box .tabs .tab .right .list .item a .title { float: left; width: calc(100% - 160px); font-size: 16px; margin-top: 69px; margin-left: 20px; padding-left: 20px; } .business { width: 100%; height: 700px; position: relative; overflow: hidden; } .business .left .text .h1 { font-size: 32px; line-height: 32px; } .business .left .text .en { font-size: 18px; line-height: 18px; } .business .left .text .h3 { font-size: 16px; line-height: 16px; margin-bottom: 30px; } .business .left .text .h3.active::after { width: 96px; } .business .left .text .h4 { font-size: 16px; line-height: 16px; } .business .left .text .h4.active::after { width: 177px; } .business .right .box a .icon { width: 60px; height: auto; position: absolute; top: 100px; left: calc(50% - 30px); } .business .right .box a .line { width: 1px; height: 0; background-color: #fff; position: absolute; top: 170px; left: 50%; } .business .right .box a .title { width: 210px; font-size: 24px; line-height: 32px; top: 300px; left: calc(50% - 105px); } .business .right .box a .p { width: 300px; font-size: 14px; line-height: 26px; top: 390px; left: calc(50% - 150px); } .business .right .box a .button { width: 50px; height: 50px; top: 600px; left: calc(50% - 25px); font-size: 30px; line-height: 45px; } .business .right .one.active a .button { top: 520px; opacity: 1; } .business .right .two.active a .button { top: 520px; opacity: 1; } .business .right .box a .bus-page { position: absolute; top: 620px; left: 200px; } .map .map-box { width: 900px; height: 744px; position: absolute; top: 150px; } .map .map-box .circle1 .line { display: none; } .map .map-box .circle2 .line { display: none; } .map .map-box .circle3 .line { display: none; } .map .map-box .circle4 .line { display: none; } .map .map-box .circle5 .line { display: none; } .map .map-box .circle6 .line { display: none; } .map .map-box .circle7 .line { display: none; } .map .map-box .circle8 .line { display: none; } .map .map-box .circle9 .line { display: none; } .map .name { position: absolute; right: auto; left: 5%; } } @media screen and (max-width: 1020px) { .banner { display: none; } .banner2 { width: 100%; height: 44.0625vw; margin-top: 94px; display: block; } .banner2 .swiper6 { width: 100%; height: 100%; } .banner2 .swiper6 .swiper-slide { width: 100%; height: 100%; } .banner2 .swiper6 .swiper-slide .slide-box { width: 100%; height: 100%; position: relative; } .banner2 .swiper6 .swiper-slide .slide-box .img { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: -1000px; right: -1000px; margin: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } .banner2 .swiper6 .swiper-slide .slide-box .img video { position: relative; height: calc(100vh - var(--browser-address-bar, 0px)); object-fit: cover; object-position: 50% 50%; width: 100%; z-index: -1; } .banner2 .swiper6 .swiper-slide .slide-box .text { position: absolute; left: 5.78125%; top: 20vw; } .banner2 .swiper6 .swiper-slide .slide-box .text .h4 { overflow: hidden; } .banner2 .swiper6 .swiper-slide .slide-box .text .h4 span { display: block; font-size: 32px; line-height: 32px; color: #ffffff; text-shadow: 0px 2px 9px rgba(0, 0, 0, 0.5); } .banner2 .swiper6 .swiper-slide .slide-box .text .h2 { margin-top: 0; overflow: hidden; } .banner2 .swiper6 .swiper-slide .slide-box .text .h2 span { display: block; font-size: 76px; line-height: 76px; font-weight: bold; color: #ffffff; text-shadow: 0px 2px 9px rgba(0, 0, 0, 0.5); } .banner2 .swiper-container-horizontal > .swiper-pagination-bullets, .banner2 .swiper-pagination-custom, .banner2 .swiper-pagination-fraction { bottom: 3.4479vw; left: 6.25%; width: auto; } .banner2 .swiper-pagination-bullet { width: 6px; height: 14px; display: inline-block; border-radius: 0; background: #fff; opacity: 0.3; transform: skewx(20deg); margin: 0 10px; } .banner2 .swiper-pagination-bullet-active { opacity: 1; background: #fff; } .banner2 .swiper-button-next, .banner2 .swiper-button-prev { position: absolute; top: auto; bottom: 4.5833vw; width: 50px; height: 50px; margin-top: 0; z-index: 10; border-radius: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; border: solid 1px #fff; transition: 0.5s; } .banner2 .swiper-button-next::after, .banner2 .swiper-button-prev::after { font-size: 24px; font-weight: bold; } .banner2 .swiper-button-next:hover, .banner2 .swiper-button-prev:hover { background-color: rgba(4, 27, 89, 0.5); border: solid 1px rgba(4, 27, 89, 0.5); } .banner2 .swiper-button-prev { left: auto; right: calc(5.729% 87px); } .banner2 .swiper-button-next { right: 5.729%; left: auto; } .banner2 { width: 100%; height: 44.0625vw; margin-top: 60px; } .banner2 .swiper6 .swiper-slide .slide-box .text { position: absolute; left: 5%; top: 16vw; width: 90%; } .banner2 .swiper6 .swiper-slide .slide-box .text .h4 span { font-size: 12px; line-height: 32px; padding-left: 5px; } .banner2 .swiper6 .swiper-slide .slide-box .text .h2 span { font-size: 24px; line-height: 34px; padding-left: 5px; } .banner2 .swiper-container-horizontal > .swiper-pagination-bullets, .banner2 .swiper-pagination-custom, .banner2 .swiper-pagination-fraction { bottom: 3vh; left: 6.25%; width: auto; } .banner2 .swiper-button-next, .banner2 .swiper-button-prev { bottom: 3vh; width: 40px; height: 40px; } .banner2 .swiper-button-next::after, .banner2 .swiper-button-prev::after { font-size: 14px; } .banner2 .swiper-button-prev { left: auto; right: calc(5.729% 50px); } .news .news-box { width: 90%; margin: 0 auto; position: relative; padding-top: 60px; } .news .news-box .title-box .h1 { font-size: 32px; font-weight: bold; line-height: 32px; letter-spacing: -1px; color: #333333; } .news .news-box .title-box .en { font-size: 18px; line-height: 18px; } .news .news-box .button { top: 143px; width: 50px; height: 50px; } .news .news-box .button a { font-size: 30px; line-height: 48px; } .news .news-box .tabs .horizontal { position: absolute; top: -47px; right: auto; left: 0; width: 80%; } .news .news-box .tabs .horizontal li { font-size: 18px; line-height: 18px; margin-left: 0; margin-right: 20px; } .news .news-box .tabs .tab .left { width: 100%; height: 55vw; float: left; } .news .news-box .tabs .tab .left .swiper-container .swiper-slide .slide-box a .title { width: calc(100% - 92px); height: 50px; font-size: 16px; line-height: 50px; padding-left: 30px; padding-right: 62px; } .news .news-box .tabs .tab .left .swiper-container .swiper-slide .slide-box a .title::after { width: 6px; height: 16px; left: 10px; top: 17px; } .news .news-box .tabs .tab .left .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 20px; left: auto; right: 20px; width: auto; } .news .news-box .tabs .tab .left .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #fff; opacity: 0.6; margin: 0 4px; } .news .news-box .tabs .tab .left .swiper-pagination-bullet-active { opacity: 1; background: #fff; } .news .news-box .tabs .tab .right { width: 100%; float: right; margin-top: 20px; } .news .news-box .tabs .tab .right .list .item { width: 100%; height: 120px; margin-bottom: 16.5px; background-color: white; } .news .news-box .tabs .tab .right .list .item a .time { float: left; display: block; margin-left: 20px; margin-top: 10px; } .news .news-box .tabs .tab .right .list .item a .title { float: left; width: calc(100% - 160px); font-size: 18px; font-weight: bold; line-height: 29px; height: 58px; color: #333333; margin-top: 30px; margin-left: 20px; padding-left: 20px; } .business .left { width: 33%; height: 100%; position: relative; } .business .right { width: 68%; height: 100%; position: absolute; top: 0%; left: 32%; } .business .right .one { width: 50%; height: 100%; position: absolute; top: 0; left: 0; } .business .right .one.active { width: 50%; height: 100%; position: absolute; top: 0; left: 0; } .business .right .two { width: 50%; height: 100%; position: absolute; top: 0; left: 50%; } .business .right .two.active { width: 50%; height: 100%; position: absolute; top: 0; left: 50%; } .business .right a .p { display: none; } .business .right .one.active a .p { display: none; } .business .right .two.active a .p { display: none; } .business .left .text .h1 { padding-top: 100px; font-size: 24px; line-height: 32px; margin-left: 15%; writing-mode: vertical-lr; letter-spacing: 2px; } .business .left .text .en { margin-left: calc(15% 34px); writing-mode: vertical-lr; position: absolute; top: 100px; padding-top: 0px; } .business .left .text .h3 { margin-left: 8%; display: none; } .business .left .text .h4 { margin-left: 8%; margin-right: 8%; display: none; } .business .left .text .h4.active::after { width: 96px; } .business .right .box a .title { width: 24px; font-size: 24px; line-height: 32px; letter-spacing: 2px; top: 300px; left: calc(50% - 12px); writing-mode: vertical-lr; } .business .right .box a .button { display: none; } .business .right .box a .bus-page { display: none; } .case { width: 100%; height: 750px; background-color: #fafafa; } .case .box .title-box { padding-top: 50px; } .case .box .title-box .h1 { font-size: 32px; font-weight: bold; line-height: 32px; letter-spacing: -1px; color: #333333; } .case .box .title-box .en { font-family: 'arial'; font-size: 18px; font-weight: bold; line-height: 18px; letter-spacing: -1px; color: #dadada; margin-top: 18px; } .case .box .swiper-button-next, .case .box .swiper-button-prev { position: absolute; top: 60px; width: 50px; height: 50px; } .case .box .swiper-button-prev, .case .box .swiper-container-rtl .swiper-button-next { right: 67px; left: auto; } .map { width: 100%; height: calc(60vw 730px); position: relative; } .map .title-box { position: absolute; top: 50px; left: 5%; z-index: 3; } .map .title-box .h1 { font-size: 32px; font-weight: bold; line-height: 32px; letter-spacing: -1px; color: #333333; } .map .title-box .en { font-family: 'arial'; font-size: 18px; font-weight: bold; line-height: 18px; letter-spacing: -1px; color: #dadada; margin-top: 18px; } .map .map-box { width: 90%; height: 70vw; position: absolute; top: 100px; } .map .map-box .circle { width: 18px; height: 18px; border-radius: 100%; text-align: center; } .map .map-box .circle span { display: block; font-family: 'din-bold'; font-size: 12px; line-height: 18px; color: #ffffff; position: relative; z-index: 2; } .map .map-box .circle::after { content: ""; width: 30px; height: 30px; border-radius: 100%; opacity: 0.2; position: absolute; top: -6px; left: -6px; animation: r2 1.3s; animation-iteration-count: infinite; animation-timing-function: linear; } .map .name { width: 90%; height: 46px; background-image: linear-gradient(91deg, #eeeded 0%, #ffffff 100%), linear-gradient(#eaebec, #eaebec); background-blend-mode: normal, normal; font-family: 'din-bold'; font-size: 12px; line-height: 24px; color: #ffffff; text-align: center; position: absolute; } .map .name .text { float: left; font-size: 12px; font-weight: bold; line-height: 46px; color: #333333; margin-left: 13px; transition: 0.5s; } .map .name1 { top: calc(50vw 220px); right: 5%; } .map .name2 { top: calc(50vw 280px); right: 5%; } .map .name3 { top: calc(50vw 340px); right: 5%; } .map .name4 { top: calc(50vw 400px); right: 5%; } .map .name5 { top: calc(50vw 460px); right: 5%; } .map .name6 { top: calc(50vw 520px); right: 5%; } .map .name7 { top: calc(50vw 580px); right: 5%; } .map .name8 { top: calc(50vw 640px); right: 5%; } .map .name9 { top: calc(50vw 700px); right: 5%; } .profile { width: 100%; height: 903px; } .profile .left { width: 100%; float: left; height: 500px; position: relative; } .profile .left .text { position: absolute; top: 50px; left: 5%; width: 90%; } .profile .left .text .title-box .h1 { font-size: 32px; line-height: 32px; } .profile .left .text .title-box .en { font-size: 18px; line-height: 18px; letter-spacing: 0px; } .profile .left .text .p { font-size: 18px; line-height: 36px; } .profile .left .text .button { width: 50px; height: 50px; } .profile .left .text .button a { font-size: 30px; line-height: 48px; } .profile .right { width: 100%; float: left; } .profile .right .top { width: 100%; height: 300px; position: relative; } .profile .right .top .text { position: absolute; top: 50px; left: 8.6458%; } .profile .right .top .text .number { font-family: "din-bold"; font-size: 80px; line-height: 80px; color: #c0a56e; } .profile .right .top .text .number span { font-size: 24px; line-height: 24px; color: #333333; } .profile .right .top .text .p { font-size: 24px; line-height: 24px; margin-top: 24px; } .profile .right .top .text .button { width: 50px; height: 50px; } .profile .right .top .text .button a { font-size: 30px; line-height: 48px; } .profile .right .bottom { width: 100%; height: 300px; } .profile .right .bottom .bottom-left a .text { position: absolute; top: 92px; left: 10%; } .profile .right .bottom .bottom-left a .text .h2 { font-size: 24px; line-height: 24px; letter-spacing: 0px; } .profile .right .bottom .bottom-left a .text .en { font-size: 18px; line-height: 18px; letter-spacing: 0px; margin-top: 18px; } .profile .right .bottom .bottom-left a .icon { width: 60px; bottom: 20px; } .profile .right .bottom .bottom-right a .text { position: absolute; top: 92px; left: 10%; } .profile .right .bottom .bottom-right a .text .h2 { font-size: 24px; line-height: 24px; letter-spacing: 0px; } .profile .right .bottom .bottom-right a .text .en { font-size: 18px; line-height: 18px; letter-spacing: 0px; margin-top: 18px; } .profile .right .bottom .bottom-right a .icon { width: 60px; bottom: 20px; } }