@charset "utf-8"; * { margin: 0px; padding: 0px; font-family: "微软雅黑", "Microsoft Yahei","Source Han Sans",PingFang SC, Arial; outline: none; -webkit-tap-highlight-color: transparent; } /* ============================= 网页宽度 开始 ============================= */ .public_width { width: 90%; max-width: 1680px; margin: auto; } .width1660 { max-width: 100%; /* min-width: 1660px; */ margin: 0px auto; } .width1440 { width: 1440px; margin: 0px auto; } .width1300 { width: 1300px; margin: 0px auto; } .width1200 { width: 1200px; margin: 0px auto; } .width840 { width: 840px; margin: 0px auto; } .width600 { width: 840px; margin: 0px auto; } .width320 { width: 320px; margin: 0px auto; } body { padding-top: 90px; } @media (max-width: 767px) { body { padding-top: 55px; } .mobileWidth100 { width: 100%; } .width1660 { max-width: 100%; min-width: 100%; margin: 0px auto; } .width1440 { width: 100%; padding-left: 4%; padding-right: 4%; } .width1300 { width: 100%; padding-left: 4%; padding-right: 4%; } .width1200 { width: 100%; padding-left: 4%; padding-right: 4%; } .width840 { width: 100%; } .width320 { width: 100%; } } @media(max-width:368px) { /* body { padding-top: 50px; } */ } /* ============================= 网页宽度 结束 ============================= */ /* 富文本 */ .richText { /* overflow: hidden; */ padding-top: 40px; padding-bottom: 50px; } .richText img { max-width: 100%; } /* 移动端 */ @media (max-width: 767px) { /* .richText { padding-bottom: 40px; } */ } /* 背景色 */ .bluebg { background: #F7FAFE; } /* ====== 限制文本行数 开始 ====== */ /* 文字一行，多余省略号 */ .clamp1 { white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } /* 文字多行，多余省略号 */ .clamp2, .clamp3, .clamp4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .clamp2 { -webkit-line-clamp: 2; } .clamp3 { -webkit-line-clamp: 3; } .clamp4 { -webkit-line-clamp: 4; } /* ====== 限制文本行数 结束 ====== */ /* ============================= 头部 开始 ============================= */ header { position: fixed; top: 0px; left: 0px; width: 100%; background: #fff; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04); z-index: 9998; } /* =========== pc端头部 开始 =========== */ .header { display: flex; justify-content: space-between; position: relative; } .header::after { content: ""; display: block; width: 260px; height: 30px; background: url(../images/headerimg.png) no-repeat center center; background-size: 100% 100%; position: absolute; top: 99%; left: 50%; transform: translateX(-50%); } .header>li { position: relative; width: 10%; text-align: center; } .header>li.headerLogo { width: 14%; } .header>li::after { content: ""; display: block; width: 0px; height: 4px; background: #1E95E8; border-radius: 60px; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); -webkit-transition: width 0.3s; -moz-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; } .header>li>a { display: block; line-height: 90px; /* padding: 0px 40px; */ color: #333333; } /* 下拉菜单 */ .headerDropdownBox { position: fixed; top: 90px; left: 0px; z-index: 1; width: 100%; overflow: hidden; /*background: #fff;*/ background: url(../images/dropdownbg.png)no-repeat bottom right, #fff; background-size: auto auto; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04); text-align: left; /* display: none; */ height: 0px; -webkit-transition: height 0.5s; -moz-transition: height 0.5s; -o-transition: height 0.5s; transition: height 0.5s; } .headerDropdownBox.dropdownOn { height: 360px; -webkit-transition: height 0.5s; -moz-transition: height 0.5s; -o-transition: height 0.5s; transition: height 0.5s; } .headerDropdown { display: flex; } .headerDropdownBox .img { width: 500px; /*height: 360px;*/ height: auto; /* background: pink; */ margin-right: 80px; flex-shrink: 0; } .headerDropdown .catalogue { min-width: 140px; margin-right: 60px; padding-top: 50px; } .headerDropdown .catalogue:last-child { margin-right: 0px; } .catalogue .top { color: #8695B1; padding-bottom: 14px; border-bottom: 1px solid #EDF0F4; margin-bottom: 30px; } .catalogue ol { height: 220px; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; } .catalogue li { height: 20%; } .catalogue li:nth-child(n+6) { padding-left: 60px; } .catalogue li>a { display: block; color: #333; } .catalogue li:hover>a { color: #1E95E8; } /* 升级中 提示弹窗 */ .prompt { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.70); z-index: 99999; display: none; } .promptBg { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .promptCon { background: #fff; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.16); border-radius: 10px; text-align: center; padding-bottom: 24px; } .promptCon>img { display: block; width: 450px; height: auto; margin-bottom: 36px; } .promptCon h2 { color: #333; margin-bottom: 22px; } .promptCon p { color: #8695B1; margin-bottom: 42px; } .promptCon button { width: 64%; line-height: 48px; background: #1E95E8; border: none; border-radius: 23px; color: #fff; margin: 0px auto; cursor: pointer; } @media (max-width: 767px) { .promptCon { width: 80%; } .promptCon>img { width: 100%; } } /* .headerDropdownBox { position: absolute; top: 150%; left: -99999px; opacity: 0; -webkit-transition: top 0.5s, opacity 0.5s; -moz-transition: top 0.5s, opacity 0.5s; -o-transition: top 0.5s, opacity 0.5s; transition: top 0.5s, opacity 0.5s; z-index: 3; } .headerDropdown { min-width: 180px; max-height: 300px; overflow-y: auto; text-align: center; background: #fff; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04); } .header .headerDropdown a { line-height: unset; padding: 20px 22px; white-space: nowrap; } .headerDropdown li:hover { background: #f7fafea6; } .headerDropdown li:hover a { color: #1E95E8; } .header>li:hover .headerDropdownBox { top: 100%; left: 50%; transform: translateX(-50%); opacity: 1; -webkit-transition: top 0.5s, opacity 0.5s; -moz-transition: top 0.5s, opacity 0.5s; -o-transition: top 0.5s, opacity 0.5s; transition: top 0.5s, opacity 0.5s; } .header .headerActive>a { color: #1E95E8; } .header .headerActive::after { width: 30px; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; } */ /* 中间 logo */ .headerLogo { z-index: 3; } .headerLogo h1 { transform: translateY(10px); } .headerLogo img { width: 74px; height: 74px; } /*鼠标移入*/ .header>li:hover>a { color: #1E95E8; } .header>li:hover::after { width: 30px; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; } .header>li.headerLogo:hover::after { width: 0px; } /* =========== pc端头部 结束 =========== */ /* =========== 移动端头部 开始 =========== */ .mobleHeader { position: fixed; top: 0px; left: 0px; width: 100%; padding-left: 4%; padding-right: 4%; background: #fff; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04); z-index: 9998; } .mobleHeader>div { width: 100%; height: 55px; line-height: 55px; display: flex; align-items: center; justify-content: space-between; } .mobleHeader a { display: block; } .mobleHeader img { height: 35px; width: auto; } /* 按钮 */ .mobleMenu_button { width: 55px; line-height: 55px; text-align: right; } .mobleMenu_button span { display: inline-block; width: 14px; height: 2px; background: #1E95E8; margin-bottom: 4px; position: relative; } .mobleMenu_button span::after, .mobleMenu_button span::before { content: ""; display: inline-block; width: 20px; height: 2px; background: #1E95E8; position: absolute; right: 0px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .mobleMenu_button span:before { top: 9px } .mobleMenu_button span:after { top: -9px } .mobleMenu_button.on span { background: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .mobleMenu_button.on span::before, .mobleMenu_button.on span::after { top: 0px; width: 22px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% } .mobleMenu_button.on span::before { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); } .mobleMenu_button.on span::after { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); } .mobleHeaderMenu { display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; padding-top: 60px; z-index: 9997; background: #fff; } .mobleHeaderMenu ul { width: 100%; height: 100%; overflow-y: auto; } .mobleHeaderMenu a, .mobleHeaderMenu span { display: block; font-size: 14px; line-height: 55px; color: #333; border-bottom: 1px solid #EDF0F4; margin-left: 4%; margin-right: 4%; } .mobleHeaderMenu span { position: relative; } .mobleHeaderMenu span::after { content: ""; display: block; width: 24px; height: 100%; position: absolute; top: 0px; right: 0px; background: url(../images/jt.png)no-repeat center right; background-size: 24px 24px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } /* 二级栏目 */ .mobleDropdown { display: none; background: #FAFAFA; } .mobleHeaderMenu .on span::after { transform: rotate(180deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .mobleDropdown li { padding-left: 4%; } .mobleDropdown a { color: #8695B1; } /* 行业应用下拉菜单 */ .industryMenu p { line-height: 55px; border-bottom: 1px solid #EDF0F4; color: #999; margin-right: 4%; } .industryMenuList a { line-height: 55px; color: #8695B1; } @media (min-width: 768px) { .mobleHeaderMenu { display: none; } .mobleHeader { display: none; } } /* @media (max-width: 767px) {} */ /* =========== 移动端头部 结束 =========== */ /* ============================= 头部 结束 ============================= */ /* ============================= 底部 开始 ============================= */ /* =========== pc端底部 开始 =========== */ footer { background: #F8F9FD; } .footer { padding-top: 70px; padding-bottom: 90px; border-bottom: 1px solid #e5e9f1d2; display: flex; justify-content: space-between; } /* 左侧联系方式 */ .footerL .phone { display: flex; align-items: center; margin-bottom: 50px; } .footerL .phone img { width: 66px; height: 66px; margin-right: 16px; } .footerL .phone div { color: #1E95E8; } .footerL .phone h2 { font-family: Rany-Medium; margin-bottom: 2px; } .footerL ul { margin-bottom: 42px; } .footerL ul li { padding-left: 26px; color: #8695B1; margin-bottom: 16px; } .footerL ul li:last-child { margin-bottom: 0px; } .footerL ul .li1 { background: url(../images/ul1.png)no-repeat center left; background-size: 18px 18px; } .footerL ul .li2 { background: url(../images/ul2.png)no-repeat center left; background-size: 18px 18px; } .footerL ul .li3 { background: url(../images/ul3.png)no-repeat center left; background-size: 18px 18px; } .footerL ul .li4 { background: url(../images/ul4.png)no-repeat center left; background-size: 18px 18px; } .footerL ul .li5 { background: url(../images/ul5.png)no-repeat center left; background-size: 18px 18px; } .footerL ol li { display: inline-block; margin-right: 14px; width: 33px; height: 33px; position: relative; cursor: pointer; } .footerL ol .li1 { background: url(../images/ol1.png)no-repeat center center; background-size: 33px 33px; } .footerL ol .li2 { background: url(../images/ol2.png)no-repeat center center; background-size: 33px 33px; } .footerL ol .li3 { background: url(../images/ol3.png)no-repeat center center; background-size: 33px 33px; } /* 弹窗 */ .footerTipBpx { display: none; text-align: center; width: 140px; height: auto; padding: 12px 12px 8px 12px; background: #fff; box-shadow: 6px 6px 20px rgba(189, 206, 240, 0.16); border-radius: 6px; position: absolute; bottom: 160%; left: 50%; transform: translateX(-50%); } .footerTipBpx::after { content: ""; display: block; width: 22px; height: 10px; background: url(../images/footerTipBpx.png)no-repeat center center; background-size: 22px 10px; position: absolute; top: 99%; left: 50%; transform: translateX(-50%); } .footerTipBpx img { display: block; width: 100%; height: auto; margin-bottom: 4px; } .footerTipBpx p { color: #8695B1; } .footerL ol li:hover .footerTipBpx { display: block; } /* 右侧导航菜单 */ .footerR { display: flex; } .footerR div { margin-left: 150px; } .footerR div:first-child { margin-left: 0px; } .footerR p { font-weight: 500; color: #44577B; display: block; position: relative; padding-bottom: 24px; margin-bottom: 28px; } .footerR p::after { content: ""; display: block; width: 40px; height: 1px; background: #44577B; position: absolute; left: 0px; bottom: 0px; } .footerR li { margin-bottom: 20px; } .footerR li:last-child { margin-bottom: 0px; } .footerR a { display: block; color: #8695B1; } .footerR a:hover { color: #44577B; } /* 底部版权 */ .copyright { padding-top: 25px; padding-bottom: 25px; display: flex; justify-content: space-between; } .copyrightL span, .copyrightL a, .copyrightR span, .copyrightR a { color: #8695B1; } .copyrightR span { display: inline-block; width: 1px; height: 12px; background: #8695B1; transform: translateY(1px); margin: 0px 8px; } /* =========== pc端底部 结束 =========== */ /* =========== 移动端底部 开始 =========== */ @media (max-width: 767px) { .footer { flex-direction: column; padding-bottom: 10px; padding-top: 40px; } .footerL .phone { margin-bottom: 40px; } .footerL ul { margin-bottom: 25px; } .footerL .phone img { width: 50px; height: 50px; margin-right: 16px; } .footerR { flex-direction: column; margin-top: 20px; } .footerR div { margin-left: 0; margin-bottom: 20px; margin-bottom: 15px; border-bottom: 1px solid #eef1f8; } .footerR div:last-child { border-bottom: none; margin-bottom: 0; } .footerR div ul { display: none; background: #f0f1f7; padding: 10px 15px; } .footerR p { padding-bottom: 10px; margin-bottom: 5px; } .footerR p::before { content: ''; display: block; width: 14px; height: 2px; background: #2271BB; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; } .footerR p::after { content: ''; display: block; width: 2px; height: 14px; background: #2271BB; position: absolute; top: 50%; transform: translateY(-50%); right: 18px; left: unset; bottom: unset; transition: all 0.3s; } .footerR div.mbListOn p::after { height: 0px; transition: all 0.3s; } .footerR li { margin-bottom: 0px; border-bottom: 1px solid #8695b112; padding: 10px 0; } .footerR li:last-child { border-bottom: none; } .copyright { flex-direction: column; padding: 10px 20px; } .copyrightR { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ebf6ff; } /* 弹窗 */ .footerTipBpx { left: 0px; transform: translateX(0); } .footerTipBpx::after { display: none; } } /* =========== 移动端底部 结束 =========== */ /* =========== 侧边栏 开始 =========== */ .sideBar { position: fixed; right: 30px; bottom: 40px; background: url(../images/sideBar.png)no-repeat center center, #fff; background-size: 32px 32px; width: 60px; height: 60px; border-radius: 8px; box-shadow: 0px 0px 20px rgba(4, 74, 142, 0.12); cursor: pointer; z-index: 9990; display: none; } .sideBar:hover { background: url(../images/sideBarW.png)no-repeat center center, #1E95E8; background-size: 32px 32px; } @media (max-width: 767px) { .sideBar { width: 42px; height: 42px; border-radius: 4px; background: url(../images/sideBar.png)no-repeat center center, #fff; background-size: 22px 22px; right: 16px; bottom: 22px; } .sideBar:hover { background: url(../images/sideBarW.png)no-repeat center center, #1E95E8; background-size: 22px 22px; } } /* =========== 侧边栏 结束 =========== */ /* ============================= 底部 结束 ============================= */ /* ============================= 页面公共样式 开始 ============================= */ /* ========== 内页 banner 开始 ========== */ .pbulicPageBanner { position: relative; } .pbulicPageBanner img { width: 100%; height: auto; } .pbulicPageBanner>div { width: 100%; color: #fff; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); } .pbulicPageBanner h2 { display: block; padding-bottom: 38px; position: relative; font-weight: 500; letter-spacing: 5px; margin-bottom: 40px; } .pbulicPageBanner h2::after { content: ""; display: block; width: 55px; height: 4px; background: #fff; border-radius: 2px; position: absolute; left: 0px; bottom: 0px; } .pbulicPageBanner p { display: block; max-width: 50%; text-align: justify; line-height: 1.7; } .pbulicPageBanner .black h2 { color: #333; } .pbulicPageBanner .black p { color: #8291AC; } .pbulicPageBanner .black h2::after { background: #1E95E8; } /* 移动端 */ @media (max-width: 767px) { .pbulicPageBanner p { display: none; } .pbulicPageBanner h2 { font-size: 20px; line-height: 1.7; padding-bottom: 22px; margin-bottom: 0px; } .pbulicPageBanner h2::after { width: 30px; height: 2px; } } /* ========== 内页 banner 结束 ========== */ /* ========== 首页公共标题 开始 ========== */ .pbulicIndexTitle { padding-top: 60px; text-align: center; } .pbulicIndexTitle p { font-family: Quicksand; color: rgba(119, 175, 252, 0.5); text-transform: uppercase; margin-bottom: 6px; } .pbulicIndexTitle h2 { color: #333; display: inline-block; padding: 0px 194px; background: url(../images/indexTitleL.png)no-repeat center left, url(../images/indexTitleR.png)no-repeat center right; background-size: 170px 17px; } /* 移动端 */ @media (max-width: 767px) { .pbulicIndexTitle { padding-top: 26px; } .pbulicIndexTitle p { font-size: 18px; } .pbulicIndexTitle h2 { font-size: 20px; padding: 0px 72px; background: url(../images/indexTitleL.png)no-repeat center left, url(../images/indexTitleR.png)no-repeat center right; background-size: 60px 8px; } } /* ========== 首页公共标题 结束 ========== */ /* ========== 内页公共标题 开始 ========== */ .pbulicPageTitle { padding-top: 60px; text-align: center; } .pbulicPageTitle p { font-family: Quicksand; color: rgba(134, 149, 177, 0.5); text-transform: uppercase; margin-bottom: 8px; } .pbulicPageTitle h2 { color: #333; } .pbulicPageTitle.white p, .pbulicPageTitle.white h2 { color: #fff; } /* 移动端 */ @media (max-width: 767px) { .pbulicPageTitle { padding-top: 22px; } .pbulicPageTitle p { font-size: 18px; } .pbulicPageTitle h2 { font-size: 20px; } } /* ========== 内页公共标题 结束 ========== */ /* =========== 面包屑 开始 =========== */ .crumbsTabs { border-bottom: 1px solid #8695b11a; } .crumbs { display: flex; justify-content: space-between; line-height: 70px; } .crumbs a { display: block; } .crumbsL, .crumbsR { display: flex; } .crumbsL a, .crumbsL span { color: #8695B1; } .crumbsL a:last-child { max-width: 250px; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } .crumbsL span { padding: 0px 8px; } .crumbsL a:hover { color: #1E95E8; } .home { padding-left: 28px; background: url(../images/home.png)no-repeat top 25px left; background-size: 16px 16px; } .crumbsR li { margin-left: 60px; position: relative; } .crumbsR a { color: #8695B1; } .crumbsR li::after { content: ""; display: block; width: 0px; height: 3px; background: #1E95E8; border-radius: 60px; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .crumbsR li.crumbsActive::after { width: 30px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .crumbsR li.crumbsActive a { color: #1E95E8; } .crumbsR li:hover a { color: #1E95E8; } .crumbsR li:hover::after { width: 30px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } /* 移动端面包屑 */ @media (max-width: 767px) { .crumbs { line-height: 55px; overflow-x: hidden; } .crumbsTabs .crumbsL { display: none; } .crumbsR { width: 100%; overflow: auto; flex: 0 0 auto; } .crumbsR li { margin: 0px 20px; flex: 0 0 auto; } .crumbsR::-webkit-scrollbar { display: none } .crumbsR { scrollbar-width: none; } } /* =========== 面包屑 结束 =========== */ /* =========== 公共 tab 切换 开始 =========== */ .publicTab { text-align: center; } .publicTab>div { display: inline-block; width: auto; padding: 6px 10px; background: #F4F8FC; border-radius: 29px; } .publicTab .publicTabBox { position: relative; } .publicTab ul { display: flex; position: relative; } .publicTab .whiteBg { display: block; width: 200px; height: 46px; border-radius: 23px; background: #fff; box-shadow: 2px 2px 8px rgba(189, 206, 240, 0.3); position: absolute; top: 0px; left: 0; -webkit-transition: left 0.3s; -moz-transition: left 0.3s; -o-transition: left 0.3s; transition: left 0.3s; } .publicTab li { z-index: 1; width: 200px; line-height: 46px; border-radius: 23px; color: #333; cursor: pointer; } .publicTab li.active { color: #1E95E8; } /* 移动端 */ @media (max-width: 767px) { .publicTab>div { width: 100%; overflow: hidden; } .publicTab .publicTabBox { width: 100%; overflow-x: auto; } .publicTab .publicTabBox::-webkit-scrollbar { display: none; } .publicTab .publicTabBox { scrollbar-width: none; } .publicTab ul, .publicTab li { flex: 0 0 auto; } .publicTab li { width: auto; line-height: 42px; padding: 0px 40px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicTab li.active { background: #fff; box-shadow: 2px 2px 8px rgba(189, 206, 240, 0.3); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicTab .whiteBg { display: none; } .publicTab li { width: 50%; padding: 0px; text-align: center; } } /* =========== 公共 tab 切换 结束 =========== */ /* ========== 公共样式一 开始 ========== */ .publicModule1 { display: flex; justify-content: center; flex-wrap: wrap; } .publicModule1 li { width: 29%; height: 294px; background: #fff; box-shadow: 6px 6px 20px rgba(0, 96, 172, 0.08); border-radius: 4px; margin-bottom: 50px; overflow: hidden; margin-right: 80px; cursor: pointer; } .publicModule1 li:nth-child(3n) { margin-right: 0px; } .publicModule1 li:last-child { margin-right: 0px; } .publicModule1 img { display: block; width: 100%; height: 214px; margin-bottom: 30px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule1 h2, .publicModule1 p { display: block; margin-left: 25px; margin-right: 25px; } .publicModule1 h2 { color: #333; font-weight: 500; padding-left: 28px; background: url(../images/publicImg/2.png)no-repeat center left; background-size: 20px 20px; margin-bottom: 30px; } .publicModule1 p { color: #8695B1; line-height: 1.7; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule1 li:hover img { margin-top: -112px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule1 li:hover p { opacity: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } /* 移动端 */ @media (max-width: 767px) { .publicModule1 li { width: 100%; height: 280px; margin-right: 0px; margin-bottom: 36px; } .publicModule1 img { margin-bottom: 22px; } .publicModule1 h2 { font-size: 18px; margin-left: 20px; margin-bottom: 26px; } } /* ========== 公共样式一 结束 ========== */ /* ========== 公共样式二 开始 ========== */ .publicModule2 { display: flex; justify-content: space-between; } .publicModule2 li { background: #fff; width: 18%; height: 258px; text-align: center; padding: 0px 20px; cursor: pointer; /* overflow: hidden; */ } .publicModule2blue li { background: #F7FAFE; } .publicModule2 img { display: block; width: 90px; height: 90px; margin: 50px auto 36px auto; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule2 h2 { color: #333; padding-bottom: 22px; margin-bottom: 26px; position: relative; } .publicModule2 h2::after { content: ""; display: block; width: 0px; height: 4px; background: #1E95E8; border-radius: 60px; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule2 p { display: block; color: #8695B1; line-height: 1.7; height: 0px; overflow: hidden; opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .publicModule2 li:hover img { margin-top: -40px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule2 li:hover h2::after { width: 32px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule2 li:hover p { height: auto; opacity: 1; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .publicModule2 li:hover { box-shadow: 0px 0px 20px rgba(189, 206, 240, 0.16); } .publicModule2blue li:hover { background: #fff; box-shadow: 0px 0px 20px rgba(189, 206, 240, 0.16); } /* 移动端 */ @media (max-width: 767px) { .publicModule2 { flex-wrap: wrap; } .publicModule2 li { width: 48%; margin-bottom: 55px; } .publicModule2 img { width: 70px; height: 70px; } .publicModule2 li:hover img { margin-top: -35px; margin-bottom: 22px; } .publicModule2 h2 { margin-bottom: 22px; } } /* ========== 公共样式二 结束 ========== */ /* ========== 公共样式三 开始 ========== */ .publicModule3 { display: flex; justify-content: space-between; } .publicModule3 li { width: 126px; height: 300px; background: #fff; border-radius: 6px; overflow: hidden; cursor: pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule3 .small { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .publicModule3 .small img { display: block; width: 36px; height: 36px; margin: 42px auto 26px auto; } .publicModule3 .small h2 { color: #333; } .publicModule3 .small p { display: block; color: #DDEAF8; padding-top: 46px; margin-bottom: 24px; position: relative; } .publicModule3 .small p::after { content: ""; display: block; width: 1px; height: 30px; background: #DDEAF8; position: absolute; top: 0px; left: 50%; transform: translateX(-0.5px); } .publicModule3 .big { display: none; color: #fff; } .publicModule3 .current .small { display: none; } .publicModule3 .current { width: 334px; background: url(../images/module3bg.png)no-repeat center center; background-size: 100% 100%; padding: 40px 26px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule3 .big h2 { padding-left: 40px; background: url(../images/publicImg/6.png)no-repeat top left; background-size: 26px 26px; padding-bottom: 24px; position: relative; margin-bottom: 22px; } .publicModule3 .big h2::after { content: ""; display: block; width: 32px; height: 4px; background: #fff; border-radius: 60px; position: absolute; left: 0px; bottom: 0px; } .publicModule3 .big p { line-height: 1.7; } .publicModule3 .current .big { display: block; } /* 移动端 */ @media (max-width: 767px) { .publicModule3 { flex-direction: column; justify-content: unset; } .publicModule3 li { width: 100%; height: auto; border: 1px solid #E9F1FA; border-radius: 4px; overflow: hidden; margin-bottom: 12px; } .publicModule3 li:last-child { margin-bottom: 0px; } .publicModule3 .small { width: 100%; line-height: 48px; flex-direction: row; padding: 0px 14px; } .publicModule3 .small>div { display: flex; align-items: center; } .publicModule3 .small img { display: inline-block; width: 18px; height: 18px; margin: 0px 8px 0px 0px; } .publicModule3 .small h2 { display: inline-block; } .publicModule3 .small p { padding-top: 0px; padding-left: 45px; margin-bottom: 0px; } .publicModule3 .small p::after { width: 30px; height: 1px; left: 0px; top: 50%; transform: translateY(-50%); } .publicModule3 .big { display: block; height: 0px; width: 100%; overflow: hidden; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; } .publicModule3 .current .small { display: flex; } .publicModule3 .current { width: 100%; height: auto; background: none; padding: 0px; } .publicModule3 .current .small { background: #fff; } .publicModule3 .current .big { height: 200px; background: url(../images/module3bg.png)no-repeat center center; background-size: cover; padding: 22px 14px; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; } .publicModule3 .big h2 { padding-left: 0px; background: none; padding-bottom: 14px; margin-bottom: 12px; } .publicModule3 .big h2::after { width: 22px; height: 2px; } } /* ========== 公共样式三 结束 ========== */ /* ========== 公共样式四 开始 ========== */ .publicModule4 { background: url(../images/module4bg.png)no-repeat center bottom; background-size: 100% auto; padding-bottom: 70px; } .publicModule4 ul { display: flex; justify-content: space-between; padding-top: 70px; } .publicModule4 li { width: 31%; height: 400px; padding: 0px 35px; background: rgba(255, 255, 255, 0.80); box-shadow: 6px 6px 20px rgba(0, 66, 118, 0.08); border-radius: 6px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule4 li img { display: block; width: 120px; height: 120px; margin-bottom: 30px; } .publicModule4 li h2 { color: #333; padding-bottom: 30px; background: url(../images/threepoint.png)no-repeat center bottom; background-size: 26px 5px; margin-bottom: 26px; } .publicModule4 li p { color: #8695B1; line-height: 1.7; display: none; } .publicModule4 li:hover { background: rgba(255, 255, 255, 1); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } /* 移动端 */ @media (max-width: 767px) { .publicModule4 { background-size: cover; padding-bottom: 40px; } .publicModule4 ul { padding-top: 40px; flex-direction: column; } .publicModule4 li { width: 100%; height: auto; padding: 20px 16px; margin-bottom: 20px; } .publicModule4 li:last-child { margin-bottom: 0px; } .publicModule4 li img { width: 80px; height: 80px; margin-bottom: 12px; margin-top: -10px; } .publicModule4 li p { display: block; } .publicModule4 li h2 { padding-bottom: 18px; margin-bottom: 16px; } } /* ========== 公共样式四 结束 ========== */ /* ========== 公共样式五 开始 ========== */ .publicModule5 .swiper { height: auto; width: 1340px; margin-bottom: 8px; } .publicModule5 .swiper-slide { width: 100%; padding: 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .publicModule5 .swiper-slide>img { display: block; width: 430px; height: 390px; border-radius: 8px; overflow: hidden; margin-right: 40px; flex-shrink: 0; box-shadow: 0px 0px 20px rgba(189, 206, 240, 0.33); } .publicModule5 .publicModule5Con { flex-grow: 1; height: 390px; padding: 36px 40px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0px 0px 20px rgba(189, 206, 240, 0.33); } /* 公共轮播按钮 */ .swiperBtnBox { padding: 20px; position: relative; display: flex; align-items: center; justify-content: center; } .swiperBtnBox>div { position: relative; } .swiperBtnBox .swiper-pagination { display: inline-block; width: auto; margin: 0px 36px; top: unset; margin-top: unset; left: unset; bottom: unset; right: unset; } .publicPaginationBtn .swiper-pagination-bullet { width: 8px; height: 8px; background: #1E95E8; opacity: 1; border-radius: 23px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicPaginationBtn .swiper-pagination-bullet-active { width: 40px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicPrevBtn, .publicNextBtn { width: 46px; height: 46px; border: 1px solid #1E95E8; box-shadow: 0px 0px 20px rgba(189, 206, 240, 0.3); border-radius: 6px; top: unset; margin-top: unset; left: unset; bottom: unset; right: unset; } .publicPrevBtn { background: url(../images/prev.png)no-repeat center center, #FFF; background-size: 16px 16px; } .publicNextBtn { background: url(../images/next.png)no-repeat center center, #FFF; background-size: 16px 16px; } .publicPrevBtn:hover { background: url(../images/prevW.png)no-repeat center center, #1E95E8; background-size: 16px 16px; } .publicNextBtn:hover { background: url(../images/nextW.png)no-repeat center center, #1E95E8; background-size: 16px 16px; } .publicPrevBtn::after, .publicNextBtn::after { display: none; } /* 移动端 */ @media (max-width: 767px) { .publicModule5 .swiper { width: 100%; padding: 0px 4%; } .publicModule5 .swiper-slide { flex-direction: column; padding: 0px; } .publicModule5 .swiper-slide>img { margin-right: 0px; margin-bottom: 18px; width: 100%; height: auto; } .publicModule5 .publicModule5Con { height: auto; margin-bottom: 16px; } .swiperBtnBox { padding: 4px; } .publicPrevBtn, .publicNextBtn { width: 38px; height: 38px; } .swiperBtnBox .swiper-pagination { margin: 0px 24px; } } /* ========== 公共样式五 结束 ========== */ /* ========== 公共样式六 开始 ========== */ .publicModule6 { height: auto; overflow: hidden; padding-top: 40px; } .imgSwiper { position: relative; } .publicModule6 .swiper-wrapper { align-items: center; } .publicModule6 .swiper-slide { position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule6 .swiper-slide::before { content: ""; display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); position: absolute; top: 0px; left: 0px; z-index: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule6 .swiper-slide img { display: block; width: 650px; height: 365px; margin: 0px auto; } .publicModule6 .swiper-slide div { /* text-align: center; */ display: none; } .publicModule6 .swiper-slide h3, .publicModule6 .conTxt h3 { color: #333333; margin-bottom: 18px; } .publicModule6 .swiper-slide p, .publicModule6 .conTxt p { color: #8695B1; line-height: 1.7; } /* */ .publicModule6 .swiper-slide-active { z-index: 2; transform: scale(1.2); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule6 .swiper-slide-active::before { background: rgba(255, 255, 255, 0); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule6 .swiper-button-prev, .publicModule6 .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); } .publicModule6 .swiper-button-prev { left: 12%; } .publicModule6 .swiper-button-next { right: 12%; } /* */ .conTxt { padding-top: 65px; width: 60%; margin: 0px auto; text-align: center; } /* 移动端 */ @media (max-width: 767px) { .publicModule6 .swiper-slide img { display: block; width: 300px; height: auto; margin: 0px auto; } .publicModule6 .swiper-button-prev, .publicModule6 .swiper-button-next { display: none; } .publicModule6 .swiper-slide-active { transform: scale(1.6); } .conTxt { padding-top: 50px; width: 100%; } .publicModule6 .conTxt h3 { margin-bottom: 12px; } } /* ========== 公共样式六 结束 ========== */ /* ========== 公共样式七 开始 ========== */ .publicModule7 { width: 890px; display: flex; /* justify-content: center; */ flex-wrap: wrap; } .publicModule7 li { width: 263px; padding-right: 55px; padding-bottom: 50px; margin-bottom: 50px; margin-right: 50px; position: relative; text-align: center; } .publicModule7 li:nth-child(3n) { margin-right: 0px; } .publicModule7 img { display: block; width: 74px; height: 74px; /* margin-bottom: 20px; */ margin: 0px auto 20px auto; } .publicModule7 h3 { color: #333333; } .publicModule7 p { line-height: 1.7; color: #8695B1; margin-top: 16px; } .publicModule7 span { display: block; width: 8px; height: 8px; background: #8695B1; border-radius: 50%; opacity: 0.28; position: absolute; right: -4px; bottom: -4px; } .publicModule7 .btmLine::after { content: ""; display: block; width: 220px; height: 1px; background: #8695B1; opacity: 0.28; position: absolute; left: 0px; bottom: 0px; } .publicModule7 .rightLine::before { content: ""; display: block; width: 1px; height: 114px; background: #8695B1; opacity: 0.28; position: absolute; right: 0px; top: 0px; } /* 移动端 */ @media (max-width: 767px) { .publicModule7 { width: 100%; } .publicModule7 li { width: 47%; margin: 0px 0px 20px 0px; padding: 0px 0px 20px 0px; } .publicModule7 li:nth-child(odd) { margin-right: 6%; } .publicModule7 li span { display: none; } /* btmLine rightLine */ .publicModule7 .btmLine::after, .publicModule7 .rightLine::before { display: none; } .publicModule7 img { width: 60px; height: 60px; margin-bottom: 16px; } .publicModule7 p { margin-top: 12px; } } /* ========== 公共样式七 结束 ========== */ /* ========== 公共样式八 开始 ========== */ .publicModule8 { padding: 0px 25px; display: flex; align-items: center; flex-wrap: wrap; } .publicModule8 li { width: 48%; padding: 45px 36px; display: flex; justify-content: center; align-items: center; border-radius: 6px; background: #F7FAFE; margin-bottom: 36px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule8 li:nth-child(odd) { margin-right: 4%; } .publicModule8 li img { display: block; width: 110px; height: 110px; margin-right: 36px; flex-shrink: 0; } .publicModule8 li div { flex-grow: 1; } .publicModule8 h3 { color: #333; position: relative; padding-bottom: 16px; margin-bottom: 22px; } .publicModule8 h3::after { content: ""; display: block; width: 36px; height: 3px; background: #1E95E8; border-radius: 60px; position: absolute; left: 0px; bottom: 0px; } .publicModule8 p { color: #8695B1; line-height: 1.7; } .publicModule8 li:hover { background: #fff; box-shadow: 0px 0px 20px rgba(189, 206, 240, 0.33); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule8.whitebg li { background: #fff; } /* 移动端 */ @media (max-width: 767px) { .publicModule8 { width: 100%; padding: 0px 4%; } .publicModule8 li { width: 100%; padding: 20px 14px; margin-bottom: 18px; } .publicModule8 li:nth-child(odd) { margin-right: 0px; } .publicModule8 li:last-child { margin-bottom: 0px; } .publicModule8 li img { width: 70px; height: 70px; margin-right: 20px; } } /* ========== 公共样式八 结束 ========== */ /* ========== 公共样式九 开始 ========== */ .publicModule9 { text-align: center; } .publicModule9 h3 { color: #1E95E8; margin-bottom: 12px; } .publicModule9 p { color: #8695B1; line-height: 1.7; white-space: pre-line; } /* ========== 公共样式九 结束 ========== */ /* ========== 公共样式十 开始 ========== */ .publicModule10 .con { display: flex; justify-content: space-between; height: 580px; } .publicModule10 .pbulicPageTitle { text-align: left; padding-top: 170px; } .publicModule10 ul { display: flex; border-right: 1px solid #bec7d71e; } .publicModule10 li { width: 300px; height: 100%; border-left: 1px solid #bec7d71e; padding: 120px 30px 0px 30px; text-align: center; cursor: pointer; overflow: hidden; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule10 li::after { content: ""; display: block; width: 100%; height: 100%; background: url(../images/publicImg/7.png)no-repeat center center; background-size: 100% 100%; position: absolute; top: 0px; left: 0px; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule10 li div { display: block; margin: 0px auto; width: 120px; height: 120px; background: url(../images/publicImg/8.png)no-repeat center center; background-size: 100% 100%; position: relative; z-index: 2; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule10 ul h2 { margin-top: 30px; margin-bottom: 26px; padding-bottom: 30px; color: #333; background: url(../images/threepoint.png)no-repeat center bottom; background-size: 26px 5px; position: relative; z-index: 2; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule10 ul p { display: block; color: #fff; line-height: 1.7; opacity: 0; position: relative; z-index: 2; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } @media (min-width: 768px) { .publicModule10 li:hover::after { opacity: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule10 li:hover { padding-top: 90px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule10 li:hover div { background: url(../images/publicImg/9.png)no-repeat center center; background-size: 100% 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule10 li:hover h2 { color: #fff; background: url(../images/threepointW.png)no-repeat center bottom; background-size: 26px 5px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .publicModule10 li:hover p { opacity: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } } /* 移动端 */ @media (max-width: 767px) { .publicModule10 .con { height: auto; flex-direction: column; } .publicModule10 .pbulicPageTitle { text-align: center; padding-top: 26px; margin-bottom: 30px; } .publicModule10 ul { flex-wrap: wrap; border: 0px; } .publicModule10 li { width: 100%; height: auto; border: 0px; margin-bottom: 16px; padding: 20px 16px; } .publicModule10 li:last-child { margin-bottom: 0px; } .publicModule10 li div { width: 80px; height: 80px; } .publicModule10 li::after, .publicModule10 ul p { opacity: 1; } .publicModule10 li h2 { color: #fff; margin-top: 16px; margin-bottom: 16px; padding-bottom: 14px; background: url(../images/threepointW.png)no-repeat center bottom; background-size: auto 4px; } } /* ========== 公共样式十 结束 ========== */ /* ========== 公共分页 开始 ========== */ .publicPage { text-align: center; } .publicPage>div { display: inline-block; padding: 4px; background: #fff; box-shadow: 0px 0px 20px rgba(4, 74, 142, 0.1); border-radius: 24px; margin: 0px auto; } .publicPage a, .publicPage li { display: inline-block; line-height: 40px; width: 40px; border-radius: 24px; color: #8695B1; } .publicPage .prevPage, .publicPage .nextPage { font-size: 0px; vertical-align: middle; } .publicPage ul { display: inline-block; } .publicPage .prevPage { background: url(../images/prevPage.png)no-repeat center center, #fff; background-size: 16px 16px; } .publicPage .nextPage { background: url(../images/nextPage.png)no-repeat center center, #fff; background-size: 16px 16px; } .publicPage .prevPage:hover { background: url(../images/prevPageW.png)no-repeat center center, #1E95E8; background-size: 16px 16px; } .publicPage .nextPage:hover { background: url(../images/nextPageW.png)no-repeat center center, #1E95E8; background-size: 16px 16px; } .publicPage li.active { background: #1E95E8; } .publicPage li.active a { color: #fff; } .publicPage li:hover { background: #1E95E8; } .publicPage li:hover a { color: #fff; } /* ========== 公共分页 结束 ========== */ /* ========== 查看大图 开始 ========== */ .bigImg { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.70); z-index: 99999; display: none; } .bigImgBg { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .bigImgCon { width: 90%; height: 80%; display: flex; justify-content: center; align-items: center; } .bigImgCon img { width: 100%; height: 100%; object-fit: contain; } /* ========== 查看大图 结束 ========== */ /* ============================= 页面公共样式 结束 ============================= */ /* pc端 英文站跳转按钮 */ .languageChange { position: fixed; top: 20px; right: 40px; display: block; width: 50px; height: 50px; background: #e8f4ff; border-radius: 50%; cursor: pointer; } .languageChange a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 16px; color: #1E95E8; }