a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin:0; padding:0; border:0; font:inherit; vertical-align:baseline; word-wrap:break-word;}
table { border-collapse:collapse; border-spacing:0;}
button, input, select, textarea { outline:0; -webkit-box-sizing:border-box;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}
li, ol, ul {list-style:none;}
img { max-width:100%; vertical-align:top; border:0; -ms-interpolation-mode:bicubic; -webkit-touch-callout:none;}


*{
    color:#333333;
    font-family:"微软雅黑",Tahoma,Arial,Helvetica,sans-serif;
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    max-width: 750px;
    min-width:320px;
    margin:0 auto;
}
a, a:link, a:visited, a:hover, a:active{
    text-decoration: none;
}
ul{
    list-style: none;
    padding:0;
    margin:0;
}
.main-body{
    font-size: 0.28rem;
    margin:0 auto;
}
/* 头部 */
.mobile{
    width:7.5rem;
    height:1rem;
    position: fixed;
    z-index: 555;
    background: linear-gradient(to right, #123e97 , #4bbdef);
    top:0;
}
.logo{
    width: 6.7rem;
    height:1rem;
    float:left;
    overflow: hidden;
}
.logo img{
    width: 100%;
}
.mobile-inner-header{
    width: 0.8rem;
    height: 0.8rem;
    float:left;
}
.mobile-inner-header-icon{
    width:100%;
    color: #333333;
    height: 1rem;
    text-align: center;
    position: relative;
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -o-transition: background 0.5s;
    transition: background 0.5s;
}
.mobile-inner-header-icon:hover{
    background-color: rgba(255,255,255,0.2);
    cursor: pointer;
}
.mobile-inner-header-icon span{
    position: absolute;
    left:0.15rem;
    top: 0.5rem;
    display: block;
    width: 0.5rem;
    height: 2px;
    background-color: white;
}
.mobile-inner-header-icon span:nth-child(1){
    transform: translateY(7px) rotate(0deg);
}
.mobile-inner-header-icon span:nth-child(2){
    transform: translateY(-7px) rotate(0deg);
}
.mobile-inner-header-icon span:nth-child(3){
    transform: translateY(0) rotate(0deg);
}


.mobile-inner-header-icon-click span:nth-child(1){
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: clickfirst;
}
.mobile-inner-header-icon-click span:nth-child(2){
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: clicksecond;
}
.mobile-inner-header-icon-click span:nth-child(3){
    display: none;
}


@keyframes clickfirst {
    0% {
        transform: translateY(7px) rotate(0deg);

    }

    100% {
        transform: translateY(0) rotate(45deg);
    }
}



@keyframes clicksecond {
    0% {
        transform: translateY(-7px) rotate(0deg);
    }

    100% {
        transform: translateY(0) rotate(-45deg);
    }
}

.mobile-inner-header-icon-out span:nth-child(1){
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: outfirst;
}
.mobile-inner-header-icon-out span:nth-child(2){
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: outsecond;
}

@keyframes outfirst {
    0% {
        transform: translateY(0) rotate(-45deg);
    }

    100% {
        transform: translateY(-7px) rotate(0deg);
    }
}


@keyframes outsecond {
    0% {
        transform: translateY(0) rotate(45deg);
    }

    100% {
        transform: translateY(7px) rotate(0deg);
    }
}

.mobile-inner-nav{
    background:rgba(255,255,255,0.9);
    width: 30%;
    position: absolute;
    top: 1rem;
    right: 0;
    padding: 0.3rem 0;
    display: none;
}
.mobile-inner-nav a{
    font-size: 0.24rem;
    color:#333333;
    display: inline-block;
    line-height: 0.8rem;
    width: 80%;
    margin-left: 10%;
    text-align: center;
    border-bottom: 1px dashed #bebebe;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.mobile-inner-nav a:hover{
    color: #2466b3;
}
/* 图标 */
.mobile-ico{
    background: #f5f5f5;
}
.ico-list{
    padding:0.1rem 0 0.3rem;
}
.ico-list:after{
    content: "";
    display: block;
    height:0;
    clear: both;
    visibility: hidden;
}
.ico-list li{
    float: left;
    width:33.3%;
    text-align: center;
    margin-top: 0.3rem;
}
.ico-img{
    width:1.3rem;
    height:1.3rem;
    background: linear-gradient(to right, #123e97 , #4bbdef);
    border-radius: 50%;
    margin:0 auto;
    padding:0.35rem;
}
.ico-img img{
    width:0.6rem;
    height:0.6rem;
}
.ico-list li span{
    display: block;
    margin:0.12rem 0;
}

/* 产品 */
.product{
    padding-bottom: 0.5rem;
}
.title{
    text-align: center;
    padding: 0.5rem 0 0.3rem;
}
.title h1{
    font-size:0.4rem;
    font-weight: normal;
    position: relative;
}
.title h1:before{
    content: "";
    display: block;
    width:10%;
    height:0.03rem;
    background: linear-gradient(to right, #123e97 , #4bbdef);
    position: absolute;
    left:45%;
    top:0.7rem;
}
.title h2{
    font-size: 0.2rem;
    font-weight: normal;
    color: #999999;
    line-height: 2em;
    margin:0.3rem 0 0.1rem
}
.common-class{
    margin-left: 1%;
    margin-top: -0.15rem;
}
.common-class li{
    width:30.8%;
    height:0.6rem;
    display: inline-block;
    margin:0.15rem 0 0 1%;
    border-radius: 0.05rem;
    text-align: center;
    background: #d3e0f0;
    overflow: hidden;
}
.common-class li a{
    display: block;
    width:100%;
    height:0.6rem;
    font-size: 0.24rem;
    line-height: 0.6rem;
}
.common-class li a:hover{
    color: white;
    background: linear-gradient(to right, #123e97 , #4bbdef);
}
.common-class .c-current{
    background: linear-gradient(to right, #123e97 , #4bbdef);
}
.common-class .c-current a{
    color: white;
}

.pro-list{
    clear: both;
}
.pro-list:after{
    content:".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.pro-list li{
    width:47%;
    float:left;
    margin:0.2rem 0 0 2%;
    background: white;
    padding:0.03rem;
    border:1px solid #d9d9d9;
}
.pro-img{
    width:100%;
    height:0;
    padding-top: 75%;
    overflow: hidden;
    position: relative;
}
.pro-img img{
    width:100%;
    height:100%;
    transition: all 0.3s ease-in;
    position: absolute;
    left:0;
    top:0;
}
.pro-name{
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.22rem;
}
.pro-list li:hover{
    background: linear-gradient(to right, #123e97 , #4bbdef);
}
.pro-list li:hover .pro-name{
    color: white;
}
.pro-list li:hover .pro-img img{
    transform: scale(1.1);
}

/* 优势 */
.advantage{
    height:9rem;
    background: url(../img/adbg.jpg) center no-repeat;
    background-size: cover;
}
.advantage .title h1, .advantage .title h2{
    color: white;
}
.advantage .title h1:before{
    background: linear-gradient(to right, #4bbdef , white);
}
.ad-list{
    margin-top: -0.2rem;
}
.ad-list li{
    width:47%;
    height:3rem;
    border:1px solid white;
    padding:0.2rem 0.1rem;
    float:left;
    margin-left: 2%;
    margin-top: 0.2rem;
    overflow: hidden;
}
.ad-ico{
    width:0.8rem;
    height:0.8rem;
    border-radius: 50%;
    background: white;
    float:left;
    padding:0.2rem;
}
.ad-list li h2{
    float: left;
    color: white;
    margin:0.2rem 0 0.2rem 0.1rem;
    font-size: 0.26rem;
}
.ad-list li p{
    clear: both;
    padding:0.15rem 0;
    color:rgba(255,255,255,0.6);
    line-height: 1.8em;
    font-size: 0.22rem;
}

/* 案例 */
.case{
    padding-bottom: 0.5rem;
}
.case-list{
    margin-top: -0.2rem;
}
.case-list:after{
    content: "";
    display: block;
    height:0;
    visibility: hidden;
    clear: both;
}
.case-list li{
    width:47%;
    float:left;
    margin-left: 2%;
    margin-top: 0.2rem;
}
.case-img{
    width:100%;
    height:0;
    padding-top: 75%;
    overflow: hidden;
    position: relative;
}
.case-img img{
    width:100%;
    height:100%;
    transition: all 0.3s ease-in;
    position: absolute;
    left:0;
    top:0;
}
.case-name{
    height:0.6rem;
    text-align: center;
    line-height: 0.6rem;
    background: #f5f5f5;
    position: relative;
}
.case-list li:hover .case-img img{
    transform: scale(1.1);
}
.case-list li:hover .case-name{
    color: white;
    background: linear-gradient(to right, #123e97 , #4bbdef);
}
.case-name:before{
    content: "";
    display: block;
    width:0.3rem;
    height:0.14rem;
    background: url("../img/sj.png") center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left:0.4rem;
    top:-0.14rem;
}
.case-list li:hover .case-name:before{
    background: url("../img/sj2.png") center no-repeat;
    background-size: 100% 100%;
}

/* 关于我们 */
.aboutus{
    background: url("../img/gybg.jpg") top no-repeat;
    background-size: 100% auto;
    padding-bottom: 0.5rem;
}
.aboutus .title h1, .aboutus .title h2{
    color: white;
}
.aboutus .title h1:before{
    background: linear-gradient(to right, #4bbdef , white);
}
.about-img{
    width: 95%;
    margin:0 auto;
}
.about-img img{
    width: 100%;
    display: block;
}
.aboutus p{
    width:95%;
    font-size: 0.22rem;
    color: #666666;
    line-height: 2em;
    margin:0.2rem auto 0.3rem;
}
.about-num:after{
    content: "";
    display: block;
    height:0;
    visibility: hidden;
    clear: both;
}
.about-num li{
    width:25%;
    text-align: center;
    float:left;
    overflow: hidden;
}
.num-ico{
    width:1rem;
    height:1rem;
    border-radius: 50%;
    background: linear-gradient(to right, #123e97 , #4bbdef);
    padding:0.25rem;
    margin:0 auto;
}
.num-ico img{
    width:0.5rem;
    height:0.5rem;
}
.about-num li h2{
    font-size: 0.2rem;
    font-weight: normal;
    margin: 10px 0 5px;
}
.about-num li h2 span{
    font-size: 0.28rem;
    color: #2466b3;
    font-weight: bold;
}
.about-num li h3{
    font-weight: normal;
    font-size: 0.24rem;
}

/* 新闻 */
.news{
    background: #f5f5f5;
    padding-bottom: 0.5rem;
}
.news-list{
    width: 95%;
    margin:-0.2rem auto 0;
}
.news-list li:after{
    content: "";
    display: block;
    height:0;
    clear: both;
    visibility: hidden;
}
.news-list li{
    margin-top: 0.2rem;
    background: white;
    padding: 0.15rem 0;
}
.news-img{
    width:30%;
    height:0;
    padding-top: 20%;
    overflow: hidden;
    position: relative;
    margin-left:1.5%;
    float:left;
}
.news-img img{
    width:100%;
    height:100%;
    transition: all 0.3s ease-in;
    position: absolute;
    left:0;
    top:0;
}
.news-con{
    float: right;
    width:65%;
    margin-right: 1%;
}
.news-con h1{
    font-size: 0.24rem;
    padding-left: 0.12rem;
    position: relative;
    margin-top: 10px;
}
.news-con h1:before{
    content: "";
    display: block;
    width:0.04rem;
    height:0.24rem;
    background: #2466b3;
    position: absolute;
    top:0.04rem;
    left:0;
}
.news-con p{
    font-size: 0.2rem;
    color: #666666;
    line-height: 1.8em;
    margin:0.1rem 0;
}
.news-list li:hover .news-img img{
    transform: scale(1.1);
}

/* 底部 */
.footer{
    width:100%;
    height:0.5rem;
    background: #393939;
    float:left;
    overflow: hidden;
    font-size: 0.2rem;
    color:rgba(255,255,255,0.6);
    text-align: center;
    line-height: 0.5rem;
    margin-bottom: 0.9rem;
}
/* 悬浮按钮 */
.float{
    max-width: 750px;
    height:0.9rem;
    background: linear-gradient(to right, #123e97 , #4bbdef);
    position:fixed;
    bottom:0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0.1rem 0;
    box-sizing: border-box;
}
.float li{
    width:25%;
    border-right:1px solid rgba(255,255,255,0.2) ;
    text-align: center;
    box-sizing: border-box;
}
.float li a{
    display:block;
    width:100%;
    height:100%;
}
.float-ico{
    width:22%;
    margin:0.05rem auto 0;
}
.float-ico img{
    width:100%;
}
.float-txt{
    font-size: 0.24rem;
    text-align: center;
    line-height:0.4rem;
    color:white;
}
.float li:nth-last-child(1){
    border-right: none;
}
/* 内页面包屑 */
.crumb{
    color:#888;
    height:0.5rem;
    line-height: 0.5rem;
    font-size: 0.2rem;
    background: #f5f5f5;
    padding-left: 2%;
}
.crumb a{
    font-size: 0.2rem;
    padding:0 1%;
    transition: all 0.3s ease-in-out;
}
.crumb a:hover{
    color:#2466b3;
}
/* 内页 */
.in-class{
    margin-top: 0.2rem;
}

/* 内页新闻 */
.in-news li{
    width:95%;
    display: flex;
    align-items: center;
    margin:0 auto;
    border-bottom: 1px dashed #e6e6e6;
    padding: 0.3rem 0;
    transition: all 0.3s ease-in-out;
}
.in-news li:hover{
    background: #f5f5f5;
}
.in-news-img{
    width:40%;
    height:0;
    padding-top: 26.3%;
    float:left;
    border:1px solid #eee;
    box-sizing: border-box;
    font-size: 0;
    overflow: hidden;
    position: relative;
}
.in-news-img img{
    width:100%;
    height:100%;
    transition: all 0.3s ease-in;
    position: absolute;
    left:0;
    top:0;
}
.in-news-con{
    width:55%;
    float: right;
}
.in-news-con h1{
    font-size: 0.24rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.in-news-con p{
    color: #666;
    line-height: 1.5em;
    font-size: 0.2rem;
    margin:0.1rem 0;
}
.in-news-con h2{
    color: #999999;
    font-size: 0.2rem;
    vertical-align: top;
    margin:0.1rem 0;
}
/*内页页码*/
.page{
    clear: both;
    text-align: center;
    overflow: hidden;
    padding: 0.3rem 0;
}
.page a{
    font-size:0.2rem;
    display:inline-block;
    height:0.4rem;
    background: #eee;
    padding:0 0.15rem;
    line-height: 0.4rem;
    border-radius: 0.02rem;
    margin: 0 0.02rem;
    box-sizing: border-box;
}
.page a:hover{
    background: linear-gradient(to right, #123e97 , #4bbdef);
    color:white;
}
/*内页内容*/
.in-container{
    clear:both;
}
.in-about{
    padding:0.2rem 2%;
}
.in-case-list{
    margin-top: 0.15rem;
}
/*详情页*/
.in-page{
    padding:0.15rem 2%;
}
.in-name{
    text-align: center;
    margin-top: 0.2rem;
    font-size: 0.3rem;
}
.issue-time{
    font-size: 0.2rem;
    color:#b0b0b0;
    text-align: center;
    line-height: 3em;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 0.2rem;
}
.detail img{
    max-width:100%;
}
.detail-next{
    overflow: hidden;
    margin: 0.2rem 0;
    border-bottom: 1px solid #d9d9d9;
    border-top: 1px solid #d9d9d9;
    padding:0.05rem 0;
    line-height: 1.5em;
}
.detail-next a{
    font-size: 0.2rem;
    display: block;
    color:#999999;
    transition: all 0.3s ease-in-out;
}
.detail-next a:hover{
    color:#2466b3;
}