@charset "utf-8";
/* 奥博网络
 * 2023年5月
 * 为了和ie兼容性好点不用webp格式
 * 兼容到ie9，以下版本就不做兼容了
*/
* {
    /*
    边距
    padding：即内边距，围绕着内容（比如段落）的空间。
    border：即边框，紧接着内边距的线。
    margin：即外边距，围绕元素外部的空间。
    */
    margin: 0;
    padding: 0;
    /*去除符号*/
    list-style: none;
    /*去除下划线*/
    text-decoration: none;
    /*字体 我的win10原版自带这几个*/
    font-family: 微软雅黑, 'Microsoft YaHei', arial, serif;
}

html, body {
    width: 100%;
    height: 100%;
    color: #000;
    font-size: 16px;
    background: white;
}

/* 屏幕尺寸小于1199 */
@media all and (max-width: 1199px) {
    html, body {
        font-size: 14px !important;
    }
}
/* 屏幕尺寸介于1200-1500像素时 */
@media all and (min-width: 1200px) and (max-width: 1500px) {
    html, body {
        font-size: 15px !important;
    }
}

/* 屏幕尺寸大于2000像素时 */
@media all and (min-width: 2001px) {
    html, body {
        font-size: 17px !important;
    }
    .kaifa-you {
        width: 36% !important;
    }
    .anli-tu {
        height: 25rem !important;
    }
    .yunwei-xg-img {
        height: 19rem !important;
    }
}

/*全站灰色调用 ie就不兼容了*/
.huise {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

img {
    /*去除边框*/
    border: none;
}

/*图标调用通用代码*/
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    /*
    属性设置文本的粗细。
    数字值 400 相当于 关键字 normal，700 等价于 bold。
    取值范围100-900，normal默认值。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。
    */
    font-weight: normal;
}

.ie {
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: white;
    background: #ff7c7c;
}

.box {
    width: 80%;
    height: auto;
    min-width: 75rem;
    max-width: 90rem;
    margin: 0 auto;
    padding: 2rem 0;
    overflow: hidden;
}

.title {
    text-align: center;
}

.title h1 {
    color: #0a84fe;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.title h2 {
    color: #666;
    font-size: 1.1rem;
    line-height: 2rem;
}

.title strong {
    font-size: 1.9rem;
    color: #999;
    /*
    控制文本的大小写。
    capitalize	文本中的每个单词以大写字母开头。
    uppercase	定义仅有大写字母。
    */
    text-transform: uppercase;
}

/*查看更多按钮*/
.more {
    text-align: center;
    padding: 0.9rem 0;
}

.more a {
    /*
    把元素显示为块级元素
    none	此元素不会被显示。
    block	此元素将显示为块级元素，此元素前后会带有换行符。
    inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
    inline-block	行内块元素。（CSS2.1 新增的值）
    inherit	规定应该从父元素继承 display 属性的值。
    */
    display: inline-block;
    /*width: 11.8rem;*/
    /*height: 3.2rem;*/
    /*用内边距设定大小，方便一点*/
    padding: 1rem 4rem;
    color: white;
    font-size: 1.2rem;
    border-radius: 1.9rem;
    background-color: #f8c800; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #f8c800, #f87880);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);
    transition: all .5s;
    -webkit-transition: all .5s;
}

.more a:hover {
    background-color: #32dab7; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #32dab7, #38cf7a);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    transition: all .5s;
    -webkit-transition: all .5s;
}

/*
一个按钮实例
<button class="button" style="vertical-align:middle"><span>Hover </span></button>
*/
.button {
    display: inline-block;
    border-radius: 4px;
    background: #f4511e;
    border: none;
    color: white;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

.button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.button span:after {
    content: '»';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.button:hover span {
    padding-right: 25px;
}

.button:hover span:after {
    opacity: 1;
    right: 0;
}


/*返回顶部按钮*/
.totop {
    /*
    定位
    static  正常，该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
    relative  相对定位，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
              position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
    absolute  绝对定位，不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。
              绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
    fixed  固定定位，浮起来，当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。
    sticky 粘性定位，比如导航栏，是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
    */
    position: fixed;
    right: 1rem;
    bottom: 3rem;
    width: 2.2rem;
    height: 2.2rem;
    color: #9CA9C3;
    background: white;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.2rem;
    cursor: pointer;
    z-index: 999;
}

.totop > .icon {
    font-size: 1.4rem;
    padding: 0.4rem;
}

.totop:hover {
    color: white;
    background: #3c6fff;
}

/*导航栏*/
header {
    width: 100%;
    height: auto;
    z-index: 999;
    /*
    裁剪溢出
    如果指定两个关键字，第一个关键字用于 overflow-x，第二个关键字用于 overflow-y。
    否则，overflow-x 和 overflow-y 设置为相同的属性值。
    hidden 内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动
    auto   如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。
    */
    overflow: hidden;
    position: fixed;
}

nav {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 80%;
    height: 5rem;
    min-width: 75rem;
    max-width: 90rem;
    margin: 0 auto;
    overflow: hidden;
}

.logo {
    float: left;
    width: 20%;
    height: 3rem;
    padding: 1rem 0;
    overflow: hidden;
}

.logo a {
    display: inline-block;
    width: 15rem;
    height: 3rem;
}

.top .logo>a {
    background: url(logo-white.png) no-repeat center/cover;
}

.top-xl .logo>a {
    background: url(logo.png) no-repeat center/cover;
}

/*logo效果*/
.logo:before {
    content: "";
    /*绝对定位 top、right、bottom、left */
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 10rem;
    height: 10rem;
    /* 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 */
    background-color: rgba(255, 255, 255, .01); /* 浏览器不支持的时候显示 */
    background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0));
    transform: skew(140deg);        /* Chrome 36, Chrome Android 36, Edge, Firefox 16, IE 10, Opera 23, Safari 9, Safari iOS 9 */
    -ms-transform: skew(140deg);    /* IE */
}

.logo:hover:before {
    transition: left 2s;
    -webkit-transition: left 2s;
    left: 30rem;
}

.lanmu {
    float: right;
    width: 80%;
    height: 5rem;
    overflow: hidden;
}

.lanmu ul {
    float: right;
}

.lanmu li {
    height: 5rem;
    float: left;
    text-align: center;
    margin: 0 0.4rem 0;
}

/*不管哪种情况都显示动画效果*/
.lanmu li>a {
    height: 4rem;
    padding: 1rem 0.6rem 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 3rem;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

/*无滚动样式*/
.top {
    border-bottom: 0.08rem solid rgba(255, 255, 255, 0.3);
}

.top .lanmu li>a {
    color: white;
    display: inline-block;
    background: url(nav-bg.png) 0 -100px no-repeat;
}

.top .lanmu li>a:hover {
    color: white;
    background: url(nav-bg.png) 0 100% no-repeat;
}

/*滚动后导航栏样式*/
.top-xl {
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.top-xl .lanmu li>a {
    color: #0061a5;
    font-weight: bold;
    display: inline-block;
    background: url(nav-bg-xl.png) 0 -100px no-repeat;
}

.top-xl .lanmu li>a:hover {
    color: white;
    background: url(nav-bg-xl.png) 0 100% no-repeat;
}

/*banner*/
.banner {
    height: 50rem;
    width: 100%;
    min-width: 75rem;
}

.banner-bg1 {
    /* 线性渐变 还是别太花了吧 朴素点好 */
    background-color: #0130FF; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(30deg,#0130FF, #524cff); /* 标准语法; 需要最新版本 */
    background-size: 200% 200%;
}

.banner-bg1:before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    background: url(bolang.png) no-repeat center center;
    background-size: cover;
    animation: banner1-dh 4s linear infinite;
}

.banner-bg2 {
    /* 线性渐变 还是别太花了吧 朴素点好 */
    background-color: #0130FF; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(30deg,#0130FF, #524cff); /* 标准语法; 需要最新版本 */
    background-size: 200% 200%;
}

.banner-bg2:before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10%;
    background: url(bolang.png) no-repeat center center;
    background-size: cover;
    animation: banner1-dh 4s linear infinite;
}

@keyframes banner1-dh {
    from {
        bottom: -1rem
    }
    50% {
        bottom: 0.1rem
    }
    to {
        bottom: -1rem
    }
}

.banner-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: white;
    width: 80%;
    height: 100%;
    min-width: 75rem;
    max-width: 90rem;
    margin: 0 auto;
    padding: 10rem 1rem;
    /*绝对定位，不为元素预留空间*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.banner-box a {
    color: white;
}

.banner-box h1 {
    font-size: 3rem;
    line-height: 10rem;
    font-weight: bold;
}

.banner-box p {
    overflow: hidden;
    width: 100%;
    height: 6rem;
    font-size: 1rem;
    line-height: 2rem;
}

.banner-jz {
    width: 60%;
    height: 21rem;
    padding: 4.5rem 0;
    margin: 0 auto;
    text-align: center;
}

.banner-zuo {
    float: left;
    width: 43%;
    height: 21rem;
    margin: 4.5rem 0;
}

.banner-bg3 {
    background-color: #444;
    /*上面红色，下面绿色，中间黄色过度，寓意涨跌 #00d000, #ffbc00, #eb0000 太花了
    background-image: linear-gradient(0, #00ff00, #fff150, #e70000);
    background-size: 100% 130%;
    */
}
.banner-bg3:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(banner-3.jpg);
    background-repeat: repeat-x;
    background-size: auto 100%;
    /*  推荐这几种混合模式  screen  lighten  overlay */
    mix-blend-mode: overlay;
    opacity: 0.8;
    /* reverse normal alternate 方向  infinite 无限循环*/
    animation: banner3-dh 20s normal linear infinite;
}

@keyframes banner3-dh{
    from
    {background-position:0 0}
    to
    {background-position:100% 0}
}

.banner-more {
    display: inline-block;
    width: 12rem;
    height: 3rem;
    line-height: 3rem;
    margin: 1.5rem 0;
    font-size: 1.3rem;
    border-radius: 2rem;
    border: solid #fff 0.1rem;
    text-align: center;
    /* 相对于我定位 */
    position: relative;
    overflow: hidden;
    /*过渡效果*/
    transition: all .5s;
    -webkit-transition: all .5s;
}

.banner-more:before {
    content: "";
    background: rgba(0, 0, 0, 0.1);
    -ms-transform: skew(45deg, 0); /* IE */
    transform: skew(45deg, 0);
    width: 0;
    height: 3rem;
    /*相对于上级 绝对定位*/
    position: absolute;
    left: -1rem;
    z-index: 9;
    transition: all .5s;
    -webkit-transition: all .5s;
}

.banner-more:hover:before {
    width: 20rem;
    /*指向时变手*/
    cursor: pointer;
}

.banner-you {
    float: right;
    width: 56%;
    height: 30rem;
}

.banner-you img {
    float: right;
    width: auto;
    height: 100%;
}

/*活动公告*/
.notice {
    width: 100%;
    min-width: 75rem;
    height: 3.8rem;
    border-bottom: 1px #eee solid;
}

.notice-box {
    width: 80%;
    height: 100%;
    min-width: 75rem;
    max-width: 90rem;
    margin: 0 auto;
    padding: 1.3rem 0;
    overflow: hidden;
}

.notice-ico {
    float: left;
    width: 4%;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.9rem;
    color: white;
    text-indent: 0.5rem;
    margin-left: 1.5%;
    background: url(notice.png) no-repeat center/cover;
}

.notice-nr {
    float: right;
    width: 94%;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.9rem;
    color: #999;
    overflow: hidden;
}

.notice-nr ul {

}

.notice-nr li {
    /*从行首起始位置开始排列*/
    justify-content: flex-start;
}

.notice-nr li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #999;
}

.notice-nr li a:hover {
    color: #5f64fe;
}

/*解决方案*/
.fangan {
    width: 100%;
    min-width: 75rem;
    padding: 3.2rem 0;
    background: url(fuwu.jpg) center 7.5rem no-repeat;
}

.fangan ul {
    width: 100%;
    margin-top: 5rem;
    overflow: auto;
}

.fangan ul li {
    overflow: auto;
    float: left;
    width: 22%;
    height: auto;
    margin: 1.5%;
    background: white;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);
    border-radius: 0.5rem;
}

.fangan-bt {
    padding: 10%;
    font-size: 1.25rem;
    font-weight: 600;
    height: 1.3rem;
    color: white;
}

.fangan-nr {
    padding: 10% 10% 4%;
}

.fangan-li {
    margin-bottom: 10%;
}

.fangan-li p:nth-child(1) {
    color: #000;
    font-size: 1rem;
    line-height: 1.7rem;
    padding-left: 1rem;
}

.fangan-li p:nth-child(1):before {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 0.2rem;
    -ms-transform: translate(-0.7rem, -0.19rem); /* IE */
    transform: translate(-0.7rem, -0.19rem);
}

.fangan-li p:nth-child(2) {
    color: #999;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.25rem;
    height: 2.5rem;
    overflow: hidden;
    /*用一个省略号截断超出内容*/
    text-overflow: ellipsis;
    /*使其仅在内容至少为两行的情况下显示*/
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fangan-an {
    text-align: center;
    padding: 0 0 12%;
}

.fangan-an a {
    display: inline-block;
    width: 7.5rem;
    height: 2.2rem;
    font-size: 0.9rem;
    line-height: 2.2rem;
    border-radius: 1.9rem;
    color: #4381fd;
    border: 1px solid #4381fd;
}

.fangan ul li:hover {
    -ms-transform: scale(1.02); /* IE */
    transform: scale(1.02);
    -webkit-transition: .4s ease-in;
    transition: .4s ease-in;
}

.fangan ul li:hover .fangan-an a {
    color: white;
    border: 0 solid #4381fd;
}

.fangan ul li:nth-child(1) .fangan-bt,
.fangan ul li:nth-child(1) .fangan-li > p:nth-child(1):before,
.fangan ul li:nth-child(1):hover .fangan-an > a {
    background-color: #037eff; /* 不支持渐变的浏览器回退方案 */
    background-image:linear-gradient(90deg, #037eff, #3eb5f8);
}

.fangan ul li:nth-child(2) .fangan-bt,
.fangan ul li:nth-child(2) .fangan-li > p:nth-child(1):before,
.fangan ul li:nth-child(2):hover .fangan-an > a {
    background-color: #f8c84c; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #f8c84c, #f8788b);
}

.fangan ul li:nth-child(3) .fangan-bt,
.fangan ul li:nth-child(3) .fangan-li > p:nth-child(1):before,
.fangan ul li:nth-child(3):hover .fangan-an > a {
    background-color: #fe80fb; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #fe80fb, #c467ff);
}

.fangan ul li:nth-child(4) .fangan-bt,
.fangan ul li:nth-child(4) .fangan-li > p:nth-child(1):before,
.fangan ul li:nth-child(4):hover .fangan-an > a {
    background-color: #32dab7; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #32dab7, #38cf7a);
}

/*模板展示*/
.muban {
    width: 100%;
    min-width: 75rem;
    padding: 3.2rem 0;
    background: #006bff url(muban.jpg) no-repeat bottom;
    background-size: cover;
    animation: muban-bg-dong 15s ease infinite;
    -webkit-animation: muban-bg-dong 15s ease infinite; /* Safari 与 Chrome */
}

@keyframes muban-bg-dong {
    0% {
        background-position: 60% 0;
    }
    50% {
        background-position: 100% 0;
    }
    100% {
        background-position: 60% 0;
    }
}

.muban ul {
    width: 100%;
    padding: 3.2rem 0;
    overflow: hidden;
}

.muban ul li {
    float: left;
    width: 30%;
    margin: 1.66%;
    background: #fdfdfd;
    overflow: auto;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
}

.muban-pc {
    height: 1.8rem;
    line-height: 1.8rem;
    padding-left: 1rem;
}

.muban-pc span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.5rem;
    margin-right: 0.4rem;
    vertical-align: middle;
    display: inline-block;
}

.pc-max {
    background: #ff5061;
}

.pc-min {
    background: #ffb200;
}

.pc-close {
    background: #03cd00;
}

.muban-tu {
    height: 16rem;
    overflow: hidden;
}

.muban-tu-img {
    width: 100%;
    height: auto;
    position: relative;
}

.muban ul li:hover {
    box-shadow: 0 12px 20px rgba(0, 0, 0, .3);
    transition: all .5s;
    -webkit-transition: all .5s;
}

.muban ul li:hover .muban-txt {
    font-weight: 600;
}

.muban-txt {
    color: #333;
    padding: 1rem;
    font-size: 1rem;
    /* 设置20个字宽，超出裁剪 */
    display: inline-block;
    width: 20rem;
    overflow: hidden;
    /* 省略号 */
    text-overflow: ellipsis;
    /* 单行排列 */
    white-space: nowrap;
}

/*小程序功能*/
.gneng {
    width: 100%;
    min-width: 75rem;
    padding: 3.2rem 0;
}

.gneng ul {
    text-align: center;
    overflow: auto;
}

.gneng ul li {
    overflow: auto;
    float: left;
    width: 17%;
    height: auto;
    margin: 2% 2% 0;
    padding: 2%;
    border-radius: 1.1rem;
    transition: all .5s;
    -webkit-transition: all .5s;
}

.gneng-i {
    margin: 16% auto;
    width: 8.8rem;
    height: 8.8rem;
    color: white;
    border-radius: 50%;
}

.gneng-ico {
    font-size: 4.8rem;
    margin-top: 2rem;
}

.gneng-h1 {
    color: #333;
    font-size: 1.2rem;
    line-height: 2rem;
}

.gneng-h2 {
    margin-bottom: 12%;
    color: #999;
    font-size: 1rem;
    line-height: 1.6rem;
}

.gneng ul li:hover > p {
    color: white;
}

.gneng ul li:nth-child(1) div {
    background-color: #3eb5f8; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #3eb5f8, #06e5f8);
}

.gneng ul li:nth-child(1):hover {
    background-color: #3eb5f8; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #3eb5f8, #06e5f8);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .4);
}

.gneng ul li:nth-child(1):hover .gneng-i {
    color: #06e5f8;
}

.gneng ul li:nth-child(2) div {
    background-color: #32dab7; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #32dab7, #38cf7a);
}

.gneng ul li:nth-child(2):hover {
    background-color: #32dab7; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #32dab7, #38cf7a);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .4);
}

.gneng ul li:nth-child(2):hover .gneng-i {
    color: #38cf7a;
}

.gneng ul li:nth-child(3) div {
    background-color: #fe80fb; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #fe80fb, #c467ff);
}

.gneng ul li:nth-child(3):hover {
    background-color: #fe80fb; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #fe80fb, #c467ff);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .4);
}

.gneng ul li:nth-child(3):hover .gneng-i {
    color: #c467ff;
}

.gneng ul li:nth-child(4) div {
    background-color: #f8c84c; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #f8c84c, #f8788b);
}

.gneng ul li:nth-child(4):hover {
    background-color: #f8c84c; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #f8c84c, #f8788b);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .4);
}

.gneng ul li:nth-child(4):hover .gneng-i {
    color: #f8788b;
}

.gneng ul li:nth-child(5) div {
    background-color: #6f5dff; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #6f5dff, #b376ff);
}

.gneng ul li:nth-child(5):hover {
    background-color: #44aaf8; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(90deg, #6f5dff, #b376ff);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .4);
}

.gneng ul li:nth-child(5):hover .gneng-i {
    color: #b376ff;
}

.gneng ul li:nth-child(6) div {
    background-color: #ff6aca; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(150deg, #ff5200, #ff6aca);
}

.gneng ul li:nth-child(6):hover {
    background-color: #ff6aca; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(270deg, #ff5200, #ff6aca);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .4);
}

.gneng ul li:nth-child(6):hover .gneng-i {
    color: #ff5200;
}

.gneng ul li:nth-child(7) div {
    background-color: #06e5f8; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(150deg, #3eb5f8, #06e5f8);
}

.gneng ul li:nth-child(7):hover {
    background-color: #06e5f8; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(270deg, #3eb5f8, #06e5f8);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .4);
}

.gneng ul li:nth-child(7):hover .gneng-i {
    color: #3eb5f8;
}

.gneng ul li:nth-child(8) div {
    background-color: #38cf7a; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(150deg, #32dab7, #38cf7a);
}

.gneng ul li:nth-child(8):hover {
    background-color: #38cf7a; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(270deg, #32dab7, #38cf7a);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .4);
}

.gneng ul li:nth-child(8):hover .gneng-i {
    color: #32dab7;
}

.gneng ul li:hover .gneng-i {
    box-shadow: 0 0 11px 0 rgba(255, 255, 255, .9);
    border-radius: 50%;
    background: rgba(255, 255, 255, 1);
    transform-origin: center center;
    -webkit-transition: all .5s;
    transition: all .5s;
}

/*程序开发优势*/
.kaifa {
    overflow: hidden;
    width: 100%;
    min-width: 75rem;
    padding: 3.2rem 0;
    background: #000 url(kaifa-bg.jpg) no-repeat 100%/cover fixed;
    animation: muban-bg-dong 12s ease infinite;
    -webkit-animation: muban-bg-dong 12s ease infinite;
}

.kaifa-zuo {
    float: left;
    width: 50%;
    margin-left: 2%;
}

.kaifa-zuo>h1 {
    color: white;
    font-size: 2.2rem;
    font-weight: bold;
}

.kaifa-zuo>p {
    color: white;
    font-size: 1.2rem;
    line-height: 2.2rem;
    margin-top: 2rem;
}

.kaifa ul {
    overflow: auto;
    width: 100%;
    margin-top: 2rem;
}

.kaifa ul li {
    float: left;
    text-align: center;
    color: white;
    margin-right: 5rem;

}

.kaifa ul li strong {
    font-size: 2.6rem;
}

.kaifa ul li span {
    font-size: 2rem;
}

.kaifa ul li p {
    font-size: 1.4rem;
}

.kaifa-you {
    float: right;
    width: 40%;
    margin: 0 auto;
}

.kaifa-you img {
    width: 100%;
    height: auto;
}

/*新闻动态*/
.new {
    width: 100%;
    min-width: 75rem;
    padding: 3.2rem 0;
}

.new ul {
    width: 100%;
    height: auto;
    overflow: auto;
    margin: 2rem auto;
}

.new ul li {
    float: left;
    width: 47%;
    height: auto;
    overflow: auto;
    margin: 1.5%;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.new ul li:hover {
    background: white;
    box-shadow: 0 0 15px rgba(220, 220, 220, .9);
    transition: all .5s;
    -webkit-transition: all .5s;
    /*指向时变手*/
    cursor: pointer;
}

.new .new-sj {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    color: #999;
    font-size: 0.9rem;
    text-align: right;
    width: 22%;
    margin: 5% 0;
    padding: 0 5%;
    border-right: 1px solid #eee;
}

.new .new-sj p:nth-child(1) {
    color: #1d74ff;
    font-size: 3.2rem;
    line-height: 3.8rem;
    margin-bottom: 0.5rem;
}

.new .new-sj p:nth-child(2) {
    color: #1d74ff;
    font-size: 1rem;
}

.new .new-nr {
    float: left;
    width: 68%;
    margin: 5%;
}

.new .new-nr a {
    color: #000;
}

.new .new-nr a:hover {
    color: #1d74ff;
}

.new .new-nr p:nth-child(1) {
    font-size: 1rem;
    line-height: 1.8rem;
    /* 设置22个字宽，超出裁剪 */
    width: 22rem;
    overflow: hidden;
    /* 省略号 */
    text-overflow: ellipsis;
    /* 单行排列 */
    white-space: nowrap;
}

.new .new-nr p:nth-child(2) {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.3rem;
    width: 100%;
    height: 3.9rem;
    overflow: hidden;
}

/*咨询链接*/
.zixun {
    width: 100%;
    height: 15rem;
    min-width: 75rem;
    overflow: hidden;
    /*相对定位 相对于自身位置定位*/
    position: relative;
    background-color: #034dff; /* 不支持渐变的浏览器回退方案 */
    background-image: linear-gradient(-45deg,#3eb5f8, #034dff);
    background-size: 200% 200%;
    -webkit-animation: muban-bg-dong 8s ease infinite;
    animation: muban-bg-dong 8s ease infinite;
}

.zixun:before {
    content: "";
    display: inline-block;
    width: 6.3rem;
    height: 6.3rem;
    border-radius: 6.3rem;
    background: rgba(60, 166, 222, .4);
    position: absolute;
    top: 1.25rem;
    left: 17.5rem;
}

.zixun:after {
    content: "";
    display: inline-block;
    width: 5rem;
    height: 5rem;
    border-radius: 6.3rem;
    background: rgba(255, 255, 255, .1);
    position: absolute;
    right: 16rem;
    bottom: 1rem;
}

.zixun-y {
    position: absolute;
    top: -7.5rem;
    left: 40%;
    width: 240px;
    height: 240px;
    background: url(zixun-1.png);
    z-index: 1;
    animation: donghua-1 linear 10s infinite;
    -webkit-animation: donghua-1 linear 10s infinite;
}

.zixun-e {
    position: absolute;
    top: 3.2rem;
    left: 30%;
    width: 360px;
    height: 360px;
    background: url(zixun-2.png);
    z-index: 2;
    animation: donghua-2 linear 12s infinite;
    -webkit-animation: donghua-2 linear 12s infinite;
}

.zixun-s {
    position: absolute;
    top: 3.2rem;
    left: 48%;
    width: 300px;
    height: 300px;
    background: url(zixun-3.png);
    z-index: 3;
    animation: donghua-3 linear 11s infinite;
    -webkit-animation: donghua-3 linear 11s infinite;
}

@keyframes donghua-1 {
    from {
        top: -7.5rem
    }
    50% {
        top: -11.3rem
    }
    to {
        top: -7.5rem
    }
}

@keyframes donghua-2 {
    from {
        top: 3.2rem;
        left: 34%
    }
    50% {
        top: 5rem;
        left: 24%
    }
    to {
        top: 3.2rem;
        left: 34%
    }
}

@keyframes donghua-3 {
    from {
        top: 3.2rem;
        left: 48%
    }
    50% {
        top: 5rem;
        left: 58%
    }
    to {
        top: 3.2rem;
        left: 48%
    }
}

.zixun-dw {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: white;
    width: 80%;
    height: auto;
    min-width: 75rem;
    max-width: 90rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.zixun-nr {
    overflow: auto;
    z-index: 10;
}

.zixun-nr h1 {
    color: white;
    font-size: 1.8rem;
    font-weight: 600;
}

.zixun-nr h2 {
    color: white;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.zixun-bt {
    overflow: auto;
    z-index: 10;
}

.zixun-bt a {
    display: inline-block;
    background: white;
    border-radius: 2rem;
    color: #666;
    font-size: 1.2rem;
    line-height: 3rem;
    padding: 0 3rem;
    transition: background-color .5s;
}

.zixun-bt a:hover {
    color: white;
    background-color: #f3e42e;
    background-image: linear-gradient(150deg,#fd613e, #f3e42e);
}

/*通用底部*/
footer {
    width: 100%;
    min-width: 75rem;
    text-align: center;
    border-top: 1px solid #eee;
    background: url(footer.png) no-repeat scroll left bottom;
}

.dibu-s {
    overflow: auto;
    padding-bottom: 1.9rem;
    border-bottom: 1px solid #eee;
}

.dibu-s ul {
    width: 100%;
    overflow: auto;
}

.dibu-s ul li {
    overflow: auto;
    float: left;
    width: 24%;
}

/*这里用绝对尺寸*/
.dibu-s ul li i {
    vertical-align: middle;
    display: inline-block;
    width: 60px;
    height: 60px;
    padding-left: 8px;
    animation: dibu-ico-ju .3s steps(16) forwards;
    -webkit-animation: dibu-ico-ju .3s steps(16) forwards;
}

.dibu-s ul li:hover .dibu-ico {
    animation: dibu-ico-kuo .3s steps(16) forwards;
    -webkit-animation: dibu-ico-kuo .3s steps(16) forwards
}

.dibu-s ul li:nth-child(1) i {
    background: url(footer-1.png) left center no-repeat
}

.dibu-s ul li:nth-child(2) i {
    background: url(footer-2.png) left center no-repeat
}

.dibu-s ul li:nth-child(3) i {
    background: url(footer-3.png) left center no-repeat
}

.dibu-s ul li:nth-child(4) i {
    background: url(footer-4.png) left center no-repeat
}

@keyframes dibu-ico-ju {
    0% {
        background-position: 0 -960px
    }
    100% {
        background-position: 0 0
    }
}

@keyframes dibu-ico-kuo {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 0 -960px
    }
}

.dibu-s ul li span {
    font-size: 1rem;
    color: #444
}

.dibu-s ul li:hover .dibu-wz {
    font-size: 1rem;
    color: #1695fc
}

.dibu-z {
    overflow: auto;
    padding: 1.9rem 1.25rem;
}

.dibu-z ul {
    overflow: auto;
    width: 14%;
    float: left;
}

.dibu-z ul li:nth-child(1) {
    color: #444;
    font-size: 1rem;
    font-weight: normal;
    padding-bottom: 0.7rem;

}

.dibu-z ul li {
    overflow: auto;
    line-height: 1.7rem;
}

.dibu-z a {
    color: #999;
    font-size: 0.9rem;
}

.dibu-z a:hover {
    color: #000;
}

.dibu-z .ewm {
    margin-top: 0.7rem;
    text-align: center;
}

.dibu-z .ewm img {
    vertical-align: middle;
    display: inline-block;
    height: 8rem;
    width: 8rem;
}

.dibu-z .ewm p {
    color: #000;
    font-size: 1rem;
}

.dibu-z .ewm p {
    font-size: 0.9rem;
    color: #999
}

.dibu-z .ewm p abbr:hover {
    color: #1695fc
}

.dibu-x {
    color: #999;
    font-size: 0.9rem;
}

.dibu-x a {
    color: #999;
    margin-right: 0.7rem;
}

.dibu-x a:hover {
    color: #000;
}

.dibu-x p {
    margin: 0.5rem 0;
}

.dibu-x .gongan {
    padding-left: 1.5rem;
    background: url(gongan.png) no-repeat scroll left bottom;
}

/*分页按钮*/
.fenye {
    display: flex;
    justify-content: center;
}

.fenye li {
    display: inline;
}

.fenye li a, .fenye li span {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 2rem 0.2rem;
    font-size: 0.9rem;
    color: #333;
    background-color: #fafafa;
    transition: background-color .3s;
    border: 1px solid #f3f4f9;
}

.fenye li a.page-num-current {
    color: white;
    background-color: #397fff;
}

.fenye li a:hover:not(.page-num-current) {
    color: white;
    background-color: #397fff;
}