@charset "utf-8";
*{ margin:0px; padding:0px; line-height:20px;}
body{ color:#555; font-size:15px; font-family:"微软雅黑", Arial, Helvetica, sans-serif;}
img{ vertical-align:top; border:0;}
div,form,img,ul,ol,li,dl,dt,dd { border:0; }
ul,li,dl,dd,dt{ margin:0; padding:0; list-style:none;}

a{text-decoration:none; color:#555;}
a:hover { color:#005b99; text-decoration: none; }
a:focus { outline: none; }
html, body { width: 100%; height: 100%; overflow: hidden; }
.fl{ display:block; float: left; }
.fr{ display:block; float: right; }
table tr td{ font-size:12px;}
.fl{ display: block; float: left; }
.fr{ display: block;  float: right; }
.section-wrap {
    width: 100%;
    height: 100%;
    min-width:1200px;
    overflow: visible;
    transition: transform 1s cubic-bezier(0.86, 0, 0.03, 1);
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.03, 1);
}

.section-wrap .section {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    text-align:center;
}
.section-wrap .section .title {
    width: 100%;
    position: absolute;
    top: 10%;
    color: #fff;
    font-size: 2.4em;
    text-align: center;
}

.section-wrap .section .title p {
    padding: 0 4%;
    opacity: 0
}

.section-wrap .section .title.active .tit {
    opacity: 1;
    transform: translateY(-25px);
    -webkit-transform: translateY(-25px);
    transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);
    -webkit-transition: all 2s cubic-bezier(0.86, 0, 0.8, 1);
}


.put-section-0 {
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.put-section-1 {
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
}

.put-section-2 {
    transform: translateY(-200%);
    -webkit-transform: translateY(-200%);
}

.put-section-3 {
    transform: translateY(-300%);
    -webkit-transform: translateY(-300%);
}

.put-section-4 {
    transform: translateY(-400%);
    -webkit-transform: translateY(-400%);
}
.put-section-5 {
    transform: translateY(-500%);
    -webkit-transform: translateY(-500%);
}

.section-btn {
    width: 14px;
    position: fixed;
    right: 4%;
    top: 50%;
    
}

.section-btn li {
    width: 14px;
    height: 14px;
    cursor: pointer;
    text-indent: -9999px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    margin-bottom: 12px;
    background: #fff;
    text-align: center;
    color: #fff;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08), -2px -2px 8px rgba(0, 0, 0, 0.05);
}

.section-btn li.on {
    background: #0063a7;
    border: 2px solid #fff;
}

#header{ width:100%; height:81px; position:fixed; z-index:999; background-color: rgba(255,255,255,0.85);}
#header .headerContainer{ width:82%; min-width:1100px; margin-left:2%;}

#header .headerContainer .logoContainer{ width:35%; }
#header .headerContainer .logoContainer .logo{ width:115px; margin-top:5px;}
#header .headerContainer .logoContainer h4{ width:270px; padding-left:15px; margin: 17px 0px 0px 10px; font-size:14px; border-left:1px solid #ccc; color:#8a8a8a; line-height:25px; height:51px; overflow:hidden;}

#header .headerContainer .menu{ width:62%; font-size:16px; color:#444; margin-right:2%; line-height:25px; margin-top:26px; text-align:right;}
#header .headerContainer .menu a{ margin:0px 0.7%; padding:0px 1%;}
#header .headerContainer .menu a:hover{ color:#0063a7;}

#topTel{ width:15%; height:81px; background-color: rgba(0,99,167,0.95); position:absolute; right:0px; top:0px; min-width:250px;}
#topTel .img{ margin:28px 10px 0px 20px;}
#topTel .img img{ width:100%; height:100%;}
#topTel h3{ line-height:81px; color:#fff;}

.proCotent{ width:310px; position:absolute; top:22%;left:14%; border: 3px solid rgba(255,255,255,0.75); border-radius:0px 30px 0px 30px; background-color:rgba(0,99,167,0.75); color:#fff; padding:0px 20px 0px 20px; z-index:99;}
.proCotent .proTitle{border-bottom:1px solid #fff; position:relative; text-align:center; margin-top:15px;}
.proCotent .proTitle .line{ bottom:-1px; width:35px; height:3px; margin:0 auto; margin-bottom:-2px; background-color:#ff8900;}
.proCotent .proTitle h2{ font-size:28px; font-weight:bold; line-height:70px;}
.proCotent h4{ text-align:left; line-height:30px; margin-top:15px; font-size:15px;}
.proCotent .telContent{ width:350px; height:40px; border:1px dashed rgba(255,255,255,0.75); margin-top:22px; margin-bottom:40px;}
.proCotent .telContent .img{ margin:4px 3px 0px 5px;}
.proCotent .telContent h1{ font-size:23px; font-weight:bold;line-height:38px;}
.proCotent .telContent .more a{ display:inline-block; width:120px; height:40px; line-height:40px; background-color:#ff8900; color:#fff; text-align:center;}
#syTeam .proCotent .jyImg{ margin:14px 10px 0px 5px;}
#syTeam .proCotent .proTitle h2{ font-size:31px; font-weight:bold; line-height:70px; letter-spacing:3px;}

.screenBj{ width:100%; min-width:1200px; height:100%;}
.screenBj img{display:block; width:100%; height:100%;object-fit: cover;}
#shusong{ width:100%; height:100%;}
#shusong ul { display:flex; justify-content: space-between; flex-wrap:nowrap; height:100%;}
#shusong li{ width:25%; height: 100%;}
#shusong li div{ width: 100%; height: 100%; overflow: hidden;}
#shusong li img{ object-fit: cover; width: 100%; height: 100%; cursor: pointer; transition: all 0.6s;}
#shusong li img:hover{ transform: scale(1.1);}


.syEquientment{ position:absolute; width:75%; min-width:1200px; top:18%; left:14%; text-align:left; overflow:hidden;}
.syEquientment .syTitle{ display:inline-block; text-align:left; border: 3px solid rgba(255,255,255,0.75); border-radius:0px 30px 0px 30px; background-color:rgba(0,99,167,0.75); color:#fff; padding:8px 30px;}
.syEquientment .syTitle .textImg{ margin-right:10px; }
.syEquientment .syTitle h2{ font-size:29px; font-weight:bold; line-height:44px; }
.swiper-container {
      width: 100%;
      height: 100%;
	  margin-top: 5%;
    }

    .swiper-slide {
      text-align: left;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  padding:10px;
    }
.swiper-slide  h3{ font-size: 16px; color: #333; border-left: 6px solid #0063a7; line-height: 26px; margin: 12px 0px; padding-left: 7px; font-weight:bold;}
.swiper-slide .proText{ color:#999; border-bottom:1px solid #ddd; margin-top: 10px; font-size: 14px; padding-bottom: 10px; height: 44px; overflow: hidden;}
.swiper-slide .img{ max-height:296px; border: 1px solid #ccc; overflow: hidden;}
.swiper-slide .img img{ width:100%; height:100%;}


    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
	  padding:0px;
    }

    .swiper .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .autoplay-progress {
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 10;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: var(--swiper-theme-color);
    }

    .autoplay-progress svg {
      --progress: 0;
      position: absolute;
      left: 0;
      top: 0px;
      z-index: 10;
      width: 100%;
      height: 100%;
      stroke-width: 4px;
      stroke: var(--swiper-theme-color);
      fill: none;
      stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
      stroke-dasharray: 125.6;
      transform: rotate(-90deg);
    }

#syCase .case{ position:relative; width:100%; height:63%;}
#syCase .case .content{ position:absolute; width:74%; left:13%; bottom:0px; text-align:left; background-color:#005b99; border-radius:15px 15px 0px 0px; z-index:99; padding:15px 20px; min-width:1200px;}
#syCase .case .content .caseLeft{ width:16%; color:#fff; margin:15px 0px 0px 0.7%; }
#syCase .case .content .caseLeft h2{ font-size:28px; font-weight:bold; line-height:53px; border: 1px dashed rgba(255,255,255,0.7); text-align:center;}
#syCase .case .content .caseLeft p{ margin-top:15px; line-height:28px;}
#syCase .case .content .caseLeft .more a{ display:inline-block; width:100%; background-color:#F93; text-align:center; color:#fff; line-height: 35px; margin-top: 15px;}
#syCase .case .content ul.caseRight{ width:81%; display:flex; justify-content: space-between; flex-wrap:nowrap; align-items: center; background-color:#fff; padding:17px; }
#syCase .case .content ul.caseRight li{ width:32.2%;}
#syCase .case .content ul.caseRight li img{ width:100%; height:auto;}

#syCase .application{ position:relative; width:100%; height:37%;}
#syCase .application .content{ position:absolute; width:74%; left:13%; top:0px; text-align:left; background-color:#fff; border-radius:0px 0px 15px 15px; z-index:99; padding:30px 65px; min-width:1200px;}
#syCase .application .content ul.applicationLeft{ width:69%; display:flex; justify-content: space-between; flex-wrap:wrap; align-items: center; margin-top:10px;}
#syCase .application .content ul.applicationLeft li{ width: 33.33333333%; line-height: 80px; border-bottom:1px solid #f1f1f1; background:url(../images/yellowline.jpg) no-repeat left center; padding-left:28px;}
#syCase .application .content .applicationRight{ background-color:#005b99; border-radius:10px; color:#fff;}
#syCase .application .content .applicationRight_Line{ margin:14px; border:1px dashed rgba(255,255,255,0.7); border-radius:10px; padding:40px 35px;}
#syCase .application .content .applicationRight_Line p{ text-align:center; line-height:50px;}
#syCase .application .content .applicationRight_Line .jtTitle{ }
#syCase .application .content .applicationRight_Line .jtTitle .jyImg{ margin-right:10px;}
#syCase .application .content .applicationRight_Line .jtTitle h2{ font-size:29px; font-weight:bold; line-height:42px; }

#syContact .contactbj{width:100%; height:513px;}
#syContact .contactbj img{display:block; width:100%; height:100%;object-fit: cover;}
#syContact .content{ width:70%; min-width:1200px; margin:0 auto; margin-top:45px; text-align:left; display:flex; justify-content: space-between; flex-wrap:nowrap;}
#syContact .content .contentLeft{ width:23%;}
#syContact .content .contentLeft h3{ font-size:22px; color:#333; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
#syContact .content .contentLeft h2{ font-size:20px; color:#0063a7; font-weight:bold;}
#syContact .content .contentLeft h4{ font-size:18px; color:#444; margin-top:19px; line-height:40px;}
#syContact .content .contentLeft ul li{ color:#888; line-height:35px;font-size: 14px;}

#syContact .content .contentMidder{ width:33%; border-left:1px solid #ddd;  border-right:1px solid #ddd; padding:15px 5%;}
#syContact .content .contentMidder h3{ font-size:18px; font-family:Arial, Helvetica, sans-serif; line-height:30px;}
#syContact .content .contentMidder h2{ font-size:17px;}
#syContact .content .contentMidder ul{ display:flex; justify-content: space-between; flex-wrap:nowrap; margin-top: 29px; text-align:center; }
#syContact .content .contentMidder ul li p{ line-height:35px; color: #888; font-size: 14px;}
#syContact .content .contentRight{ width:38%; padding:15px 0px;}
#syContact .content .contentRight h3{ font-size:18px; font-family:Arial, Helvetica, sans-serif; line-height:30px;}
#syContact .content .contentRight h2{ font-size:17px;}
#syContact .content .contentRight ul{ display:flex; justify-content: space-between; flex-wrap:wrap; margin-top: 22px;}
#syContact .content .contentRight ul li{ width:33%; line-height:42px; }
#syContact .content .contentRight ul li a{ color: #666; }

.bottomFl{ width: 100%; background-color: #f3f3f3; line-height: 45px; text-align: center; bottom: 0; position: absolute; color: #777;}


@media screen and (min-width:1201px) and (max-width:1400px){
#header .headerContainer{ width:100%; min-width:1200px;}
}

@media screen and (min-width:0px) and (max-width:1400px){
#header .headerContainer{ width:100%; min-width:1200px;}
#topTel{ display:none}
}