/* 横幅 */ #banner{ position: relative; overflow: hidden; } #banner .img{ display:block; margin:0 auto; width: 100%; } .banner-pagination-center{ text-align:center; position: absolute; bottom: 30px; width:100%; z-index:10; } #banner .banner-pagination { display:inline-block; width:auto !important; } #banner .banner-pagination .swiper-pagination-bullet { border-radius: 0; opacity: 1; margin: 0 8px; border-radius:0; border:1px solid #fff; padding:8px; background:none; position:relative; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; opacity:0.7; } #banner .banner-pagination .swiper-pagination-bullet:before{ content:''; position:absolute; top:4px; left:4px; display:block; width:8px; height:8px; border-radius:0; background:#fff; opacity:0.7; } #banner .banner-pagination .swiper-pagination-bullet-active{ border-color:#0f69fd; opacity:1; } #banner .banner-pagination .swiper-pagination-bullet-active:before{ background:#0f69fd; opacity:1; } /* 服务项目 */ .service{ background:#ebf6ff; padding:50px 0; } .service .topTitle{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; } .service .topTitle .left .cn{ font-size:32px; } .service .topTitle .more:hover{ color:#0f69fd; } .service-list{ overflow:hidden; } .service-list .item a{ display:block; border-bottom:1px solid #ccc; padding-bottom:10px; } .service-list .item h3{ font-size:16px; margin-top:15px; word-break:break-all; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } .service-pagination{ padding-top:30px; } .service-pagination .swiper-pagination-bullet{ width:30px; border-radius:5px; height:8px; margin:0 8px; background:#999; opacity:1; } .service-pagination .swiper-pagination-bullet-active{ background:#0f69fd; border-color:#0f69fd; } .service-swiper .item{ display:flex; justify-content:center; } .service-swiper .item img{ border-radius:10px; display:block; max-width:100%; } .service-swiper .item:hover h3{ color:#0f69fd; } .service-swiper .item:hover a{ border-color:#0f69fd; } /* 关于我们 */ .about{ background:#fff; padding:65px 0; background-size:cover; } .about-top{ margin-bottom:50px; } .about-top .right{ width:50%; position:relative; } .about-top .right img{ display:block; width:100%; } .about-top .right img{ position:relative; overflow:hidden; z-index:99; } #aboutSwiper{ position: relative; overflow: hidden; } .about-top .right .about-pagination-center{ text-align:center; position: absolute; bottom: 20px; width:100%; z-index:99; } .about-top .right .about-pagination { display:inline-block; width:auto !important; } .about-top .right .about-pagination .swiper-pagination-bullet { border-radius: 0; opacity: 1; margin: 0 8px; border-radius:0; border:1px solid #fff; padding:8px; background:none; position:relative; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; opacity:0.7; } .about-top .right .about-pagination .swiper-pagination-bullet:before{ content:''; position:absolute; top:4px; left:4px; display:block; width:8px; height:8px; border-radius:0; background:#fff; opacity:0.7; } .about-top .right .about-pagination .swiper-pagination-bullet-active{ border-color:#0f69fd; opacity:1; } .about-top .right .about-pagination .swiper-pagination-bullet-active:before{ background:#0f69fd; opacity:1; } .about-top .left{ width:50%; padding-right:45px; } .about-top .left h2{ display:inline-block; font-weight:700; color:#333333; margin-bottom:30px; } .about-top .left h2 strong{ color:#0f69fd; } .about-top .left h2 span{ font-size:22px; color:#999; font-weight:normal; } .about-top .left .title{ margin-bottom:30px; } .about-top .left .title .cn{ color:#0f69fd; font-size:25px; } .about-top .left .title .en{ color:#999; letter-spacing:1px; } .about-top .left .desc{ min-height:120px; margin-bottom:10px; line-height:26px; padding-bottom:20px; font-size:16px; text-align:justify; } .about-top .left .more { text-align:right; } .about-top .left .more a{ color:#0f69fd; font-size:14px; } .about-top .left .more a .iconfont{ font-weight:700; } .about-bottom{ border-top:1px solid #999; border-bottom:1px solid #999; } .about-bottom .item { text-align:center; padding:20px 0; position:relative; width:25%; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; } .about-bottom .item:hover{ background:#0f69fd; } .about-bottom .item:hover .imgbox{ display:none; } .about-bottom .item:hover .on{ display:block; } .about-bottom .item:hover .name{ color:#fff; } .about-bottom .item:before{ content:''; display:block; width:1px; height:100px; position:absolute; background:#999; } .about-bottom .item:first-child:before{ display:none; } .about-bottom .item .on{ display:none; } .about-bottom .item .imgbox img{ display:block; margin:0 auto; } .about-bottom .item .name{ font-size:18px; font-weight:700; padding-top:5px; } .case{ display:flex; position:relative; overflow:hidden; } .case .bg{ position:absolute; left:-5%; top:0; transform: skewX(-15deg); width:35%; height:700px; z-index:1; background:#0f69fd; opacity:0.9; } .case .left{ width:25%; height:660px; display:flex; align-items:center; justify-content:right; background:#0f69fd url('/tpl/default/skin/img/sc1.png')no-repeat center center; } .case .left .content{ color:#fff; position:relative; z-index:2; } .case .left .content .cn{ font-size:32px; } .case .left .content .en{ margin: 20px 0 80px 0; } .case .left .content .more a{ display:inline-block; border:1px solid #fff; padding:6px 15px; color:#fff; font-size:14px; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; } .case .left .content .more a:hover{ background:#0f69fd; transform:scale(1.05); } .case .right{ width:75%; display:flex; flex-wrap:wrap; } .case .right .item{ width:50%; display:block; background-size:cover !important; } .case .right .item { display:flex; align-items:flex-end; } .case .right .item a h3{ font-size:22px; color:#fff; padding:30px; margin:0px; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; } .case .right .item.i1 h3{ padding-left:150px; } .case .right .item.i3 h3{ padding-left:80px; } .case .right .item a h3:hover{ transform:scale(1.05); } .news_box{ background:url(/tpl/default/skin/img/news_bg.png)no-repeat right top; } .news{ padding:65px 0; display:flex; flex-wrap:wrap; } .news .left{ width:15%; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; } .news .left .cn{ font-size:32px; } .news .left .en{ font-size:18px; } .news .left .tag{ } .news .left .tag a{ display:block; text-align:right; padding:10px; font-size:18px; font-weight:700; } .news .left .tag a:hover{ color:#0f69fd; } .news .left .tag a:before{ content:''; display:inline-block; height:2px; width:18px; background:#fff; position:relative; top:-5px; margin-right:6px; } .news .left .tag .on a{ color:#0f69fd; } .news .left .tag .on a:before{ background:#0f69fd; } .news .left .more a{ display:inline-block; padding:6px 15px; border:1px solid #999; color:#999; font-size:14px; } .news .left .more a:hover{ border-color:#0f69fd; background:#0f69fd; color:#fff; } .news .right{ width:80%; margin-top:100px; border-left:1px solid #eee; padding-left:20px; min-height:454px; } .news .right .item{ display:none; } .news .right .item.on{ display:flex; justify-content:space-between; } .news .right .item .e{ padding:20px 30px; width:100%; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; } .news .right .item .e .d{ font-size:32px; font-weight:500; } .news .right .item .e .my{ color:#999; padding:10px 0; font-weight:500; } .news .right .item .e .title a{ font-weight:700; font-size:18px; display:block; word-break:break-all; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } .news .right .item .e .cover{ padding:15px 0; } .news .right .item .e .cover img{ display:block; max-width:100%; } .news .right .item .e .desc{ word-break:break-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#999; margin-bottom:20px; } .news .right .item .e .more{ color:#999; font-size:14px; } .news .right .item .e:hover{ background:#0f69fd; color:#fff; } .news .right .item .e:hover .my,.news .right .item .e:hover .title a,.news .right .item .e:hover .desc,.news .right .item .e:hover .more{ color:#fff; } @media screen and (min-width:0px) and (max-width:768px){ #banner .banner-pagination-center{bottom:10px;} #banner .swiper-pagination-bullet{height:4px;} .service{padding:30px 0;} .service .topTitle .left .cn{font-size:30px;} .service-pagination{padding-top:20px;} .about{padding:35px 0;} .about-top{display:block;margin-bottom:30px;} .about-top .left{width:100%; padding-right:0px;margin-bottom:30px;} .about-top .left h2{font-size:30px;} .about-top .left .more{text-align:left;} .about-top .right{width:100%;} .about-bottom .item .imgbox img{width:55px;} .about-bottom .item .name{font-size:14px;} .about-bottom .item:before{height:80px;} .case{display:block;} .case .left{width:100%; height:225px;justify-content:left; padding:15px;} .case .bg{transform:skewX(0deg);height:225px;width:100%;left:0px;} .case .left .content .cn{font-size:30px;} .case .left .content .en{margin-bottom:50px;} .case .right{width:100%;} .case .right .item{min-height:160px;} .case .right .item a h3{padding: 15px !important;font-size:18px;} .case .left .content .more a{padding:5px 10px;font-size:13px;} .news {padding:45px 0;} .news .left{width:100%;} .news .left .tag{display:flex;margin:15px auto;} .news .left .tag a:before{display:none;} .news .left .tag a{padding:0px;} .news .left .tag li{margin:0 15px;} .news .left .more{display:none;} .news .left .cn{font-size:30px;} .news .left .more a{padding:5px 10px;font-size:13px;} .news .right{width:100%;border:none;padding-left:0px; margin-top:30px;min-height:auto;margin:0 -5px;} .news .right .item .e{padding:10px 5px;} .news .right .item .e .d{font-size: 24px;} .news .right .item .e .title a{font-size:16px;} .news .right .item .e .my{font-weight:400;padding:5px 0;} }