/** * @description: 清除浮动 * @Author: * @param {type} * @return: */ /** * @description: 响应式图片 * @Author: * @param {type} * @return: */ /** * @description: 横向排列,垂直居中布局 * @Author: * @param {type} * @return: */ /** * @description: 单行文本超出隐藏 * @Author: * @param {type} * @return: */ /** * @description: 多行文本超出隐藏 * @Author: * @param {Number} num 最多要显示几行 * @return: */ /** * @description: flex 垂直居中布局 * @Author: * @param {String} cposition 水平排列方式 * @return: */ /** * @description: 设置元素尺寸 * @Author: * @param {Number} w 宽度 * @param {Number} h 高度 * @return: */ /** * @description: 2x的雪碧图缩放 * @Author: * @param {Number} spriteW 雪碧图原始宽度 * @param {Number} spriteH 雪碧图原始高度 * @param {Number} bgOffsetX 背景定位原始X轴偏移量 * @param {Number} bgOffsetY 背景定位原始Y轴偏移量 * @return: */ /** * @description: 设置字体 * @Author: * @param {type} * @return: */ /** * @description: 修改滚动条样式 * @Author: * @param {String} scrollW 滚动条宽度 * @param {String} scrollC 滚动条背景色 * @param {String} trackP 滑块背景色 * @return: */ /** * @description: 设置背景图 * @Author: * @param {String} url 图片路径 * @return: */ /** * @description: 修改输入框占位符的字体颜色 * @Author: * @param {type} * @return: */ /** * @description: 禁止选中内容 * @Author: * @param {type} * @return: */ /** * @description: 鼠标移入图片放大效果 * @Author: * @param {type} * @return: */ /** * @description: 铺满整个容器的绝对定位 * @Author: * @param {type} * @return: */ /** * @description: 绝对定位水平垂直居中 * @Author: * @param {type} * @return: */ /** * @description: 统一容器,视项目不同,数值有所不同 * @Author: * @param {type} * @return: */ /** * @description: 替代flex的inline-block * @Author: * @param {type} * @return: */ /** * @description: 首页栏目标题样式 * @Author: * @param {type} * @return: */ /** * @description: 两端对齐辅助元素 * @Author: * @param {type} * @return: */ div.hyjc div.banner { height: auto; } div.construction-concept { padding: 0.6rem 0; } div.construction-concept .index-title1 { display: block; } div.construction-concept .construction-concept-explain { margin-top: 0.4rem; } div.construction-concept .construction-concept-explain, div.construction-concept .construction-concept-explain p { font-size: 0.32rem; color: #595959; line-height: 1.5; text-align: justify; } @media screen and (max-width: 1024px) { div.construction-concept .construction-concept-explain, div.construction-concept .construction-concept-explain p { font-size: 0.28rem; } } div.construction-concept .construction-concept-img { margin-top: 0.3rem; height: 6.65rem; overflow: hidden; } div.construction-concept .construction-concept-img img { width: 100%; height: auto; } @media screen and (max-width: 1024px) { div.construction-concept .construction-concept-img { height: 3.86rem; } } div.page-tab-list-s { padding: 0.45rem 0 0.35rem; border-top: 1px solid #E5E5E5; } @media screen and (max-width: 1024px) { div.page-tab-list-s { padding: 0.5rem 0 0.6rem; } } div.service { display: none; } div.service.active { display: block; } div.service div.service-list { min-height: 10.2rem; background: url('../images/danye/bg1.png') center center / cover no-repeat; text-align: center; padding-top: 1rem; } div.service div.service-list ul.list { padding-top: 0.57rem; font-size: 0; text-align: left; } @media screen and (max-width: 1024px) { div.service div.service-list ul.list { padding: 0 0.4rem; padding-top: 0.5rem; } } div.service div.service-list ul.list li.list-item { position: relative; display: inline-block; width: 5.84rem; height: 3.28rem; margin-right: 0.32rem; margin-bottom: 0.4rem; } @media screen and (max-width: 1024px) { div.service div.service-list ul.list li.list-item { margin-right: 0; width: 100%; height: auto; } } div.service div.service-list ul.list li.list-item:nth-child(2n) { margin-right: 0; } div.service div.service-list ul.list li.list-item div.item-img img { display: block; max-width: 100%; height: auto; width: 100%; } div.service div.service-list ul.list li.list-item div.shadow-bg { padding-top: 0.2rem; opacity: 0; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; background-color: rgba(40, 78, 133, 0.6); } div.service div.service-list ul.list li.list-item div.shadow-bg div.nav-icon { margin: 0 auto; width: 1.4rem; height: 1.35rem; } @media screen and (max-width: 1024px) { div.service div.service-list ul.list li.list-item div.shadow-bg div.nav-icon { width: 1.54rem; height: 1.485rem; } } div.service div.service-list ul.list li.list-item div.shadow-bg div.nav-icon.icon-1 { background: url('../images/danye/smart1-nav-icon1.png') center center / cover no-repeat; } div.service div.service-list ul.list li.list-item div.shadow-bg div.nav-icon.icon-2 { background: url('../images/danye/smart1-nav-icon2.png') center center / cover no-repeat; } div.service div.service-list ul.list li.list-item div.shadow-bg div.nav-icon.icon-3 { background: url('../images/danye/smart1-nav-icon3.png') center center / cover no-repeat; } div.service div.service-list ul.list li.list-item div.shadow-bg div.nav-icon.icon-4 { background: url('../images/danye/smart1-nav-icon4.png') center center / cover no-repeat; } div.service div.service-list ul.list li.list-item div.shadow-bg h1.nav-name { margin-top: 0.06rem; font-size: 0.3rem; font-family: Microsoft YaHei; font-weight: 600; line-height: 0.4rem; color: #ffffff; text-align: center; letter-spacing: 2px; } @media screen and (max-width: 1024px) { div.service div.service-list ul.list li.list-item div.shadow-bg h1.nav-name { font-size: 0.34rem; line-height: 0.48rem; } } div.service div.service-list ul.list li.list-item div.shadow-bg div.text-content { width: 4.8rem; margin: 0 auto; margin-top: 0.2rem; } @media screen and (max-width: 1024px) { div.service div.service-list ul.list li.list-item div.shadow-bg div.text-content { width: 95%; text-align: center; } } div.service div.service-list ul.list li.list-item div.shadow-bg div.text-content p { font-size: 0.24rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.31rem; color: #ffffff; margin-bottom: 0.16rem; } div.service div.service-list ul.list li.list-item div.shadow-bg div.text-content p:nth-child(2n) { text-align: right; } @media screen and (max-width: 1024px) { div.service div.service-list ul.list li.list-item div.shadow-bg div.text-content p { font-size: 0.3rem; line-height: 1.2; margin-right: 0 !important; width: 100%; margin-bottom: 0.3rem; } } @media screen and (max-width: 1460px) { } div.service div.service-list ul.list li.list-item div.shadow-bg div.text-content p:nth-child(2n) { margin-right: 0; } div.service div.service-list ul.list li.list-item:hover div.shadow-bg { opacity: 1; } div.service div.business-list { text-align: center; min-height: 7.45rem; padding-top: 1rem; background: url('../images/danye/bg1.png') center center / cover no-repeat; } @media screen and (max-width: 1024px) { div.service div.business-list { padding-top: 0.5rem; min-height: 8.2rem; } } div.service div.business-list .business-list-content { margin-top: 0.8rem; display: flex; justify-content: space-between; } @media screen and (max-width: 1024px) { div.service div.business-list .business-list-content { flex-wrap: wrap; } } div.service div.business-list .business-list-content .left-title { width: 1.65rem; } div.service div.business-list .business-list-content .left-title li { display: block; height: 0.6rem; background-color: #003B90; line-height: 0.6rem; text-align: center; font-size: 0.2rem; color: #FFFFFF; margin-top: 0.3rem; cursor: pointer; position: relative; } div.service div.business-list .business-list-content .left-title li:first-child { margin-top: 0; } div.service div.business-list .business-list-content .left-title li:after { content: ''; width: 0.08rem; height: 0.08rem; border: 1px solid #003B90; border-radius: 50%; position: absolute; right: -0.2rem; top: 50%; transform: translateY(-50%); transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; } @media screen and (max-width: 1024px) { div.service div.business-list .business-list-content .left-title { width: 100%; display: flex; justify-content: space-between; } div.service div.business-list .business-list-content .left-title li { width: 18%; height: 0.7rem; line-height: 0.7rem; font-size: 0.28rem; margin-top: 0; } div.service div.business-list .business-list-content .left-title li:after { right: 0; left: 50%; transform: translateX(-50%); top: 125%; } } div.service div.business-list .business-list-content .right-content { width: calc(100% - 1.85rem); } div.service div.business-list .business-list-content .right-content li { display: none; position: relative; } div.service div.business-list .business-list-content .right-content li .title { margin-top: 0.12rem; font-size: 0.24rem; color: #003B90; } div.service div.business-list .business-list-content .right-content li .title .line { display: inline-block; height: 1px; background-color: #003B90; vertical-align: top; margin-top: 0.17rem; } @media screen and (max-width: 1024px) { div.service div.business-list .business-list-content .right-content li .title .line { display: none; } } div.service div.business-list .business-list-content .right-content li .title i { display: inline-block; width: 0.1rem; height: 0.1rem; border: 1px solid #003B90; border-radius: 50%; vertical-align: top; margin-top: 0.135rem; } div.service div.business-list .business-list-content .right-content li .title p { display: inline-block; width: calc(100% - 1.7rem); margin-left: 0.1rem; text-align: left; } div.service div.business-list .business-list-content .right-content li .content { width: 9.4rem; height: 3.65rem; margin-top: 0.15rem; margin-left: 0.75rem; position: relative; } div.service div.business-list .business-list-content .right-content li .content img { max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } div.service div.business-list .business-list-content .right-content li:first-child .title .line { width: 1.5rem; left: -0.75rem; } div.service div.business-list .business-list-content .right-content li:not(:first-child) .title { padding-left: 0.18rem; } div.service div.business-list .business-list-content .right-content li:not(:first-child) .title .line { width: 1.15rem; } div.service div.business-list .business-list-content .right-content li:not(:first-child) .title .line:after { content: ''; width: 1px; background-color: #003B90; position: absolute; left: 0.35rem; } div.service div.business-list .business-list-content .right-content li:not(:first-child) .title .line:before { content: ''; width: 0.35rem; height: 1px; background-color: #003B90; position: absolute; left: 0; } div.service div.business-list .business-list-content .right-content li:nth-child(2) .title .line:after { height: 0.92rem; } div.service div.business-list .business-list-content .right-content li:nth-child(2) .title .line:before { top: 1.08rem; } div.service div.business-list .business-list-content .right-content li:nth-child(3) .title .line:after { height: 1.82rem; } div.service div.business-list .business-list-content .right-content li:nth-child(3) .title .line:before { top: 1.98rem; } div.service div.business-list .business-list-content .right-content li:nth-child(4) .title .line:after { height: 2.72rem; } div.service div.business-list .business-list-content .right-content li:nth-child(4) .title .line:before { top: 2.88rem; } div.service div.business-list .business-list-content .right-content li:last-child .title .line:after { height: 3.62rem; } div.service div.business-list .business-list-content .right-content li:last-child .title .line:before { top: 3.78rem; } @media screen and (max-width: 1024px) { div.service div.business-list .business-list-content .right-content { width: 100%; } div.service div.business-list .business-list-content .right-content li .title { font-size: 0.28rem; margin-top: 0.6rem; } div.service div.business-list .business-list-content .right-content li .title p { width: calc(100% - 0.2rem); } div.service div.business-list .business-list-content .right-content li .content { width: 100%; margin-left: 0; } } div.service div.safe-list { text-align: center; min-height: 7.45rem; padding-top: 1rem; background: url('../images/danye/bg1.png') center center / cover no-repeat; } @media screen and (max-width: 1024px) { div.service div.safe-list { padding-top: 0.5rem; } } div.service div.safe-list ul.list { padding-top: 0.49rem; font-size: 0; text-align: left; } @media screen and (max-width: 1024px) { div.service div.safe-list ul.list { padding: 0 0.4rem; padding-top: 0.5rem; } } div.service div.safe-list ul.list li.list-item { display: inline-block; width: 3.79rem; margin-right: 0.31rem; } @media screen and (max-width: 1024px) { div.service div.safe-list ul.list li.list-item { margin-right: 0; width: 100%; margin-bottom: 0.3rem; } } div.service div.safe-list ul.list li.list-item:nth-child(3n) { margin-right: 0; } div.service div.safe-list ul.list li.list-item div.item-img { height: 2.13rem; overflow: hidden; } @media screen and (max-width: 1024px) { div.service div.safe-list ul.list li.list-item div.item-img { height: auto; } } div.service div.safe-list ul.list li.list-item div.item-img:hover img { transform: scale(1.2); transition: transform 0.2s; } div.service div.safe-list ul.list li.list-item div.item-img img { display: block; max-width: 100%; height: auto; transition: transform 0.2s; } @media screen and (max-width: 1024px) { div.service div.safe-list ul.list li.list-item div.item-img img { width: 100%; } } div.service div.safe-list ul.list li.list-item div.item-desc { padding-top: 0.18rem; padding-bottom: 0.3rem; background-color: #fff; letter-spacing: 0.02rem; } div.service div.safe-list ul.list li.list-item div.item-desc h1.title { color: #336cba; text-align: center; margin-bottom: 0.25rem; font-size: 0.36rem; font-family: Microsoft YaHei; font-weight: 600; line-height: 0.48rem; } div.service div.safe-list ul.list li.list-item div.item-desc p { text-align: center; font-size: 0.22rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.34rem; color: #333333; } @media screen and (max-width: 1024px) { div.service div.safe-list ul.list li.list-item div.item-desc p { font-size: 0.28rem; line-height: 0.36rem; } } div.core-skill .skill-list .right-list { position: relative; } div.core-skill .skill-list .right-list .list { position: absolute; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 1024px) { div.core-skill .skill-list .right-list { position: static; } div.core-skill .skill-list .right-list .list { position: static; top: auto; transform: translateY(0); } } div.works-case { min-height: 6.43rem; background: url('../images/danye/border-bg.PNG') center center / cover no-repeat; padding-top: 0.69rem; } @media screen and (max-width: 1024px) { div.works-case { min-height: inherit; padding-bottom: 0.69rem; } } div.works-list div.swiper-container { margin-top: 0.98rem; height: 3.41rem; } @media screen and (max-width: 1024px) { div.works-list div.swiper-container { margin-top: 0.6rem; } } div.works-list div.swiper-container.key { display: none; } div.works-list div.swiper-container.key.active { display: block; } div.works-list div.swiper-container div.swiper-slide div.img-wrapper { position: relative; width: 3.86rem; height: 2.89rem; } @media screen and (max-width: 1024px) { div.works-list div.swiper-container div.swiper-slide div.img-wrapper { width: 95%; height: 2.44rem; } } div.works-list div.swiper-container div.swiper-slide div.img-wrapper h1.img-title { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; bottom: 0; left: 0; right: 0; height: 0.63rem; font-size: 0.22rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.63rem; text-align: center; color: #ffffff; letter-spacing: 1px; background-color: rgba(0, 0, 0, 0.6); background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000000)); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); } @media screen and (max-width: 1024px) { div.works-list div.swiper-container div.swiper-slide div.img-wrapper h1.img-title { font-size: 0.24rem; } } div.works-list div.swiper-container div.swiper-slide div.img-wrapper img { display: block; max-width: 100%; height: auto; } @media screen and (max-width: 1024px) { div.works-list div.swiper-container div.swiper-slide div.img-wrapper img { width: 95%; margin: 0 auto; } }