/* 头部 */ .header{ height: 85px; background-color: #FFFFFF; box-shadow: 0 0 8px rgba(28,72,157,.1); position: fixed; left: 0; top: 0; z-index: 999; } .head{ display: flex; align-items: center; } /* logo */ .logo{ display: flex; align-items: center; width: 190px; height: 85px; } .logo img{ height: 60px; } .logo>ins{ font-family: 'SourceHanSansSC-Medium'; color: #1d2088; margin-left: 10px; } .logo span{ display: block; font-size: 28px; line-height: 1.5; } .logo em{ display: block; font-size: 13px; line-height: 1.5; } /* 导航 */ .nav{ display: flex; justify-content: flex-end; align-items: center; width: calc(100% - 405px); padding: 0 4px; } .nav>a{ margin: 0 25px; font-size: 17px; line-height: 5; transition: all .6s; } .nav>a.active{ color: #1c489d; font-weight: bold; transition: all .6s; } .nav>a:hover{ color: #1c489d; transition: all .6s; } /* 搜索 */ .search{ display: flex; align-items: center; width: 215px; height: 38px; border: 1px solid #c2d2e5; border-radius: 19px; } .search>input{ width: calc(100% - 47px); border: 0; background: none; padding: 0 14px; font-size: 14px; line-height: 36px; opacity: .8; } .search>span{ display: flex; justify-content: center; align-items: center; width: 47px; height: 37px; background-color: #1c489d; border-radius: 18px; } .search>span img{ width: 19px; } /* 手机端导航按钮 */ .head .head-btn{ display: none; width: 20px; float: right; position: relative; cursor: pointer; margin-top: 5px; z-index: 999;} .head .head-btn i{ display: block; width: 100%; height: 2px; float: left; background-color: #0094da; border-radius: 50px; transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; } .head .head-btn i.bar-top{ margin-top: 0;} .head .head-btn i.bar-cen{ margin-top: 5px;} .head .head-btn i.bar-bom{ margin-top: 5px;} .head .head-btn.cur i{background-color: #0094da;} .head .head-btn.cur i.bar-cen{ opacity: 0;} .head .head-btn.cur i.bar-top{ -webkit-transform:rotate(45deg) translate(5px, 5px);transform:rotate(45deg) translate(5px, 5px);} .head .head-btn.cur i.bar-bom{ -webkit-transform: rotate(-45deg) translate(5px, -5px);transform: rotate(-45deg) translate(5px, -5px);} /* 轮播样式 */ .banner-swiper { height: 760px; position: relative; background-color: #FFFFFF; margin-top: 80px; overflow: hidden; } .banner-swiper .swiper-slide { display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; } .banner-title{ position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%,-50%); } .banner-title>span{ display: block; font-family: 'sourcehansansSC-Bold'; font-size: 32px; color: #1c489d; line-height: 1.5; } .banner-title>span em{ font-family: 'SourceHanSansSC-Heavy'; font-size: 68px; line-height: 1.4; margin-right: 15px; color: #00a0e9; } .banner-title>ins{ display: block; font-family: 'SourceHanSansSC-Heavy'; font-size: 42px; line-height: 1.5; color: #1c489d; } /* 分页器 */ .banner-swiper>.swiper-pagination-bullets{ bottom: 14px; } .banner-swiper .swiper-pagination-bullet { width: 31px; height: 3px; background-color: #1c489d; border-radius: 0; margin: 0 5px; opacity: 1; } .banner-swiper .swiper-pagination-bullet-active{ background-color: #00a0e9; } /* 产品中心 */ .index-title h2{ font-size: 36px; line-height: 1.2; margin-bottom: 5px; text-align: center; } .index-title span{ font-family: 'sourcehansansSC-Bold'; display: flex; justify-content: center; align-items: center; font-size: 26px; line-height: 1.5; margin-top: 2px; color: #1c489d; } .index-title.pull-title span{ font-size: 20px; margin-top: 8px; } .index-title span>ins{ width: 5px; height: 5px; background-color: #1c489d; border-radius: 100%; margin: 0 8px; } .index-product-bg{ padding-top: 50px; } .index-product-item{ display: flex; align-items: center; margin-top: 40px; } .index-product-item li{ width: 25%; text-align: center; cursor: pointer; } .index-product-item li>span{ display: block; width: 78px; height: 78px; margin: 0 auto; overflow: hidden; } .index-product-item li img:nth-of-type(1){ height: 78px; opacity: 1; transition: all .6s; } .index-product-item li img:nth-of-type(2){ height: 78px; opacity: 0; transition: all .6s; } .index-product-item li p{ font-size: 18px; line-height: 1.5; font-weight: bold; margin: 15px 0; transition: all .6s; } .index-product-item li.active img:nth-of-type(1), .index-product-item li:hover img:nth-of-type(1){ margin-top: -78px; opacity: 0; transform: rotateY(360deg); transition: all .6s; } .index-product-item li.active img:nth-of-type(2), .index-product-item li:hover img:nth-of-type(2){ opacity: 1; transform: rotateY(360deg); transition: all .6s; } .index-product-item li.active p, .index-product-item li:hover p{ color: #00a0e9; transition: all .6s; } .index-product-item li ins{ display: block; width: 32px; height: 20px; margin: 0 auto; border-left: 16px solid rgba(31,86,168,0); border-right: 16px solid rgba(31,86,168,0); border-top: 10px solid rgba(31,86,168,0); border-bottom: 10px solid rgba(31,86,168,1); opacity: 0; } .index-product-item li.active ins{ opacity: 1; transition: all .6s; } .index-product-list li{ display: none; } .index-product-list li.cur{ display: block; position: relative; } .index-product-list li>img{ width: 100%; } .index-product-txt{ display: flex; justify-content: space-between; padding-top: 90px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .index-product-txt .left{ width: 52%; color: #FFFFFF; } .index-product-txt .left h3{ font-size: 36px; line-height: 1.5; } .index-product-txt .left ins{ display: block; width: 36px; height: 3px; background-color: #FFFFFF; opacity: .3; margin: 26px 0; } .index-product-txt .left p{ font-size: 15px; line-height: 2; } .index-product-txt .left a{ display: flex; align-items: center; font-size: 14px; line-height: 1.5; color: #FFFFFF; margin-top: 45px; opacity: .5; } .index-product-txt .left a>em{ width: 21px; height: 21px; margin-left: 8px; border: 1px solid #FFFFFF; border-radius: 100%; font-size: 16px; line-height: 18px; text-align: center; } .index-product-txt .right{ width: 42.18%; max-height: 289px; margin-top: 10px; overflow: hidden; } .index-product-txt .right img{ width: 100%; min-height: 100%; } /* 解决方案 */ .index-case-bg{ padding: 65px 0 70px; background-image: url(../images/case-bg.jpg); background-size: cover; } .index-case{ display: flex; align-items: center; margin-top: 64px; } .index-case li{ width: calc(33.33% - 23px); padding: 25px; margin-right: 34.5px; background-color: #FFFFFF; } .index-case li:nth-child(3n){ margin-right: 0; } .index-case li span{ font-family: impact; display: block; font-size: 42px; line-height: 1.2; color: #1c489d; transition: all .6s; } .index-case li ins{ display: block; width: 25px; height: 3px; background-color: #1c489d; margin: 14px 0 28px; transition: all .6s; } .index-case li h3{ font-size: 20px; line-height: 1.4; } .index-case li p{ font-size: 14px; line-height: 1.9; text-align: justify; margin: 20px 0 30px; opacity: .9; } .index-case li em{ display: block; width: 72px; height: 83px; overflow: hidden; } .index-case li em>img:nth-of-type(1){ height: 83px; opacity: 1; transition: all .6s; } .index-case li em>img:nth-of-type(2){ height: 83px; opacity: 0; transition: all .6s; } .index-case li:hover span{ color: #00a0e9; transition: all .6s; } .index-case li:hover ins{ background-color: #00a0e9; transition: all .6s; } .index-case li:hover em>img:nth-of-type(1){ transform: rotateY(360deg); margin-top: -83px; opacity: 0; transition: all .6s; } .index-case li:hover em>img:nth-of-type(2){ transform: rotateY(360deg); opacity: 1; transition: all .6s; } /* 运维服务 */ .index-service-bg{ padding: 65px 0 0; } .index-service{ display: flex; align-items: center; margin-top: 64px; } .index-service li{ width: calc(25% - 15px); margin-right: 20px; position: relative; } .index-service li:nth-of-type(4n){ margin-right: 0; } .index-service-txt{ width: 100%; height: 60px; position: absolute; left: 0; bottom: 0; transition: all .6s; } .index-service-txt>span{ display: block; width: 106px; height: 0; opacity: 0; overflow: hidden; transition: all .6s; } .index-service-txt>span img{ max-width: 90%; width: 0; height: 0; } .index-service-txt h3{ font-size: 20px; line-height: 1.5; text-align: center; color: #FFFFFF; } .index-service li:hover .index-service-txt{ height: 100%; background-color: rgba(0,166,233,.5); transition: all .6s; } .index-service li:hover .index-service-txt>span{ display: flex; justify-content: center; align-items: center; height: 121px; margin: 87px auto 20px; background-image: url(../images/icon-dbx.png); background-size: 106px 121px; opacity: 1; transition: all .6s; } .index-service li:hover .index-service-txt>span img{ width: auto; height: auto; } /* 我们的客户 */ .my-customer-bg{ padding: 65px 0 100px; background-image: url(../images/customer-bg.jpg); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; } .my-customer{ display: flex; flex-wrap: wrap; margin-top: 30px; } .my-customer li{ display: flex; justify-content: center; align-items: center; width: calc(14.285% - 13.5px); background-color: #FFFFFF; margin: 15px 15.75px 0 0; border: 1px solid #ebebeb; } .my-customer li:nth-of-type(7n){ margin-right: 0; } .my-customer li img{ max-width: 96%; transition: all .6s; } .my-customer li:hover img{ transform: rotateX(360deg); transition: all .6s; } /* 尾部 */ .foot{ display: flex; background-image: url(../images/foot-bg.jpg); background-size: cover; } .bottom-nav{ display: flex; width: 56.25%; padding: 40px 0 40px calc(56.25% - 760px); } .bottom-nav li{ width: 25%; } .bottom-nav li>span{ display: block; font-size: 16px; line-height: 1.8; color: #FFFFFF; margin-bottom: 10px; } .bottom-nav li>a{ display: block; font-size: 14px; line-height: 2.5; color: #FFFFFF; opacity: .7; } .bottom-cantact{ width: 43.75%; padding: 40px calc(43.75% - 520px) 40px 50px; background-color: rgba(0,0,0,.12); } .bottom-cantact p, .bottom-cantact a{ font-size: 14px; line-height: 2.5; color: rgba(255,255,255,.77); } .copyright-bg{ background-color: #0a1b3d; }.copyright{ display: flex; justify-content: space-between; align-items: center; height: 68px; } .copyright p, .copyright span, .copyright a{ font-size: 14px; color: rgba(255,255,255,.3); } /* 产品中心页面 */ /* banner */ .pull-banner{ margin-top: 85px; position: relative; } .pull-banner img{ width: 100%; } .pull-banner-title{ font-family: 'SourceHanSansSC-Heavy'; text-align: center; color: #FFFFFF; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .pull-banner-title h2{ font-size: 42px; line-height: 1.4; } .pull-banner-title p{ font-size: 28px; line-height: 2.2; } /* 当前位置 */ .pull-current-bg{ border-bottom: 1px solid #eee; } .pull-current{ display: flex; justify-content: space-between; align-items: center; height: 66px; } .point{ display: flex; align-items: center; } .point>img{ height: 19px; margin-right: 10px; } .point p, .point p>a{ font-size: 14px; line-height: 1.5; color: #7c7c7c; } .nav-item-swiper .swiper-slide{ width: auto; margin-right: 5px; margin-left: 0; } .nav-item-swiper .swiper-slide a{ display: block; padding: 0 35px; line-height: 66px; } .nav-item-swiper .swiper-slide a.active, .nav-item-swiper .swiper-slide a:hover{ padding: 0 35px !important; background-color: #1c489d; color: #FFFFFF; } .nav-item-swiper .swiper-slide:last-child a{ padding-right: 0; margin-right: 0; } /* 标题 */ .product-title{ font-size: 36px; line-height: 1.2; font-weight: bold; text-align: center; } /* 介绍 */ .product-introduce-bg{ padding: 40px 0; position: relative; } .product-introduce-txt{ margin-top: 25px; } .product-introduce-txt p{ font-size: 16px; line-height: 2; text-align: center; color: #262626; } .product-introduce-txt img{ max-width: 100%; margin: 35px auto 0; } .side-left{ width: 120px; position: absolute; left: 50%; top: 27px; margin-left: -790px; } .side-left a{ display: flex; justify-content: center; line-height: 52px; margin-top: 7px; background-color: #eeeeee; font-size: 16px; color: #262626; transition: all .6s; } .side-left a.active, .side-left a:hover{ background-color: #00a0e9; color: #FFFFFF; transition: all .6s; } /* 特点 */ .product-characteristic-bg{ padding: 40px 0; background-image: url(../images/product-characteristic-bg.jpg); background-size: cover; } .characteristic-list{ display: flex; align-items: center; flex-wrap: wrap; } .characteristic-list li{ width: 32%; margin: 2% 2% 0 0; background-color: #FFFFFF; padding: 30px 20px; color: #262626; text-align: center; } .characteristic-list li:nth-of-type(3n){ margin-right: 0; } .characteristic-list li>span{ display: flex; justify-content: center; align-items: center; width: 100%; height: 65px; text-align: center; } .characteristic-list li>span img{ max-height: 65px; transition: all .6s; transition: all .6s; } .characteristic-list li h3{ font-size: 22px; line-height: 1.5; margin: 15px; } .characteristic-list li p{ font-size: 14px; line-height: 1.7; opacity: .9; } .characteristic-list li:hover>span img{ transform: rotateY(360deg); transition: all .6s; } .characteristic-list li:hover h3{ color: #1c489d; transition: all .6s; } /* 场景 */ .product-scene-bg{ padding: 40px 0; } .scene-list{ margin-top: 35px; } .scene-list li{ margin-bottom: 11px; } .scene-list li h3{ display: flex; justify-content: space-between; align-items: center; padding: 0 20px 0 32px; font-size: 18px; line-height: 52px; background-color: #f2f2f2; color: #262626; cursor: pointer; transition: all .6s; } .scene-list li h3>ins{ display: block; width: 18px; height: 11px; background-image: url(../images/arrow-down.png); background-repeat: no-repeat; background-size: 18px 11px; transition: all .6s; } .product-scene-txt{ display: none; height: 0; overflow: hidden; transition: all .6s; } .product-scene-txt .txt{ font-size: 15px; line-height: 2; color: #262626; } .product-scene-txt .txt strong{ display: block; line-height: 1.5; font-size: 18px; } .product-scene-txt .img{ max-width: 55%; } .product-scene-txt .img img{ width: 100%; } .scene-list li.active h3, .scene-list li:hover h3{ background-color: #1c489d; color: #FFFFFF; transition: aall .6s; } .scene-list li.active ins{ -webkit-filter: invert(100%) grayscale(100%) brightness(1000%); -moz-filter: invert(100%) grayscale(100%) brightness(1000%); -ms-filter: invert(100%) grayscale(100%) brightness(1000%); -o-filter: invert(100%) grayscale(100%) brightness(1000%); filter: invert(100%) grayscale(100%) brightness(1000%); transform: rotateX(180deg); transition: all .6s; } .scene-list li:hover ins{ -webkit-filter: invert(100%) grayscale(100%) brightness(1000%); -moz-filter: invert(100%) grayscale(100%) brightness(1000%); -ms-filter: invert(100%) grayscale(100%) brightness(1000%); -o-filter: invert(100%) grayscale(100%) brightness(1000%); filter: invert(100%) grayscale(100%) brightness(1000%); transition: all .6s; } .product-scene-txt.cur{ display: flex; justify-content: space-between; height: auto; padding: 32px; border: 1px solid #c0cce4; transition: all .6s; } /* 案例 */ .product-case-bg{ padding: 40px 0; background-image: url(../images/product-case-bg.jpg); background-size: cover; } .case-list-bg{ position: relative; padding-bottom: 60px; margin-top: 35px; overflow: hidden; } .product-case-swiper{ overflow: hidden; } .product-case-swiper .swiper-slide{ padding: 20px; background-color: #FFFFFF; } .product-case-swiper .swiper-slide h3{ font-size: 20px; color: #1c489d; line-height: 1.5; padding-bottom: 10px; border-bottom: 1px solid #ededed; } .case-txt{ font-size: 14px; color: #262626; line-height: 1.9; height: 100px; overflow: hidden; transition: all .6s; } .case-txt.open{ height: auto; transition: all .6s; } .case-txt strong{ display: block; margin-top: 20px; } .case-btns{ display: flex; align-items: center; justify-content: center; margin: 26px auto 6px; width: 130px; height: 44px; border-radius: 22px; border: 1px solid #1c489d; color: #1c489d; cursor: pointer; transition: all .6s; } .case-btns:hover{ background-color: #1c489d; color: #FFFFFF; transition: all .6s; } .case-list-bg .swiper-pagination{ left: 50%; bottom: 0; transform: translateX(-50%); } .case-list-bg .swiper-pagination .swiper-pagination-bullet{ width: 11px; height: 11px; background-color: #1c489d; margin: 0 4px; opacity: 1; } .case-list-bg .swiper-pagination .swiper-pagination-bullet-active{ background-color: #00a0e9; } .case-list-bg .swiper-button-prev{ width: 52px; height: 52px; background-color: #dbdbdb; background-image: url(../images/arrow-left.png); background-repeat: no-repeat; background-size: 15px 23px; background-position: center; margin-bottom: 0; left: 0; margin-top: -56px; } .case-list-bg .swiper-button-next{ width: 52px; height: 52px; background-color: #dbdbdb; background-image: url(../images/arrow-right.png); background-repeat: no-repeat; background-size: 15px 23px; background-position: center; margin-bottom: 0; left: auto; right: 0; margin-top: -56px; } /* 关于我们 */ /* 简介 */ .about-bg{ padding: 65px 0; } .about{ display: flex; justify-content: space-between; align-items: center; } .about-txt{ max-width: 45%; } .about-txt>strong{ display: block; font-size: 24px; line-height: 1.5; color: #262626; margin-bottom: 6px; } .about-txt>h3{ font-size: 32px; line-height: 1.5; color: #1c489d; margin-bottom: 18px; } .about-txt>p{ font-size: 15px; line-height: 2.15; text-align: justify; color: #262626; } .about-img{ max-width: 52%; } .about-img img{ width: 100%; } /* 大事件 */ .memorabilia-bg{ background-image: url(../images/memorabilia-bg.jpg); background-size: cover; padding: 60px 0; } .memorabilia-thumbnail-bg{ height: 120px; margin-bottom: 50px; background-image: url(../images/memorabilia-item.png); background-repeat: repeat-x; background-position: center left; background-size: 12.8px auto; overflow: hidden; } .memorabilia-thumbnail-swiper .swiper-slide{ cursor: pointer; } .memorabilia-thumbnail-swiper .swiper-slide>span{ display: flex; justify-content: center; align-items: center; width: 26px; height: 26px; border-radius: 100%; background-color: rgba(115,115,115,.5); margin: 50px auto 22px; } .memorabilia-thumbnail-swiper .swiper-slide>span em{ width: 8px; height: 8px; background-color: #737373; border-radius: 100%; } .memorabilia-thumbnail-swiper .swiper-slide>p{ font-size: 16px; line-height: 1.5; color: #737373; text-align: center; } .memorabilia-thumbnail-swiper .swiper-slide-thumb-active>span{ background-color: rgba(28,72,157,.5); } .memorabilia-thumbnail-swiper .swiper-slide-thumb-active>span em{ background-color: #1c489d; } .memorabilia-thumbnail-swiper .swiper-slide-thumb-active>p{ color: #1c489d; font-weight: bold; } .memorabilia-swiper{ overflow: hidden; } .memorabilia-swiper .swiper-slide{ background-color: #FFFFFF; padding: 40px 38px; display: flex; justify-content: space-between; } .memorabilia-img{ width: 37.5%; height: 250px; overflow: hidden; } .memorabilia-img img{ width: 100%; min-height: 250px; transition: all .6s; } .memorabilia-swiper .swiper-slide:hover .memorabilia-img img{ transform: scale(1.2); transition: all .6s; } .memorabilia-txt{ width: 60%; } .memorabilia-txt h3{ font-size: 28px; line-height: 1.5; margin-top: 24px; color: #1c489d; } .memorabilia-txt ins{ display: block; width: 100px; height: 1px; background-color: #1c489d; margin: 14px 0; } .memorabilia-txt p{ font-size: 18px; line-height: 1.8; color: #262626; font-weight: bold; } .memorabilia-swiper .swiper-button-prev{ width: 55px; height: 52px; background-color: #00a0e9; background-image: url(../images/arrow-left.png); background-repeat: no-repeat; background-position: center; background-size: 15px 23px; left: auto; top: auto; right: 59px; bottom: 0; } .memorabilia-swiper .swiper-button-next{ width: 55px; height: 52px; background-color: #00a0e9; background-image: url(../images/arrow-right.png); background-repeat: no-repeat; background-position: center; background-size: 15px 23px; left: auto; top: auto; right: 0; bottom: 0; } .memorabilia-swiper .swiper-button-prev:hover, .memorabilia-swiper .swiper-button-next:hover{ background-color: #1c489d; } /* 加入我们 */ .join-bg{ display: flex; align-items: center; } .join-list{ display: flex; justify-content: flex-end; width: 42.1875%; background-image: url(../images/join-bg.jpg); background-size: cover; position: relative; } .join-thumbnail-bg{ width: 490px; padding: 58px 0 92px; } .join-title h2{ color: #FFFFFF; text-align: left; } .join-title span{ color: #FFFFFF; justify-content: flex-start; } .join-title span>ins{ background-color: #FFFFFF; } .join-thumbnail-swiper{ height: 511px; overflow: hidden; margin-top: 14px; } .join-thumbnail-swiper .swiper-slide{ display: flex; justify-content: space-between; align-items: center; height: 64px; cursor: pointer; } .join-thumbnail-swiper .swiper-slide p{ font-size: 18px; line-height: 1.5; color: #FFFFFF; } .join-thumbnail-swiper .swiper-slide:hover p{ font-weight: bold; } .join-thumbnail-swiper .swiper-slide img{ height: 11px; margin-right: 35px; } .join-thumbnail-swiper .swiper-slide-thumb-active p{ font-weight: bold; } .join-btns-bg{ display: flex; justify-content: flex-end; width: 100%; height: 58px; background-color: #00a0e9; position: absolute; left: 0; bottom: 0; z-index: 1; } .join-btns{ width: 490px; position: relative; } .join-btns .swiper-button-prev{ width: 33px; height: 15px; background-image: url(../images/arrow-prev.png); background-repeat: no-repeat; background-position: center; background-size: 33px 15px; left: 2px; top: auto; bottom: 16px; } .join-btns .swiper-button-next{ width: 33px; height: 15px; background-image: url(../images/arrow-next.png); background-repeat: no-repeat; background-position: center; background-size: 33px 15px; left: 77px; top: auto; bottom: 16px; } .join-content{ width: 57.8125%; } .join-swiper{ overflow: hidden; } .join-swiper .swiper-slide{ padding: 60px 65px; color: #262626; } .join-swiper .swiper-slide>h3{ font-size: 28px; line-height: 1.5; } .join-swiper .swiper-slide>p{ font-size: 15px; line-height: 2; } .join-swiper .swiper-slide>p strong{ display: block; margin-top: 20px; } .join-swiper .swiper-slide>h5{ font-size: 15px; line-height: 2; margin-top: 40px; } /* 联系我们 */ .contact-bg{ padding: 34px 0 74px; background-image: url(../images/contact-bg.jpg); background-size: cover; } .contact-list li{ display: flex; align-items: center; margin-top: 40px; } .contact-txt{ width: 38%; height: 360px; padding: 48px; background-color: #FFFFFF; } .contact-txt p{ font-size: 16px; color: #262626; line-height: 1.6; margin-top: 25px; } .contact-txt p>a{ color: #262626; } .contact-txt p:first-child{ margin-top: 0; } .contact-txt p img{ margin-bottom: 5px; } .contact-map{ width: 62%; height: 360px; } /* 云服务 */ .yfw-list li{ padding: 43px 0; } .yfw-section{ display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; } .yfw-list li:nth-of-type(even){ background-image: url(../images/yfw-bg.jpg); background-size: cover; } .yfw-list li:nth-of-type(even) .yfw-section{ flex-direction: row; } .yfw-txt{ width: 46%; color: #262626; } .yfw-txt strong{ display: block; font-size: 24px; line-height: 1.5; } .yfw-txt h3{ font-size: 32px; line-height: 1.5; color: #1c489d; margin: 10px 0 16px; } .yfw-txt p{ font-size: 15px; line-height: 2.1; } .yfw-img{ width: 48%; height: 342px; overflow: hidden; } .yfw-img img{ width: 100%; min-height: 342px; transition: all .6s; } .yfw-list li:hover .yfw-img img{ transform: scale(1.2); transition: all .6s; } /* 运维服务 */ .ywfw-content-bg{ padding: 40px 0 20px; } .ywfw-item{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 40px; } .ywfw-item li{ display: flex; align-items: center; width: 50%; height: 50px; background-color: #f1f1f1; margin-top: 2px; font-size: 16px; font-weight: bold; color: #262626; cursor: pointer; transition: all .6s; } .ywfw-item li.active, .ywfw-item li:hover{ background-color: #00a0e9; color: #FFFFFF; transition: all .6s; } .ywfw-item li>span{ width: 38px; line-height: 50px; margin-right: 15px; background-color: #1c489d; font-size: 18px; font-weight: bold; color: #FFFFFF; text-align: center; } .ywfw-list{ margin-top: 5px; } .ywfw-list li{ display: none; width: 100%; padding: 25px; background-color: #d9f1fc; } .ywfw-list li.cur{ display: flex; justify-content: space-between; align-items: center; } .ywfw-list .txt{ width: 65%; padding-left: 25px; font-size: 15px; line-height: 1.9; color: #262626; text-align: justify; } .ywfw-list .img{ width: 33%; height: 216px; overflow: hidden; } .ywfw-list .img>img{ width: 100%; min-height: 216px; overflow: hidden; transition: all .6s; } .ywfw-list .img:hover>img{ transform: scale(1.2); transition: all .6s; } /* 运维团队 */ .team-bg{ padding: 40px 0 70px; } .team{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 36px; } .team li{ width: 49%; padding: 40px; background-color: #f1f1f1; color: #262626; text-align: center; } .team li img{ height: 62px; margin: 0 auto; transition: all .6s; } .team li h3{ font-size: 20px; line-height: 1.5; margin: 16px 0 12px; transition: all .6s; } .team li p{ font-size: 14px; line-height: 2; } .team li:hover img{ transform: rotateY(360deg); transition: all .6s; } .team li:hover h3{ color: #1c489d; transition: all .6s; } /* SLA保障 */ .guarantee-bg{ padding: 50px 0 80px; background-image: url(../images/guarantee-bg.jpg); background-size: cover; } .guarantee-bg .index-title h2{ color: #FFFFFF; } .guarantee{ margin-top: 25px; } .guarantee li{ display: flex; justify-content: space-between; width: 100%; height: 52px; margin-top: 2px; font-size: 16px; color: #262626; line-height: 52px; text-align: center; font-weight: bold; } .guarantee li>span{ width: 25%; margin-left: 2px; background-color: #FFFFFF; } .guarantee li>span:first-child{ margin-left: 0; } .guarantee li:first-child{ margin-top: 0; margin-bottom: 3px; font-size: 14px; } /* 服务能力 */ .ability-bg{ padding: 50px 0; } .ability{ margin-top: 20px; padding-bottom: 50px; font-size: 16px; line-height: 1.7; font-weight: bold; color: #1c489d; text-align: center; border-bottom: 1px solid #e5e5e5; } /* 咨询服务 */ .zxfw-bg{ padding: 40px 0 70px; } .zxfw-list{ display: flex; align-items: center; margin-top: 35px; } .zxfw-list li{ width: 24.8%; height: 345px; margin-right: 20px; border-radius: 4px; overflow: hidden; position: relative; } .zxfw-list li:nth-of-type(4n){ margin-right: 0; } .zxfw-list li>img{ width: 100%; min-height: 345px; transition: all .6s; } .zxfw-txt{ width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .zxfw-txt>span{ display: flex; justify-content: center; align-items: center; width: 106px; height: 121px; margin: 0 auto 20px; background-image: url(../images/icon-dbx.png); background-repeat: no-repeat; background-size: 106px 121px; } .zxfw-txt>span img{ max-width: 90%; transition: all .6s; } .zxfw-txt h3{ font-size: 20px; line-height: 1.5; text-align: center; color: #FFFFFF; } .zxfw-list li:hover>img{ transform: scale(1.2); transition: all .6s; } .zxfw-list li:hover .zxfw-txt>span img{ transform: rotateY(360deg); transition: all .6s; } /* 创造价值 */ .create-bg{ padding: 50px 0 60px; background-image: url(../images/create-bg.jpg); background-size: cover; } .create-list{ display: flex; justify-content: space-around; margin-top: 40px; } .create-list li span{ display: block; width: 72px; height: 72px; margin: 0 auto 20px; overflow: hidden; } .create-list li span img:nth-of-type(1){ height: 72px; opacity: 1; transition: all .6s; } .create-list li span img:nth-of-type(2){ height: 72px; opacity: 0; transition: all .6s; } .create-list li h3{ font-size: 18px; color: #262626; line-height: 1.5; text-align: center; transition: all .6s; } .create-list li:hover span img:nth-of-type(1){ margin-top: -72px; opacity: 0; transform: rotateY(360deg); transition: all .6s; } .create-list li:hover span img:nth-of-type(2){ opacity: 1; transform: rotateY(360deg); transition: all .6s; } .create-list li:hover h3{ color: #00a0e9; transition: all .6s; } /* 解决方案 */ .solution-nav-item{ width: 100%; } .solution-nav-item .nav-item-swiper .swiper-wrapper{ justify-content: center; } .solution-nav-item .nav-item-swiper .swiper-slide:last-child a{ padding-right: 35px; } .advantage-img img{ max-width: 100%; margin: 0 auto; } .product-case-other .swiper-slide{ background-color: #f1f4f7; } .case-advantage{ padding: 20px; background-color: #fff; margin-top: 30px; } .case-advantage li{ display: flex; align-items: flex-start; width: 100%; padding: 24px 0; border-bottom: 1px solid #ededed; } .case-advantage li>em{ display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 100%; background-color: #20a6d2; margin-right: 8px; overflow: hidden; } .case-advantage li:nth-of-type(2)>em{ background-color: #67679a; } .case-advantage li:nth-of-type(3)>em{ background-color: #3366ff; } .case-advantage li:nth-of-type(4)>em{ background-color: #3366cc; } .case-advantage li:nth-of-type(5)>em{ background-color: #000099; } .case-advantage li>em img{ height: 21px; } .case-advantage li>section{ width: calc(100% - 44px); } .case-advantage li span{ display: block; font-size: 20px; line-height: 1.8; color: #1c489d; font-weight: bold; } .case-advantage li p{ font-size: 14px; line-height: 1.8; margin-top: 5px; } .characteristic-list-five{ align-items: flex-start; } .characteristic-list-five li{ padding: 30px 40px; } .characteristic-list-five li:nth-of-type(4), .characteristic-list-five li:nth-of-type(5){ width: 49%; } .characteristic-list-five li:last-child{ margin-right: 0; } .product-introduce-txt p>strong, .product-title-p>strong{ display: block; padding: 0 15%; word-break: break-all; } .characteristic-list-hvr li{ height: 260px; } .characteristic-list-hvr li>p{ padding: 0 5%; } .product-title-p{ font-size: 16px; line-height: 2; text-align: center; color: #262626; margin-top: 25px; } .product-introduce-secend{ border-top: 1px solid #eee; margin-top: 40px; padding-top: 40px; } .introduce-secend-txt p>strong{ padding: 0; text-align: left; font-weight: normal; } .introduce-secend-list{ display: flex; align-items: flex-start; height: 390px; margin: 30px auto; } .introduce-secend-list li{ width: calc(25% - 15px); height: 100%; margin-right: 20px; background-color: #1c869c; border-radius: 10px; padding: 9px; } .introduce-secend-list li:nth-of-type(2){ background-color: #019dda; } .introduce-secend-list li:nth-of-type(3){ background-color: #015697; } .introduce-secend-list li:nth-of-type(4){ margin-right: 0; background-color: #17406c; } .introduce-secend-list li>strong{ display: block; font-size: 24px; line-height: 2.8; color: #fff; text-align: center; border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 15px; } .introduce-secend-list li>p{ display: flex; align-items: flex-start; width: 100%; font-size: 14px; line-height: 2.5; padding: 0 9px; color: #fff; text-align: left; } .introduce-secend-list li>p em{ display: block; width: 5px; height: 5px; background-color: #fff; transform: rotateZ(45deg); margin: 15px 10px 0 0; } .introduce-secend-list li>p span{ display: block; width: calc(100% - 15px); } .function-list{ display: flex; flex-wrap: wrap; } .function-list li{ display: flex; justify-content: space-between; align-items: flex-start; width: calc(33.33% - 40px); margin-right: 60px; padding: 30px 0; } .function-list li:nth-of-type(3n){ margin-right: 0; } .function-list li>em{ display: flex; justify-content: center; align-items: center; width: 82px; height: 82px; border-radius: 10px; background-color: #767171; } .function-list li>em img{ margin: 0; } .function-list li>section{ width: calc(100% - 106px); } .function-list li>section strong{ display: block; font-size: 22px; line-height: 1.8; color: #767171; } .function-list li>section span{ display: block; font-size: 14px; line-height: 1.7; opacity: .9; } .function-list li:nth-of-type(2)>em{ background-color: #8497b0; } .function-list li:nth-of-type(3)>em{ background-color: #009dd9; } .function-list li:nth-of-type(4)>em{ background-color: #005696; } .function-list li:nth-of-type(5)>em{ background-color: #404040; } .function-list li:nth-of-type(6)>em{ background-color: #17406d; } .function-list li:nth-of-type(7)>em{ background-color: #1c489d; } .function-list li:nth-of-type(8)>em{ background-color: #1c869d; } .function-list li:nth-of-type(9)>em{ background-color: #10a2d2; } .function-list li:nth-of-type(2)>section strong{ color: #8497b0; } .function-list li:nth-of-type(3)>section strong{ color: #009dd9; } .function-list li:nth-of-type(4)>section strong{ color: #005696; } .function-list li:nth-of-type(5)>section strong{ color: #404040; } .function-list li:nth-of-type(6)>section strong{ color: #17406d; } .function-list li:nth-of-type(7)>section strong{ color: #1c489d; } .function-list li:nth-of-type(8)>section strong{ color: #1c869d; } .function-list li:nth-of-type(9)>section strong{ color: #10a2d2; } .introduce-txt-margin img{ margin: 0 auto; } /* 手机端 */ @media screen and (max-width:780px){ .w1280, .w1400{ width: 96%; } .banner-swiper{ height: 240px; } .banner-title>span{ font-size: 20px; text-align: center; } .banner-title>span em{ font-size: 28px; margin-right: 4px; } .banner-title>ins{ font-size: 23px; text-align: center; } .index-title h2{ font-size: 22px; } .index-title span{ font-size: 16px; } .index-product-bg{ padding-top: 30px; } .index-product-item{ margin-top: 20px; } .index-product-item li>span{ width: 46px; height: 46px; } .index-product-item li img:nth-of-type(1), .index-product-item li img:nth-of-type(2){ height: 46px; } .index-product-item li.active img:nth-of-type(1), .index-product-item li:hover img:nth-of-type(1){ margin-top: -46px; } .index-product-item li p{ display: flex; justify-content: center; align-items: center; height: 39px; font-size: 13px; margin-bottom: 3px; } .index-product-txt { flex-wrap: wrap; padding-top: 20px; } .index-product-txt .left{ width: 100%; } .index-product-list li>img{ width: auto; min-height: 100%; } .index-product-txt .left h3{ font-size: 20px; text-align: center; } .index-product-txt .left ins{ margin: 10px auto; } .index-product-txt .left p{ font-size: 14px; } .index-product-txt .left a{ margin-top: 10px; float: right; } .index-product-txt .right{ width: 100%; margin-top: 15px; } .index-case-bg{ padding: 30px 0; } .index-case { flex-wrap: wrap; margin-top: 10px; } .index-case li{ width: 100%; margin-right: 0; margin-top: 10px; padding: 15px; position: relative; } .index-case li em{ width: 44px; height: 50px; position: absolute; right: 15px; top: 15px; } .index-case li em>img:nth-of-type(1), .index-case li em>img:nth-of-type(2){ height: 50px; } .index-case li span{ font-size: 26px; } .index-case li ins{ margin: 10px 0; } .index-case li h3{ font-size: 16px; } .index-case li p{ margin: 8px 0; } .index-service-bg{ padding: 30px 0 0; } .index-service { flex-wrap: wrap; justify-content: space-between; margin-top: 10px; } .index-service li{ width: 49%; margin: 2% 2% 0 0; overflow: hidden; } .index-service li:nth-of-type(2n){ margin-right: 0; } .index-service li img{ width: 100%; } .my-customer-bg{ padding: 30px 0; } .my-customer{ margin-top: 10px; } .my-customer li{ width: 23.5%; margin: 2% 2% 0 0; } .my-customer li:nth-of-type(7n){ margin-right: 2%; } .my-customer li:nth-of-type(4n){ margin-right: 0; } .foot{ flex-wrap: wrap; } .bottom-nav{ width: 100%; padding: 15px 2%; flex-wrap: wrap; } .bottom-nav li{ display: flex; width: 100%; } .bottom-nav li>span{ font-size: 13px; } .bottom-nav li>a{ font-size: 13px; line-height: 2.2; margin-left: 8px; } .bottom-cantact{ width: 100%; padding: 10px 2%; } .bottom-cantact p{ margin: 8px 0; } .bottom-cantact p, .bottom-cantact a{ font-size: 13px; line-height: 1.6; } .bottom-cantact p>span{ color: #FFFFFF; } .copyright{ flex-wrap: wrap; padding: 10px 0; height: auto; } .copyright p, .copyright span, .copyright a{ font-size: 13px; line-height: 1.6; } .copyright span{ margin-top: 6px; } .pull-banner{ height: 240px; overflow: hidden; } .pull-banner img{ min-height: 240px; } .pull-banner-title h2{ font-size: 24px; } .pull-banner-title p{ font-size: 18px; } .pull-current{ flex-wrap: wrap-reverse; width: 100%; height: auto; } .point{ width: 100%; padding: 10px 2%; border-top: 1px solid #eee; } .point p, .point p>a{ font-size: 13px; } .point>img{ height: 14px; margin-right: 3px; } .nav-item-swiper .swiper-slide a{ padding: 0 15px !important; line-height: 44px; font-size: 14px; } .nav-item-swiper .swiper-slide a.active, .nav-item-swiper .swiper-slide a:hover{ padding: 0 15px !important; } .about-bg{ padding: 30px 0; } .about-txt>strong{ font-size: 16px; } .about-txt>h3{ font-size: 20px; margin-bottom: 10px; } .about{ flex-wrap: wrap; } .about-txt{ max-width: 100%; width: 100%; } .about-img{ max-width: 100%; width: 100%; margin-top: 10px; } .about-txt>p{ font-size: 14px; line-height: 2; } .memorabilia-bg{ padding: 30px 0; } .memorabilia-thumbnail-swiper .swiper-slide>p{ font-size: 15px; } .memorabilia-swiper .swiper-slide{ flex-wrap: wrap; padding: 15px 15px 40px; } .memorabilia-img{ width: 100%; height: 200px; } .memorabilia-img img{ min-height: 200px; } .memorabilia-txt{ width: 100%; } .memorabilia-txt h3{ font-size: 22px; margin-top: 10px; } .memorabilia-txt ins{ width: 75px; margin: 8px 0;; } .memorabilia-txt p{ font-size: 15px; } .memorabilia-swiper .swiper-button-prev{ width: 40px; height: 38px; right: 44px; } .memorabilia-swiper .swiper-button-next{ width: 40px; height: 38px; } .join-bg{ align-items: flex-start; } .join-list{ width: 32%; } .join-content{ width: 68%; } .join-swiper .swiper-slide>h3{ font-size: 20px; margin-bottom: 10px; } .join-swiper .swiper-slide{ padding: 10px; } .join-swiper .swiper-slide p{ font-size: 13px; line-height: 1.7; text-align: justify; } .join-swiper .swiper-slide p strong{ margin-top: 15px; } .join-swiper .swiper-slide h5{ font-size: 13px; margin-top: 15px; line-height: 1.7; } .index-title.pull-title span{ font-size: 14px; } .join-thumbnail-swiper .swiper-slide{ padding: 0 5px; } .join-thumbnail-swiper .swiper-slide p{ font-size: 13px; } .join-thumbnail-swiper .swiper-slide img{ margin-right: 0; height: 10px; } .join-thumbnail-bg .index-title{ padding: 0 5px; } .join-thumbnail-bg{ padding: 20px 0; } .join-thumbnail-bg .index-title h2{ font-size: 18px; } .join-thumbnail-bg .index-title span>ins{ width: 4px; height: 4px; margin: 0 3px; } .contact-list li{ flex-wrap: wrap; margin-top: 20px; } .contact-txt{ width: 100%; padding: 15px; height: auto; } .contact-txt p{ font-size: 14px; } .contact-map{ width: 100%; height: 260px; } .contact-bg{ padding: 10px 0 30px; } .zxfw-bg{ padding: 30px 0; } .zxfw-list{ flex-wrap: wrap; margin-top: 10px; } .zxfw-list li{ width: 49%; margin-right: 2%; } .zxfw-list li:nth-of-type(2n){ margin-right: 0; } .zxfw-list li{ height: 210px; margin-top: 2%; } .zxfw-list li>img{ min-height: 210px; } .zxfw-txt h3{ font-size: 16px; } .create-bg{ padding: 30px 0; } .create-list li{ width: 33.33%; } .create-list li h3{ font-size: 13px; } .create-list li span{ width: 60px; height: 60px; } .create-list li span img:nth-of-type(1), .create-list li span img:nth-of-type(2){ height: 60px; } .create-list li:hover span img:nth-of-type(1){ margin-top: -60px; } .yfw-section{ flex-wrap: wrap; } .yfw-list li{ padding: 15px 0; } .yfw-img{ width: 100%; height: 210px; margin-bottom: 10px; } .yfw-img img{ min-height: 210px; } .yfw-txt{ width: 100%; } .yfw-txt strong{ font-size: 16px; } .yfw-txt h3{ font-size: 20px; margin: 6px 0 10px; } .yfw-txt p{ font-size: 14px; line-height: 1.8; } .ywfw-content-bg{ padding: 30px 0 10px; } .ywfw-item{ margin-top: 15px; } .ywfw-item li{ width: 100%; height: 40px; font-size: 14px; } .ywfw-item li p{ width: 85%; display: -webkit-box; -webkit-line-clamp: 1; word-break: break-all; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; } .ywfw-item li>span{ font-size: 15px; line-height: 40px; } .ywfw-list li{ padding: 15px; flex-wrap: wrap-reverse; } .ywfw-list .txt{ width: 100%; padding: 0; font-size: 14px; line-height: 1.8; } .ywfw-list .img{ width: 100%; height: 175px; margin-bottom: 10px; } .ywfw-list .img>img{ min-height: 175px; } .team-bg{ padding: 30px 0; } .team { flex-wrap: wrap; margin-top: 5px; } .team li{ width: 100%; padding: 15px; margin-top: 15px; } .team li h3{ font-size: 16px; } .team li p{ font-size: 13px; line-height: 1.8; -webkit-line-clamp: 3; } .guarantee-bg{ padding: 30px 0; } .guarantee li{ height: 40px; line-height: 40px; font-size: 14px; } .guarantee li:first-child{ font-size: 13px; } .ability-bg{ padding: 30px 30px 0; } .ability{ font-size: 14px; line-height: 1.8; padding-bottom: 20px; } .nav-item{ width: 100%; } .product-introduce-bg{ padding: 30px 0;; } .product-title{ font-size: 22px; line-height: 1.6; } .product-introduce-txt{ margin-top: 10px; } .product-introduce-txt p{ font-size: 14px; text-align: left; } .product-introduce-txt img{ margin-top: 10px; } .characteristic-list{ align-items: flex-start; margin-top: 15px; } .characteristic-list li{ width: 49%; margin: 2% 2% 0 0; padding: 15px 10px; } .characteristic-list li:nth-of-type(3n){ margin: 2% 2% 0 0; } .characteristic-list li:nth-of-type(2n){ margin-right: 0; } .characteristic-list li h3{ font-size: 16px; margin: 8px 0 4px; } .characteristic-list li p{ text-align: justify; line-height: 1.8; word-break: break-all; } .product-scene-bg{ padding: 30px 0; } .scene-list li h3{ font-size: 14px; line-height: 40px; padding: 0 10px 0 15px; } .scene-list li h3>ins{ width: 14px; height: 9px; background-size: 14px 9px; } .product-scene-txt.cur{ flex-wrap: wrap; padding: 15px; } .product-scene-txt .txt{ width: 100%; font-size: 14px; } .product-scene-txt .txt strong{ font-size: 16px; } .product-scene-txt .img{ max-width: 100%; width: 100%; margin-top: 10px; } .product-case-bg{ padding: 30px 0; } .case-list-bg{ margin-top: 20px; } .product-case-swiper{ width: 85%; } .product-case-swiper .swiper-slide{ width: 100%; padding: 15px 10px; } .product-case-swiper .swiper-slide h3{ font-size: 17px; } .case-txt{ height: 158px; } .case-list-bg{ width: 100%; padding-bottom: 40px; } .case-txt strong{ font-size: 15px; } .case-btns{ height: 36px; } .case-list-bg .swiper-button-prev, .case-list-bg .swiper-button-next{ width: 24px; height: 52px; } /* 解决方案 */ .solution-nav-item .nav-swiper-left .swiper-wrapper{ justify-content: flex-start; } .characteristic-list-five li:last-child{ width: 100%; } .case-advantage li span{ font-size: 16px; } .product-title-p{ margin-top: 15px; } .product-introduce-txt p>strong, .product-title-p>strong{ padding: 0; font-size: 15px; } .characteristic-list-hvr li{ height: auto; } .function-list li{ width: 100%; margin-right: 0; padding: 20px 0; border-bottom: 1px dashed #eee; } .function-list li>section strong{ font-size: 18px; } .introduce-secend-list{ flex-wrap: wrap; height: auto; margin: 15px auto; } .introduce-secend-list li>strong{ font-size: 18px; } .introduce-secend-list li{ width: 100%; margin: 2% 0 0 0; } .introduce-secend-list li>p{ line-height: 2; } }