/* 手机端 */ @media screen and (max-width: 992px) { .app { margin: 2.13rem 0 0 0; } .app .slideshow { height: 5rem; color: #0074b7; } .app .slideshow .swiper { width: 100%; height: 5rem; } .app .slideshow .swiper .swiper-slide { position: relative; } .app .slideshow .swiper .swiper-slide .title { font-size: 0.8rem; font-weight: bold; left: calc(1.82rem * 0.8); top: calc(2.4rem * 0.8); position: absolute; color: #ffffff; display: flex; } .app .slideshow .swiper .swiper-slide .subtitle { left: calc(1.82rem * 0.8); top: calc(3.8rem * 0.8); font-size: 0.6rem; position: absolute; font-size: 0.1rem; color: #ffffff; display: flex; } .app .slideshow .swiper .swiper-slide .more { border: 1px solid #0074b7; border-radius: 0.13rem 0; padding: 0.08rem 0.2rem; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: absolute; left: calc(1.82rem * 0.8); top: calc(3.49rem * 0.8); font-size: 0.1rem; } .app .slideshow .swiper .swiper-slide .more span { font-size: 0.1rem; color: #0074b7; } .app .slideshow .swiper .swiper-slide .more img { width: 0.04rem; height: 0.08rem; margin: 0 0 0 0.05rem; } .app .slideshow .swiper img { width: 100%; height: 100%; } .app .company { box-sizing: border-box; overflow: hidden; position: relative; background-image: ; background-size: 100% 100%; background-repeat: no-repeat; display: flex; flex-direction: column; } .app .company .title { color: #333333; font-size: 0.6rem; height: 1.5rem; line-height: 1.5rem; font-weight: bold; text-indent: 0.5rem; } .app .company .subtitle { font-size: 0.4rem; color: #888888; padding: 0 0.5rem; line-height: 2; } .app .company .more { background-color: #0ba2de; color: #ffffff; font-size: 0.5rem; display: inline-block; width: 2.5rem; padding: 0.2rem 0.3rem; display: flex; justify-content: center; align-items: center; margin: 0.5rem 1rem; border-radius: 0.3rem 0; } .app .company .more img { width: 0.4rem; height: 0.4rem; margin: 0 0 0 0.05rem; } .app .company .cards { display: none; } .app .company .announcement { border: 1px solid #0074b7; margin: 0.5rem 0.5rem; display: flex; flex-wrap: wrap; justify-content: left; overflow: hidden; background-color: #ffffff; box-sizing: border-box; } .app .company .announcement .ann_title { height: 0.8rem; width: 100%; font-size: 0.4rem; background-color: #0074b7; display: flex; align-items: center; justify-content: space-between; padding: 0 0.1rem; box-sizing: border-box; padding: 0 0.2rem; } .app .company .announcement .ann_title .left { display: flex; align-items: center; flex: 1; color: #ffffff; } .app .company .announcement .ann_title .left img { width: 0.5rem; height: 0.5rem; margin: 0 0.3rem 0 0; } .app .company .announcement .ann_title .right { display: none; } .app .company .announcement .item { color: #666666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 0.8rem; line-height: 0.8rem; font-size: 0.3rem; width: 100%; text-indent: 0.3rem; } .number-box{ /*border: 1px solid red;*/ width: 100%; margin: 0px auto 0; overflow: hidden; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /*grid-gap: 50px;*/ } .number-box .item{ /*border: 1px solid red;*/ font-size: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; } .number-box .item .name{ color: #999999; font-size: 12px; } .number-box .item .num{ font-size: 30px; color: #333333; } .number-box .item .unit{ font-size: 13px; color: #333333; } .app .news { margin: 0 0.5rem; } .app .news .title_box { display: flex; align-items: center; justify-content: space-between; } .app .news .title_box .left .title { display: none; } .app .news .title_box .left .subtitle { font-size: 0.6rem; color: #333333; text-indent: 0.5rem; font-weight: bold; height: 1.5rem; line-height: 1.5rem; } .app .news .title_box .right { display: none; } .app .news .card_box { box-sizing: border-box; display: flex; flex-direction: column; } .app .news .card_box .card { width: 100%; background-color: #f8f8fa; display: flex; flex-direction: column; margin: 0 0 0.5rem 0; } .app .news .card_box .card .img { overflow: hidden; } .app .news .card_box .card .content .title { color: #333333; font-size: 0.4rem; padding: 0.3rem 0.2rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .app .news .card_box .card .content .subtitle { color: #666666; font-size: 0.3rem; padding: 0.2rem 0.2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 0.7rem; } .app .news .card_box .card .tags { display: flex; flex: 1; height: 2rem; align-items: center; justify-content: space-between; } .app .news .card_box .card .tags .tag { font-size: 0.3rem; color: #ffffff; background-color: #0ba2de; margin: 0.2rem 0.1rem; padding: 0.1rem 0.1rem; } .app .news .card_box .card .tags .time { color: #666666; font-size: 0.3rem; margin: 0 0.08rem; } .app .news .card_box .card:nth-child(n 4) { margin-top: 0.15rem; } /*.app .news .card_box .card:nth-child(n 4) .tag {*/ /* background-color: #f87d04;*/ /*}*/ .app .business .title_box { display: flex; align-items: center; justify-content: space-between; } .app .business .title_box .left .title { display: none; } .app .business .title_box .left .subtitle { font-size: 0.6rem; color: #333333; text-indent: 0.5rem; font-weight: bold; height: 1.5rem; line-height: 1.5rem; } .app .business .title_box .right { display: none; } .app .business .img_box { display: flex; margin: 0 0.5rem; flex-direction: column; } .app .business .img_box .img { background-repeat: no-repeat; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 8rem; margin: 0.5rem 0; } .app .business .img_box .img .title { font-size: 0.5rem; color: #ffffff; } .app .business .img_box .img .subtitle { font-size: 0.4rem; color: #ffffff; margin: 0.05rem 0; } .app .business .img_box .img .button { display: none; } .app .business .img_box .img01 { background-image: ; } .app .business .img_box .img02 { background-image: ; } .app .business .img_box .img03 { background-image: ; } .app .business .img_box .img04 { background-image: ; } .app .business .img_box .img05 { background-image: ; } } /* pc端 */ @media screen and (min-width: 992px) { .app { /*border: 1px solid red;*/ /*margin: calc(0.52rem * 0.8) 0 0 0;*/ margin: 134px 0 0 0; /*margin: 0px 0 0 0;*/ } .app .slideshow { height: 500px; color: #0074b7; } .app .slideshow .swiper { width: 100%; height: 500px; } .app .slideshow .swiper .swiper-slide .title { font-size: 0.39rem; font-weight: bold; left: calc(1.82rem * 0.8); top: calc(2.4rem * 0.8); position: absolute; display: flex; } .app .slideshow .swiper .swiper-slide .subtitle { left: calc(1.82rem * 0.8); top: calc(3.12rem * 0.8); font-size: 0.21rem; position: absolute; font-size: 0.1rem; display: flex; } .app .slideshow .swiper .swiper-slide .subtitle div { margin-right: 0.05rem; } .app .slideshow .swiper .swiper-slide .more { border: 1px solid #0074b7; border-radius: 0.13rem 0; padding: 0.08rem 0.2rem; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: absolute; left: calc(1.82rem * 0.8); top: calc(3.49rem * 0.8); font-size: 0.1rem; } .app .slideshow .swiper .swiper-slide .more span { font-size: 0.1rem; color: #0074b7; } .app .slideshow .swiper .swiper-slide .more img { width: 0.04rem; height: 0.08rem; margin: 0 0 0 0.05rem; } .app .slideshow .swiper img { width: 100%; height: 100%; } .app .company { /*height: calc(4.53rem * 0.8);*/ box-sizing: border-box; overflow: hidden; position: relative; background-image: ; background-size: 100% 100%; background-repeat: no-repeat; /*padding: 0 0 calc(0.28rem * 0.8) 0;*/ padding: 0 0 140px 0; } .app .company .title { font-size: 35px; font-weight: 600; color: #333333; margin: calc(0.39rem * 0.8) 15% 0; } .app .company .subtitle { text-align: justify; font-size: 17px; line-height: 1.7; color: #888888; width: 50%; margin: calc(0.19rem * 0.8) 15% 0; } .app .company .more { width: calc(1.2rem * 0.8); border-radius: 0.13rem 0; padding: 0.08rem 0.2rem; box-sizing: border-box; display: flex; justify-content: center; align-items: center; margin: calc(0.23rem * 0.8) 0 0 15%; font-size: 0.1rem; background-color: #0ba2de; color: #ffffff; } .app .company .more img { width: 0.04rem; height: 0.08rem; margin: 0 0 0 0.05rem; } .app .company .cards { margin: calc(0.35rem * 0.8) 15% 0; display: flex; justify-content: space-between; } .app .company .cards .card { /*border: 1px solid red;*/ width: calc(2.7rem * 0.8); height: calc(1.7rem * 0.8); display: flex; flex-wrap: wrap; background-color: #ffffff; } .app .company .cards .card img { /*border: 1px solid red;*/ width: calc(2.7rem * 0.8); height: calc(1.22rem * 0.8); } .app .company .cards .card div { /*border: 1px solid red;*/ color: #212121; font-size: 17px; text-align: center; /*line-height: 1.3;*/ /*width: calc(100% - 0.25rem);*/ width: 100%; padding: 0 0.25rem; height: calc(calc(1.7rem * 0.8) - calc(1.22rem * 0.8)); /*overflow: hidden;*/ /*white-space: nowrap;*/ /*text-overflow: ellipsis;*/ box-sizing: border-box; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .app .company .announcement { width: 1.76rem; width: 15%; position: absolute; right: 0; top: 0.2rem; display: flex; flex-wrap: wrap; justify-content: left; box-sizing: border-box; overflow: hidden; background-color: #ffffff; } .app .company .announcement .ann_title { height: 0.26rem; width: 100%; font-size: 0.1rem; background-color: #0074b7; display: flex; align-items: center; justify-content: space-between; padding: 0 0.1rem; box-sizing: border-box; } .app .company .announcement .ann_title .left { display: flex; align-items: center; flex: 1; text-indent: 0.06rem; color: #ffffff; } .app .company .announcement .ann_title .right { z-index: 999; } .app .company .announcement .item { width: calc(100% - 0.16rem); color: #666666; font-size: 0.09rem; padding: 0.1rem 0; margin: 0 auto; border-bottom: 0.01rem dashed #dedede; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .app .company .announcement .ann_more { color: #0074b7; font-size: 0.09rem; display: flex; margin-left: 0.08rem; padding: 0.1rem 0; } .app .company .left_arrow { font-size: 0.1rem; position: absolute; right: 0; top: 0.2rem; width: 0.2rem; height: 0.2rem; border-radius: 50%; background-color: #0074b7; display: flex; align-items: center; justify-content: center; } .app .company .left_arrow img { width: 50%; height: 50%; transform: rotatey(180deg); } .number-box{ /*border: 1px solid black;*/ width: 70%; /*width: 1200px;*/ /*height: 120px;*/ margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 50px; /*position: absolute;*/ /*left: 50%;*/ /*bottom: -20px;*/ /*z-index: 6;*/ transform: translate(0%,-50%); background-color: #ffffff; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); } .number-box .item{ /*border: 1px solid red;*/ font-size: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; padding: 20px 0; } .number-box .item .name{ color: #999999; font-size: 14px; transition: .5s ease-in-out; } .number-box .item .num{ font-size: 54px; color: #333333; transition: .5s ease-in-out; } .number-box .item .unit{ font-size: 17px; color: #333333; transition: .5s ease-in-out; } .number-box .item:hover .name{ color: #0ba2de; } .number-box .item:hover .num{ color: #0ba2de; } .number-box .item:hover .unit{ color: #0ba2de; } .app .news .title_box { display: flex; align-items: center; justify-content: space-between; width: 70%; margin: -50px auto 0; } .app .news .title_box .left { padding: calc(0.28rem * 0.8) 0 calc(0.23rem * 0.8) 0; } .app .news .title_box .left .title { font-size: 0.21rem; color: #2c2c2c; } .app .news .title_box .left .subtitle { /*font-size: 0.17rem;*/ /*color: #5d5d5d;*/ font-size: 0.21rem; color: #2c2c2c; } .app .news .title_box .right { font-size: 0.1rem; display: flex; align-items: center; justify-content: flex-end; color: #5c5c5c; } .app .news .title_box .right .tabs { margin-right: 0.1rem; } .app .news .title_box .right .more { display: flex; align-items: center; color: #5c5c5c; } .app .news .title_box .right .more .text { margin-right: 0.06rem; } .app .news .title_box .right .select_tabs { color: #0ba2de; font-size: 0.1rem; border-bottom: 0.01rem solid #0ba2de; } .app .news .card_box { height: 5rem; width: 70vw; margin: 0 auto; box-sizing: border-box; display: flex; justify-content: space-between; flex-wrap: wrap; } .app .news .card_box .card { width: calc(calc(100% - 0.24rem) / 3); max-height: calc(2.5rem * 0.88); background-color: #f2f7f9; /*background-color: rgba(11,162,222,0.1);*/ display: flex; flex-direction: column; overflow: hidden; } .app .news .card_box .card .img { overflow: hidden; height: 200px; } .app .news .card_box .card .content { width: calc(calc(2.89rem * 0.8) - 0.128rem / 3); box-sizing: border-box; } .app .news .card_box .card .content .title { color: #000000; font-size: 0.1rem; /*padding: 0.12rem 0.08rem;*/ margin: 10px 0.08rem; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.5; } .app .news .card_box .card .content .subtitle { color: #666666; font-size: 0.09rem; padding: 0 0.08rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.5; } .app .news .card_box .card .tags { display: flex; flex: 1; align-items: center; box-sizing: border-box; justify-content: space-between; } .app .news .card_box .card .tags .tag { font-size: 0.09rem; color: #ffffff; background-color: #0ba2de; margin: 0 0.08rem; padding: 0.02rem 0.05rem; } .app .news .card_box .card .tags .time { color: #666666; font-size: 0.09rem; margin: 0 0.08rem; } .app .news .card_box .card:nth-child(n 4) { margin-top: 0.15rem; } /*.app .news .card_box .card:nth-child(n 4) .tag {*/ /* background-color: #f87d04;*/ /*}*/ .app .business { margin-bottom: calc(0.23rem * 0.8); } .app .business .title_box { display: flex; align-items: center; justify-content: space-between; width: 70%; margin: 0 auto; } .app .business .title_box .left { padding: calc(0.28rem * 0.8) 0 calc(0.23rem * 0.8) 0; } .app .business .title_box .left .title { font-size: 0.21rem; color: #2c2c2c; } .app .business .title_box .left .subtitle { /*font-size: 0.17rem;*/ /*color: #5d5d5d;*/ font-size: 0.21rem; color: #2c2c2c; } .app .business .title_box .right { font-size: 0.1rem; display: flex; align-items: center; justify-content: flex-end; color: #5c5c5c; } .app .business .title_box .right .text { margin-right: 0.06rem; } .app .business .img_box { width: 70vw; display: flex; overflow: hidden; margin: 0 auto; } .app .business .img_box .img { background-repeat: no-repeat; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: width 0.5s ease; position: relative; } .app .business .img_box .img::after { content: ''; width: 100%; height: 100%; left: 0; bottom: 0; background-color: rgba(0,0,0,0.3); position: absolute; z-index: 2; } .app .business .img_box .img .title { font-size: 20px; color: #ffffff; z-index: 3; } .app .business .img_box .img .title { font-size: 20px; color: #ffffff; z-index: 3; } .app .business .img_box .img01 .title { font-size: 27px; } .app .business .img_box .img .subtitle { font-size: 0.09rem; color: #ffffff; margin: 0.05rem 0; } .app .business .img_box .img .button { width: calc(0.62rem * 0.8); height: calc(0.62rem * 0.8); border-radius: 50%; background-color: #0074b7; position: relative; margin: 40px 0; } .app .business .img_box .img .button img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; } .app .business .img_box .img01 { background-image: ; width: calc(3.91rem * 0.8); height: calc(4rem * 0.8); } .app .business .img_box .img02 { background-image: ; width: calc(1.69rem * 0.8); height: calc(4rem * 0.8); } .app .business .img_box .img02 .button { display: none; } .app .business .img_box .img03 { background-image: ; width: calc(1.69rem * 0.8); height: calc(4rem * 0.8); } .app .business .img_box .img03 .button { display: none; } .app .business .img_box .img04 { background-image: ; width: calc(1.69rem * 0.8); height: calc(4rem * 0.8); } .app .business .img_box .img04 .button { display: none; } .app .business .img_box .img05 { /*border: 1px solid red;*/ background-image: ; width: calc(1.69rem * 0.8); height: calc(4rem * 0.8); } .app .business .img_box .img05 .button { display: none; } }