*{ margin:0; padding:0; color:#676767;outline:none;font: 14px/1.5 "微软正黑体","Microsoft JhengHei","Microsoft Yahei","微软雅黑","Hiragino Sans GB","冬青黑体",tahoma,"times new roman",helvetica,arial;}
a{text-decoration:none}
body{overflow-x: hidden}
.header-top{position: absolute; width: 100%; background: rgba(255,255,255,.8); display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; height: 100px; z-index: 99}
a.logo{ position: absolute; left: 0; display: block; font-size: 0}
nav{display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;}
nav a{font-size: 16px; color: #1b4272; margin: 0 10px; display: block;}
.mobile-nav{display:none}
.banner{position: relative; font-size: 0; overflow: hidden; max-height: 100vh}
.banner video{background: #000;object-fit:fill; width: 100%; height: auto;}
.banner-text{background: url("../images/banner-bg.png"); align-items: center;position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content:flex-end; flex-flow: column nowrap}
.banner-text .text{width: 100%; max-width: 1440px; margin-bottom: 100px;}
.banner-text .text *{ color: #fff; font-weight: bold; line-height: 1.3}
.banner-text .text p:nth-child(1){ font-size: 60px}
.banner-text .text p:nth-child(2){ font-size: 30px}

.box{ display: flex; flex-flow: column nowrap; width: 100%}
.box > div{ min-height: 100vh; width:100%; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; overflow: hidden}
.title{ display: flex; flex-flow: row nowrap; justify-content: space-between; width: 100%; max-width: 1200px; align-items: center; position: relative; padding:30px 0; margin-bottom: 30px}
.title div span{ color: #152f4f; font-size: 38px; font-weight: bold;}
.title a{ background: #152f4f; display:block; width: 150px; height: 50px; text-align: center; line-height: 50px; color: #fff}
.title:before{ position: absolute; display:block; width: 30px; height: 1px; background: #152f4f; content: ''; bottom: 0; left: 0}



.pro{background: #f8f8f8}
.pro-box{ display: flex; flex-flow: row wrap; width: 100%; max-width: 1200px; justify-content: space-between;}
.pro-box a{width: calc((100% - 20px) / 3); display: block; position: relative; font-size: 0; margin: 5px 0}
.pro-box a img{width: 100%; height: auto}
.pro-box a span{ position: absolute; top: 20px; left: 20px; background: #1b4272; color: #fff; padding: 10px 20px; display: block; font-size: 20px; font-weight: bold}

.about{ background:url("../images/about-bg.jpg") no-repeat left bottom}

.about-logo{ padding: 0 calc(50% - 600px); background: url("../images/about-logo-bg.png") center repeat-x; width: 100%; box-sizing: border-box;}
.about-logo img{background: #fff; padding: 0 20px;}
.about-box{width: 100%; max-width: 1200px; display: flex; flex-flow: row wrap; align-items: center;justify-content: space-between; background: url("../images/about-img-bg.jpg") no-repeat right center;}

.about-text{ display: flex; flex-flow: column nowrap; width: 300px}
.about-text p{ line-height:2; color: #000}
.about-text a{ font-size: 16px; margin-top: 10px; align-self: flex-end}

.about-bar{width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-between; margin-top: 60px}
.about-bar a{ display: flex; background: url("../images/about-bar-bg.png") no-repeat center; width: 155px; height: 155px; background-size: cover; justify-content: center; align-items: center; flex-flow: column nowrap}

.about-img{ margin-top: 70px; margin-right:140px;}

.news{min-height:auto !important; background:url("../images/news-bg.jpg")}
.news-title{ background: #152f4f; max-width:100%; padding:40px calc(50% - 600px) 60px; box-sizing: border-box; margin: 0}
.news-title div *{color:#fff !important}
.news-title a{background:#fff; color:#152f4f}
.news-title:before{bottom: 30px; background: #fff; left: calc(50% - 600px)}
.news-box{width: 100%; max-width: 1200px; display: flex; flex-flow: row wrap; justify-content: space-between; padding: 20px 0}
.news-box a{ display: flex; flex-flow: row nowrap; justify-content: space-between; width:calc(50% - 20px); margin: 20px 0}
.news-box a div.time,
.news-box a div.text{ display: flex; flex-flow: column nowrap; justify-content: center; }
.news-box a div.time{ width:120px; height: 120px; border-radius: 100%; background: #152f4f;align-items: center; box-sizing: border-box;}
.news-box a div.text{ width: calc(100% - 140px);}
.news-box a div.text h3{font-size: 18px; margin-bottom:10px; color: #152f4f; font-weight: bold;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.news-box a div.time *{color: #fff; font-weight: bold;}
.news-box a div.time,
.news-box a div.time *{transition:all 0.5s}
.news-box a div.time span{ font-size: 60px; line-height:1}
.news-box a div.time b{ font-size:16px}
.news-box a div.text p{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.news-box a:hover div.time{ background:#f3fbff; border:6px solid #152f4f}
.news-box a:hover div.time *{color: #152f4f}


.since-title{ width: 100%; max-width: 1200px; color: #152f4f; font-size: 40px; font-weight: bold; text-align: center; margin-bottom: 50px; display: flex; justify-content: center; align-items: center}
.since-title:before,
.since-title:after{ width:100px; height: 3px; background: #152f4f; display:block;content:''; margin: 0 20px}
.since-box{ width: 100%; display: flex; flex-flow: column nowrap}
.since-box > div{ width: 100%}
#since .swiper-slide{ position: relative; display: flex; justify-content: center; align-items: center; flex-flow: column nowrap}
#since .swiper-slide div{ position: absolute; display: flex; flex-flow: column nowrap; align-items: center;}
#since .swiper-slide div p{ font-size:20px; color: #152f4f; font-weight: bold;}
#since .swiper-slide span{ font-size:400px; line-height: 1; color: #cbd8db; position: relative;}
#sinceThumbs:before{ height: 4px; width: 100%; background: #cbd8db; display: block; content: ''; position: absolute; left:0; top: 8px}
#sinceThumbs .swiper-slide{ display: flex; justify-content: center; flex-flow: column wrap; align-items:center; opacity: 0.5}
#sinceThumbs .swiper-slide img{ height:60px; width: auto;}
#sinceThumbs .swiper-slide:before{ width: 20px; height: 20px; border-radius: 100%; background: #cbd8db; display: block; content: ""; opacity: 0.5}
#sinceThumbs .swiper-slide-active,
#sinceThumbs .swiper-slide-active:before{ opacity: 1}
.service{ background: url("../images/service-bg.jpg") no-repeat; background-size:cover;}
.service-box{width: 100%; max-width: 1200px; display: flex; flex-flow: row nowrap; justify-content: space-between;}
.service-box > div{width: calc(50% - 10px)}
#service .swiper-slide a{ display: block; width: 100%; position: relative; font-size: 0}
#service .swiper-slide a b{ background: rgba(255,255,255,.9); width: 100%; position: absolute; bottom: 0; left: 0; padding: 5px 10px; font-size: 16px}
#service .swiper-pagination{height: 34px; text-align: right; bottom: 0; display: flex; align-items: center; justify-content: flex-end}

.service-list{ background: #fff; padding: 10px; box-sizing: border-box; display: flex; justify-content: space-between; flex-flow: column nowrap}
.service-list a{ display: flex; justify-content: space-between; flex-flow: row nowrap;}
.service-list a img{margin-right: 10px; width: 28%}
.service-list a div{ justify-content: space-between; display: flex; flex-flow: column wrap; overflow:hidden}
.service-list a div span{align-self: flex-end}
.service-list a div h3{font-size:20px; font-weight: bold; color:#152f4f;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.service-list a div p{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}

.contact{display: flex; flex-flow:column nowrap; justify-content: center; align-items: center; padding: 50px 0}
.contact *{ color: #152f4f; text-align: center;}
.contact p{ font-size:40px; font-weight: bold;}
.contact p:first-line{font-size: 30px;}
.contact-link{ display: flex; justify-content: center;}
.contact-link a{ background: #152f4f center no-repeat; border-radius: 100%; width: 40px; height: 40px; display: block; margin:40px 5px}
.contact-link a:nth-child(1){ background-image: url("../images/qq.png")}
.contact-link a:nth-child(2){ background-image: url("../images/wb.png")}
.contact-link a:nth-child(3){ background-image: url("../images/wx.png")}
.contact span{font-size:30px; font-weight: bold;}
.contact span:first-line{ font-size: 16px;}

.code{background: url("../images/foot-bg.jpg"); display: flex; justify-content: center; padding:40px 0; width: 100%; align-items: center}
.code img{ background:url("../images/code-bg.jpg") no-repeat center; padding: 10px; margin: 0 20px}
.code:before,
.code:after{display: block; content: ''; width: 280px; height: 60px}
.code:before{ background:url("../images/foot_font.png");}
.code:after{background:url("../images/foot_logo.png");}
.copyright{ text-align: center; width: 100%; height: 40px; line-height: 40px; color: #999}

.mobile-bot-nav{ display:none}
.current-title{ display: flex; width: 100%; height: 600px; background-size:cover; background: no-repeat center; flex-flow: column nowrap; justify-content: center; align-items:center}
.current-title div.text{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center}
.current-title div.text *{color: #fff; text-shadow:0 1px 2px rgba(0,0,0,.5)}
.current-title div.text span{line-height: 2; display: flex; flex-flow: row nowrap; align-items: center; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-size: 20px}
.current-title div.text span:before,
.current-title div.text span:after{ width:30px; height: 1px; background: #fff; display: flex; content: ''; margin: 0 10px; box-shadow: 0 1px 2px rgba(0,0,0,.5)}
.current-title div.text p{ font-size: 16px; font-weight: bold;}

.list-main-bg{ background:url("../images/news-bg.jpg") repeat; width: 100%; height: 200px}
.list-box{width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-flow: row nowrap; align-items: flex-start}

.list-main-bar{ width: 250px;  display: flex; flex-flow:column  nowrap; justify-content: center; align-items: center;}
.list-main-bar-title{ width: 100%; height: 248px; display: flex; justify-content: center; align-items: center; background:url("../images/common_left_bg.png"); position: relative;}
.list-main-bar-title a{display: none}
.list-main-bar-title p{ color: #fff; text-align: center; width: 100%}
.list-main-bar-title p:first-line{ font-size:30px; font-weight: bold;}
.list-main-bar-title:before{ background:url("../images/common_bg.png"); width: 287px; height: 40px; position: absolute; top:-40px; left: 0; display: block; content: ''}
.list-main-bar-main{ width: 100%; display: flex; flex-flow: column nowrap;}
.list-main-bar-main a{ display:block; width: 100%;box-sizing: border-box; padding-left:20px; border-left: 10px solid #999;}
.list-main-bar-main a span{ height: 80px; line-height:80px; display: block; text-align: center; font-size: 16px;color: #999; width: 100%; border-bottom: 1px solid #999; }
.list-main-bar-main a:hover,
.list-main-bar-main a.active{ border-color:#152f4f}
.list-main-bar-main a:hover span,
.list-main-bar-main a:active span{ color: #152f4f; border-color:#152f4f}
.list-box-main{ width: calc(100% - 250px); box-sizing: border-box; border: 1px solid #d8d8d8; padding: 0 20px}
.loca-bar{ display: flex; justify-content: space-between; flex-flow: row nowrap; align-items: center; padding: 20px 0; border-bottom: 1px solid #d8d8d8; width: 100%; margin-bottom: 20px}
.loca-bar h3{ color: #152f4f; font-size: 20px; font-weight: bold;}
.loca-bar div *:after{ content: '/'; margin: 0 10px}
.loca-bar div *:last-child:after{display: none}

.page{ box-sizing:border-box; width:100%; display:flex; flex-flow:row nowrap; justify-content:flex-end; padding:20px 0}
.page *{text-align:center; height:28px; line-height:28px; font-size:12px; margin:0 3px; padding:0 10px; border:1px solid #D5D5D5; background:#fff; transition:all 0.5s}
.page span{ color:#aaaaaa; background:#E5E5E5; border-color:#FFFFFF}
.page a{ color:#969696;}
.page a:hover{ background:#07287f; color:#FFFFFF; border-color:#fff}
.page span.active{ background:#152f4f; color:#FFFFFF; border-color:#fff}

.cont-title{ background:url("../images/foot-bg.jpg");height:160px; justify-content: center; align-items: center; display: flex; flex-flow: column wrap; margin-bottom: 20px}
.cont-title *{color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.3)}
.cont-title h3{font-size:30px;font-weight: bold}
.cont-page{border-top: 1px solid #e1e1e1; display: flex; justify-content: space-between; align-items:center; margin-top: 50px; padding-top: 50px}
.cont-page *{transition: all 0.3s}
.cont-page div{display: flex;flex-flow: column wrap;}
.cont-page > a{ background: #666; color: #fff; height: 30px; line-height: 30px; padding: 10px; font-weight: bold; width: 200px; text-align:right;}
.cont-page > a:hover{ background: #00552c; text-indent:1em}
.cont-page div a:hover{color: #00552c}
@media (max-width: 1200px){
    .mobile-nav{ display: flex; flex-flow:row wrap; justify-content: space-between; background: #152f4f; padding:10px; box-sizing: border-box;}
    .mobile-nav a{ display: flex; flex-flow:  column nowrap; font-size: 0; width: calc((100% - 30px) / 4); align-items: center; justify-content: center}
    .mobile-nav a span{ font-size: 14px; color: #fff;}
    nav{
        display: none;
    }
    .about-box{
        width: 96%;
    }
    .service-box{
        width: 96%;
        flex-flow: column;
    }
    .service-list{
        margin: 10px auto;
    }

}