@font-face {

    font-family: 'icomoon';

    src:  url('../fonts/icomoon.eot?thyym8');

    src:  url('../fonts/icomoon.eot?thyym8#iefix') format('embedded-opentype'),

      url('../fonts/icomoon.ttf?thyym8') format('truetype'),

      url('../fonts/icomoon.woff?thyym8') format('woff'),

      url('../fonts/icomoon.svg?thyym8#icomoon') format('svg');

    font-weight: normal;

    font-style: normal;

    font-display: block;

  }

  

  [class^="icon-"], [class*=" icon-"] {

    /* use !important to prevent issues with browser extensions that change fonts */

    font-family: 'icomoon' !important;

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

  

    /* Better Font Rendering =========== */

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

  }

  

  .icon-time:before {

    content: "\e900";

  }

  .icon-email:before {

    content: "\e901";

  }

  .icon-tel:before {

    content: "\e902";

  }

  .icon-address:before {

    content: "\e903";

  }

  .icon-jt:before {

    content: "\e904";

  }

  

html{font-size:62.5%}

body{font-size:1rem}

.block{padding: 0 300px;}



header{width:100%;background:#fff;box-shadow:3px 10px 10px rgba(0,0,0,.1); top: 0; left: 0; background: #fff; z-index: 999;}

header .top{ height: 60px; background:rgba(244,244,244,1); text-align: right; }

header .top input[type=text]{width:280px;height:36px;border-radius:22px; margin-top: 12px; background:rgba(0,0,41,.1);padding: 0 10px 0 10px; box-sizing: border-box; }
header .top form{ position: relative; }
.ser_sub{ position: absolute; top:20px; right: 10px; width: 20px; height: 20px; background: url(../images/search.png) no-repeat center; cursor: pointer; }


header .navt{ height: 80px;}

header .logo{width:160px;float:left;margin-top:20px}

header .logo img{width:100%}

header .nav{float:right;margin-top:25px}

header .nav li{float:left;font-size:1.8rem;margin-left:30px;position:relative;}

header .nav li a{color:rgba(0,0,41,.4);}

header .nav li.on a{color:#000029;padding: 25px 0;}

header .nav li a:hover{color:#000029}

header .nav li dl{background:#fff;text-align:center;top:40px;opacity:0;visibility:hidden;-webkit-transition:all .35s ease-out;transition:all .35s ease-out;-webkit-transform:translateY(10px);transform:translateY(10px);position:absolute;width:150px;z-index:3;box-shadow:0 0 6px rgba(66,171,234,.1)}

header .nav li dl dd{height:45px;line-height:45px;font-size:15px;border-bottom:1px solid #e1e1e1;text-align:left}

header .nav li dl dd a{padding:0 10px 0 10px;display:block;font-size:1.4rem;color:#666}

header .nav li.on dl dd a{padding:0 10px 0 10px;display:block;font-size:1.4rem;color:#666}

header .nav li dl dd:last-child{border:none}

header .nav li dl dd a:hover{color:#000029;border:none}

header .nav li:hover dl{opacity:1;visibility:visible;-webkit-transform:translateY(0);transform:translateY(0)}





.banner{width:100%; position: relative;}

.banner img{width:100%;transition: transform 5s ease;-webkit-transition: transform 5s ease;transform: scale(1.05);-webkit-transform: scale(1.05);}

.banner .swiper-slide{ overflow: hidden; position: relative;}

.banner .swiper-slide-active  img{

    transform: matrix(1, 0, 0, 1, 0, 0);

    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);

}

.banner .swiper-container{ position: relative;}

.banner .btns{ position: absolute; left: 200px; display: table;top: 50%;transform: translateY(-50%); z-index: 999;}



.banner .swiper-pagination{ position: static; }

.banner .swiper-pagination-bullet{opacity:.3;width:28px;height:20px; display: block; background: none; color: #fff; font-size: 2rem; margin:20px 0 !important;}

.banner .swiper-pagination-bullet-active{opacity:1;}

.banner .text{ position: absolute; text-align: center; top: 50%; left: 50%; transform: translate(-50%,-70%); color: #fff; opacity: 0;}

.banner .text h3{font-size: 4rem; font-weight: 500;}

.banner .text p{ font-size: 1.8rem; width:52%;margin: 0 auto; line-height: 1.8;}

.banner .text .line{width:98px;height:5px;background:rgba(255,255,255,.5); margin:50px  auto;}



 .banner .swiper-button-next,.banner .swiper-button-prev{ position: static; color: #fff;font-size: 4rem;margin-top: 0;}

 

.banner .swiper-button-prev{background-image:none;}

.banner .swiper-button-prev i{ transform: rotate(-90deg); display: block}

.banner .swiper-button-next{background-image:none;}

.banner .swiper-button-next i{ transform: rotate(90deg); display: block}







.swiper-slide-active .text {

  opacity: 1;

   -webkit-transform: translate(-50%,-50%); 

  -moz-transform: translate(-50%,-50%);

   transform: translate(-50%,-50%); 

  -webkit-transition: all 1s ease-out;

  -moz-transition: all 1s ease-out;

  -ms-transition: all 1s ease-out;

  -o-transition: all 1s ease-out;

  transition: all 1s ease-out;

}

.swiper-slide-active .text {

  transition-delay: .5s;

  -webkit-transition-delay: .5s;

  -moz-transition-delay: .5s;

  -ms-transition-delay: .5s;

  -o-transition-delay: .5s;

}







.mobiles{width:100%;float:left;position:fixed;top:0;left:0;height:50px;display:none;z-index:9999}

.mobile-inner-header{background-color:#fff;width:100%;height:50px;position:absolute;top:0;left:0}

.mobile-inner-header .logo{width:80px;margin-top:16px;margin-left:13px}

.mobile-inner-header .logo img{display:block;width:100%}

.mobile-inner-header-icon{color:#fff;height:50px;font-size:25px;text-align:center;right:0;width:50px;top:0;position:absolute;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s}

.mobile-inner-header-icon span{position:absolute;top:50%;right:13px;width:24px;height:1px;background-color:#333}

.mobile-inner-header-icon span:nth-child(1){transform:translateY(6px) rotate(0)}

.mobile-inner-header-icon span:nth-child(2){transform:translateY(-6px) rotate(0)}

.mobile-inner-header-icon span:nth-child(3){transform:translateY(0) rotate(0)}

.mobile-inner-header-icon-click span:nth-child(1){animation-duration:.5s;animation-fill-mode:both;animation-name:clickfirst}

.mobile-inner-header-icon-click span:nth-child(2){animation-duration:.5s;animation-fill-mode:both;animation-name:clicksecond}

.mobile-inner-header-icon-click span:nth-child(3){display:none}

@keyframes clickfirst{0%{transform:translateY(6px) rotate(0)}

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

}

@keyframes clicksecond{0%{transform:translateY(-6px) rotate(0)}

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

}

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

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

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

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

}

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

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

}

.mobile-inner-nav{background-color:#fff;width:100%;height:calc(100vh - 50px);position:absolute;top:50px;left:0;padding-top:30px;padding-bottom:80px;display:none;overflow-y:auto!important}

.mobile-inner-nav a{display:block;line-height:50px;text-decoration:none;width:80%;margin:0 auto;color:#333;border-bottom:solid 1px #ddd;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;font-weight:300;font-size:1.4rem}

.mobile-inner-nav a:hover{color:rgba(51,51,51,.4);border-bottom:solid 1px rgba(51,51,51,.2)}

.mobile-inner-nav dl{display:none;width:90%;margin:0 auto}

.mobile-inner-nav dl a{border-bottom:solid 1px #eee;height:40px;line-height:40px}

.mobiles input{width:80%;height:36px;border-radius:22px; margin-top: 12px; background:rgba(0,0,41,.1) url(../images/search.png) no-repeat 10px center;padding: 0 10px 0 36px; box-sizing: border-box; display: block; margin: 0 auto; }







.wrap{margin: 130px auto;}

.indextitle{text-align:center}

.indextitle .p1{font-size:2rem;color:rgba(8,8,8,1);text-transform:uppercase}

.indextitle .p2{font-size:4rem;color:rgba(8,8,8,1);letter-spacing:5px;margin-top:8px}

.indextitle .p3{width:45px;height:4px;background:rgba(38,102,200,1);margin:0 auto;margin-top:30px}



.indextitles{text-align: left;}

.indextitles .p3{ margin: 0 0;margin-top:30px}





.introduction .left{ float: left;}

.introduction .right{ float: right;}

.introduction .right li{box-shadow:0px 0px 10px rgba(0,0,0,0.16); float: left; margin-left: 36px; width: 280px; padding:50px 0; position: relative; transition: all .5s;}

.introduction .right li .icon{border:1px solid #ddd; width: 120px; height: 120px; line-height: 120px; text-align: center; border-radius: 50%; margin: 0 auto; position: relative; z-index: 2; background: #fff;}

.introduction .right li .title{text-align:center; margin-top: 40px;position: relative; z-index: 2;}

.introduction .right li .title .p1{font-size:2.4rem;color:rgba(8,8,8,1);letter-spacing:5px;margin-top:8px}

.introduction .right li .title .p2{width:28px;height:3px;background:rgba(221,221,221,1);margin:20px auto;}

.introduction .right li .title .p3{font-size:1.6rem;color:rgba(8,8,8,.5);text-transform:uppercase}

.introduction .right li .overlay{ background: #172D7B; position: absolute; bottom: 0; left: 0;height: 0; width: 100%; z-index: 1;transition: all .5s;}

.introduction .right li:hover .overlay{ height: 100%;}

.introduction .right li:hover{ transform: scale(1.05);}

.introduction .right li:hover .title .p1{color: #fff;}

.introduction .right li:hover .title .p3{color: #fff;}

.introduction .right li:hover .title .p2{background:#fff}

.about{ padding-top:100px;padding-bottom:100px;}

.about .content{color:rgba(8,8,8,1); font-size: 1.6rem; width: 40%; line-height: 1.8; margin: 50px 0 50px 0; text-justify: center;}

.more{display: table;margin:0 auto;}

.more a{width:160px; display: block;height:50px; line-height:50px; text-align: center;font-size:2rem ;color:#fff;background:rgba(23,45,123,1);border:1px solid rgba(23,45,123,1)}

.more:hover a{ color:rgba(23,45,123,1);background: none;}

.mores a{ margin: 0 auto; margin-top:80px;}

.news ul{ margin-top: 80px;}

.news li{width: 29.333%; float: left; margin-right:4% ; margin-right: 4%; padding:60px 40px; box-sizing: border-box; position: relative;}

.news li:nth-child(3n){ margin-right: 0;}

.news li .sm-title{color:rgba(23,45,123,1); font-size: 2.2rem; position: relative;z-index: 2; }

.news li .title{color:rgba(0,0,41,1);; font-size:2rem; line-height: 1.5; height: 120px; margin: 40px auto; position: relative;z-index: 2;}

.news li .time{color:rgba(0,34,54,.5); font-size: 1.4rem; position: relative; z-index: 2;}

.news li .time i{ font-size: 1.8rem; margin-right: 5px; vertical-align: -2px;}

.news li .img{ width:100%; height:0; position: absolute; bottom:0; left: 0; z-index: 1;transition: all .5s;}

.news li:hover .img{height:100%;}

.news li:hover .time{ color: #fff;}

.news li:hover .title,.news li:hover .sm-title{ color: #fff;}

.news li .mask{ width:100%; height:0; position: absolute; bottom:0; left: 0; z-index: 1;transition: all .5s;}

.news li:hover .mask{height:100%;}



.copyright{color:rgba(0,0,41,.4); text-align: center;font-size:1.4rem;background:rgba(221,221,221,1);height:50px; line-height: 50px;}

footer {background:rgba(244,244,244,1); padding: 70px 0;text-align: center;}

footer .m-logo{  width: 160px; margin:0 auto;}

footer .m-logo img{ width: 100%;}

footer .title{font-size:2.4rem;color:rgba(0,0,41,1);margin-top:30px;}

footer .mnav{margin:80px auto 60px auto;}

footer .mnav a{font-size:1.8rem;color:rgba(0,0,41,1); font-weight: 500; padding: 0 30px;}

footer .p1{ color: #999;font-size:1.4rem; line-height:2;}

footer .p1 i{ font-size: 2.4rem; vertical-align: -5px; margin-right: 8px;}

footer .p2 i{ font-size: 2.8rem;}

footer .mnav a:hover{color:rgba(23,45,123,1)}

.copyright a{color:rgba(0,0,41,.4);}

.copyright a:hover{ color: #172D7B;}





.scrolls{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;z-index: 9999; text-transform: uppercase; color: #ffff;opacity:0.6;-webkit-animation: scrollfade 1s ease-in alternate infinite;-moz-animation: scrollfade 1s ease-in alternate infinite;animation: scrollfade 1s ease-in alternate infinite;}

.scrolls p{ width: 1px; height:50px; background: #fff; margin: 0 auto; margin-top: 30px; }



@-webkit-keyframes scrollfade {

  0% {

    opacity: .6

  }



  100% {

    opacity: 1

  }

}
@media screen (min-width: 1980px) {
  header .navt{
    width: 80%;
    max-width: 1650px;
    margin:0 auto;
  }
  .mediaWidth{
    max-width: 1650px!important;
    margin:0 auto;
  }

}