@charset "UTF-8";
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

body,html {
  font-family: "微软雅黑","宋体","Lucida Grande",Helvetica,Arial,"Microsoft YaHei","FreeSans,Arimo","Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;
  background: #ffffff url(../images/bg.jpg) no-repeat top center;}

html{-webkit-text-size-adjust:none;}
body{overflow-x: hidden;}
fieldset, img {
  border: 0; }

ol, ul {
  list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: 400; }
a:active{

     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}
em {
  font-style: normal; }

input, button, select, textarea {
  outline: none; }

textarea {
  resize: none; }

/* 禁用了文本的拖拉，尤其在谷歌下 */
/* 为了使文本段落左右两边对齐 */
/*======== Link ========*/
a {
  color: #333333;
  text-decoration: none; }

a:hover {
  text-decoration: none; }

.hidden {
  display: none !important; }

img {
  max-width: 100%; display: block;}

.fl {
  float: left; }
/**{transition:all 0.3s;}*/
.fr {
  float: right; }
.box{width: 14.4rem;margin:0 auto;position: relative;}
.text-center {
  text-align: center; }
.clear {
  clear: both; }
.text-center{text-align: center;}
.flex{display: flex;}
.flex-align-center{align-items: center}
.header-box{height:100vh;position: relative;}
.index-banner,.index-banner .swiper-container ,.index-banner .swiper-container .swiper-wrapper{height:100%;}
.header{position: absolute;top:0;left:0;width:100%;display: flex;align-items: center;justify-content: space-between;padding:0.8rem;z-index: 999;box-sizing:border-box;}
.header .logo img{height:0.68rem;}
.header .nav-btn img{height:0.35rem;}

.head{width:100%;display: flex;align-items: center;justify-content: space-between;padding:0.8rem;z-index: 999;box-sizing:border-box;}
.head .logo img{height:0.68rem;}
.head .nav-btn img{height:0.5rem;}

.banner-text{position: absolute;top:40%;left:0.8rem;z-index: 999;font-size: 0.6rem;color: #fff;line-height: 0.91rem}
.scroll-box {min-height:400vh;position: relative; }
.scroll-box .content{position: absolute;height:100vh; top:0;width:100%;}
.scroll-box .content .left{position: absolute;left:0;width: 7.65rem;height:7.35rem;}
.scroll-box .content .left .texts{height:7.35rem;overflow-y: hidden;}

.scroll-box .content .left .texts .item{display: block;opacity: 1; transition: all 1s; height:5.35rem;background: #108bc7;padding:0.8rem; box-sizing:border-box;width: 7.65rem;height:7.35rem;padding-right: 2.0rem;padding-top: 1rem;padding-bottom: 1rem;}
.scroll-box .content .left .texts .item .img{display: none}
.scroll-box .content .left .texts .item:nth-child(2),.scroll-box .content .right.on2,.right-box .item:nth-child(2){ background: #5E9B00 }
.scroll-box .content .left .texts .item:nth-child(3),.scroll-box .content .right.on3,.right-box .item:nth-child(3){ background: #ED8C23 }
.scroll-box .content .left .texts .item:nth-child(4),.scroll-box .content .right.on4,.right-box .item:nth-child(4){ background: #EB5824 }
.right-box .item{position: relative;height:100%;width:100%;}
.scroll-box .content .right{overflow: hidden;}
.scroll-box .content .right.on2:after{ background: #09447D }
.scroll-box .content .right.on3:after{ background: #8F4B00 }
.scroll-box .content .right.on4:after{ background: #992701 }
.scroll-box .content .left .texts .item.on{display: block;opacity: 1;z-index: 99}
.scroll-box .content .left .texts .item.on h1 em{animation: myfirst 0.5s }
@keyframes myfirst
{
    from {top: 70%;}
    to {top: 50%;}
}
.scroll-box .content .left .texts .text-box,.scroll-box .content .right .right-box{transition:all 0.3s;}
.scroll-box .content .left span{font-size: 0.25rem;color: #fff;}
.scroll-box .content .left h1{font-size: 0.86rem;color: rgba(255,255,255,0.13);line-height: 0.79rem;position: relative;margin-top: 0.15rem}
.scroll-box .content .left h1 em{position: absolute;left:0;color: #fff;top:50%;transform:translateY(-50%);font-weight: bold;}
.scroll-box .content .left .p{font-size: 0.18rem;line-height: 0.4rem;color: #fff;margin-top: 0.2rem}
.scroll-box .content .left .btn{display: flex;margin-top: 0.4rem;color: #fff;align-items: center;font-size: 0.28rem;cursor: pointer;}
.scroll-box .content .left .btn img{margin-left: 0.2rem}
/*.scroll-box .content .left .texts .item:last-child .btn{display: none;}*/
.scroll-box .content .left .imgs{position: absolute;bottom:0px;width:12.1rem;height:6.61rem;left:80%;overflow: hidden;z-index: 999}
.scroll-box .content .left .imgs .img-box{transition:all 0.3s;}
.scroll-box .content .left .imgs .item{width:100%;height:6.61rem;}

.scroll-box .content .right{height:3.35rem;transition:all 0.1s; background: #108bc7;width:12.91rem;position: absolute;bottom:0;right:0;z-index: 999;box-sizing:border-box;}
.scroll-box .content .right:after{position: absolute;top:0;left:0;width:0.2rem;height:0.2rem;background: #084281;content: '';display: block;}
.scroll-box .content .right img{position: absolute;bottom:0;right:0.8rem;opacity: 0.09;max-width:80%;max-height: 80%;}

.index-case-box{padding:0.1rem 0.8rem;display: flex;flex-wrap: wrap;justify-content: space-between;}
.index-case-box .item{height:6.95rem;width:33%;margin-bottom: 0.1rem;cursor: pointer;position: relative;overflow: hidden;}
.index-case-box .item .img{position: absolute;top:0;left:0;height:100%;width:100%;transition: all 0.6s;}
.index-case-box .item:nth-child(1),.index-case-box .item:nth-child(4){width:66.3%;}
.index-case-box .item a{position: absolute;width:100%;height:100%;opacity: 0;background: rgba(0,25,51,.8);color: #fff;display: block;transition: all 0.4s;}
.index-case-box .item:hover a{opacity: 1}
.index-case-box .item a span{position: absolute;bottom:0;padding:0 0.2rem;line-height: 0.8rem;font-size: 0.3rem}
.index-case-box .item:hover .img{transform: scale(1.1);}

.nav-box{background: rgba(0,0,0,0.9);top:-200%; transition: all 0.5s; position: fixed;height:100vh;width:100%;z-index: 99999;display: flex;align-items: center;justify-content: flex-end;flex-direction: column;}
.nav {position: relative;z-index: 999999}
.nav a{ font-size: 0.5rem;line-height: 1.21rem;color: #fff; }
.nav2{margin-top: 10%;margin-bottom: 3%}
.nav2 a{font-size: 0.24rem;color: #767676;padding:0 0.3rem;}
.about-box{margin-top: 1rem}
.about-box h1{font-size: 0.62rem;margin-bottom: .2rem}
.about-box .content{margin-top: 1rem}
.about-box .content p{margin-top: 0.4rem;font-size: 0.3rem;line-height: 0.54rem;color: #161616}

.type-box .item{display: flex;align-items: flex-end;margin-top: 1.48rem;padding-right:0.2rem;}
.type-box .item:nth-child(2n){padding-left: 0.2rem;padding-right: 0}
.type-box .item .left{width:5.92rem;box-sizing:border-box;padding:1.0rem 0.65rem;background: #c4ddf7;position: relative;height:7.77rem;}
.type-box .item .left h1{font-size: 0.65rem;line-height: 0.84rem;color: rgba(16,70,127,0.09);position: relative;}
.type-box .item .left h1 span{position: absolute;bottom:-0.1rem;font-weight: bold;color: #10467f;font-size: 0.5rem;}
.type-box .item .left .p{line-height: 0.34rem;font-size: 0.2rem;margin-top: 0.3rem}
.type-box .item .left:after{content: '';display: block;width:0.24rem;height:0.24rem;position: absolute;bottom: 0;left:0;background: #1e8cc5}
.type-box .item .right{background: #1e8cc5;width:7.87rem;}
.type-box .item .right img{transform: translate(0.35rem,-0.35rem);display: block;box-shadow: 0 0 0.3rem 0 #666}
.type-box .item:nth-child(2n) .right img{transform: translate(-0.35rem,-0.35rem);display: block;box-shadow: 0 0 0.3rem 0 #666}

.type-box .item:nth-child(2n) .left:after{right:0;left:initial;}

.contact-box{margin-top: 1rem}
.contact-box h1{font-size: 0.62rem}

.contact-box .content{display: flex;align-items: flex-end;justify-content: space-between;margin-top: 0.85rem}
.contact-box .content .left{flex: 1}
.contact-box .content h2{font-size: 0.5rem}
.contact-box .content p{font-size: 0.3rem;line-height: 0.51rem;margin-top: 0.85rem;
    word-break:break-all;}
.contact-box .content .right {margin-left: 1.2rem}
.contact-box .content .right img{width:6.03rem;}


.ditu{margin-top: 0.85rem}


.type-banner-text{position: absolute;top:40%;left:0.8rem;z-index: 999;font-size: 0.6rem;color: #fff;line-height: 0.91rem}
.type-banner-text h1{font-size: 1.51rem;color: rgba(16,70,127,0.18);position: relative;}
.type-banner-text h1 span{position: absolute;bottom:0;color: #fff;font-size: 0.62rem;left:1.85rem;}
.type-banner-text .p{font-size: 0.2rem;line-height: 0.38rem;margin-left: 1.85rem;margin-top: 0.4rem;max-width: 50%}

.case-box{margin-top: 0.1rem;padding:0 0.8rem;display: flex;flex-wrap: wrap;overflow: hidden;}
.case-box .item{height:7.3rem;width: 5.7rem;margin-top:0.12rem;margin-left: 0.12rem}
.case-box .item .img{height:100%;width:100%;}
.case-box .item:nth-child(7n+1),.case-box .item:nth-child(7n+4),.case-box .item:nth-child(7n+5),.case-box .item:nth-child(7n+7){margin-left: 0}
.case-box .item:nth-child(7n+4){width: 100%}
.case-box .item:nth-child(7n+6){width: 11.55rem;}
.case-box .item:nth-child(7n+7){width: 100%;}
.footer{padding:0.8rem;display: flex;justify-content: space-between;align-items:center;font-size: 0.22rem;overflow: hidden;}
.footer .left{display: flex;align-items: center}
.footer .left .logo img{height:0.56rem;}
.footer .left .a{margin-left: 0.8rem}
.footer .left .a a{margin:0 0.2rem;}
.footer .right a{padding:0 0.15rem;}
.load-box{text-align: center;font-size: 0.2rem;padding-top: 0.4rem;display: none;}
.load-box.on{display: block}
.load-box.off{display: block;color: #999}
@media screen and (max-width: 640px) {
    .header .logo img{height: 1.2rem}
    .header .nav-btn img{height:.8rem;}
    .head .logo img{height: 1.2rem}
    .head .nav-btn img{height:.8rem;}
    .header-box{height: 28vh}
    .scroll-box{min-height: auto;}
    .nav-box{justify-content: center;}
    .scroll-box .content{position: initial;height: initial;}
    .nav a{font-size: 1.2rem;line-height: 3rem;}
    .scroll-box .content .left .btn{display: none}
    .nav2 a{font-size: .8rem;}
    .scroll-box .content .left .texts .item{display: block;opacity: 1}
    .scroll-box .content .left span{font-size: .6rem}
    .scroll-box .content .left .texts .item{position: initial;width:100%;height:auto;}
    .scroll-box .content .left .p{font-size: 0.7rem;line-height: 1.4rem;margin-top: .4rem}
    .scroll-box .content .left h1 em{font-size: 1rem}
    .scroll-box .content .left h1{margin-top: .4rem;font-size: 1rem}
    .scroll-box .content .left{height:auto;width:100%;position: initial;}
    .scroll-box .content .left .imgs{display: none;}
    .index-case-box .item{width:48%;margin-top:.5rem}
    .scroll-box .content .right:after{display: none}
    .scroll-box .content .left .texts .item{padding-right: 1rem}
    .scroll-box .content .left .texts .item .img{display: block;width:100%;height:12rem;margin-top: .4rem}
    .index-case-box .item:nth-child(1), .index-case-box .item:nth-child(4){width:48%;}
    .footer .left .logo img{height: 1.2rem}
    .footer .right{flex:1;text-align: right;}
    .footer .right a{display: inline-block;line-height: 1.1rem}
    .about-box h1,.contact-box h1{font-size: 1.2rem;}
    .about-box .content p{font-size: 0.7rem;line-height: 1.3rem}
    .box{width:17.5rem;}
    .type-box .item{position: relative;margin-top: 11rem}
    .type-box .item .left{flex: 1;height: auto;padding-top: 8rem;}
    .type-box .item .left h1{font-size: 1.5rem;line-height: 1.6rem}
    .type-box .item .left h1 span{font-size: 1.2rem}
    .type-box .item .left .p{line-height: 1.3rem;font-size: .7rem; margin-top: .4rem}
    .type-box .item .right{width:80%;position: absolute;top:-8rem;margin-left: 6%;z-index: 888}
    .type-box .item .right img{transform: translate(1rem,-1rem);}
    .type-box .item:nth-child(2n) .right{left:8%;}
    .type-box .item:nth-child(2n) .right img{transform: translate(-1rem,-1rem);}
    .type-box .item .left:after{width:.5rem;height:.5rem;}
    .contact-box .content h2{font-size: 0.9rem}
    .contact-box .content p{line-height: 1.2rem;font-size: .7rem}
    .contact-box .content{display: block;}
    .contact-box .content .right{margin-left: 0;width:100%;margin-top: 0.8rem}
    .contact-box .content .right img{width:100%;}
    .type-banner-text h1{line-height: 1.5rem}
    .type-banner-text h1 span{font-size: 1.2rem;}
    .type-banner-text .p{font-size: .7rem;line-height: 1.1rem;margin-left: 0;margin-top: .6rem;max-width: initial;}
    .type-banner-text h1 span{left: 0}
    .type-banner-text{width:100%;left:0;padding:0.8rem;box-sizing:border-box;top:5rem;}
    .type-header{height: 50vh;}
    .scroll-box .content .left .texts{height: auto;}
    .footer,.footer a{font-size: .6rem}
}