@font-face {
font-family: SF-UI;
src: url('../../font/SF-UI-Display-Regular.ttf');
}
* {
margin: 0;
padding: 0;
}
html {
/*font-size: 62.5%;*/
}
body {
font-size: 14px;
background: #FFFFFF;
font-family: "微软雅黑","Microsoft YaHei",'SF-UI';
color: #333;
line-height: 1.8;
}
*:focus {
outline: none
}
ul,li,ol {
list-style: none;
}
a {
text-decoration: none;
/*color: #3677E2;*/
color:#333333;
}
a:hover {
text-decoration: none;
/*color: #3677E2;*/
color:#333333;
}
.btn:hover {
color: #fff;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
p{
font-size:14px;
margin:0;
}
h1, h2, h3, h4, h5, h6{
line-height:1.8;
margin:0;
padding:0;
}
h1 {
color: #555;
font-size: 20px;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
}
h4 {
font-weight: 400;
font-size: 14px;
}
h5 {
font-weight: 400;
font-size: 14px;
}
button {
border: 0;
cursor: pointer;
padding:0;
margin:0;
}
svg{
width:24px;
height:24px;
}
.container{
/*max-width:1336px;*/
}
.swiper-button-next, .swiper-button-prev {
width: 45px;
height: 45px;
z-index: 10;
background-size: 100% !important;
}
.swiper-button-prev{
left: 0px;
background: url(../../images/web/wm_button_icon.png) no-repeat;
background-position: 0 0;
}
.swiper-button-next{
right: 0px;
background: url(../../images/web/wm_button_icon.png) no-repeat;
background-position: 0 -93px;
}
.swiper-button-prev:hover {
background-position: 0 -46px;
background-size: 100%
}
.swiper-button-next:hover {
background-position: 0 -139px;
background-size: 100%
}
.w1200 {
width: 1200px;
margin: 0 auto;
position: relative;
}
.fr {
float: right;
}
.hidden{
display: none;
}
.clear {
clear: both;
overflow: hidden;
}
.cursor {
cursor: pointer;
}
.mar-t20 {
margin-top: 20px;
}
.mar-t30 {
margin-top: 30px;
}
.mar-b20 {
margin-bottom: 20px;
}
.mar-t10 {
margin-top: 10px;
}
.mar-b10 {
margin-bottom: 10px;
}
.f12 {
font-size: 12px;
}
.f14 {
font-size: 14px;
}
.f16 {
font-size: 16px;
}
.f18 {
font-size: 18px;
}
.f20 {
font-size: 20px;
}
.blue{
color:#2D57C9;
}
.box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
box-flex: 1;
flex: 1;
overflow: hidden;
display: block;
}
.btn{
background:#3677E2;
color:#fff;
cursor: pointer;
}
.btn-lg{
width:180px;
padding: 10px 30px;
border-radius:24px;
font-size:24px;
}
.btn-md{
width:120px;
padding: 10px 20px;
border-radius:8px;
}
.btn-sm{
width:90px;
padding: 6px 10px;
border-radius:18px;
font-size:14px;
}
.btn-xs{
width:60px;
padding: 4px 8px;
border-radius:12px;
font-size:12px;
}
.btn-white{
background:#fff;
border:1px solid #3677E2;
color:#3677E2;
}
.btn-white:hover{
color: #3677E2;
}
.crumbs{
padding:20px 0;
color:#999;
}
.crumbs svg{
fill:#999;
}
.crumbs a{
color:#999;
}
.crumbs a:hover{
color:#3677E2;
}
header { height: 88px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; position: fixed; left: 0; top: 0; right: 0; background-color: #fff; z-index: 20; padding: 0 1%; box-shadow: 0 5px 10px rgba(0,0,0,0.05)}
header .logo {
display: flex;
width:180px;
height:64px;
background:url('../../images/web/logo.png') center center / contain no-repeat;
}
header .logo a{
display:block;
width:100%;
}
header .tel{
margin: 0 20px;
font-size: 18px;
color: #547DD4;
font-weight: 700;
}
header img{
display:none;
}
header .nav { text-align: right; height: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; line-height:1.3;}
header .nav .item { text-align: center; position: relative; color: #363737; cursor: pointer;}
header .nav .item p{ font-size: 18px;}
header .nav .item span { font-size:10px; color: #999999; text-transform: uppercase; font-family: 'SF-UI';}
header .nav .item a{
display:block;
font-size: 18px;
padding: 30px 20px 0 20px;
}
header .nav .subnav{
position:absolute;
top:88px;
left:0;
background:#fff;
right:0;
border-top: 1px solid #f2f2f2;
padding:30px 0;
box-shadow: 0 10px 10px rgba(0,0,0,0.1);
overflow:hidden;
text-align:center;
}
header .nav .subnav ul{
font-size:15px;
}
header .nav .subnav ul .pic{
margin:0 auto;
height:60px;
border-radius:6px;
}
header .nav .subnav ul .pic p{
background:rgba(0,0,0,0.5);
text-align:center;
line-height:60px;
border-radius:6px;
transition: all 0.5s ease;
cursor: pointer;
color:#fff;
}
header .nav .subnav ul .pic p:hover{
background:rgba(0,0,0,0.7);
font-weight:700;
}
header .nav .subnav li{
margin-top:8px;
padding: 0 10px;
}
header .nav .subnav li:first-child{
margin-top:12px;
}
header .nav .subnav li a{
display:block;
padding:5px 0;
}
header .nav .subnav li a:hover{
color:#3677E2;
font-weight: 700;
}
header .topnavslip { width: 1.56vw; height: 6px; background: #6C86E7; position: absolute; left: 0px; bottom: 0px; display: none;z-index:-1; }
header .subnav.show {
display:block;
transition: height .2s ease-in;
transform-origin: 50% 0;
animation: slide-down 0.2s ease-in;
-webkit-animation: slide-down 0.2s ease-in;
}
header .subnav.hide {
max-height: 0px;
transition: max-height .5s ease-out;
}
header .lang{
padding:25px 0;
}
header .lang a{
font-size: 16px;height:36px;line-height:36px;border-left:1px solid #BCBCBC;color:#BCBCBC;padding:0 20px 0 30px;
}
header .lang a:hover{
color:#6C86E7;
}
.title-mix{
text-align:center;
}
.title-mix .title{
font-size: 42px;
font-weight: 700;
}
.title-mix .title-icon-1 {
width: 28px;
height: 5px;
background: #DDE8F7;
display: inline-block;
}
.title-mix .title-icon-2 {
width: 12px;
height: 5px;
background: #6481E2;
display: inline-block;
}
#pages a,#pages span{
display:inline-block;
height:32px;
padding:5px 12px;
background:#f2f2f2;
border-radius:4px;
margin:0 2px;
}
#pages span,#pages a:hover{
background:#376BC2;
color:#fff;
}
#pages a.a1:first-child:hover{
background:#f2f2f2;
color:#333;
}
#pages select{
height:32px;
border:1px solid #e2e2e2;
padding:0 10px;
}
#pages select:hover{
cursor: pointer;
}
footer{
font-size:12px;
/* margin-top:50px; */
width:100%;
color:#fff;
background: #376BC2 url('../../images/web/bg_bot.png') bottom center / contain no-repeat;
}
footer .top{
max-width:1326px;
margin: 0 auto;
padding:10px 20px 15px 20px;
}
footer .bottom-menu a{
font-size:14px;
display:block;
color:#fff;
line-height:2;
}
footer .bottom-menu a:hover{
color:#ddd;
}
footer .bot{
color:#D8D8D8;
background:rgba(0,0,0,0.6);
text-align:center;
padding:10px 0;
}
footer .bot a{
color:#457ddc;
}
footer h4{
font-size:16px;
font-weight:700;
margin-bottom:10px;
}
footer .link{
margin-top:20px;
padding-top:15px;
border-top:1px solid rgba(255,255,255,0.2);
}
footer .link a{
display:inline-block;
margin-left:10px;
color:#fff;
}
footer p{
margin: 20px auto;
}
footer svg{
width:32px;
height:32px;
margin-right:10px;
fill:#fff;
}
footer .icons .icon{
width:32px;
height:32px;
margin-right:10px;
display:inline-block;
/* border:2px solid rgba(255,255,255,0.5); */
border-radius:25%;
}
footer .contact div{
margin-bottom:10px;
}
footer img.wechat_logo{
position: absolute;
top:-130px;
left:-50px;
width:120px;
height:120px;
padding:5px;
border-radius: 4px;
background: #fff;
}
.layout{
margin-top:88px;
}
.scroll-to-top {
display: inline-block;
width: 45px;
height: 45px;
background: #547DD4 url('../../images/web/arrow-top-icon.png') center center / 50% no-repeat;
position: fixed;
bottom: 100px;
right: 30px;
z-index: 50;
text-align: center;
-webkit-transition: all .4s ease;
transition: all .4s ease;
display: none;
border-radius: 50%;
transition: all .4s ease;
}
section{
padding-top: 70px;
padding-bottom: 50px;
}
#mask{
position: fixed;
top: 0;
left: 0;
z-index: 50;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
background: #222;
transition: all 0.3s;
}
#mask.viewed {
opacity: 0.8;
visibility: visible;
}
/* 侧边导航 */
.side-panel-menu {
position: fixed;
z-index: 120;
height: 100%;
top: 0;
left: 0;
transform: translateX(calc(-100% - 10px));
box-shadow: -2px 0 4px rgba(0, 0, 0, 0.15);
background-color: #547DD4;
transition: all 0.3s;
}
.side-panel-menu.viewed {
transform: translateX(0);
}
.side-panel-menu ul{
padding: 50px 30px;
}
.side-panel-menu li {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
position: relative;
}
.side-panel-menu li a {
display: block;
position: relative;
font-size: 16px;
font-weight: 500;
opacity: 0.8;
padding: 15px 30px 15px 0;
color: #fff;
}
.side-panel-menu .collapse a{
font-size:14px !important;
padding:10px 30px !important;
}
.menu-mobile-btn {
display: none;
position: relative;
padding: 12px;
border-radius: 5px;
transition: top 0.3s;
background-color: #547DD4;
background-image: -webkit-linear-gradient(90deg, #547DD4 0%, #5B78DA 100%);
background-image: -moz-linear-gradient(90deg, #547DD4 0%, #5B78DA 100%);
background-image: -o-linear-gradient(90deg, #547DD4 0%, #5B78DA 100%);
background-image: linear-gradient(90deg, #547DD4 0%, #5B78DA 100%);
}
.menu-mobile-btn .m{
width:25px;
height:20px;
background:url('../../images/web/mobile-menu-btn.png') center center / cover no-repeat;
}
#floats{
position:fixed;
right:0;
bottom:20%;
background:#fff;
color:#547DD4;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.07);
z-index:18;
}
#floats a{
color:#547DD4;
}
#floats ul{
margin: 0 auto;
text-align:center;
}
#floats li{
padding: 10px 20px;
}
#floats li:first-child{
display:none;
}
#floats li:nth-child(2){
border-top-left-radius: 6px;
}
#floats li:last-child{
border-bottom-left-radius: 6px;
}
#floats li:hover{
cursor: pointer;
background:#547DD4;
color:#fff;
}
#floats svg{
display:block;
width:24px;
height:24px;
margin:10px auto;
fill:#547DD4;
vertical-align: baseline;
}
#floats li:hover svg,#floats li:hover a{
fill:#fff;
color:#fff;
}
#floats .arrow{
position:absolute;
left:-28px;
top:45%;
z-index:19;
width:42px;
height:42px;
background:#fff;
border-radius:100%;
box-shadow: 0 0 10px rgba(0,0,0,0.07);
cursor: pointer;
transform: rotateZ(180deg);
}
#floats .arrow svg{
}
#floats.hide{
animation: hideFloats 0.3s linear both;
}
#floats.hide .arrow{
transform: rotateZ(0deg);
}
#floats.show{
animation: showFloats 0.3s linear both;
}
#floats.show .arrow{
}
@keyframes hideFloats {
0% {
right: 0;
}
30% {
right: -24px;
}
60% {
right: -48px;
}
100% {
right: -96px;
}
}
@keyframes showFloats {
0% {
right: -96px;
}
30% {
right: -48px;
}
60% {
right: -24px;
}
100% {
right: 0;
}
}
.contact-icon{
position:fixed;
z-index:50;
right:40px;
bottom:100px;
width:45px;
padding:20px 10px;
color:#fff;
writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/
writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/
background:#547DD4;
border-radius:6px;
text-align:center;
}
.contact-icon:hover{
color:#fff;
}
.contact-icon svg{
display:inline-block;
width:24px;
height:24px;
margin-bottom:10px;
fill:#fff;
vertical-align: baseline;
}
.section-title{
text-align: center;
}
.section-title h3,.section-title h4{
font-size:32px;
font-weight:700;
display:inline-block;
vertical-align: middle;
margin: 0 15px;
}
.section-title p{
color:#666666;
font-size:16px;
margin: 10px auto;
}
/* 弹出层 */
#layer{
min-height:190px;
max-height:80vw;
overflow:hidden;
position:fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index:99;
padding:40px;
border-radius:8px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
background:#fff;
display:none;
}
#layer .banner{
height:120px;
margin-bottom:20px;
padding:0;
}
#layer .con{
}
#layer .con .desc{
margin:20px auto;
font-size:16px;
}
#layer .con p{
font-size:16px;
margin-top:20px;
}
#layer .con .val{
font-size:32px;
font-weight:700;
margin-bottom:30px;
}
#layer .bot{
margin-top:20px;
}
#layer .params{
position: relative;
}
#layer .params .info h2{
text-align:center;
}
#layer .params .info .cover{
width:90%;
margin:0px auto;
height: 40vh;
}
#layer .params .table{
overflow-y:auto;
overflow-x: hidden;
min-height:300px;
}
#layer .params .table thead{
background: #f5f5f5;
}
#layer .params .table thead th{
border:0;
}
#layer .params table{
width:100%;
position: absolute;
}
#layer form svg{
fill:#595F80;
height: 24px;
margin: 12px 5px;
padding: 4px;
vertical-align: top;
}
/* 专家弹出层 */
.expertLayer .con{
margin:0;
}
.expertLayer .cover{
height:300px;
}
.expertLayer .info h3{
font-size:26px;
font-weight:700;
}
.expertLayer .info h4{
font-size:20px;
}
.expertLayer .info div{
margin-top:20px;
max-height: 260px;
overflow-y: auto;
font-size:16px;
}
/* 留咨弹出层 */
.feedbackLayer{
width: 90vw;
max-width: 960px;
}
.feedbackLayer .con{
margin:0;
}
/* 加盟合作弹窗 */
.JHMZLayer{
width: 90vw;
max-width: 960px;
}
.JHMZLayer h4{
font-size:24px;
}
.JHMZLayer h4 span{
font-size:12px;
margin-left:10px;
}
/* 电话弹窗 */
.telLayer{
}
.telLayer h4{
font-size: 32px;
font-weight: 700;
}
.telLayer svg{
fill:#547DD4;
width:48px;
height:48px;
display:block;
margin:10px auto 20px auto;
}
.telLayer a:hover{
color:#547DD4;
}
/* 视频弹窗 */
.videoLayer{
padding:0 !important;
background:#000 !important;
}
/* 参数弹窗 */
.paramLayer{
width: 90vw;
max-width: 960px;
}
/*功能弹窗*/
.featureLayer{
width: 90vw;
max-width: 960px;
}
.featureLayer img{
max-width:100%;
display:block;
margin:5px auto;
}
/* 专家弹窗 */
.expertLayer{
width: 90vw;
max-width: 960px;
}
/* form框 */
.form{
}
.form .label{
margin: 20px auto 0 auto;
border: 1px solid #e2e2e2;
padding: 0 10px;
border-radius: 8px;
}
.form .label img{
height: 24px;
margin: 10px 5px;
padding: 4px;
vertical-align: top;
}
.form input,.form textarea,.form select{
border:0;
padding:10px 5px;
width:90%;
font-size:16px;
}
.form button{
position:absolute;
top: 55px;
right: 40px;
}
.form .label span{
font-size: 14px;
position: absolute;
right: 30px;
margin: 10px 0;
color: red;
}
.form .label.has-error{
border: 1px solid red !important;
}
/* 重写 */
.swiper-button-prev,.swiper-button-next{
user-select: none;
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
content: '';
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
content: '';
}
.nodata{
text-align:center;
margin:50px auto;
color:#999;
}
/* PAD */
@media screen and (min-width:768px) and (max-width:1199px) {
header .nav .item a{
font-size: 16px;
padding:30px 8px 0 8px;
}
header .nav .item span {
font-size:12px;
color: #999999;
text-transform:uppercase;
}
footer{
margin-top:40px;
}
section{
padding-top: 40px;
padding-bottom: 50px;
}
header .logo{
width: 160px;
height: 64px;
}
.form input,.form textarea,.form select{
border:0;
padding:10px 5px;
width:85%;
font-size:16px;
}
.section-title h3, .section-title h4{
font-size:28px;
}
footer svg{
width:24px;
height:24px;
}
}
/* 手机 */
@media screen and (max-width:767px) {
body{
margin-bottom: 80px;
}
.layout{
margin-top:64px;
}
header{
height:64px;
}
header .logo{
height: 48px;
width: 130px;
}
header .nav {
display: none;
}
header .right-menu{
display: block !important;
}
header .right-menu img{
width:32px;
height:32px;
}
footer{
margin-top:20px;
}
footer h4{
font-size:16px;
font-weight:700;
margin-bottom:10px;
}
footer .bottom-menu{
margin-bottom:0;
}
footer .bottom-menu a{
display:inline-block;
font-size:12px;
margin-right:10px;
}
footer .bottom-menu .icons{
text-align:center;
}
footer .bot{
padding:10px 0;
font-size:12px;
}
section{
padding-top: 15px;
padding-bottom: 20px;
}
.menu-mobile-btn {
display: flex;
align-items: center;
}
.section-title h3{
font-size:24px;
}
#layer{
padding:20px;
max-height: 90vh;
}
#layer .banner{
display:none;
}
#layer .con .intro{
display:none;
}
.form input, .form textarea, .form select{
width:85%;
background: none;
}
.contact-icon{
right: 10px;
}
.scroll-to-top{
right: 10px;
}
#layer .params .info .cover{
height:20vh;
}
.section-title p{
font-size:12px;
}
header .topnavslip{
display:none !important;
}
.expertLayer{
}
.expertLayer .avatar,.expertLayer .info{
padding-left:0;
padding-right:0;
}
.expertLayer .cover{
height:200px;
}
.expertLayer .info h3{
font-size:18px;
}
.expertLayer .info h4{
font-size:16px;
}
.expertLayer .info div{
font-size:14px;
max-height: 200px;
}
footer svg{
width:24px;
height:24px;
}
.JHMZLayer img{
display:none;
}
.JHMZLayer h4{
font-size:18px;
font-weight:700;
}
.JHMZLayer h4 span{
display: block;
margin:0;
}
#floats{
left:0;
bottom:0;
border-radius:0;
}
#floats ul{
display: flex;
}
#floats li{
display:inline-block;
border-radius:0 !important;
padding:5px;
flex:1;
}
#floats li:first-child{
display:inline-block;
}
.telLayer h4{
font-size:18px;
}
}
/* 动画 */
@keyframes slide-down{
0%{transform:scale(1,0);}
100%{transform:scale(1,1);}
}
@-webkit-keyframes slide-down{
0%{-webkit-transform:scale(1,0);}
100%{-webkit-transform:scale(1,1);}
}
/* ----------------------yjw----------------------- */
/* 背景图 */
.bg-img{
background-size: cover !important;
background-repeat: no-repeat;
background-position: center center;
}
/* 文字竖直排列 */
.text-column{
writing-mode: tb-rl;
}
/* 最大宽度 */
.max-w{
max-width: 1366px;
margin: 0 auto;
}
/* 文字两行显示 */
.text-line2{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
/* 文字一行显示 */
.text-line1{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 标题左右两边的颜色条 */
.light-color{
display: inline-block;
width: 28px;
height: 5px;
background:rgba(100,129,226,0.2);
vertical-align: middle;
}
.dark-color{
display: inline-block;
width: 12px;
height: 5px;
background:rgba(100,129,226,1);
vertical-align: middle;
}
/* ----------------------yjw----------------------- */