@charset "UTF-8";
#index .banner {
  width: 100%;
  height: 620px; }
  #index .banner .swiper-container, #index .banner .swiper-wrapper {
    height: 100%; }
  #index .banner .swiper-slide {
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center; }
    #index .banner .swiper-slide img {
      height: 100%;
      width: auto;
      opacity: 0; }

#index .floor-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; }
  #index .floor-top .tab {
    display: flex; }
    #index .floor-top .tab a {
      margin-left: 55px;
      font-size: 18px;
      transition: all 0.3s; }
      #index .floor-top .tab a:hover, #index .floor-top .tab a.active {
        color: #01327e; }

#index .mod-title {
  display: inline-block; }
  #index .mod-title i {
    display: block;
    width: 40px;
    height: 4px;
    background-color: #01327e; }
  #index .mod-title .cn {
    display: block;
    width: 100%;
    font-size: 26px;
    font-weight: bold;
    line-height: 26px;
    margin-top: 24px;
    white-space: nowrap; }
  #index .mod-title .en {
    display: block;
    width: 100%;
    font-size: 20px;
    font-family: 'Arial';
    text-transform: uppercase;
    line-height: 20px;
    margin-top: 12px;
    white-space: nowrap; }

#index .more {
  display: inline-flex;
  align-items: center;
  font-family: 'DIN';
  font-size: 14px;
  transition: all 0.3s; }
  #index .more i {
    margin-left: 6px;
    font-weight: bold;
    height: 14px;
    line-height: 14px;
    transition: all 0.3s; }
  #index .more:hover i {
    transform: rotate(90deg); }

#index .floor1 {
  width: 100%;
  padding: 60px 0 70px;
  background-color: #fff; }
  #index .floor1 .items {
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: space-between; }
    #index .floor1 .items .item {
      display: block;
      width: 24%;
      background-color: #f2f4f5;
      border: 1px solid #f2f4f5;
      transition: all 0.3s; }
      #index .floor1 .items .item .img {
        width: 100%;
        height: auto; }
        #index .floor1 .items .item .img img {
          width: 100%;
          height: auto; }
      #index .floor1 .items .item .text {
        width: 100%;
        padding: 25px 30px; }
        #index .floor1 .items .item .text .title {
          font-size: 20px;
          line-height: 24px;
          margin-bottom: 20px; }
        #index .floor1 .items .item .text .desc-line {
          line-height: 16px;
          color: #888;
          margin-top: 10px; }
      #index .floor1 .items .item:hover {
        background-color: #fff;
        border-color: #01327e; }

#index .floor2 {
  width: 100%;
  padding: 60px 0 70px;
  background-color: #ebedef; }
  #index .floor2 .blocks {
    width: 100%; }
  #index .floor2 .items {
    width: 100%;
    margin-top: 40px;
    display: none;
    justify-content: space-between; }
    #index .floor2 .items.active {
      display: flex; }
    #index .floor2 .items .item {
      display: inline-flex;
      align-items: center;
      width: 32.5%;
      height: 180px;
      background-color: #fff;
      overflow: hidden; }
      #index .floor2 .items .item .img {
        width: 180px;
        min-width: 180px; }
        #index .floor2 .items .item .img img {
          width: 100%;
          height: 180px; }
      #index .floor2 .items .item .text {
        width: calc(100% - 180px);
        padding: 25px 30px; }
        #index .floor2 .items .item .text .title {
          font-size: 20px;
          line-height: 24px;
          margin-bottom: 40px; }
        #index .floor2 .items .item .text .desc-line {
          line-height: 16px;
          color: #888;
          margin-top: 10px; }
      #index .floor2 .items .item:hover {
        background-color: #fff;
        border-color: #01327e; }

#index .floor3 {
  width: 100%;
  padding: 60px 0 50px;
  background-color: #fff; }
  #index .floor3 .items {
    width: 100%;
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #index .floor3 .items .item {
      width: 32.5%;
      margin-left: 1.25%;
      margin-bottom: 20px;
      position: relative; }
      #index .floor3 .items .item:nth-child(3n+1) {
        margin-left: 0; }
      #index .floor3 .items .item .img {
        width: 100%;
        height: auto; }
        #index .floor3 .items .item .img img {
          width: 100%;
          height: auto;
          -webkit-filter: grayscale(100%);
          -moz-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
          -o-filter: grayscale(100%);
          filter: grayscale(100%);
          filter: gray;
          transform: all 0.3s; }
      #index .floor3 .items .item i.mask {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: transparent;
        transition: all 0.3s; }
      #index .floor3 .items .item .con {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -40px;
        color: #fff;
        opacity: 0;
        transition: all 0.3s; }
        #index .floor3 .items .item .con i {
          display: block;
          font-size: 58px;
          margin: 0 auto; }
        #index .floor3 .items .item .con span {
          font-size: 20px;
          margin-top: 20px; }
      #index .floor3 .items .item:hover .img img {
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
        filter: grayscale(0);
        filter: gray; }
      #index .floor3 .items .item:hover i.mask {
        background-color: rgba(0, 0, 0, 0.3); }
      #index .floor3 .items .item:hover .con {
        opacity: 1; }

#index .about {
  width: 100%;
  position: relative;
  padding: 60px 0 20px;
  background-color: #ebedef; }
  #index .about .img {
    width: 100%;
    padding-left: calc((100% - 1660px)/2); }
    #index .about .img img {
      width: 100%;
      height: auto; }
  #index .about .texts {
    width: 40.6%;
    padding: 70px 110px 80px 0;
    padding-left: calc((100% - 1660px)/2);
    position: absolute;
    top: calc(50% + 20px);
    left: 0;
    z-index: 3;
    transform: translateY(-50%);
    background-color: #fff; }
    #index .about .texts .logo {
      height: 40px; }
      #index .about .texts .logo img {
        height: 40px; }
    #index .about .texts .name {
      font-size: 24px;
      font-weight: bold;
      margin-top: 24px; }
    #index .about .texts .desc {
      font-size: 14px;
      line-height: 28px;
      margin-top: 24px; }

#index .thumb {
  width: 100%;
  padding: 0 0 120px;
  background-color: #ebedef;
  position: relative; }
  #index .thumb .swiper {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1; }
    #index .thumb .swiper .swiper-slide img {
      width: 100%;
      height: auto;
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
      filter: gray;
      transform: all 0.3s; }
    #index .thumb .swiper .swiper-slide.swiper-slide-active img {
      -webkit-filter: grayscale(0);
      -moz-filter: grayscale(0);
      -ms-filter: grayscale(0);
      -o-filter: grayscale(0);
      filter: grayscale(0);
      filter: gray; }
  #index .thumb .bar {
    width: 94%;
    max-width: 800px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    bottom: 60px;
    z-index: 3;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 20px 30px 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    #index .thumb .bar .t-swiper {
      width: calc(100% - 130px);
      height: 100%; }
      #index .thumb .bar .t-swiper .swiper-slide {
        height: 60px; }
        #index .thumb .bar .t-swiper .swiper-slide .flex {
          display: flex;
          align-items: center; }
          #index .thumb .bar .t-swiper .swiper-slide .flex .icon {
            width: 60px;
            height: 60px;
            color: #01327e; }
            #index .thumb .bar .t-swiper .swiper-slide .flex .icon i {
              font-size: 60px;
              height: 60px; }
          #index .thumb .bar .t-swiper .swiper-slide .flex .text {
            margin-left: 20px; }
            #index .thumb .bar .t-swiper .swiper-slide .flex .text .big {
              font-size: 20px;
              line-height: 20px;
              font-weight: bold; }
            #index .thumb .bar .t-swiper .swiper-slide .flex .text .small {
              line-height: 14px;
              margin-top: 10px; }
    #index .thumb .bar .navigation {
      width: 130px;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      #index .thumb .bar .navigation i {
        font-size: 20px;
        transition: all 0.3s; }
        #index .thumb .bar .navigation i:hover {
          color: #01327e; }
      #index .thumb .bar .navigation .c-page {
        font-size: 20px; }
        #index .thumb .bar .navigation .c-page #current {
          font-size: 30px;
          color: #01327e; }

#index .study {
  width: 100%;
  padding: 60px 0 40px;
  background-color: #fff; }
  #index .study .items {
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: space-between; }
    #index .study .items .mod {
      width: 100%;
      height: 40px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #01327e;
      color: #fff; }
      #index .study .items .mod > span {
        font-size: 18px; }
      #index .study .items .mod .more {
        display: inline-flex;
        align-items: center;
        font-family: 'DIN';
        font-weight: bold;
        font-size: 14px;
        color: #fff;
        transition: all 0.3s; }
        #index .study .items .mod .more i {
          margin-left: 6px;
          height: 14px;
          line-height: 14px;
          transition: all 0.3s; }
        #index .study .items .mod .more:hover i {
          transform: rotate(90deg); }
    #index .study .items > .item {
      width: 36%;
      margin-right: 3.2%; }
      #index .study .items > .item ul {
        margin-top: 20px; }
      #index .study .items > .item li {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #f2f4f5;
        line-height: 50px; }
        #index .study .items > .item li a {
          display: block;
          width: 100%;
          transition: all 0.3s; }
          #index .study .items > .item li a:hover {
            color: #01327e; }
    #index .study .items > .shorts {
      width: 21.6%; }
      #index .study .items > .shorts .type1 {
        height: 160px; }
        #index .study .items > .shorts .type1 li {
          height: 50px; }
          #index .study .items > .shorts .type1 li img {
            width: 24px; }
          #index .study .items > .shorts .type1 li a {
            width: calc(100% - 36px); }
      #index .study .items > .shorts .type2 {
        margin-top: 40px; }
        #index .study .items > .shorts .type2 .cover {
          width: 100%;
          height: 170px; }
          #index .study .items > .shorts .type2 .cover a {
            display: block;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-image: url(../img/68.png); }
            #index .study .items > .shorts .type2 .cover a img {
              display: none; }
        #index .study .items > .shorts .type2 li {
          height: 70px;
          margin-top: 10px; }
          #index .study .items > .shorts .type2 li img {
            width: 50px; }
          #index .study .items > .shorts .type2 li a {
            width: calc(100% - 62px); }
          #index .study .items > .shorts .type2 li:first-child {
            margin-top: 0; }
      #index .study .items > .shorts ul {
        margin-top: 20px; }
      #index .study .items > .shorts li {
        width: 100%;
        border-bottom: 1px solid #f2f4f5;
        display: flex;
        align-items: center;
        overflow: hidden; }
        #index .study .items > .shorts li img {
          flex-shrink: 0;
          margin-right: 12px; }
        #index .study .items > .shorts li .text {
          width: 100%; }
        #index .study .items > .shorts li a {
          display: block;
          transition: all 0.3s; }
          #index .study .items > .shorts li a:hover {
            color: #01327e; }

#index .news {
  width: 100%;
  padding: 60px 0 40px;
  background-color: #ebedef; }
  #index .news .news-block {
    width: 100%;
    margin-top: 40px;
    display: flex;
    align-items: stretch;
    justify-content: space-between; }
    #index .news .news-block .img {
      width: 38.5%;
      background-position: center;
      background-size: cover; }
    #index .news .news-block ul {
      width: 60%;
      background-color: #fff;
      padding: 0 90px; }
      #index .news .news-block ul li {
        width: 100%;
        padding: 30px 0 30px;
        border-bottom: 1px solid #f2f4f5; }
        #index .news .news-block ul li a {
          display: flex;
          align-items: center; }
          #index .news .news-block ul li a .date {
            width: 70px;
            text-align: center;
            white-space: nowrap;
            transition: all 0.3s;
            flex-shrink: 0; }
            #index .news .news-block ul li a .date .day {
              font-size: 56px;
              font-weight: bold;
              font-family: 'DIN';
              line-height: 56px; }
            #index .news .news-block ul li a .date .mon {
              font-size: 16px;
              font-family: 'DIN'; }
          #index .news .news-block ul li a .text {
            width: 100%;
            margin-left: 40px; }
            #index .news .news-block ul li a .text .title {
              font-size: 18px;
              font-weight: bold;
              transition: all 0.3s; }
            #index .news .news-block ul li a .text .desc {
              width: 100%;
              line-height: 28px;
              color: #888;
              margin-top: 10px;
              transition: all 0.3s; }
          #index .news .news-block ul li a:hover .date, #index .news .news-block ul li a.active .date {
            color: #01327e; }
          #index .news .news-block ul li a:hover .text .title, #index .news .news-block ul li a.active .text .title {
            color: #01327e; }
          #index .news .news-block ul li a:hover .text .desc, #index .news .news-block ul li a.active .text .desc {
            color: #333; }
  #index .news .case-block {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    #index .news .case-block .item {
      display: block;
      width: calc(50% - 10px);
      margin-left: 20px;
      margin-top: 20px;
      background-color: #fff;
      padding: 40px 30px 30px;
      border-bottom: 1px solid #fff;
      transition: all 0.3s; }
      #index .news .case-block .item .title {
        font-size: 18px;
        font-weight: bold;
        transition: all 0.3s; }
      #index .news .case-block .item .desc {
        width: 100%;
        line-height: 28px;
        color: #888;
        margin-top: 10px;
        transition: all 0.3s; }
      #index .news .case-block .item:hover {
        border-color: #01327e; }
        #index .news .case-block .item:hover .title {
          color: #01327e; }
        #index .news .case-block .item:hover .desc {
          color: #333; }
      #index .news .case-block .item:nth-child(2n+1) {
        margin-left: 0; }

#index .contact {
  width: 100%;
  background-image: url(../img/22.png);
  background-position: center;
  background-size: cover;
  padding: 140px 0 120px;
  text-align: center; }
  #index .contact .big {
    font-size: 48px;
    font-weight: bold;
    color: #fff; }
  #index .contact .small {
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    margin-top: 10px; }
  #index .contact .btn {
    display: block;
    width: 200px;
    height: 50px;
    background-color: #fff;
    border-radius: 25px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #01327e;
    margin: 50px auto 0; }

#about .about {
  display: flex;
  align-items: stretch;
  background-color: #fff; }
  #about .about .texts {
    width: 53%;
    padding-left: calc((100vw - 1400px) / 2);
    padding-top: 80px;
    padding-bottom: 80px;
    padding-right: 80px; }
    #about .about .texts .slogen {
      font-size: 28px;
      font-weight: bold; }
    #about .about .texts .content {
      width: 100%;
      height: 290px;
      overflow-x: hidden;
      overflow-y: auto;
      font-size: 16px;
      line-height: 32px;
      margin-top: 30px;
      -webkit-overflow-scrolling: touch; }
      #about .about .texts .content img {
        max-width: 100%; }
      #about .about .texts .content::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: #F5F5F5; }
      #about .about .texts .content::-webkit-scrollbar-track {
        border-radius: 3px;
        background-color: #F5F5F5; }
      #about .about .texts .content::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: #ddd; }
    #about .about .texts .items {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 60px; }
      #about .about .texts .items .item {
        color: #01327e; }
        #about .about .texts .items .item .en {
          font-size: 16px;
          text-transform: uppercase; }
        #about .about .texts .items .item .num {
          font-size: 80px;
          font-family: 'DIN';
          line-height: 70px; }
        #about .about .texts .items .item .desc {
          font-size: 16px;
          margin-top: 10px; }
  #about .about .img {
    width: 47%;
    flex-shrink: 0;
    background-image: url(../img/33.png);
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; }
    #about .about .img i.play {
      display: block;
      width: 54px;
      height: 54px;
      background-image: url(../img/34.png);
      background-size: 100%;
      cursor: pointer;
      transition: all 0.3s; }
      #about .about .img i.play:hover {
        transform: scale(1.1); }

#about .dev {
  width: 100%;
  height: 480px;
  display: flex;
  align-items: stretch;
  border-top: 1px solid #ddd; }
  #about .dev .imgs {
    width: 600px;
    height: 480px;
    position: relative;
    flex-shrink: 0; }
    #about .dev .imgs .swiper {
      width: 100%;
      height: 100%; }
      #about .dev .imgs .swiper .swiper-container {
        height: 100%; }
        #about .dev .imgs .swiper .swiper-container .swiper-wrapper {
          height: 100%; }
          #about .dev .imgs .swiper .swiper-container .swiper-wrapper .swiper-slide {
            height: 100%;
            background-position: center;
            background-size: cover; }
    #about .dev .imgs .btns {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: 70px;
      height: 140px;
      z-index: 3; }
      #about .dev .imgs .btns a {
        display: block;
        width: 70px;
        height: 70px;
        text-align: center;
        line-height: 70px; }
        #about .dev .imgs .btns a i {
          font-size: 24px; }
        #about .dev .imgs .btns a.prev {
          background-color: #fff;
          color: #01327e; }
        #about .dev .imgs .btns a.next {
          background-color: #01327e;
          color: #fff; }
  #about .dev .years {
    width: calc(100% - 480px);
    height: 480px;
    background-color: #fff;
    overflow: hidden; }
    #about .dev .years .swiper-container {
      height: 100%; }
      #about .dev .years .swiper-container .swiper-wrapper {
        height: 100%; }
        #about .dev .years .swiper-container .swiper-wrapper .swiper-slide {
          width: 420px;
          height: 100%;
          padding: 100px 70px 60px 80px;
          border-right: 1px solid #ddd; }
    #about .dev .years .num {
      font-size: 40px;
      font-family: 'DIN';
      transition: all 0.3s; }
    #about .dev .years i {
      display: block;
      width: 40px;
      height: 2px;
      margin-top: 25px;
      background-color: #333;
      transition: all 0.3s; }
    #about .dev .years .content {
      width: 100%;
      height: 200px;
      overflow-y: auto;
      font-size: 16px;
      line-height: 32px;
      margin-top: 50px;
      -webkit-overflow-scrolling: touch; }
      #about .dev .years .content::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: #F5F5F5; }
      #about .dev .years .content::-webkit-scrollbar-track {
        border-radius: 3px;
        background-color: #F5F5F5; }
      #about .dev .years .content::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: #ddd; }
      #about .dev .years .content img {
        max-width: 100%; }
    #about .dev .years .swiper-slide-active .num {
      color: #01327e; }
    #about .dev .years .swiper-slide-active i {
      background-color: #01327e; }

#about .advantage {
  width: 100%;
  padding: 60px 0;
  background-color: #f2f4f5; }
  #about .advantage .item {
    width: 100%;
    height: 360px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px; }
    #about .advantage .item .swiper {
      width: 42.25%;
      height: 360px; }
      #about .advantage .item .swiper .swiper-slide {
        height: 360px;
        background-position: center;
        background-size: cover; }
    #about .advantage .item .texts {
      width: 57.75%;
      height: 100%;
      padding: 90px 110px;
      background-color: #fff; }
      #about .advantage .item .texts .title {
        font-size: 30px;
        font-weight: bold; }
      #about .advantage .item .texts .desc {
        font-size: 16px;
        line-height: 32px;
        margin-top: 20px; }
    #about .advantage .item:nth-child(2n) {
      flex-direction: row-reverse; }

#about .honor {
  width: 100%;
  padding: 90px 0; }
  #about .honor .swiper-slide {
    width: 26.4%; }
    #about .honor .swiper-slide img {
      width: 100%; }

#about .team {
  width: 100%; }
  #about .team img {
    width: 100%; }

#contact .contact {
  background-color: #f2f4f5;
  width: 100%; }
  #contact .contact .main {
    display: flex;
    align-items: stretch; }
    #contact .contact .main .texts {
      width: 50%;
      background-color: #fff;
      padding: 60px 5%;
      overflow: hidden; }
      #contact .contact .main .texts .big {
        font-size: 48px;
        line-height: 48px;
        font-family: 'DIN'; }
      #contact .contact .main .texts .name {
        font-size: 18px;
        margin-top: 25px; }
      #contact .contact .main .texts .icon-line {
        display: flex;
        align-items: center;
        margin-top: 20px; }
        #contact .contact .main .texts .icon-line i {
          font-size: 20px;
          flex-shrink: 0; }
        #contact .contact .main .texts .icon-line span {
          font-size: 14px;
          margin-left: 15px; }
      #contact .contact .main .texts .way {
        margin-top: 30px; }
        #contact .contact .main .texts .way .title {
          font-size: 18px; }
        #contact .contact .main .texts .way .items p, #contact .contact .main .texts .way .items a {
          font-size: 16px;
          display: inline-block;
          margin-right: 15px; }
          #contact .contact .main .texts .way .items p span, #contact .contact .main .texts .way .items a span {
            font-family: 'DIN'; }
      #contact .contact .main .texts .wechat {
        width: 100%;
        margin-top: 70px;
        display: flex;
        align-items: stretch; }
        #contact .contact .main .texts .wechat .img {
          width: 120px;
          height: 120px; }
          #contact .contact .main .texts .wechat .img img {
            width: 100%;
            height: 100%; }
        #contact .contact .main .texts .wechat .rights {
          width: calc(100% - 120px);
          margin-left: 16px;
          position: relative; }
          #contact .contact .main .texts .wechat .rights .big {
            font-size: 18px;
            font-weight: bold;
            line-height: 24px; }
          #contact .contact .main .texts .wechat .rights .desc {
            font-size: 16px;
            margin-top: 10px; }
          #contact .contact .main .texts .wechat .rights .small {
            margin-top: 10px;
            width: 100%; }
    #contact .contact .main #map {
      width: 50%; }

#contact .feed {
  width: 100%;
  background-color: #f2f4f5;
  padding-top: 10px;
  padding-bottom: 100px; }
  #contact .feed .main {
    background-color: #fff;
    padding: 60px 55px; }
    #contact .feed .main .title {
      width: 100%;
      text-align: center;
      font-size: 24px;
      line-height: 24px; }
    #contact .feed .main .form {
      width: 100%;
      margin-top: 40px; }
      #contact .feed .main .form .input-line {
        width: 100%;
        display: flex;
        justify-content: space-between; }
        #contact .feed .main .form .input-line input {
          width: 24.5%;
          height: 50px;
          padding: 0 20px;
          border: 1px solid #ddd; }
      #contact .feed .main .form .textarea {
        width: 100%;
        height: 200px;
        margin-top: 20px; }
        #contact .feed .main .form .textarea textarea {
          width: 100%;
          height: 100%;
          padding: 10px 20px;
          border: 1px solid #ddd;
          resize: none; }
      #contact .feed .main .form .bot-line {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px; }
        #contact .feed .main .form .bot-line .yzm {
          display: inline-flex; }
          #contact .feed .main .form .bot-line .yzm input {
            width: 200px;
            height: 50px;
            padding: 0 20px;
            border: 1px solid #ddd; }
          #contact .feed .main .form .bot-line .yzm img {
            width: 150px;
            height: 50px;
            margin-left: 10px; }
        #contact .feed .main .form .bot-line .sub-btn {
          width: 240px;
          height: 40px; }
          #contact .feed .main .form .bot-line .sub-btn .btn {
            width: 240px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #333;
            border-radius: 20px;
            background-color: transparent;
            color: #333; }

#notice .contents {
  width: 100%;
  background-color: #f2f4f5;
  padding-bottom: 100px; }
  #notice .contents .main {
    padding: 10px 110px 90px;
    background-color: #fff; }
    #notice .contents .main .item {
      width: 100%;
      margin-top: 60px; }
      #notice .contents .main .item .mod {
        height: 24px;
        line-height: 24px;
        font-size: 24px;
        border-left: 4px solid #01327e;
        color: #01327e;
        padding-left: 10px;
        margin-bottom: 20px; }
      #notice .contents .main .item .content {
        font-size: 14px;
        line-height: 24px; }
        #notice .contents .main .item .content img {
          max-width: 100%; }

#news {
  background-color: #f2f4f5; }
  #news .list {
    width: 100%;
    background-color: #fff; }
    #news .list .item {
      width: 100%;
      height: 260px;
      padding: 30px 0;
      transition: all 0.3s; }
      #news .list .item .main {
        width: 94%; }
      #news .list .item a {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%; }
      #news .list .item .img {
        width: 320px;
        height: 200px;
        flex-shrink: 0; }
        #news .list .item .img img {
          width: 100%;
          height: 100%; }
      #news .list .item .date {
        width: 70px;
        text-align: center;
        white-space: nowrap;
        transition: all 0.3s;
        flex-shrink: 0;
        margin: 0 30px 0 70px; }
        #news .list .item .date .day {
          font-size: 56px;
          font-weight: bold;
          font-family: 'DIN';
          line-height: 56px; }
        #news .list .item .date .mon {
          font-size: 16px;
          font-family: 'DIN'; }
      #news .list .item .texts {
        width: calc(100% - 730px); }
        #news .list .item .texts .title {
          font-size: 28px;
          font-weight: bold;
          transition: all 0.3s; }
        #news .list .item .texts .desc {
          line-height: 28px;
          margin-top: 10px; }
      #news .list .item .btn {
        width: 100px;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        text-align: center;
        background-color: #01327e;
        color: #fff;
        font-family: 'DIN';
        opacity: 0;
        transition: all 0.3s;
        margin-left: 140px; }
      #news .list .item:hover {
        background-color: #d3eeff; }
        #news .list .item:hover .date {
          color: #01327e; }
        #news .list .item:hover .texts .title {
          color: #01327e; }
        #news .list .item:hover .btn {
          opacity: 1; }
  #news .load-more {
    margin-top: 60px;
    margin-bottom: 100px; }
  #news .detail {
    width: 100%;
    margin-bottom: 100px; }
    #news .detail .main {
      background-color: #fff;
      padding: 70px 110px 50px; }
      #news .detail .main .title {
        text-align: center;
        font-size: 24px; }
      #news .detail .main .date {
        text-align: center;
        margin-top: 17px; }
        #news .detail .main .date span {
          margin: 0 10px; }
      #news .detail .main .content {
        margin-top: 35px;
        padding: 40px 0 20px;
        line-height: 24px;
        border-top: 1px solid #ddd; }
        #news .detail .main .content img {
          max-width: 100%; }
        #news .detail .main .content iframe {
          width: 100%;
          min-height: 500px; }
      #news .detail .main .prod {
        width: 100%;
        display: flex;
        padding: 0 0 30px 0; }
        #news .detail .main .prod p {
          height: 20px;
          line-height: 20px;
          margin-top: 10px;
          white-space: nowrap;
          flex-shrink: 0; }
        #news .detail .main .prod .items {
          overflow: hidden;
          width: 100%; }
          #news .detail .main .prod .items a {
            float: left;
            margin-left: 20px;
            margin-top: 10px; }
      #news .detail .main .prev-next {
        width: 100%;
        padding: 25px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #ddd; }
        #news .detail .main .prev-next .lefts {
          width: 80%; }
          #news .detail .main .prev-next .lefts a {
            margin: 10px 0;
            display: block; }
        #news .detail .main .prev-next .back {
          display: block;
          width: 100px;
          height: 30px;
          border-radius: 15px;
          line-height: 30px;
          text-align: center;
          background-color: #d3eeff;
          color: #01327e; }

#study {
  background-color: #f2f4f5; }
  #study .study-tip {
    width: 100%;
    background-color: #f2f4f5; }
    #study .study-tip .main {
      background-color: #fff;
      padding: 25px 35px;
      font-size: 14px;
      line-height: 24px; }
  #study .tab {
    width: 100%;
    display: flex;
    justify-content: center; }
    #study .tab .item {
      display: block;
      width: 33%;
      max-width: 260px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: #d3eeff;
      position: relative;
      margin: 0 5px;
      white-space: nowrap; }
      #study .tab .item::after {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        transform: rotate(-45deg) translate(-50%, 20%);
        background-color: transparent;
        position: absolute;
        bottom: 0;
        left: 50%; }
      #study .tab .item.active, #study .tab .item:hover {
        background-color: #014193;
        color: #fff; }
        #study .tab .item.active::after, #study .tab .item:hover::after {
          background-color: #014193; }

#sample {
  margin-top: 20px; }
  #sample .main {
    overflow: hidden; }
  #sample .item {
    display: flex;
    align-items: center;
    width: 32.5%;
    background-color: #fff;
    float: left;
    margin-left: 1.25%;
    margin-bottom: 20px;
    padding: 20px 10px; }
    #sample .item .img {
      width: 120px;
      height: 80px;
      flex-shrink: 0; }
      #sample .item .img img {
        width: 100%;
        height: 100%; }
    #sample .item .rights {
      width: calc(100% - 120px);
      padding-left: 30px; }
      #sample .item .rights .date {
        color: #888;
        font-family: 'DIN'; }
      #sample .item .rights .name {
        display: block;
        font-size: 16px;
        line-height: 18px;
        margin-top: 5px; }
      #sample .item .rights .btn {
        display: inline-block;
        width: 100px;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        text-align: center;
        background-color: #d3eeff;
        color: #01327e;
        font-family: 'DIN';
        margin-top: 12px; }
    #sample .item:nth-child(3n+1) {
      margin-left: 0; }
  #sample .load-more {
    margin-top: 40px;
    margin-bottom: 100px; }

#explan {
  margin-top: 20px;
  margin-bottom: 100px; }
  #explan .main {
    background-color: #fff; }
    #explan .main .item {
      width: 100%;
      padding: 0 120px;
      border-bottom: 1px solid #f2f4f5; }
      #explan .main .item .tops {
        width: 100%;
        height: 90px;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        #explan .main .item .tops .title {
          font-size: 18px; }
        #explan .main .item .tops .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 30px;
          border-radius: 15px;
          background-color: #d3eeff;
          transition: all 0.3s; }
          #explan .main .item .tops .btn::before {
            content: "展开";
            display: inline-block;
            color: #01327e;
            transition: all 0.3s; }
          #explan .main .item .tops .btn i {
            color: #01327e;
            font-size: 12px;
            margin-left: 8px;
            transition: all 0.3s; }
          #explan .main .item .tops .btn.active {
            background-color: #01327e; }
            #explan .main .item .tops .btn.active::before {
              content: "收起";
              color: #fff; }
            #explan .main .item .tops .btn.active i {
              color: #fff;
              transform: rotate(-180deg); }
      #explan .main .item .bots {
        display: none;
        padding: 45px 40px;
        background-color: #f2f4f5;
        line-height: 24px;
        margin-bottom: 20px; }
        #explan .main .item .bots img {
          max-width: 100%; }

#ques {
  margin-top: 20px;
  margin-bottom: 100px; }
  #ques .main {
    background-color: #fff;
    padding: 80px 120px 70px; }
    #ques .main .list {
      width: 100%;
      margin-top: 30px; }
      #ques .main .list a {
        display: block;
        width: 100%;
        height: 80px;
        line-height: 80px;
        border-bottom: 1px solid #ddd;
        overflow: hidden; }
        #ques .main .list a .date {
          width: 140px;
          color: #888;
          font-family: 'DIN';
          float: left; }
        #ques .main .list a .title {
          font-size: 18px;
          width: calc(100% - 180px);
          float: left;
          transition: all 0.3s; }
        #ques .main .list a i {
          font-size: 18px;
          color: #ddd;
          float: right;
          transition: all 0.3s; }
        #ques .main .list a:hover .title {
          color: #014193; }
        #ques .main .list a:hover i {
          color: #014193; }
  #ques .load-more {
    margin-top: 60px; }

#gall {
  margin-top: 20px;
  margin-bottom: 100px; }
  #gall .main {
    background-color: #fff;
    padding: 40px 110px;
    height: 860px; }

#calc {
  margin-top: 20px;
  margin-bottom: 100px; }
  #calc .main {
    background-color: #fff;
    padding: 80px 120px; }
    #calc .main .calc-lines {
      margin-top: 60px; }
    #calc .main .calc-line {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      margin-bottom: 30px; }
      #calc .main .calc-line .item {
        width: 47.5%; }
        #calc .main .calc-line .item .title {
          width: 100%;
          height: 50px;
          line-height: 50px;
          padding: 0 30px;
          background-color: #d3eeff;
          font-size: 18px; }
        #calc .main .calc-line .item .tops {
          width: 100%;
          height: 45px;
          border-bottom: 1px solid #ddd;
          line-height: 45px;
          font-size: 16px;
          font-weight: 500;
          margin-top: 20px; }
        #calc .main .calc-line .item .block {
          margin: 20px 0; }
          #calc .main .calc-line .item .block .input {
            width: 100%; }
            #calc .main .calc-line .item .block .input .label {
              width: 100%;
              font-size: 14px; }
            #calc .main .calc-line .item .block .input input {
              width: 100%;
              height: 40px;
              border: 1px solid #ddd;
              margin-top: 8px;
              padding: 0 10px; }
              #calc .main .calc-line .item .block .input input[readonly] {
                background-color: #f2f4f5;
                border-color: #f2f4f5;
                color: #01327e; }
            #calc .main .calc-line .item .block .input select {
              width: 100%;
              height: 40px;
              border: 1px solid #ddd;
              margin-top: 8px;
              padding: 0 10px; }
        #calc .main .calc-line .item .block1 {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: stretch; }
          #calc .main .calc-line .item .block1 .left {
            width: 45%; }
            #calc .main .calc-line .item .block1 .left .img {
              width: 100%; }
              #calc .main .calc-line .item .block1 .left .img img {
                width: 100%; }
            #calc .main .calc-line .item .block1 .left .inputs {
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin-top: 29px; }
              #calc .main .calc-line .item .block1 .left .inputs .input {
                width: 45%;
                max-width: 100px; }
          #calc .main .calc-line .item .block1 .right {
            width: 45%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end; }
            #calc .main .calc-line .item .block1 .right .input {
              margin-top: 35px; }
        #calc .main .calc-line .item .block2 {
          width: 100%;
          display: flex;
          justify-content: space-between; }
          #calc .main .calc-line .item .block2 .input {
            width: 45%; }
          #calc .main .calc-line .item .block2 .icon {
            width: 10%;
            text-align: center;
            display: inline-flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center; }
            #calc .main .calc-line .item .block2 .icon span {
              height: 40px;
              line-height: 40px;
              text-align: center; }
        #calc .main .calc-line .item .block3 {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: stretch; }
          #calc .main .calc-line .item .block3 .left {
            width: 45%; }
            #calc .main .calc-line .item .block3 .left .img {
              width: 100%; }
              #calc .main .calc-line .item .block3 .left .img img {
                width: 100%; }
            #calc .main .calc-line .item .block3 .left .inputs {
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin-top: 29px; }
              #calc .main .calc-line .item .block3 .left .inputs .input {
                width: 45%;
                max-width: 100px; }
          #calc .main .calc-line .item .block3 .right {
            width: 45%;
            display: flex;
            flex-direction: column; }
            #calc .main .calc-line .item .block3 .right .input {
              margin-bottom: 20px; }
        #calc .main .calc-line .item .block4 {
          width: 100%; }
          #calc .main .calc-line .item .block4 .img {
            width: 100%; }
            #calc .main .calc-line .item .block4 .img img {
              width: 100%; }
          #calc .main .calc-line .item .block4 .inputs {
            width: 100%;
            display: flex;
            margin-top: 29px; }
            #calc .main .calc-line .item .block4 .inputs .input {
              width: 30%;
              max-width: 100px;
              margin-left: 5%; }
              #calc .main .calc-line .item .block4 .inputs .input:first-child {
                margin-left: 0; }
        #calc .main .calc-line .item .block5 {
          width: 100%;
          display: flex; }
          #calc .main .calc-line .item .block5 .input {
            width: 30%;
            margin-left: 5%; }
            #calc .main .calc-line .item .block5 .input:nth-child(3n+1) {
              margin-left: 0; }
    #calc .main .table {
      width: 100%;
      margin-top: 60px; }
      #calc .main .table table {
        width: 100%;
        border: 1px solid #ddd; }
        #calc .main .table table th {
          height: 50px;
          background-color: #d3eeff;
          font-size: 16px;
          text-align: center;
          padding: 0 10px; }
        #calc .main .table table td {
          padding: 10px 20px;
          white-space: normal;
          word-break: break-all; }
          #calc .main .table table td .goods {
            display: flex;
            align-items: center; }
            #calc .main .table table td .goods img {
              width: 60px;
              height: 60px; }
            #calc .main .table table td .goods span {
              margin-left: 20px; }
        #calc .main .table table tbody tr {
          transition: all 0.3s; }
          #calc .main .table table tbody tr:hover {
            background-color: #f4fbff; }

#prod {
  background-color: #f2f4f5; }
  #prod .cate {
    width: 100%;
    background-color: #f2f4f5; }
    #prod .cate .main {
      background-color: #fff; }
      #prod .cate .main .tops {
        display: flex;
        width: 100%;
        height: 60px;
        background-color: #01327e;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; }
        #prod .cate .main .tops::-webkit-scrollbar {
          width: 6px;
          height: 6px;
          background-color: #F5F5F5; }
        #prod .cate .main .tops::-webkit-scrollbar-track {
          border-radius: 3px;
          background-color: #F5F5F5; }
        #prod .cate .main .tops::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background-color: #ddd; }
        #prod .cate .main .tops .scroll {
          display: flex; }
          #prod .cate .main .tops .scroll a {
            display: inline-block;
            white-space: nowrap;
            padding: 0 18px;
            height: 60px;
            line-height: 60px;
            color: #fff;
            transition: all 0.3s; }
            #prod .cate .main .tops .scroll a:hover, #prod .cate .main .tops .scroll a.active {
              background-color: #fff;
              color: #01327e; }
            #prod .cate .main .tops .scroll a:first-child {
              margin-left: 20px; }
            #prod .cate .main .tops .scroll a:last-child {
              margin-right: 20px; }
      #prod .cate .main .bots {
        width: 100%;
        display: block; }
        #prod .cate .main .bots .scroll {
          display: none;
          padding: 20px 10px; }
          #prod .cate .main .bots .scroll a {
            display: inline-block;
            white-space: nowrap;
            margin-left: 20px;
            height: 30px;
            line-height: 30px;
            transition: all 0.3s; }
            #prod .cate .main .bots .scroll a:hover, #prod .cate .main .bots .scroll a.active {
              color: #01327e; }
            #prod .cate .main .bots .scroll a:last-child {
              margin-right: 40px; }
          #prod .cate .main .bots .scroll.flex {
            display: flex !important; }
          #prod .cate .main .bots .scroll.block {
            display: block !important; }
  #prod .prod-tip {
    width: 100%;
    background-color: #f2f4f5;
    margin-top: 20px; }
    #prod .prod-tip .main {
      background-color: #fff;
      padding: 25px 35px;
      font-size: 14px;
      line-height: 24px; }
  #prod .prod-list {
    width: 100%;
    background-color: #f2f4f5; }
    #prod .prod-list .item {
      width: 100%;
      padding: 20px;
      background-color: #fff;
      margin-top: 10px;
      display: flex; }
      #prod .prod-list .item .img {
        width: 240px;
        height: 240px;
        flex-shrink: 0; }
        #prod .prod-list .item .img img {
          width: 100%;
          height: 100%; }
      #prod .prod-list .item .rights {
        width: calc(100% - 270px);
        margin-left: 30px; }
        #prod .prod-list .item .rights .title {
          font-size: 20px;
          margin-top: 15px; }
        #prod .prod-list .item .rights .desc {
          font-size: 14px;
          line-height: 24px;
          margin-top: 10px; }
        #prod .prod-list .item .rights .bots {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-top: 40px; }
          #prod .prod-list .item .rights .bots .labels {
            width: calc(100% - 100px);
            overflow: hidden; }
            #prod .prod-list .item .rights .bots .labels .label {
              float: left;
              margin-right: 80px;
              margin-top: 5px; }
          #prod .prod-list .item .rights .bots .more {
            display: block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #d3eeff;
            border-radius: 15px;
            color: #01327e; }
        #prod .prod-list .item .rights .contact {
          width: 100%;
          border-top: 1px solid #ddd;
          margin-top: 15px; }
          #prod .prod-list .item .rights .contact .tact-item {
            margin-top: 20px;
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            margin-right: 50px; }
            #prod .prod-list .item .rights .contact .tact-item .qq {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100px;
              height: 30px;
              background-color: #cc0001;
              border-radius: 15px;
              white-space: nowrap;
              flex-shrink: 0;
              margin-right: 10px; }
              #prod .prod-list .item .rights .contact .tact-item .qq.ismobile {
                display: none; }
              #prod .prod-list .item .rights .contact .tact-item .qq i {
                font-size: 16px;
                color: #fff; }
              #prod .prod-list .item .rights .contact .tact-item .qq span {
                font-size: 12px;
                margin-left: 6px;
                color: #fff; }
            #prod .prod-list .item .rights .contact .tact-item .name {
              margin-right: 10px;
              height: 30px;
              line-height: 30px;
              white-space: nowrap;
              flex-shrink: 0; }
              #prod .prod-list .item .rights .contact .tact-item .name img {
                height: 100%; }
              #prod .prod-list .item .rights .contact .tact-item .name span {
                margin-left: 4px; }
            #prod .prod-list .item .rights .contact .tact-item .tel {
              font-size: 18px;
              height: 30px;
              line-height: 30px;
              font-family: 'DIN';
              white-space: nowrap;
              flex-shrink: 0; }
              #prod .prod-list .item .rights .contact .tact-item .tel span {
                margin-right: 10px; }
  #prod .hot {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px; }
    #prod .hot .main {
      display: flex; }
    #prod .hot .label {
      flex-shrink: 0;
      white-space: nowrap;
      margin-top: 10px;
      height: 16px;
      line-height: 16px; }
    #prod .hot .links {
      width: 100%;
      overflow: hidden; }
      #prod .hot .links a {
        float: left;
        padding: 0 14px;
        height: 16px;
        line-height: 16px;
        border-right: 1px solid #333;
        margin-top: 10px; }
  #prod .prob {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 100px; }
    #prod .prob .main {
      background-color: #fff; }
    #prod .prob .tops {
      width: 100%;
      height: 50px;
      padding: 0 20px;
      line-height: 50px;
      background-color: #d3eeff;
      font-size: 16px; }
    #prod .prob .list {
      width: 100%;
      overflow: hidden;
      padding: 20px; }
      #prod .prob .list a {
        display: block;
        float: left;
        width: 48%;
        height: 34px;
        line-height: 34px;
        margin-top: 8px;
        border-bottom: 1px solid #f2f4f5;
        padding: 0 10px;
        margin-left: 4%;
        transition: all 0.3s; }
        #prod .prob .list a:nth-child(2n+1) {
          margin-left: 0; }
        #prod .prob .list a:hover {
          color: #01327e; }

#prod_detail .main {
  padding: 40px 110px 20px;
  background-color: #fff;
  display: flex; }
  #prod_detail .main .gallary {
    width: 405px;
    flex-shrink: 0; }
    #prod_detail .main .gallary .view {
      width: 405px;
      height: 405px;
      border: 1px solid #ddd; }
      #prod_detail .main .gallary .view img {
        width: 100%;
        height: 100%;
        cursor: pointer; }
    #prod_detail .main .gallary .thumb {
      width: 100%;
      margin-top: 10px;
      height: 100px;
      display: flex; }
      #prod_detail .main .gallary .thumb .btn {
        width: 30px;
        height: 100%;
        background-color: #f2f4f5;
        color: #fff;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        transition: all 0.3s; }
        #prod_detail .main .gallary .thumb .btn i {
          font-size: 12px; }
        #prod_detail .main .gallary .thumb .btn:hover {
          background-color: #ebf7ff;
          color: #01327e; }
      #prod_detail .main .gallary .thumb .swiper {
        width: calc(100% - 60px);
        padding: 0 10px; }
        #prod_detail .main .gallary .thumb .swiper .swiper-slide {
          width: 100px;
          height: 100px;
          border: 1px solid #ddd;
          cursor: pointer; }
          #prod_detail .main .gallary .thumb .swiper .swiper-slide img {
            width: 100%;
            height: 100%; }
  #prod_detail .main .info {
    width: calc(100% - 405px);
    padding-left: 50px; }
    #prod_detail .main .info .title {
      width: 100%;
      font-size: 24px;
      font-weight: bold; }
    #prod_detail .main .info .num {
      width: 100%;
      position: relative;
      margin-top: 10px; }
      #prod_detail .main .info .num .view-num {
        color: #888;
        float: left; }
      #prod_detail .main .info .num .share-btn {
        display: flex;
        align-items: center;
        width: 100px;
        height: 24px;
        float: right; }
        #prod_detail .main .info .num .share-btn i {
          font-size: 20px; }
        #prod_detail .main .info .num .share-btn span {
          margin-left: 10px; }
      #prod_detail .main .info .num .share-block {
        display: none;
        width: 77px;
        height: 30px;
        line-height: 30px;
        position: absolute;
        top: -30px;
        right: 0;
        z-index: 2; }
        #prod_detail .main .info .num .share-block .bdsharebuttonbox {
          width: 100%;
          height: 100%;
          text-align: right; }
    #prod_detail .main .info .title-line {
      width: 100%;
      height: 40px;
      background-color: #ebf7ff;
      padding: 0 20px;
      font-size: 18px;
      color: #01327e;
      line-height: 40px;
      margin-top: 18px; }
    #prod_detail .main .info .desc {
      width: 100%;
      height: 155px;
      overflow-y: auto;
      margin-top: 20px;
      line-height: 24px; }
    #prod_detail .main .info .btns {
      width: 100%;
      max-width: 500px;
      overflow: hidden; }
      #prod_detail .main .info .btns a {
        display: block;
        width: 32%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #ddd;
        transition: all 0.3s;
        float: left;
        margin-left: 2%;
        margin-bottom: 10px; }
        #prod_detail .main .info .btns a:nth-child(3n+1) {
          margin-left: 0; }
        #prod_detail .main .info .btns a:hover {
          background-color: #01327e;
          border-color: #01327e;
          color: #fff; }
    #prod_detail .main .info > .bot {
      width: 100%;
      overflow: hidden;
      border-top: 1px solid #ddd;
      padding-top: 20px;
      display: flex;
      align-items: flex-start; }
    #prod_detail .main .info .contact {
      width: 100%;
      float: left; }
      #prod_detail .main .info .contact .tact-item {
        margin-top: 14px;
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap; }
        #prod_detail .main .info .contact .tact-item .qq {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 30px;
          background-color: #cc0001;
          border-radius: 15px;
          white-space: nowrap;
          flex-shrink: 0;
          margin-right: 10px; }
          #prod_detail .main .info .contact .tact-item .qq.ismobile {
            display: none; }
          #prod_detail .main .info .contact .tact-item .qq i {
            font-size: 16px;
            color: #fff; }
          #prod_detail .main .info .contact .tact-item .qq span {
            font-size: 12px;
            margin-left: 6px;
            color: #fff; }
        #prod_detail .main .info .contact .tact-item .name {
          margin-right: 10px;
          height: 30px;
          line-height: 30px;
          white-space: nowrap;
          flex-shrink: 0; }
          #prod_detail .main .info .contact .tact-item .name img {
            height: 100%; }
          #prod_detail .main .info .contact .tact-item .name span {
            margin-left: 4px; }
        #prod_detail .main .info .contact .tact-item .tel {
          font-size: 18px;
          height: 30px;
          line-height: 30px;
          font-family: 'DIN';
          white-space: nowrap;
          flex-shrink: 0; }
          #prod_detail .main .info .contact .tact-item .tel span {
            margin-right: 10px; }
    #prod_detail .main .info .prev-next {
      padding-left: 10%;
      display: inline-flex;
      float: right;
      flex-wrap: wrap; }
      #prod_detail .main .info .prev-next a {
        width: 100%;
        display: block;
        height: 30px;
        line-height: 30px;
        margin-top: 14px;
        white-space: normal; }

#contents {
  margin-top: 10px; }
  #contents .main {
    overflow: hidden; }
  #contents .scroll {
    width: calc(100% - 240px);
    float: left; }
    #contents .scroll .scroll-item {
      margin-bottom: 10px;
      background-color: #fff;
      padding: 20px 110px 30px; }
    #contents .scroll .title-line {
      width: 100%;
      height: 50px;
      background-color: #ebf7ff;
      padding: 0 20px;
      font-size: 18px;
      color: #01327e;
      line-height: 50px; }
      #contents .scroll .title-line a {
        display: block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #01327e;
        color: #fff;
        border-radius: 15px;
        float: right;
        margin-top: 10px;
        font-size: 14px; }
    #contents .scroll .content {
      width: 100%;
      padding: 20px 0; }
      #contents .scroll .content img {
        max-width: 100%; }
    #contents .scroll .down-list {
      width: 100%;
      overflow: hidden; }
      #contents .scroll .down-list .item {
        display: block;
        float: left;
        margin-left: 2%;
        width: 32%;
        margin-top: 10px; }
        #contents .scroll .down-list .item .img {
          width: 100%;
          border: 1px solid #ddd;
          transition: all 0.3s; }
          #contents .scroll .down-list .item .img img {
            width: 100%; }
          #contents .scroll .down-list .item .img:hover {
            border-color: #01327e; }
        #contents .scroll .down-list .item .title {
          font-size: 14px;
          margin-top: 6px; }
        #contents .scroll .down-list .item:nth-child(3n+1) {
          margin-left: 0; }
    #contents .scroll .case-list .item {
      display: block;
      width: 100%;
      padding: 20px;
      border: 1px solid #d3eeff;
      margin-top: 10px; }
      #contents .scroll .case-list .item .title {
        font-size: 18px; }
      #contents .scroll .case-list .item .desc {
        line-height: 28px; }
    #contents .scroll .prob-list .item {
      display: block;
      width: 100%;
      padding: 20px 0;
      border-bottom: 1px solid #d3eeff;
      margin-top: 10px; }
      #contents .scroll .prob-list .item .title {
        font-size: 18px; }
      #contents .scroll .prob-list .item .desc {
        line-height: 28px; }
    #contents .scroll .recom {
      width: 100%;
      margin-top: 10px;
      margin-bottom: 100px; }
      #contents .scroll .recom .title-line {
        width: 100%;
        text-align: center;
        background-color: #d3eeff; }
      #contents .scroll .recom .list {
        width: 100%;
        overflow: hidden;
        margin-top: 10px; }
        #contents .scroll .recom .list .item {
          display: block;
          width: 23.5%;
          margin-left: 2%;
          margin-bottom: 15px;
          float: left; }
          #contents .scroll .recom .list .item .img {
            width: 100%; }
            #contents .scroll .recom .list .item .img img {
              width: 100%; }
          #contents .scroll .recom .list .item .title {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            background-color: #d3eeff; }
          #contents .scroll .recom .list .item:nth-child(4n+1) {
            margin-left: 0; }
  #contents .target {
    width: 240px;
    border-left: 1px solid #f2f4f5;
    background-color: #fff;
    float: right;
    padding: 30px 60px; }
    #contents .target .item {
      position: relative;
      display: flex;
      align-items: center;
      white-space: nowrap;
      margin-top: 24px; }
      #contents .target .item .icon {
        width: 16px;
        height: 16px;
        position: relative;
        flex-shrink: 0; }
        #contents .target .item .icon i {
          font-size: 16px;
          position: absolute;
          top: 0;
          left: 0;
          transition: all 0.3s; }
        #contents .target .item .icon .gray {
          z-index: 1;
          opacity: 1;
          color: #ddd; }
        #contents .target .item .icon .blue {
          z-index: 2;
          opacity: 0;
          color: #01327e; }
      #contents .target .item span {
        margin-left: 13px; }
      #contents .target .item:hover .icon .gray, #contents .target .item.active .icon .gray {
        opacity: 0; }
      #contents .target .item:hover .icon .blue, #contents .target .item.active .icon .blue {
        opacity: 1; }
      #contents .target .item:first-child {
        margin-top: 0; }
    #contents .target.s_fixed {
      position: fixed;
      top: 210px;
      z-index: 3; }

#search .search-box {
  width: 100%;
  margin: 40px 0 30px;
  height: 54px;
  position: relative;
  z-index: 9; }
  #search .search-box .main {
    height: 100%; }
  #search .search-box .left {
    width: 540px;
    max-width: 38.57%;
    height: 100%;
    display: inline-block;
    float: left;
    border: 1px solid #e6e6e6;
    border-radius: 2px; }
    #search .search-box .left .select {
      display: inline-block;
      float: left;
      width: 90px;
      height: 100%;
      padding: 0 10px 0 0;
      position: relative; }
      #search .search-box .left .select > span {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 54px;
        font-size: 18px;
        padding: 0 14px 0 14px;
        background-image: url("../img/67.png");
        background-position: right center;
        background-repeat: no-repeat;
        cursor: pointer; }
      #search .search-box .left .select .sub {
        width: 100%;
        position: absolute;
        top: 55px;
        left: 0;
        border: 1px solid #e6e6e6;
        background-color: #fff;
        z-index: 99;
        display: none; }
        #search .search-box .left .select .sub span {
          display: block;
          width: 100%;
          text-align: center;
          height: 30px;
          line-height: 30px;
          transition: all 0.3s;
          cursor: pointer; }
          #search .search-box .left .select .sub span:hover, #search .search-box .left .select .sub span.active {
            background-color: #01327e;
            color: #fff; }
    #search .search-box .left .input {
      display: inline-block;
      float: left;
      width: calc(100% - 90px);
      height: 100%;
      border-left: 1px solid #e6e6e6; }
      #search .search-box .left .input input {
        width: 100%;
        height: 100%;
        padding: 0 10px;
        border: none;
        background-color: #fff;
        border-radius: 0;
        font-size: 18px; }
  #search .search-box .btn {
    display: inline-block;
    float: left; }
    #search .search-box .btn button {
      width: 117px;
      height: 54px;
      background-color: #01327e;
      border: none;
      color: #fff;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer; }
      #search .search-box .btn button span {
        display: inline-block;
        line-height: 18px; }
      #search .search-box .btn button i {
        display: inline-block;
        width: 24px;
        height: 24px;
        background-image: url("../img/66.png");
        background-size: 100% 100%;
        margin-left: 5px; }

#search .search-result {
  width: 100%;
  padding-bottom: 50px; }
  #search .search-result .item {
    width: 100%;
    padding: 24px 0;
    border-bottom: 1px solid #e6e6e6; }
    #search .search-result .item .title {
      width: 100%;
      line-height: 16px;
      font-size: 16px;
      display: flex;
      align-items: center; }
      #search .search-result .item .title i {
        display: inline-block;
        width: 4px;
        height: 4px;
        background-color: #01327e;
        margin-right: 10px; }
      #search .search-result .item .title p {
        display: inline-block;
        width: calc(100% - 14px); }
    #search .search-result .item .date {
      width: 100%;
      font-size: 14px;
      line-height: 14px;
      color: #999;
      margin-top: 10px;
      padding-left: 14px; }
  #search .search-result .pages {
    margin-top: 50px; }

#search .load-more {
  margin-bottom: 100px; }

@media screen and (max-width: 1440px) {
  #about .about .texts {
    padding-left: calc(6vw / 2); }
  #calc .main .calc-line .item .block .input .label {
    height: 40px; } }

@media screen and (max-width: 1366px) {
  #sample {
    margin-top: 20px; }
    #sample .item {
      display: flex;
      align-items: center;
      width: 49%;
      background-color: #fff;
      float: left;
      margin-left: 2%;
      margin-bottom: 20px;
      padding: 20px 10px; }
      #sample .item .img {
        width: 120px;
        height: 80px;
        flex-shrink: 0; }
        #sample .item .img img {
          width: 100%;
          height: 100%; }
      #sample .item .rights {
        width: calc(100% - 120px);
        padding-left: 30px; }
        #sample .item .rights .date {
          color: #888;
          font-family: 'DIN'; }
        #sample .item .rights .name {
          display: block;
          font-size: 16px;
          line-height: 18px;
          margin-top: 5px; }
        #sample .item .rights .btn {
          display: inline-block;
          width: 100px;
          height: 30px;
          border-radius: 15px;
          line-height: 30px;
          text-align: center;
          background-color: #d3eeff;
          color: #01327e;
          font-family: 'DIN';
          margin-top: 12px; }
      #sample .item:nth-child(3n+1) {
        margin-left: 2%; }
      #sample .item:nth-child(2n+1) {
        margin-left: 0; }
    #sample .load-more {
      margin-top: 40px;
      margin-bottom: 60px; }
  #news .list {
    width: 100%;
    background-color: #fff; }
    #news .list .item {
      width: 100%;
      height: 260px;
      padding: 30px 0;
      transition: all 0.3s; }
      #news .list .item .main {
        width: 94%; }
      #news .list .item a {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%; }
      #news .list .item .img {
        width: 320px;
        height: 200px;
        flex-shrink: 0; }
        #news .list .item .img img {
          width: 100%;
          height: 100%; }
      #news .list .item .date {
        width: 70px;
        text-align: center;
        white-space: nowrap;
        transition: all 0.3s;
        flex-shrink: 0;
        margin: 0 30px 0 70px; }
        #news .list .item .date .day {
          font-size: 56px;
          font-weight: bold;
          font-family: 'DIN';
          line-height: 56px; }
        #news .list .item .date .mon {
          font-size: 16px;
          font-family: 'DIN'; }
      #news .list .item .texts {
        width: calc(100% - 670px); }
        #news .list .item .texts .title {
          font-size: 28px;
          font-weight: bold;
          transition: all 0.3s; }
        #news .list .item .texts .desc {
          line-height: 28px;
          margin-top: 10px; }
      #news .list .item .btn {
        width: 100px;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        text-align: center;
        background-color: #01327e;
        color: #fff;
        font-family: 'DIN';
        opacity: 0;
        transition: all 0.3s;
        margin-left: 80px; }
      #news .list .item:hover {
        background-color: #d3eeff; }
        #news .list .item:hover .date {
          color: #01327e; }
        #news .list .item:hover .texts .title {
          color: #01327e; }
        #news .list .item:hover .btn {
          opacity: 1; }
  #news .load-more {
    margin-top: 60px;
    margin-bottom: 60px; }
  #calc {
    margin-top: 20px;
    margin-bottom: 60px; }
    #calc .main {
      background-color: #fff;
      padding: 60px 60px; }
      #calc .main .calc-lines {
        margin-top: 60px; }
      #calc .main .calc-line {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        margin-bottom: 30px; }
        #calc .main .calc-line .item {
          width: 47.5%; }
          #calc .main .calc-line .item .title {
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding: 0 30px;
            background-color: #d3eeff;
            font-size: 18px; }
          #calc .main .calc-line .item .tops {
            width: 100%;
            height: 45px;
            border-bottom: 1px solid #ddd;
            line-height: 45px;
            font-size: 16px;
            font-weight: 500;
            margin-top: 20px; }
          #calc .main .calc-line .item .block {
            margin: 20px 0; }
            #calc .main .calc-line .item .block .input {
              width: 100%; }
              #calc .main .calc-line .item .block .input .label {
                width: 100%;
                font-size: 14px; }
              #calc .main .calc-line .item .block .input input {
                width: 100%;
                height: 40px;
                border: 1px solid #ddd;
                margin-top: 8px;
                padding: 0 10px; }
                #calc .main .calc-line .item .block .input input[readonly] {
                  background-color: #f2f4f5;
                  border-color: #f2f4f5;
                  color: #01327e; }
              #calc .main .calc-line .item .block .input select {
                width: 100%;
                height: 40px;
                border: 1px solid #ddd;
                margin-top: 8px;
                padding: 0 10px; }
          #calc .main .calc-line .item .block1 {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: stretch; }
            #calc .main .calc-line .item .block1 .left {
              width: 45%; }
              #calc .main .calc-line .item .block1 .left .img {
                width: 100%; }
                #calc .main .calc-line .item .block1 .left .img img {
                  width: 100%; }
              #calc .main .calc-line .item .block1 .left .inputs {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-top: 29px; }
                #calc .main .calc-line .item .block1 .left .inputs .input {
                  width: 45%;
                  max-width: 100px; }
            #calc .main .calc-line .item .block1 .right {
              width: 45%;
              display: flex;
              flex-direction: column;
              justify-content: flex-end; }
              #calc .main .calc-line .item .block1 .right .input {
                margin-top: 35px; }
          #calc .main .calc-line .item .block2 {
            width: 100%;
            display: flex;
            justify-content: space-between; }
            #calc .main .calc-line .item .block2 .input {
              width: 45%; }
            #calc .main .calc-line .item .block2 .icon {
              width: 10%;
              text-align: center; }
          #calc .main .calc-line .item .block3 {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: stretch; }
            #calc .main .calc-line .item .block3 .left {
              width: 45%; }
              #calc .main .calc-line .item .block3 .left .img {
                width: 100%; }
                #calc .main .calc-line .item .block3 .left .img img {
                  width: 100%; }
              #calc .main .calc-line .item .block3 .left .inputs {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-top: 29px; }
                #calc .main .calc-line .item .block3 .left .inputs .input {
                  width: 45%;
                  max-width: 100px; }
            #calc .main .calc-line .item .block3 .right {
              width: 45%;
              display: flex;
              flex-direction: column; }
              #calc .main .calc-line .item .block3 .right .input {
                margin-bottom: 20px; }
          #calc .main .calc-line .item .block4 {
            width: 100%; }
            #calc .main .calc-line .item .block4 .img {
              width: 100%; }
              #calc .main .calc-line .item .block4 .img img {
                width: 100%; }
            #calc .main .calc-line .item .block4 .inputs {
              width: 100%;
              display: flex;
              margin-top: 29px; }
              #calc .main .calc-line .item .block4 .inputs .input {
                width: 30%;
                max-width: 100px;
                margin-left: 5%; }
                #calc .main .calc-line .item .block4 .inputs .input:first-child {
                  margin-left: 0; }
          #calc .main .calc-line .item .block5 {
            width: 100%;
            display: flex; }
            #calc .main .calc-line .item .block5 .input {
              width: 30%;
              margin-left: 5%; }
              #calc .main .calc-line .item .block5 .input:nth-child(3n+1) {
                margin-left: 0; }
      #calc .main .table {
        width: 100%;
        margin-top: 60px; }
        #calc .main .table table {
          width: 100%;
          border: 1px solid #ddd; }
          #calc .main .table table th {
            height: 50px;
            background-color: #d3eeff;
            font-size: 16px;
            text-align: center;
            padding: 0 10px; }
          #calc .main .table table td {
            padding: 10px 20px; }
            #calc .main .table table td .goods {
              display: flex;
              align-items: center; }
              #calc .main .table table td .goods img {
                width: 60px;
                height: 60px; }
              #calc .main .table table td .goods span {
                margin-left: 20px; }
          #calc .main .table table tbody tr {
            transition: all 0.3s; }
            #calc .main .table table tbody tr:hover {
              background-color: #f4fbff; }
  #index .banner {
    width: 100%;
    height: 460px; }
    #index .banner .swiper-slide {
      height: 100%;
      overflow: hidden;
      background-size: cover;
      background-position: center; }
      #index .banner .swiper-slide img {
        height: auto;
        width: auto;
        opacity: 0; }
  #index .floor-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; }
    #index .floor-top .tab {
      display: flex; }
      #index .floor-top .tab a {
        margin-left: 55px;
        font-size: 18px;
        transition: all 0.3s; }
        #index .floor-top .tab a:hover, #index .floor-top .tab a.active {
          color: #01327e; }
  #index .mod-title {
    display: inline-block; }
    #index .mod-title i {
      display: block;
      width: 40px;
      height: 4px;
      background-color: #01327e; }
    #index .mod-title .cn {
      display: block;
      width: 100%;
      font-size: 26px;
      font-weight: bold;
      line-height: 26px;
      margin-top: 24px;
      white-space: nowrap; }
    #index .mod-title .en {
      display: block;
      width: 100%;
      font-size: 20px;
      font-family: 'Arial';
      text-transform: uppercase;
      line-height: 20px;
      margin-top: 12px;
      white-space: nowrap; }
  #index .more {
    display: inline-flex;
    align-items: center;
    font-family: 'DIN';
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s; }
    #index .more i {
      margin-left: 6px;
      height: 14px;
      line-height: 14px;
      transition: all 0.3s; }
    #index .more:hover i {
      transform: rotate(90deg); }
  #index .floor1 {
    width: 100%;
    padding: 60px 0 70px;
    background-color: #fff; }
    #index .floor1 .items {
      width: 100%;
      margin-top: 40px;
      display: flex;
      justify-content: space-between; }
      #index .floor1 .items .item {
        display: block;
        width: 24%;
        background-color: #f2f4f5;
        border: 1px solid #f2f4f5;
        transition: all 0.3s; }
        #index .floor1 .items .item .img {
          width: 100%;
          height: auto; }
          #index .floor1 .items .item .img img {
            width: 100%;
            height: auto; }
        #index .floor1 .items .item .text {
          width: 100%;
          padding: 25px 30px; }
          #index .floor1 .items .item .text .title {
            font-size: 20px;
            line-height: 24px;
            margin-bottom: 20px; }
          #index .floor1 .items .item .text .desc-line {
            line-height: 16px;
            color: #888;
            margin-top: 10px; }
        #index .floor1 .items .item:hover {
          background-color: #fff;
          border-color: #01327e; }
  #index .floor2 {
    width: 100%;
    padding: 60px 0 70px;
    background-color: #ebedef; }
    #index .floor2 .blocks {
      width: 100%; }
    #index .floor2 .items {
      width: 100%;
      margin-top: 40px;
      display: none;
      justify-content: space-between; }
      #index .floor2 .items.active {
        display: flex; }
      #index .floor2 .items .item {
        display: inline-flex;
        align-items: center;
        width: 32.5%;
        background-color: #fff; }
        #index .floor2 .items .item .img {
          height: 180px;
          width: 180px;
          flex-shrink: 0; }
          #index .floor2 .items .item .img img {
            height: 180px;
            width: 180px; }
        #index .floor2 .items .item .text {
          width: calc(100% - 180px);
          padding: 20px 20px; }
          #index .floor2 .items .item .text .title {
            font-size: 16px;
            line-height: 24px;
            margin-bottom: 20px; }
          #index .floor2 .items .item .text .desc-line {
            line-height: 14px;
            color: #888;
            margin-top: 10px; }
        #index .floor2 .items .item:hover {
          background-color: #fff;
          border-color: #01327e; }
  #index .floor3 {
    width: 100%;
    padding: 60px 0 50px;
    background-color: #fff; }
    #index .floor3 .items {
      width: 100%;
      margin-top: 40px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      #index .floor3 .items .item {
        width: 32.5%;
        margin-left: 1.25%;
        margin-bottom: 20px;
        position: relative; }
        #index .floor3 .items .item:nth-child(3n+1) {
          margin-left: 0; }
        #index .floor3 .items .item .img {
          width: 100%;
          height: auto; }
          #index .floor3 .items .item .img img {
            width: 100%;
            height: auto;
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
            transform: all 0.3s; }
        #index .floor3 .items .item i.mask {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: transparent;
          transition: all 0.3s; }
        #index .floor3 .items .item .con {
          width: 100%;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 0;
          margin-top: -40px;
          color: #fff;
          opacity: 0;
          transition: all 0.3s; }
          #index .floor3 .items .item .con i {
            display: block;
            font-size: 58px;
            margin: 0 auto; }
          #index .floor3 .items .item .con span {
            font-size: 20px;
            margin-top: 20px; }
        #index .floor3 .items .item:hover .img img {
          -webkit-filter: grayscale(0);
          -moz-filter: grayscale(0);
          -ms-filter: grayscale(0);
          -o-filter: grayscale(0);
          filter: grayscale(0);
          filter: gray; }
        #index .floor3 .items .item:hover i.mask {
          background-color: rgba(0, 0, 0, 0.3); }
        #index .floor3 .items .item:hover .con {
          opacity: 1; }
  #index .about {
    width: 100%;
    position: relative;
    padding: 60px 0 20px;
    background-color: #ebedef; }
    #index .about .img {
      width: 100%;
      padding-left: calc((100% - 1660px)/2); }
      #index .about .img img {
        width: 100%;
        height: auto; }
    #index .about .texts {
      width: 40.6%;
      padding: 40px 70px 40px 40px;
      padding-left: 40px;
      position: absolute;
      top: calc(50% + 20px);
      left: 0;
      z-index: 3;
      transform: translateY(-50%);
      background-color: #fff; }
      #index .about .texts .logo {
        height: 40px; }
        #index .about .texts .logo img {
          height: 40px; }
      #index .about .texts .name {
        font-size: 24px;
        font-weight: bold;
        margin-top: 24px; }
      #index .about .texts .desc {
        font-size: 14px;
        line-height: 28px;
        margin-top: 24px; }
  #index .thumb {
    width: 100%;
    padding: 0 0 120px;
    background-color: #ebedef;
    position: relative; }
    #index .thumb .swiper {
      width: 100%;
      height: auto;
      position: relative;
      z-index: 1; }
      #index .thumb .swiper .swiper-slide img {
        width: 100%;
        height: auto;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
        transform: all 0.3s; }
      #index .thumb .swiper .swiper-slide.swiper-slide-active img {
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
        filter: grayscale(0);
        filter: gray; }
    #index .thumb .bar {
      width: 94%;
      max-width: 800px;
      height: 100px;
      overflow: hidden;
      position: absolute;
      left: 50%;
      bottom: 60px;
      z-index: 3;
      transform: translateX(-50%);
      background-color: #fff;
      padding: 20px 30px 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      #index .thumb .bar .t-swiper {
        width: calc(100% - 130px);
        height: 100%; }
        #index .thumb .bar .t-swiper .swiper-slide {
          height: 60px; }
          #index .thumb .bar .t-swiper .swiper-slide .flex {
            display: flex;
            align-items: center; }
            #index .thumb .bar .t-swiper .swiper-slide .flex .icon {
              width: 60px;
              height: 60px;
              color: #01327e; }
              #index .thumb .bar .t-swiper .swiper-slide .flex .icon i {
                font-size: 60px;
                height: 60px; }
            #index .thumb .bar .t-swiper .swiper-slide .flex .text {
              margin-left: 20px; }
              #index .thumb .bar .t-swiper .swiper-slide .flex .text .big {
                font-size: 20px;
                line-height: 20px;
                font-weight: bold; }
              #index .thumb .bar .t-swiper .swiper-slide .flex .text .small {
                line-height: 14px;
                margin-top: 10px; }
      #index .thumb .bar .navigation {
        width: 130px;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        #index .thumb .bar .navigation i {
          font-size: 20px;
          transition: all 0.3s; }
          #index .thumb .bar .navigation i:hover {
            color: #01327e; }
        #index .thumb .bar .navigation .c-page {
          font-size: 20px; }
          #index .thumb .bar .navigation .c-page #current {
            font-size: 30px;
            color: #01327e; }
  #index .study {
    width: 100%;
    padding: 60px 0 40px;
    background-color: #fff; }
    #index .study .items {
      width: 100%;
      margin-top: 40px;
      display: flex;
      justify-content: space-between; }
      #index .study .items .mod {
        width: 100%;
        height: 40px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #01327e;
        color: #fff; }
        #index .study .items .mod > span {
          font-size: 18px; }
        #index .study .items .mod .more {
          display: inline-flex;
          align-items: center;
          font-family: 'DIN';
          font-weight: bold;
          font-size: 14px;
          color: #fff;
          transition: all 0.3s; }
          #index .study .items .mod .more i {
            margin-left: 6px;
            height: 14px;
            line-height: 14px;
            transition: all 0.3s; }
          #index .study .items .mod .more:hover i {
            transform: rotate(90deg); }
      #index .study .items > .item {
        width: 36%;
        margin-right: 3.2%; }
        #index .study .items > .item ul {
          margin-top: 20px; }
        #index .study .items > .item li {
          width: 100%;
          height: 50px;
          border-bottom: 1px solid #f2f4f5;
          line-height: 50px; }
          #index .study .items > .item li a {
            display: block;
            width: 100%;
            transition: all 0.3s; }
            #index .study .items > .item li a:hover {
              color: #01327e; }
      #index .study .items > .shorts {
        width: 21.6%; }
        #index .study .items > .shorts .type1 li {
          height: 50px; }
          #index .study .items > .shorts .type1 li img {
            width: 24px; }
          #index .study .items > .shorts .type1 li a {
            width: calc(100% - 36px); }
        #index .study .items > .shorts .type2 {
          margin-top: 40px; }
          #index .study .items > .shorts .type2 li {
            height: 70px;
            margin-top: 10px; }
            #index .study .items > .shorts .type2 li img {
              width: 50px; }
            #index .study .items > .shorts .type2 li a {
              width: calc(100% - 62px); }
            #index .study .items > .shorts .type2 li:first-child {
              margin-top: 0; }
        #index .study .items > .shorts ul {
          margin-top: 20px; }
        #index .study .items > .shorts li {
          width: 100%;
          border-bottom: 1px solid #f2f4f5;
          display: flex;
          align-items: center;
          overflow: hidden; }
          #index .study .items > .shorts li img {
            flex-shrink: 0;
            margin-right: 12px; }
          #index .study .items > .shorts li .text {
            width: 100%; }
          #index .study .items > .shorts li a {
            display: block;
            transition: all 0.3s; }
            #index .study .items > .shorts li a:hover {
              color: #01327e; }
  #index .news {
    width: 100%;
    padding: 60px 0 40px;
    background-color: #ebedef; }
    #index .news .news-block {
      width: 100%;
      margin-top: 40px;
      display: flex;
      align-items: stretch;
      justify-content: space-between; }
      #index .news .news-block .img {
        width: 38.5%;
        background-position: center;
        background-size: cover; }
      #index .news .news-block ul {
        width: 60%;
        background-color: #fff;
        padding: 0 90px; }
        #index .news .news-block ul li {
          width: 100%;
          padding: 30px 0 30px;
          border-bottom: 1px solid #f2f4f5; }
          #index .news .news-block ul li a {
            display: flex;
            align-items: center; }
            #index .news .news-block ul li a .date {
              width: 70px;
              text-align: center;
              white-space: nowrap;
              transition: all 0.3s;
              flex-shrink: 0; }
              #index .news .news-block ul li a .date .day {
                font-size: 56px;
                font-weight: bold;
                font-family: 'DIN';
                line-height: 56px; }
              #index .news .news-block ul li a .date .mon {
                font-size: 16px;
                font-family: 'DIN'; }
            #index .news .news-block ul li a .text {
              width: 100%;
              margin-left: 40px; }
              #index .news .news-block ul li a .text .title {
                font-size: 18px;
                font-weight: bold;
                transition: all 0.3s; }
              #index .news .news-block ul li a .text .desc {
                width: 100%;
                line-height: 28px;
                color: #888;
                margin-top: 10px;
                transition: all 0.3s; }
            #index .news .news-block ul li a:hover .date, #index .news .news-block ul li a.active .date {
              color: #01327e; }
            #index .news .news-block ul li a:hover .text .title, #index .news .news-block ul li a.active .text .title {
              color: #01327e; }
            #index .news .news-block ul li a:hover .text .desc, #index .news .news-block ul li a.active .text .desc {
              color: #333; }
    #index .news .case-block {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      #index .news .case-block .item {
        display: block;
        width: calc(50% - 10px);
        margin-left: 20px;
        margin-top: 20px;
        background-color: #fff;
        padding: 40px 30px 30px;
        border-bottom: 1px solid #fff;
        transition: all 0.3s; }
        #index .news .case-block .item .title {
          font-size: 18px;
          font-weight: bold;
          transition: all 0.3s; }
        #index .news .case-block .item .desc {
          width: 100%;
          line-height: 28px;
          color: #888;
          margin-top: 10px;
          transition: all 0.3s; }
        #index .news .case-block .item:hover {
          border-color: #01327e; }
          #index .news .case-block .item:hover .title {
            color: #01327e; }
          #index .news .case-block .item:hover .desc {
            color: #333; }
        #index .news .case-block .item:nth-child(2n+1) {
          margin-left: 0; }
  #index .contact {
    width: 100%;
    background-image: url(../img/22.png);
    background-position: center;
    background-size: cover;
    padding: 140px 0 120px;
    text-align: center; }
    #index .contact .big {
      font-size: 48px;
      font-weight: bold;
      color: #fff; }
    #index .contact .small {
      font-size: 32px;
      font-weight: bold;
      color: #fff;
      margin-top: 10px; }
    #index .contact .btn {
      display: block;
      width: 200px;
      height: 50px;
      background-color: #fff;
      border-radius: 25px;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      color: #01327e;
      margin: 50px auto 0; }
  #prod_detail .main {
    padding: 40px 60px 20px;
    display: flex; }
    #prod_detail .main .gallary {
      width: 405px;
      flex-shrink: 0; }
      #prod_detail .main .gallary .view {
        width: 405px;
        height: 405px;
        border: 1px solid #ddd; }
        #prod_detail .main .gallary .view img {
          width: 100%;
          height: 100%;
          cursor: pointer; }
      #prod_detail .main .gallary .thumb {
        width: 100%;
        margin-top: 10px;
        height: 100px;
        display: flex; }
        #prod_detail .main .gallary .thumb .btn {
          width: 30px;
          height: 100%;
          background-color: #f2f4f5;
          color: #fff;
          display: flex;
          flex-shrink: 0;
          align-items: center;
          justify-content: center;
          transition: all 0.3s; }
          #prod_detail .main .gallary .thumb .btn i {
            font-size: 12px; }
          #prod_detail .main .gallary .thumb .btn:hover {
            background-color: #ebf7ff;
            color: #01327e; }
        #prod_detail .main .gallary .thumb .swiper {
          width: calc(100% - 60px);
          padding: 0 10px; }
          #prod_detail .main .gallary .thumb .swiper .swiper-slide {
            width: 100px;
            height: 100px;
            border: 1px solid #ddd;
            cursor: pointer; }
            #prod_detail .main .gallary .thumb .swiper .swiper-slide img {
              width: 100%;
              height: 100%; }
    #prod_detail .main .info {
      width: calc(100% - 405px);
      padding-left: 50px; }
      #prod_detail .main .info .title {
        width: 100%;
        font-size: 24px;
        font-weight: bold; }
      #prod_detail .main .info .num {
        width: 100%;
        position: relative;
        margin-top: 10px; }
        #prod_detail .main .info .num .view-num {
          color: #888;
          float: left; }
        #prod_detail .main .info .num .share-btn {
          display: flex;
          align-items: center;
          width: 100px;
          height: 24px;
          float: right; }
          #prod_detail .main .info .num .share-btn i {
            font-size: 20px; }
          #prod_detail .main .info .num .share-btn span {
            margin-left: 10px; }
        #prod_detail .main .info .num .share-block {
          display: none;
          width: 77px;
          height: 30px;
          line-height: 30px;
          position: absolute;
          top: -30px;
          right: 0;
          z-index: 2; }
          #prod_detail .main .info .num .share-block .bdsharebuttonbox {
            width: 100%;
            height: 100%;
            text-align: right; }
      #prod_detail .main .info .title-line {
        width: 100%;
        height: 40px;
        background-color: #ebf7ff;
        padding: 0 20px;
        font-size: 18px;
        color: #01327e;
        line-height: 40px;
        margin-top: 18px; }
      #prod_detail .main .info .desc {
        width: 100%;
        height: 155px;
        overflow-y: auto;
        margin-top: 20px;
        line-height: 24px; }
      #prod_detail .main .info .btns {
        width: 100%;
        max-width: 500px;
        overflow: hidden; }
        #prod_detail .main .info .btns a {
          display: block;
          width: 32%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: 1px solid #ddd;
          transition: all 0.3s;
          float: left;
          margin-left: 2%;
          margin-bottom: 10px; }
          #prod_detail .main .info .btns a:nth-child(3n+1) {
            margin-left: 0; }
          #prod_detail .main .info .btns a:hover {
            background-color: #01327e;
            border-color: #01327e;
            color: #fff; }
      #prod_detail .main .info > .bot {
        width: 100%;
        overflow: hidden;
        border-top: 1px solid #ddd;
        padding-top: 20px; }
      #prod_detail .main .info .contact {
        width: 63%;
        float: left; }
        #prod_detail .main .info .contact .tact-item {
          margin-top: 14px;
          display: inline-flex;
          align-items: center;
          flex-wrap: wrap; }
          #prod_detail .main .info .contact .tact-item .qq {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 30px;
            background-color: #cc0001;
            border-radius: 15px;
            white-space: nowrap;
            flex-shrink: 0;
            margin-right: 10px; }
            #prod_detail .main .info .contact .tact-item .qq i {
              font-size: 16px;
              color: #fff; }
            #prod_detail .main .info .contact .tact-item .qq span {
              font-size: 12px;
              margin-left: 6px;
              color: #fff; }
          #prod_detail .main .info .contact .tact-item .name {
            margin-right: 10px;
            height: 30px;
            line-height: 30px;
            white-space: nowrap;
            flex-shrink: 0; }
            #prod_detail .main .info .contact .tact-item .name img {
              height: 100%; }
            #prod_detail .main .info .contact .tact-item .name span {
              margin-left: 4px; }
          #prod_detail .main .info .contact .tact-item .tel {
            font-size: 18px;
            height: 30px;
            line-height: 30px;
            font-family: 'DIN';
            white-space: nowrap;
            flex-shrink: 0; }
            #prod_detail .main .info .contact .tact-item .tel span {
              margin-right: 10px; }
      #prod_detail .main .info .prev-next {
        float: right; }
        #prod_detail .main .info .prev-next a {
          width: 100%;
          display: block;
          height: 30px;
          line-height: 30px;
          margin-top: 14px; }
  #contents {
    margin-top: 10px; }
    #contents .main {
      overflow: hidden; }
    #contents .scroll {
      width: calc(100% - 240px);
      float: left; }
      #contents .scroll .scroll-item {
        margin-bottom: 10px;
        background-color: #fff;
        padding: 20px 60px 30px; }
      #contents .scroll .title-line {
        width: 100%;
        height: 50px;
        background-color: #ebf7ff;
        padding: 0 20px;
        font-size: 18px;
        color: #01327e;
        line-height: 50px; }
        #contents .scroll .title-line a {
          display: block;
          width: 100px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background-color: #01327e;
          color: #fff;
          border-radius: 15px;
          float: right;
          margin-top: 10px;
          font-size: 14px; }
      #contents .scroll .content {
        width: 100%;
        padding: 20px 0; }
        #contents .scroll .content img {
          max-width: 100%; }
      #contents .scroll .down-list {
        width: 100%;
        overflow: hidden; }
        #contents .scroll .down-list .item {
          display: block;
          float: left;
          margin-left: 2%;
          width: 32%;
          margin-top: 10px; }
          #contents .scroll .down-list .item .img {
            width: 100%;
            border: 1px solid #ddd;
            transition: all 0.3s; }
            #contents .scroll .down-list .item .img img {
              width: 100%; }
            #contents .scroll .down-list .item .img:hover {
              border-color: #01327e; }
          #contents .scroll .down-list .item .title {
            font-size: 14px;
            margin-top: 6px; }
          #contents .scroll .down-list .item:nth-child(3n+1) {
            margin-left: 0; }
      #contents .scroll .case-list .item {
        display: block;
        width: 100%;
        padding: 20px;
        border: 1px solid #d3eeff;
        margin-top: 10px; }
        #contents .scroll .case-list .item .title {
          font-size: 18px; }
        #contents .scroll .case-list .item .desc {
          line-height: 28px; }
      #contents .scroll .prob-list .item {
        display: block;
        width: 100%;
        padding: 20px 0;
        border-bottom: 1px solid #d3eeff;
        margin-top: 10px; }
        #contents .scroll .prob-list .item .title {
          font-size: 18px; }
        #contents .scroll .prob-list .item .desc {
          line-height: 28px; }
      #contents .scroll .recom {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 100px; }
        #contents .scroll .recom .title-line {
          width: 100%;
          text-align: center;
          background-color: #d3eeff; }
        #contents .scroll .recom .list {
          width: 100%;
          overflow: hidden;
          margin-top: 10px; }
          #contents .scroll .recom .list .item {
            display: block;
            width: 23.5%;
            margin-left: 2%;
            float: left; }
            #contents .scroll .recom .list .item .img {
              width: 100%; }
              #contents .scroll .recom .list .item .img img {
                width: 100%; }
            #contents .scroll .recom .list .item .title {
              width: 100%;
              height: 50px;
              line-height: 50px;
              text-align: center;
              font-size: 16px;
              background-color: #d3eeff; }
            #contents .scroll .recom .list .item:nth-child(4n+1) {
              margin-left: 0; }
    #contents .target {
      width: 240px;
      border-left: 1px solid #f2f4f5;
      background-color: #fff;
      float: right;
      padding: 30px 60px; }
      #contents .target .item {
        position: relative;
        display: flex;
        align-items: center;
        white-space: nowrap;
        margin-top: 24px; }
        #contents .target .item .icon {
          width: 16px;
          height: 16px;
          position: relative;
          flex-shrink: 0; }
          #contents .target .item .icon i {
            font-size: 16px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.3s; }
          #contents .target .item .icon .gray {
            z-index: 1;
            opacity: 1;
            color: #ddd; }
          #contents .target .item .icon .blue {
            z-index: 2;
            opacity: 0;
            color: #01327e; }
        #contents .target .item span {
          margin-left: 13px; }
        #contents .target .item:hover .icon .gray, #contents .target .item.active .icon .gray {
          opacity: 0; }
        #contents .target .item:hover .icon .blue, #contents .target .item.active .icon .blue {
          opacity: 1; }
        #contents .target .item:first-child {
          margin-top: 0; }
      #contents .target.s_fixed {
        position: absolute;
        top: 0;
        right: 0; } }

@media screen and (max-width: 1200px) {
  #about .about {
    display: flex;
    align-items: stretch;
    background-color: #fff; }
    #about .about .texts {
      width: 53%;
      padding-left: calc(6vw / 2);
      padding-top: 50px;
      padding-bottom: 50px;
      padding-right: 50px; }
      #about .about .texts .slogen {
        font-size: 24px;
        font-weight: bold; }
      #about .about .texts .content {
        width: 100%;
        height: 290px;
        overflow-x: hidden;
        overflow-y: auto;
        font-size: 16px;
        line-height: 32px;
        margin-top: 30px;
        -webkit-overflow-scrolling: touch; }
        #about .about .texts .content img {
          max-width: 100%; }
        #about .about .texts .content::-webkit-scrollbar {
          width: 6px;
          height: 6px;
          background-color: #F5F5F5; }
        #about .about .texts .content::-webkit-scrollbar-track {
          border-radius: 3px;
          background-color: #F5F5F5; }
        #about .about .texts .content::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background-color: #ddd; }
      #about .about .texts .items {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 40px; }
        #about .about .texts .items .item {
          color: #01327e; }
          #about .about .texts .items .item .en {
            font-size: 14px;
            text-transform: uppercase; }
          #about .about .texts .items .item .num {
            font-size: 50px;
            line-height: 40px; }
          #about .about .texts .items .item .desc {
            font-size: 14px;
            margin-top: 10px; }
    #about .about .img {
      width: 47%;
      flex-shrink: 0;
      background-image: url(../img/33.png);
      background-size: cover;
      background-position: center;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center; }
      #about .about .img i.play {
        display: block;
        width: 54px;
        height: 54px;
        background-image: url(../img/34.png);
        background-size: 100%;
        cursor: pointer;
        transition: all 0.3s; }
        #about .about .img i.play:hover {
          transform: scale(1.1); }
  #about .dev {
    width: 100%;
    height: 480px;
    display: flex;
    align-items: stretch;
    border-top: 1px solid #ddd; }
    #about .dev .imgs {
      width: 450px;
      height: 480px;
      position: relative;
      flex-shrink: 0; }
      #about .dev .imgs .swiper {
        width: 100%;
        height: 100%; }
        #about .dev .imgs .swiper .swiper-container {
          height: 100%; }
          #about .dev .imgs .swiper .swiper-container .swiper-wrapper {
            height: 100%; }
            #about .dev .imgs .swiper .swiper-container .swiper-wrapper .swiper-slide {
              height: 100%;
              background-position: center;
              background-size: cover; }
      #about .dev .imgs .btns {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 70px;
        height: 140px;
        z-index: 3; }
        #about .dev .imgs .btns a {
          display: block;
          width: 70px;
          height: 70px;
          text-align: center;
          line-height: 70px; }
          #about .dev .imgs .btns a i {
            font-size: 24px; }
          #about .dev .imgs .btns a.prev {
            background-color: #fff;
            color: #01327e; }
          #about .dev .imgs .btns a.next {
            background-color: #01327e;
            color: #fff; }
    #about .dev .years {
      width: calc(100% - 480px);
      height: 480px;
      background-color: #fff;
      overflow: hidden; }
      #about .dev .years .swiper-container {
        height: 100%; }
        #about .dev .years .swiper-container .swiper-wrapper {
          height: 100%; }
          #about .dev .years .swiper-container .swiper-wrapper .swiper-slide {
            width: 420px;
            height: 100%;
            padding: 70px 70px 60px 80px;
            border-right: 1px solid #ddd; }
      #about .dev .years .num {
        font-size: 40px;
        font-family: 'DIN';
        transition: all 0.3s; }
      #about .dev .years i {
        display: block;
        width: 40px;
        height: 2px;
        margin-top: 25px;
        background-color: #333;
        transition: all 0.3s; }
      #about .dev .years .content {
        width: 100%;
        height: 200px;
        overflow-y: auto;
        font-size: 16px;
        line-height: 32px;
        margin-top: 50px;
        -webkit-overflow-scrolling: touch; }
        #about .dev .years .content::-webkit-scrollbar {
          width: 6px;
          height: 6px;
          background-color: #F5F5F5; }
        #about .dev .years .content::-webkit-scrollbar-track {
          border-radius: 3px;
          background-color: #F5F5F5; }
        #about .dev .years .content::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background-color: #ddd; }
        #about .dev .years .content img {
          max-width: 100%; }
      #about .dev .years .swiper-slide-active .num {
        color: #01327e; }
      #about .dev .years .swiper-slide-active i {
        background-color: #01327e; }
  #about .advantage {
    width: 100%;
    padding: 60px 0;
    background-color: #f2f4f5; }
    #about .advantage .item {
      width: 100%;
      height: 360px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px; }
      #about .advantage .item .swiper {
        width: 42.25%;
        height: 360px; }
        #about .advantage .item .swiper .swiper-slide {
          height: 360px;
          background-position: center;
          background-size: cover; }
      #about .advantage .item .texts {
        width: 57.75%;
        height: 100%;
        padding: 90px 80px;
        background-color: #fff; }
        #about .advantage .item .texts .title {
          font-size: 24px;
          font-weight: bold; }
        #about .advantage .item .texts .desc {
          font-size: 16px;
          line-height: 32px;
          margin-top: 20px; }
      #about .advantage .item:nth-child(2n) {
        flex-direction: row-reverse; }
  #about .honor {
    width: 100%;
    padding: 90px 0; }
    #about .honor .swiper-slide {
      width: 26.4%; }
      #about .honor .swiper-slide img {
        width: 100%; }
  #about .team {
    width: 100%; }
    #about .team img {
      width: 100%; } }

@media screen and (max-width: 1024px) {
  #news .list .item {
    width: 100%;
    height: auto;
    padding: 30px 0;
    transition: all 0.3s; }
    #news .list .item .main {
      width: 94%; }
    #news .list .item a {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%; }
    #news .list .item .img {
      width: 230px;
      height: 144px;
      flex-shrink: 0; }
      #news .list .item .img img {
        width: 100%;
        height: 100%; }
    #news .list .item .date {
      width: 70px;
      text-align: center;
      white-space: nowrap;
      transition: all 0.3s;
      flex-shrink: 0;
      margin: 0 30px 0 30px; }
      #news .list .item .date .day {
        font-size: 56px;
        font-weight: bold;
        font-family: 'DIN';
        line-height: 56px; }
      #news .list .item .date .mon {
        font-size: 16px;
        font-family: 'DIN'; }
    #news .list .item .texts {
      width: calc(100% - 490px); }
      #news .list .item .texts .title {
        font-size: 28px;
        font-weight: bold;
        transition: all 0.3s; }
      #news .list .item .texts .desc {
        line-height: 28px;
        margin-top: 10px; }
    #news .list .item .btn {
      width: 100px;
      height: 30px;
      border-radius: 15px;
      line-height: 30px;
      opacity: 1;
      margin-left: 30px; }
    #news .list .item:hover {
      background-color: #d3eeff; }
      #news .list .item:hover .date {
        color: #01327e; }
      #news .list .item:hover .texts .title {
        color: #01327e; }
      #news .list .item:hover .btn {
        opacity: 1; }
  #news .load-more {
    margin-top: 40px;
    margin-bottom: 40px; }
  #calc {
    margin-top: 20px;
    margin-bottom: 30px; }
    #calc .main {
      background-color: #fff;
      padding: 30px 30px; }
      #calc .main .calc-lines {
        margin-top: 60px; }
      #calc .main .calc-line {
        display: block;
        margin-bottom: 30px; }
        #calc .main .calc-line .item {
          width: 100%; }
          #calc .main .calc-line .item .title {
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding: 0 30px;
            background-color: #d3eeff;
            font-size: 18px; }
          #calc .main .calc-line .item .tops {
            width: 100%;
            height: 45px;
            border-bottom: 1px solid #ddd;
            line-height: 45px;
            font-size: 16px;
            font-weight: 500;
            margin-top: 20px; }
          #calc .main .calc-line .item .block {
            margin: 20px 0; }
            #calc .main .calc-line .item .block .input {
              width: 100%; }
              #calc .main .calc-line .item .block .input .label {
                width: 100%;
                font-size: 14px; }
              #calc .main .calc-line .item .block .input input {
                width: 100%;
                height: 40px;
                border: 1px solid #ddd;
                margin-top: 8px;
                padding: 0 10px; }
                #calc .main .calc-line .item .block .input input[readonly] {
                  background-color: #f2f4f5;
                  border-color: #f2f4f5;
                  color: #01327e; }
              #calc .main .calc-line .item .block .input select {
                width: 100%;
                height: 40px;
                border: 1px solid #ddd;
                margin-top: 8px;
                padding: 0 10px; }
          #calc .main .calc-line .item .block1 {
            width: 100%;
            display: block; }
            #calc .main .calc-line .item .block1 .left {
              width: 100%; }
              #calc .main .calc-line .item .block1 .left .img {
                width: 100%; }
                #calc .main .calc-line .item .block1 .left .img img {
                  width: 100%; }
              #calc .main .calc-line .item .block1 .left .inputs {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-top: 29px; }
                #calc .main .calc-line .item .block1 .left .inputs .input {
                  width: 45%;
                  max-width: unset; }
            #calc .main .calc-line .item .block1 .right {
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: flex-end; }
              #calc .main .calc-line .item .block1 .right .input {
                margin-top: 35px; }
          #calc .main .calc-line .item .block2 {
            width: 100%;
            display: flex;
            justify-content: space-between; }
            #calc .main .calc-line .item .block2 .input {
              width: 45%; }
            #calc .main .calc-line .item .block2 .icon {
              width: 10%;
              text-align: center; }
          #calc .main .calc-line .item .block3 {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: stretch; }
            #calc .main .calc-line .item .block3 .left {
              width: 45%; }
              #calc .main .calc-line .item .block3 .left .img {
                width: 100%; }
                #calc .main .calc-line .item .block3 .left .img img {
                  width: 100%; }
              #calc .main .calc-line .item .block3 .left .inputs {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-top: 29px; }
                #calc .main .calc-line .item .block3 .left .inputs .input {
                  width: 45%;
                  max-width: 100px; }
            #calc .main .calc-line .item .block3 .right {
              width: 45%;
              display: flex;
              flex-direction: column; }
              #calc .main .calc-line .item .block3 .right .input {
                margin-bottom: 20px; }
          #calc .main .calc-line .item .block4 {
            width: 100%; }
            #calc .main .calc-line .item .block4 .img {
              width: 100%; }
              #calc .main .calc-line .item .block4 .img img {
                width: 100%; }
            #calc .main .calc-line .item .block4 .inputs {
              width: 100%;
              display: flex;
              margin-top: 29px; }
              #calc .main .calc-line .item .block4 .inputs .input {
                width: 30%;
                max-width: 100px;
                margin-left: 5%; }
                #calc .main .calc-line .item .block4 .inputs .input:first-child {
                  margin-left: 0; }
          #calc .main .calc-line .item .block5 {
            width: 100%;
            display: flex; }
            #calc .main .calc-line .item .block5 .input {
              width: 30%;
              margin-left: 5%; }
              #calc .main .calc-line .item .block5 .input:nth-child(3n+1) {
                margin-left: 0; }
      #calc .main .table {
        width: 100%;
        margin-top: 60px;
        overflow-x: auto; }
        #calc .main .table table {
          width: auto;
          border: 1px solid #ddd; }
          #calc .main .table table th {
            height: 50px;
            background-color: #d3eeff;
            font-size: 16px;
            text-align: center;
            padding: 0 10px; }
          #calc .main .table table td {
            padding: 10px 20px; }
            #calc .main .table table td .goods {
              display: block;
              align-items: center; }
              #calc .main .table table td .goods img {
                width: 60px;
                height: 60px; }
              #calc .main .table table td .goods span {
                display: block;
                margin-left: 0; }
          #calc .main .table table tbody tr {
            transition: all 0.3s; }
            #calc .main .table table tbody tr:hover {
              background-color: #f4fbff; }
  #index .banner {
    width: 100%;
    height: 340px; }
    #index .banner .swiper-slide {
      height: 100%;
      overflow: hidden;
      background-size: cover;
      background-position: center; }
      #index .banner .swiper-slide img {
        height: auto;
        width: auto;
        opacity: 0; }
  #index .floor-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; }
    #index .floor-top .tab {
      display: flex; }
      #index .floor-top .tab a {
        margin-left: 55px;
        font-size: 18px;
        transition: all 0.3s; }
        #index .floor-top .tab a:hover, #index .floor-top .tab a.active {
          color: #01327e; }
  #index .mod-title {
    display: inline-block; }
    #index .mod-title i {
      display: block;
      width: 40px;
      height: 4px;
      background-color: #01327e; }
    #index .mod-title .cn {
      display: block;
      width: 100%;
      font-size: 20px;
      font-weight: bold;
      line-height: 20px;
      margin-top: 15px;
      white-space: nowrap; }
    #index .mod-title .en {
      display: block;
      width: 100%;
      font-size: 16px;
      font-family: 'Arial';
      text-transform: uppercase;
      line-height: 16px;
      margin-top: 12px;
      white-space: nowrap; }
  #index .more {
    display: inline-flex;
    align-items: center;
    font-family: 'DIN';
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s; }
    #index .more i {
      margin-left: 6px;
      height: 14px;
      line-height: 14px;
      transition: all 0.3s; }
    #index .more:hover i {
      transform: rotate(90deg); }
  #index .floor1 {
    width: 100%;
    padding: 30px 0 30px;
    background-color: #fff; }
    #index .floor1 .items {
      width: 100%;
      margin-top: 20px;
      display: flex;
      justify-content: space-between; }
      #index .floor1 .items .item {
        display: block;
        width: 24%;
        background-color: #f2f4f5;
        border: 1px solid #f2f4f5;
        transition: all 0.3s; }
        #index .floor1 .items .item .img {
          width: 100%;
          height: auto; }
          #index .floor1 .items .item .img img {
            width: 100%;
            height: auto; }
        #index .floor1 .items .item .text {
          width: 100%;
          padding: 20px 20px; }
          #index .floor1 .items .item .text .title {
            font-size: 16px;
            line-height: 16px;
            margin-bottom: 10px; }
          #index .floor1 .items .item .text .desc-line {
            line-height: 14px;
            color: #888;
            margin-top: 10px; }
        #index .floor1 .items .item:hover {
          background-color: #fff;
          border-color: #01327e; }
  #index .floor2 {
    width: 100%;
    padding: 30px 0 30px;
    background-color: #ebedef; }
    #index .floor2 .blocks {
      width: 100%; }
    #index .floor2 .items {
      width: 100%;
      margin-top: 20px;
      display: none;
      justify-content: space-between; }
      #index .floor2 .items.active {
        display: block; }
      #index .floor2 .items .item {
        display: inline-flex;
        align-items: center;
        width: 100%;
        height: 180px;
        background-color: #fff;
        overflow: hidden;
        margin-bottom: 10px; }
        #index .floor2 .items .item .img {
          width: 180px;
          min-width: 180px; }
          #index .floor2 .items .item .img img {
            width: 100%; }
        #index .floor2 .items .item .text {
          width: calc(100% - 180px);
          padding: 25px 30px; }
          #index .floor2 .items .item .text .title {
            font-size: 20px;
            line-height: 24px;
            margin-bottom: 40px; }
          #index .floor2 .items .item .text .desc-line {
            line-height: 16px;
            color: #888;
            margin-top: 10px; }
        #index .floor2 .items .item:hover {
          background-color: #fff;
          border-color: #01327e; }
  #index .floor3 {
    width: 100%;
    padding: 30px 0 30px;
    background-color: #fff; }
    #index .floor3 .items {
      width: 100%;
      margin-top: 40px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      #index .floor3 .items .item {
        width: 32.5%;
        margin-left: 1.25%;
        margin-bottom: 20px;
        position: relative; }
        #index .floor3 .items .item:nth-child(3n+1) {
          margin-left: 0; }
        #index .floor3 .items .item .img {
          width: 100%;
          height: auto; }
          #index .floor3 .items .item .img img {
            width: 100%;
            height: auto;
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
            transform: all 0.3s; }
        #index .floor3 .items .item i.mask {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: transparent;
          transition: all 0.3s; }
        #index .floor3 .items .item .con {
          width: 100%;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 0;
          margin-top: -40px;
          color: #fff;
          opacity: 0;
          transition: all 0.3s; }
          #index .floor3 .items .item .con i {
            display: block;
            font-size: 28px;
            margin: 0 auto; }
          #index .floor3 .items .item .con span {
            font-size: 16px;
            margin-top: 16px; }
        #index .floor3 .items .item:hover .img img {
          -webkit-filter: grayscale(0);
          -moz-filter: grayscale(0);
          -ms-filter: grayscale(0);
          -o-filter: grayscale(0);
          filter: grayscale(0);
          filter: gray; }
        #index .floor3 .items .item:hover i.mask {
          background-color: rgba(0, 0, 0, 0.3); }
        #index .floor3 .items .item:hover .con {
          opacity: 1; }
  #index .about {
    width: 100%;
    position: relative;
    padding: 30px 0 30px;
    background-color: #ebedef; }
    #index .about .img {
      width: 100%;
      padding-left: calc((100% - 1660px)/2); }
      #index .about .img img {
        width: 100%;
        height: auto; }
    #index .about .texts {
      width: 50%;
      padding: 20px 20px 20px 20px;
      padding-left: 20px;
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 3;
      transform: translateY(-50%);
      background-color: #fff; }
      #index .about .texts .logo {
        height: 24px; }
        #index .about .texts .logo img {
          height: 24px; }
      #index .about .texts .name {
        font-size: 18px;
        font-weight: bold;
        margin-top: 10px; }
      #index .about .texts .desc {
        font-size: 14px;
        line-height: 26px;
        margin-top: 14px; }
  #index .thumb {
    width: 100%;
    padding: 0 0 120px;
    background-color: #ebedef;
    position: relative; }
    #index .thumb .swiper {
      width: 100%;
      height: auto;
      position: relative;
      z-index: 1; }
      #index .thumb .swiper .swiper-slide img {
        width: 100%;
        height: auto;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
        transform: all 0.3s; }
      #index .thumb .swiper .swiper-slide.swiper-slide-active img {
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
        filter: grayscale(0);
        filter: gray; }
    #index .thumb .bar {
      width: 94%;
      max-width: 800px;
      height: 80px;
      overflow: hidden;
      position: absolute;
      left: 50%;
      bottom: 60px;
      z-index: 3;
      transform: translateX(-50%);
      background-color: #fff;
      padding: 20px 30px 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      #index .thumb .bar .t-swiper {
        width: calc(100% - 130px);
        height: 100%; }
        #index .thumb .bar .t-swiper .swiper-slide {
          height: 60px; }
          #index .thumb .bar .t-swiper .swiper-slide .flex {
            display: flex;
            align-items: center; }
            #index .thumb .bar .t-swiper .swiper-slide .flex .icon {
              width: 40px;
              height: 40px;
              color: #01327e; }
              #index .thumb .bar .t-swiper .swiper-slide .flex .icon i {
                font-size: 40px;
                height: 40px;
                display: block; }
            #index .thumb .bar .t-swiper .swiper-slide .flex .text {
              margin-left: 20px; }
              #index .thumb .bar .t-swiper .swiper-slide .flex .text .big {
                font-size: 18px;
                line-height: 18px;
                font-weight: bold; }
              #index .thumb .bar .t-swiper .swiper-slide .flex .text .small {
                line-height: 14px;
                margin-top: 10px; }
      #index .thumb .bar .navigation {
        width: 130px;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        #index .thumb .bar .navigation i {
          font-size: 20px;
          transition: all 0.3s; }
          #index .thumb .bar .navigation i:hover {
            color: #01327e; }
        #index .thumb .bar .navigation .c-page {
          font-size: 20px; }
          #index .thumb .bar .navigation .c-page #current {
            font-size: 30px;
            color: #01327e; }
  #index .study {
    width: 100%;
    padding: 30px 0 30px;
    background-color: #fff; }
    #index .study .items {
      width: 100%;
      margin-top: 20px;
      display: block;
      justify-content: space-between; }
      #index .study .items .mod {
        width: 100%;
        height: 40px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #01327e;
        color: #fff; }
        #index .study .items .mod > span {
          font-size: 18px; }
        #index .study .items .mod .more {
          display: inline-flex;
          align-items: center;
          font-family: 'DIN';
          font-weight: bold;
          font-size: 14px;
          color: #fff;
          transition: all 0.3s; }
          #index .study .items .mod .more i {
            margin-left: 6px;
            height: 14px;
            line-height: 14px;
            transition: all 0.3s; }
          #index .study .items .mod .more:hover i {
            transform: rotate(90deg); }
      #index .study .items > .item {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px; }
        #index .study .items > .item ul {
          margin-top: 20px; }
        #index .study .items > .item li {
          width: 100%;
          height: 50px;
          border-bottom: 1px solid #f2f4f5;
          line-height: 50px; }
          #index .study .items > .item li a {
            display: block;
            width: 100%;
            transition: all 0.3s; }
            #index .study .items > .item li a:hover {
              color: #01327e; }
      #index .study .items > .shorts {
        width: 100%; }
        #index .study .items > .shorts .type1 {
          height: auto; }
          #index .study .items > .shorts .type1 li {
            height: 50px; }
            #index .study .items > .shorts .type1 li img {
              width: 24px; }
            #index .study .items > .shorts .type1 li a {
              width: calc(100% - 36px); }
        #index .study .items > .shorts .type2 {
          margin-top: 40px; }
          #index .study .items > .shorts .type2 .cover {
            width: 100%;
            height: auto !important; }
            #index .study .items > .shorts .type2 .cover a {
              display: block;
              width: 100%;
              height: auto !important;
              background-size: cover;
              background-position: center;
              background-image: none; }
              #index .study .items > .shorts .type2 .cover a img {
                display: block !important;
                width: 100%; }
          #index .study .items > .shorts .type2 li {
            height: 70px;
            margin-top: 10px; }
            #index .study .items > .shorts .type2 li img {
              width: 50px; }
            #index .study .items > .shorts .type2 li a {
              width: calc(100% - 62px); }
            #index .study .items > .shorts .type2 li:first-child {
              margin-top: 0; }
        #index .study .items > .shorts ul {
          margin-top: 20px; }
        #index .study .items > .shorts li {
          width: 100%;
          border-bottom: 1px solid #f2f4f5;
          display: flex;
          align-items: center;
          overflow: hidden; }
          #index .study .items > .shorts li img {
            flex-shrink: 0;
            margin-right: 12px; }
          #index .study .items > .shorts li .text {
            width: 100%; }
          #index .study .items > .shorts li a {
            display: block;
            transition: all 0.3s; }
            #index .study .items > .shorts li a:hover {
              color: #01327e; }
  #index .news {
    width: 100%;
    padding: 30px 0 30px;
    background-color: #ebedef; }
    #index .news .news-block {
      width: 100%;
      margin-top: 20px;
      display: flex;
      align-items: stretch;
      justify-content: space-between; }
      #index .news .news-block .img {
        display: none; }
      #index .news .news-block ul {
        width: 100%;
        background-color: #fff;
        padding: 0 30px; }
        #index .news .news-block ul li {
          width: 100%;
          padding: 15px 0 15px;
          border-bottom: 1px solid #f2f4f5; }
          #index .news .news-block ul li a {
            display: flex;
            align-items: center; }
            #index .news .news-block ul li a .date {
              width: 70px;
              text-align: center;
              white-space: nowrap;
              transition: all 0.3s;
              flex-shrink: 0; }
              #index .news .news-block ul li a .date .day {
                font-size: 56px;
                font-weight: bold;
                font-family: 'DIN';
                line-height: 56px; }
              #index .news .news-block ul li a .date .mon {
                font-size: 16px;
                font-family: 'DIN'; }
            #index .news .news-block ul li a .text {
              width: calc(100% - 110px);
              margin-left: 40px; }
              #index .news .news-block ul li a .text .title {
                font-size: 18px;
                font-weight: bold;
                transition: all 0.3s; }
              #index .news .news-block ul li a .text .desc {
                width: 100%;
                line-height: 28px;
                color: #888;
                margin-top: 10px;
                transition: all 0.3s; }
            #index .news .news-block ul li a:hover .date, #index .news .news-block ul li a.active .date {
              color: #01327e; }
            #index .news .news-block ul li a:hover .text .title, #index .news .news-block ul li a.active .text .title {
              color: #01327e; }
            #index .news .news-block ul li a:hover .text .desc, #index .news .news-block ul li a.active .text .desc {
              color: #333; }
    #index .news .case-block {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      #index .news .case-block .item {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
        background-color: #fff;
        padding: 30px 30px 30px;
        border-bottom: 1px solid #fff;
        transition: all 0.3s; }
        #index .news .case-block .item .title {
          font-size: 18px;
          font-weight: bold;
          transition: all 0.3s; }
        #index .news .case-block .item .desc {
          width: 100%;
          line-height: 28px;
          color: #888;
          margin-top: 10px;
          transition: all 0.3s; }
        #index .news .case-block .item:hover {
          border-color: #01327e; }
          #index .news .case-block .item:hover .title {
            color: #01327e; }
          #index .news .case-block .item:hover .desc {
            color: #333; }
        #index .news .case-block .item:nth-child(2n+1) {
          margin-left: 0; }
  #index .contact {
    width: 100%;
    background-image: url(../img/22.png);
    background-position: center;
    background-size: cover;
    padding: 140px 0 120px;
    text-align: center; }
    #index .contact .big {
      font-size: 30px;
      font-weight: bold;
      color: #fff; }
    #index .contact .small {
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      margin-top: 10px; }
    #index .contact .btn {
      display: block;
      width: 200px;
      height: 50px;
      background-color: #fff;
      border-radius: 25px;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      color: #01327e;
      margin: 50px auto 0; }
  #prod_detail .main {
    padding: 40px 60px 20px;
    display: block; }
    #prod_detail .main .gallary {
      width: 100%;
      flex-shrink: 0; }
      #prod_detail .main .gallary .view {
        width: 100%;
        height: auto;
        border: 1px solid #ddd; }
        #prod_detail .main .gallary .view img {
          width: 100%;
          height: auto;
          cursor: pointer; }
      #prod_detail .main .gallary .thumb {
        width: 100%;
        margin-top: 10px;
        height: auto;
        display: flex;
        align-items: stretch; }
        #prod_detail .main .gallary .thumb .btn {
          width: 30px;
          height: auto;
          background-color: #f2f4f5;
          color: #fff;
          display: flex;
          flex-shrink: 0;
          align-items: center;
          justify-content: center;
          transition: all 0.3s; }
          #prod_detail .main .gallary .thumb .btn i {
            font-size: 12px; }
          #prod_detail .main .gallary .thumb .btn:hover {
            background-color: #ebf7ff;
            color: #01327e; }
        #prod_detail .main .gallary .thumb .swiper {
          width: calc(100% - 60px);
          padding: 0 10px; }
          #prod_detail .main .gallary .thumb .swiper .swiper-slide {
            width: 100px;
            height: auto;
            border: 1px solid #ddd;
            cursor: pointer; }
            #prod_detail .main .gallary .thumb .swiper .swiper-slide img {
              width: 100%;
              height: 100%; }
    #prod_detail .main .info {
      width: 100%;
      padding-left: 0;
      margin-top: 20px; }
      #prod_detail .main .info .title {
        width: 100%;
        font-size: 24px;
        font-weight: bold; }
      #prod_detail .main .info .num {
        width: 100%;
        position: relative;
        margin-top: 10px; }
        #prod_detail .main .info .num .view-num {
          color: #888;
          float: left; }
        #prod_detail .main .info .num .share-btn {
          display: flex;
          align-items: center;
          width: 100px;
          height: 24px;
          float: right; }
          #prod_detail .main .info .num .share-btn i {
            font-size: 20px; }
          #prod_detail .main .info .num .share-btn span {
            margin-left: 10px; }
        #prod_detail .main .info .num .share-block {
          display: none;
          width: 77px;
          height: 30px;
          line-height: 30px;
          position: absolute;
          top: -30px;
          right: 0;
          z-index: 2; }
          #prod_detail .main .info .num .share-block .bdsharebuttonbox {
            width: 100%;
            height: 100%;
            text-align: right; }
      #prod_detail .main .info .title-line {
        width: 100%;
        height: 40px;
        background-color: #ebf7ff;
        padding: 0 20px;
        font-size: 18px;
        color: #01327e;
        line-height: 40px;
        margin-top: 18px; }
      #prod_detail .main .info .desc {
        width: 100%;
        height: auto;
        overflow-y: auto;
        margin-top: 20px;
        line-height: 24px; }
      #prod_detail .main .info .btns {
        width: 100%;
        max-width: unset;
        overflow: hidden;
        margin-top: 20px; }
        #prod_detail .main .info .btns a {
          display: block;
          width: 32%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: 1px solid #ddd;
          transition: all 0.3s;
          float: left;
          margin-left: 2%;
          margin-bottom: 10px; }
          #prod_detail .main .info .btns a:nth-child(3n+1) {
            margin-left: 0; }
          #prod_detail .main .info .btns a:hover {
            background-color: #01327e;
            border-color: #01327e;
            color: #fff; }
      #prod_detail .main .info > .bot {
        width: 100%;
        overflow: hidden;
        border-top: 1px solid #ddd;
        padding-top: 5px;
        display: block; }
      #prod_detail .main .info .contact {
        width: 100%;
        float: none; }
        #prod_detail .main .info .contact .tact-item {
          margin-top: 14px;
          display: inline-flex;
          align-items: center;
          flex-wrap: wrap; }
          #prod_detail .main .info .contact .tact-item .qq {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 30px;
            background-color: #cc0001;
            border-radius: 15px;
            white-space: nowrap;
            flex-shrink: 0;
            margin-right: 10px; }
            #prod_detail .main .info .contact .tact-item .qq i {
              font-size: 16px;
              color: #fff; }
            #prod_detail .main .info .contact .tact-item .qq span {
              font-size: 12px;
              margin-left: 6px;
              color: #fff; }
          #prod_detail .main .info .contact .tact-item .name {
            margin-right: 10px;
            height: 30px;
            line-height: 30px;
            white-space: nowrap;
            flex-shrink: 0; }
            #prod_detail .main .info .contact .tact-item .name img {
              height: 100%; }
            #prod_detail .main .info .contact .tact-item .name span {
              margin-left: 4px; }
          #prod_detail .main .info .contact .tact-item .tel {
            font-size: 18px;
            height: 30px;
            line-height: 30px;
            font-family: 'DIN';
            white-space: nowrap;
            flex-shrink: 0; }
            #prod_detail .main .info .contact .tact-item .tel span {
              margin-right: 10px; }
      #prod_detail .main .info .prev-next {
        width: 100%;
        float: none;
        margin-top: 20px;
        padding-left: 0; }
        #prod_detail .main .info .prev-next a {
          width: 100%;
          display: block;
          height: 30px;
          line-height: 30px;
          margin-top: 5px; }
  #contents {
    margin-top: 10px; }
    #contents .main {
      overflow: hidden; }
    #contents .scroll {
      width: 100%;
      float: left; }
      #contents .scroll .scroll-item {
        margin-bottom: 10px;
        background-color: #fff;
        padding: 20px 60px 30px; }
      #contents .scroll .title-line {
        width: 100%;
        height: 50px;
        background-color: #ebf7ff;
        padding: 0 20px;
        font-size: 18px;
        color: #01327e;
        line-height: 50px; }
        #contents .scroll .title-line a {
          display: block;
          width: 100px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background-color: #01327e;
          color: #fff;
          border-radius: 15px;
          float: right;
          margin-top: 10px;
          font-size: 14px; }
      #contents .scroll .content {
        width: 100%;
        padding: 20px 0; }
        #contents .scroll .content img {
          max-width: 100%; }
      #contents .scroll .down-list {
        width: 100%;
        overflow: hidden; }
        #contents .scroll .down-list .item {
          display: block;
          float: left;
          margin-left: 2%;
          width: 32%;
          margin-top: 10px; }
          #contents .scroll .down-list .item .img {
            width: 100%;
            border: 1px solid #ddd;
            transition: all 0.3s; }
            #contents .scroll .down-list .item .img img {
              width: 100%; }
            #contents .scroll .down-list .item .img:hover {
              border-color: #01327e; }
          #contents .scroll .down-list .item .title {
            font-size: 14px;
            margin-top: 6px; }
          #contents .scroll .down-list .item:nth-child(3n+1) {
            margin-left: 0; }
      #contents .scroll .case-list .item {
        display: block;
        width: 100%;
        padding: 20px;
        border: 1px solid #d3eeff;
        margin-top: 10px; }
        #contents .scroll .case-list .item .title {
          font-size: 18px; }
        #contents .scroll .case-list .item .desc {
          line-height: 28px; }
      #contents .scroll .prob-list .item {
        display: block;
        width: 100%;
        padding: 20px 0;
        border-bottom: 1px solid #d3eeff;
        margin-top: 10px; }
        #contents .scroll .prob-list .item .title {
          font-size: 18px; }
        #contents .scroll .prob-list .item .desc {
          line-height: 28px; }
      #contents .scroll .recom {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 100px; }
        #contents .scroll .recom .title-line {
          width: 100%;
          text-align: center;
          background-color: #d3eeff; }
        #contents .scroll .recom .list {
          width: 100%;
          overflow: hidden;
          margin-top: 10px; }
          #contents .scroll .recom .list .item {
            display: block;
            width: 23.5%;
            margin-left: 2%;
            float: left; }
            #contents .scroll .recom .list .item .img {
              width: 100%; }
              #contents .scroll .recom .list .item .img img {
                width: 100%; }
            #contents .scroll .recom .list .item .title {
              width: 100%;
              height: 50px;
              line-height: 50px;
              text-align: center;
              font-size: 16px;
              background-color: #d3eeff; }
            #contents .scroll .recom .list .item:nth-child(4n+1) {
              margin-left: 0; }
    #contents .target {
      display: none; } }

@media screen and (max-width: 750px) {
  #contact .contact .main {
    display: block; }
    #contact .contact .main .texts {
      width: 100%;
      padding: 30px 5%; }
      #contact .contact .main .texts .big {
        font-size: 38px;
        line-height: 38px; }
      #contact .contact .main .texts .name {
        font-size: 18px;
        margin-top: 15px; }
      #contact .contact .main .texts .icon-line {
        margin-top: 20px; }
        #contact .contact .main .texts .icon-line i {
          font-size: 20px; }
        #contact .contact .main .texts .icon-line span {
          font-size: 14px;
          margin-left: 15px; }
      #contact .contact .main .texts .way {
        margin-top: 30px; }
        #contact .contact .main .texts .way .title {
          font-size: 16px; }
        #contact .contact .main .texts .way .items p {
          font-size: 16px;
          margin-right: 15px; }
      #contact .contact .main .texts .wechat {
        width: 100%;
        margin-top: 40px; }
        #contact .contact .main .texts .wechat .img {
          width: 120px;
          height: 120px; }
        #contact .contact .main .texts .wechat .rights {
          width: calc(100% - 120px);
          margin-left: 16px; }
          #contact .contact .main .texts .wechat .rights .big {
            font-size: 18px;
            line-height: 24px; }
          #contact .contact .main .texts .wechat .rights .desc {
            font-size: 16px;
            margin-top: 10px; }
          #contact .contact .main .texts .wechat .rights .small {
            margin-top: 10px;
            width: 100%; }
    #contact .contact .main #map {
      width: 100%;
      height: 500px; }
  #contact .feed {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px; }
    #contact .feed .main {
      padding: 40px 30px; }
      #contact .feed .main .title {
        width: 100%;
        font-size: 20px;
        line-height: 20px; }
      #contact .feed .main .form {
        width: 100%;
        margin-top: 40px; }
        #contact .feed .main .form .input-line {
          width: 100%;
          flex-wrap: wrap; }
          #contact .feed .main .form .input-line input {
            width: 49%;
            height: 50px;
            padding: 0 20px;
            margin-bottom: 10px; }
        #contact .feed .main .form .textarea {
          width: 100%;
          height: 200px;
          margin-top: 10px; }
          #contact .feed .main .form .textarea textarea {
            padding: 10px 20px; }
        #contact .feed .main .form .bot-line {
          flex-wrap: wrap; }
          #contact .feed .main .form .bot-line .yzm {
            display: flex;
            width: 100%; }
            #contact .feed .main .form .bot-line .yzm input {
              width: 100%; }
            #contact .feed .main .form .bot-line .yzm img {
              width: 100px;
              flex-shrink: 0; }
          #contact .feed .main .form .bot-line .sub-btn {
            width: 100%;
            margin-top: 20px; }
            #contact .feed .main .form .bot-line .sub-btn .btn {
              width: 100%; }
  #study .study-tip .main {
    padding: 20px 20px;
    line-height: 24px; }
  #study .tab {
    width: 100%;
    display: flex;
    justify-content: center; }
    #study .tab .item {
      display: block;
      width: 33%;
      max-width: 260px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #d3eeff;
      position: relative;
      margin: 0 5px;
      white-space: nowrap; }
      #study .tab .item::after {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        transform: rotate(-45deg) translate(-50%, 20%);
        background-color: transparent;
        position: absolute;
        bottom: 0;
        left: 50%; }
      #study .tab .item.active, #study .tab .item:hover {
        background-color: #014193;
        color: #fff; }
        #study .tab .item.active::after, #study .tab .item:hover::after {
          background-color: #014193; }
  #gall {
    margin-top: 20px;
    margin-bottom: 30px; }
    #gall .main {
      padding: 20px;
      height: 500px; }
  #ques {
    margin-top: 20px;
    margin-bottom: 30px; }
    #ques .main {
      padding: 20px; }
      #ques .main .list {
        margin-top: 20px; }
        #ques .main .list a {
          width: 100%;
          height: 50px;
          line-height: 50px; }
          #ques .main .list a .date {
            width: 100px; }
          #ques .main .list a .title {
            font-size: 14px;
            width: calc(100% - 120px);
            float: left;
            transition: all 0.3s; }
          #ques .main .list a i {
            font-size: 18px;
            color: #ddd;
            float: right;
            transition: all 0.3s; }
          #ques .main .list a:hover .title {
            color: #014193; }
          #ques .main .list a:hover i {
            color: #014193; }
    #ques .load-more {
      margin-top: 30px; }
  #explan {
    margin-top: 20px;
    margin-bottom: 30px; }
    #explan .main .item {
      padding: 0 20px; }
      #explan .main .item .tops {
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        #explan .main .item .tops .title {
          font-size: 16px; }
        #explan .main .item .tops .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 30px;
          border-radius: 15px;
          background-color: #d3eeff;
          transition: all 0.3s; }
          #explan .main .item .tops .btn::before {
            content: "展开";
            display: inline-block;
            color: #01327e;
            transition: all 0.3s; }
          #explan .main .item .tops .btn i {
            color: #01327e;
            font-size: 12px;
            margin-left: 8px;
            transition: all 0.3s; }
          #explan .main .item .tops .btn.active {
            background-color: #01327e; }
            #explan .main .item .tops .btn.active::before {
              content: "收起";
              color: #fff; }
            #explan .main .item .tops .btn.active i {
              color: #fff;
              transform: rotate(-180deg); }
      #explan .main .item .bots {
        display: none;
        padding: 20px;
        background-color: #f2f4f5;
        line-height: 24px;
        margin-bottom: 20px; }
        #explan .main .item .bots img {
          max-width: 100%; }
  #sample {
    margin-top: 20px; }
    #sample .item {
      width: 49%;
      background-color: #fff;
      margin-left: 2%;
      margin-bottom: 20px;
      padding: 15px 10px; }
      #sample .item .img {
        width: auto;
        height: 60px;
        flex-shrink: 0; }
        #sample .item .img img {
          width: auto;
          height: 100%; }
      #sample .item .rights {
        width: calc(100% - 94px);
        padding-left: 20px; }
        #sample .item .rights .date {
          color: #888;
          font-family: 'DIN'; }
        #sample .item .rights .name {
          display: block;
          font-size: 16px;
          line-height: 18px;
          margin-top: 5px; }
        #sample .item .rights .btn {
          width: 100px;
          height: 30px;
          border-radius: 15px;
          line-height: 30px;
          margin-top: 12px;
          font-size: 12px; }
      #sample .item:nth-child(3n+1) {
        margin-left: 2%; }
      #sample .item:nth-child(2n+1) {
        margin-left: 0; }
    #sample .load-more {
      margin-top: 30px;
      margin-bottom: 30px; }
  #news .list .item {
    width: 100%;
    height: auto;
    padding: 20px 0;
    transition: all 0.3s; }
    #news .list .item .main {
      width: 94%; }
    #news .list .item a {
      display: block;
      width: 100%;
      height: 100%; }
    #news .list .item .img {
      width: 100%;
      height: auto; }
      #news .list .item .img img {
        width: 100%;
        height: auto; }
    #news .list .item .date {
      display: none; }
    #news .list .item .texts {
      width: 100%;
      margin-top: 10px; }
      #news .list .item .texts .title {
        font-size: 16px; }
      #news .list .item .texts .desc {
        line-height: 28px;
        margin-top: 10px; }
    #news .list .item .btn {
      opacity: 1;
      margin-left: 0;
      margin-top: 10px; }
    #news .list .item:hover {
      background-color: #d3eeff; }
      #news .list .item:hover .date {
        color: #01327e; }
      #news .list .item:hover .texts .title {
        color: #01327e; }
      #news .list .item:hover .btn {
        opacity: 1; }
  #news .load-more {
    margin-top: 30px;
    margin-bottom: 30px; }
  #news .detail {
    margin-bottom: 30px; }
    #news .detail .main {
      background-color: #fff;
      padding: 30px 20px 0; }
      #news .detail .main .title {
        text-align: center;
        font-size: 18px; }
      #news .detail .main .date {
        text-align: center;
        margin-top: 10px;
        font-size: 12px; }
        #news .detail .main .date span {
          margin: 0 10px;
          display: block; }
      #news .detail .main .content {
        margin-top: 20px;
        padding: 20px 0;
        line-height: 24px;
        border-top: 1px solid #ddd; }
        #news .detail .main .content img {
          max-width: 100%; }
      #news .detail .main .prev-next {
        width: 100%;
        padding: 15px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #ddd; }
        #news .detail .main .prev-next .lefts {
          width: 80%; }
          #news .detail .main .prev-next .lefts a {
            margin: 10px 0;
            display: block; }
        #news .detail .main .prev-next .back {
          display: block;
          width: 100px;
          height: 30px;
          border-radius: 15px;
          line-height: 30px;
          text-align: center;
          background-color: #d3eeff;
          color: #01327e; }
  #notice {
    background-color: #f2f4f5; }
    #notice .contents {
      padding-bottom: 30px; }
      #notice .contents .main {
        overflow: hidden;
        padding: 0 20px 20px;
        background-color: #fff; }
        #notice .contents .main .item {
          width: 100%;
          margin-top: 30px; }
          #notice .contents .main .item .mod {
            height: 18px;
            line-height: 18px;
            font-size: 16px;
            border-left: 4px solid #01327e;
            color: #01327e;
            padding-left: 10px;
            margin-bottom: 20px; }
          #notice .contents .main .item .content {
            font-size: 14px;
            line-height: 24px; }
            #notice .contents .main .item .content img {
              max-width: 100%; }
  #calc {
    margin-top: 20px;
    margin-bottom: 20px; }
    #calc .main {
      background-color: #fff;
      padding: 20px 20px; }
      #calc .main .calc-lines {
        margin-top: 30px; }
      #calc .main .calc-line {
        display: block;
        margin-bottom: 30px; }
        #calc .main .calc-line .item {
          width: 100%; }
          #calc .main .calc-line .item .title {
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding: 0 20px;
            background-color: #d3eeff;
            font-size: 16px; }
          #calc .main .calc-line .item .tops {
            width: 100%;
            height: 45px;
            border-bottom: 1px solid #ddd;
            line-height: 45px;
            font-size: 16px;
            font-weight: 500;
            margin-top: 20px; }
          #calc .main .calc-line .item .block {
            margin: 20px 0; }
            #calc .main .calc-line .item .block .input {
              width: 100%; }
              #calc .main .calc-line .item .block .input .label {
                width: 100%;
                font-size: 14px; }
              #calc .main .calc-line .item .block .input input {
                width: 100%;
                height: 40px;
                border: 1px solid #ddd;
                margin-top: 8px;
                padding: 0 10px; }
                #calc .main .calc-line .item .block .input input[readonly] {
                  background-color: #f2f4f5;
                  border-color: #f2f4f5;
                  color: #01327e; }
              #calc .main .calc-line .item .block .input select {
                width: 100%;
                height: 40px;
                border: 1px solid #ddd;
                margin-top: 8px;
                padding: 0 10px; }
          #calc .main .calc-line .item .block1 {
            width: 100%;
            display: block; }
            #calc .main .calc-line .item .block1 .left {
              width: 100%; }
              #calc .main .calc-line .item .block1 .left .img {
                width: 100%; }
                #calc .main .calc-line .item .block1 .left .img img {
                  width: 100%;
                  max-width: unset; }
              #calc .main .calc-line .item .block1 .left .inputs {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-top: 29px; }
                #calc .main .calc-line .item .block1 .left .inputs .input {
                  width: 45%;
                  max-width: unset; }
            #calc .main .calc-line .item .block1 .right {
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: flex-end; }
              #calc .main .calc-line .item .block1 .right .input {
                margin-top: 35px; }
          #calc .main .calc-line .item .block2 {
            width: 100%;
            display: flex;
            justify-content: space-between; }
            #calc .main .calc-line .item .block2 .input {
              width: 45%; }
            #calc .main .calc-line .item .block2 .icon {
              width: 10%;
              text-align: center; }
          #calc .main .calc-line .item .block3 {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: stretch; }
            #calc .main .calc-line .item .block3 .left {
              width: 45%; }
              #calc .main .calc-line .item .block3 .left .img {
                width: 100%; }
                #calc .main .calc-line .item .block3 .left .img img {
                  width: 100%; }
              #calc .main .calc-line .item .block3 .left .inputs {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-top: 29px; }
                #calc .main .calc-line .item .block3 .left .inputs .input {
                  width: 45%;
                  max-width: 100px; }
            #calc .main .calc-line .item .block3 .right {
              width: 45%;
              display: flex;
              flex-direction: column; }
              #calc .main .calc-line .item .block3 .right .input {
                margin-bottom: 20px; }
          #calc .main .calc-line .item .block4 {
            width: 100%; }
            #calc .main .calc-line .item .block4 .img {
              width: 100%; }
              #calc .main .calc-line .item .block4 .img img {
                width: 100%; }
            #calc .main .calc-line .item .block4 .inputs {
              width: 100%;
              display: flex;
              margin-top: 29px; }
              #calc .main .calc-line .item .block4 .inputs .input {
                width: 30%;
                max-width: 100px;
                margin-left: 5%; }
                #calc .main .calc-line .item .block4 .inputs .input:first-child {
                  margin-left: 0; }
          #calc .main .calc-line .item .block5 {
            width: 100%;
            display: flex; }
            #calc .main .calc-line .item .block5 .input {
              width: 30%;
              margin-left: 5%; }
              #calc .main .calc-line .item .block5 .input:nth-child(3n+1) {
                margin-left: 0; }
      #calc .main .table {
        width: 100%;
        margin-top: 60px;
        overflow-x: auto; }
        #calc .main .table table {
          width: 100%;
          table-layout: fixed;
          border: 1px solid #ddd; }
          #calc .main .table table th {
            height: 50px;
            background-color: #d3eeff;
            font-size: 16px;
            text-align: center;
            padding: 0 10px;
            white-space: nowrap; }
          #calc .main .table table td {
            padding: 10px 20px; }
            #calc .main .table table td .goods {
              display: block;
              align-items: center; }
              #calc .main .table table td .goods img {
                width: 60px;
                height: 60px;
                max-width: unset; }
              #calc .main .table table td .goods span {
                display: block;
                margin-left: 0; }
          #calc .main .table table tbody tr {
            transition: all 0.3s; }
            #calc .main .table table tbody tr:hover {
              background-color: #f4fbff; }
  #about .about {
    display: block;
    background-color: #fff; }
    #about .about .texts {
      width: 100%;
      padding-left: 3%;
      padding-top: 30px;
      padding-bottom: 30px;
      padding-right: 3%; }
      #about .about .texts .slogen {
        font-size: 24px;
        font-weight: bold; }
      #about .about .texts .content {
        width: 100%;
        height: 290px;
        overflow-x: hidden;
        overflow-y: auto;
        font-size: 16px;
        line-height: 32px;
        margin-top: 20px;
        -webkit-overflow-scrolling: touch; }
        #about .about .texts .content img {
          max-width: 100%; }
        #about .about .texts .content::-webkit-scrollbar {
          width: 6px;
          height: 6px;
          background-color: #F5F5F5; }
        #about .about .texts .content::-webkit-scrollbar-track {
          border-radius: 3px;
          background-color: #F5F5F5; }
        #about .about .texts .content::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background-color: #ddd; }
      #about .about .texts .items {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 40px; }
        #about .about .texts .items .item {
          color: #01327e; }
          #about .about .texts .items .item .en {
            font-size: 14px;
            text-transform: uppercase; }
          #about .about .texts .items .item .num {
            font-size: 50px;
            line-height: 40px; }
          #about .about .texts .items .item .desc {
            font-size: 14px;
            margin-top: 10px; }
    #about .about .img {
      width: 100%;
      height: 400px;
      flex-shrink: 0;
      background-image: url(../img/33.png);
      background-size: cover;
      background-position: center;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center; }
      #about .about .img i.play {
        display: block;
        width: 54px;
        height: 54px;
        background-image: url(../img/34.png);
        background-size: 100%;
        cursor: pointer;
        transition: all 0.3s; }
        #about .about .img i.play:hover {
          transform: scale(1.1); }
  #about .dev {
    width: 100%;
    height: auto;
    display: block;
    align-items: stretch;
    border-top: 1px solid #ddd; }
    #about .dev .imgs {
      width: 100%;
      height: 480px;
      position: relative;
      flex-shrink: 0; }
      #about .dev .imgs .swiper {
        width: 100%;
        height: 100%; }
        #about .dev .imgs .swiper .swiper-container {
          height: 100%; }
          #about .dev .imgs .swiper .swiper-container .swiper-wrapper {
            height: 100%; }
            #about .dev .imgs .swiper .swiper-container .swiper-wrapper .swiper-slide {
              height: 100%;
              background-position: center;
              background-size: cover; }
      #about .dev .imgs .btns {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 70px;
        height: 140px;
        z-index: 3; }
        #about .dev .imgs .btns a {
          display: block;
          width: 70px;
          height: 70px;
          text-align: center;
          line-height: 70px; }
          #about .dev .imgs .btns a i {
            font-size: 24px; }
          #about .dev .imgs .btns a.prev {
            background-color: #fff;
            color: #01327e; }
          #about .dev .imgs .btns a.next {
            background-color: #01327e;
            color: #fff; }
    #about .dev .years {
      width: 100%;
      height: 246px;
      background-color: #fff;
      overflow: hidden; }
      #about .dev .years .swiper-container {
        height: 100%; }
        #about .dev .years .swiper-container .swiper-wrapper {
          height: 100%; }
          #about .dev .years .swiper-container .swiper-wrapper .swiper-slide {
            width: 420px;
            height: 100%;
            padding: 30px 30px 30px 30px;
            border-right: 1px solid #ddd; }
      #about .dev .years .num {
        font-size: 30px;
        font-family: 'DIN';
        transition: all 0.3s; }
      #about .dev .years i {
        display: block;
        width: 40px;
        height: 2px;
        margin-top: 15px;
        background-color: #333;
        transition: all 0.3s; }
      #about .dev .years .content {
        width: 100%;
        height: auto;
        overflow-y: auto;
        font-size: 14px;
        line-height: 28px;
        margin-top: 20px;
        -webkit-overflow-scrolling: touch; }
        #about .dev .years .content::-webkit-scrollbar {
          width: 6px;
          height: 6px;
          background-color: #F5F5F5; }
        #about .dev .years .content::-webkit-scrollbar-track {
          border-radius: 3px;
          background-color: #F5F5F5; }
        #about .dev .years .content::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background-color: #ddd; }
        #about .dev .years .content img {
          max-width: 100%; }
      #about .dev .years .swiper-slide-active .num {
        color: #01327e; }
      #about .dev .years .swiper-slide-active i {
        background-color: #01327e; }
  #about .advantage {
    width: 100%;
    padding: 30px 0;
    background-color: #f2f4f5; }
    #about .advantage .item {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px; }
      #about .advantage .item .swiper {
        width: 42.25%;
        height: 200px; }
        #about .advantage .item .swiper .swiper-slide {
          height: 200px;
          background-position: center;
          background-size: cover; }
      #about .advantage .item .texts {
        width: 57.75%;
        height: 100%;
        padding: 30px 20px;
        background-color: #fff; }
        #about .advantage .item .texts .title {
          font-size: 16px;
          font-weight: bold; }
        #about .advantage .item .texts .desc {
          font-size: 14px;
          line-height: 30px;
          margin-top: 10px; }
      #about .advantage .item:nth-child(2n) {
        flex-direction: row-reverse; }
  #about .honor {
    width: 100%;
    padding: 30px 0; }
    #about .honor .swiper-slide {
      width: 29%; }
      #about .honor .swiper-slide img {
        width: 100%; }
  #about .team {
    width: 100%; }
    #about .team img {
      width: 100%; }
  #index .banner {
    height: 240px; }
  #index .floor-top .tab a {
    margin-left: 20px;
    font-size: 14px; }
  #index .mod-title {
    display: inline-block; }
    #index .mod-title i {
      display: block;
      width: 40px;
      height: 4px;
      background-color: #01327e; }
    #index .mod-title .cn {
      display: block;
      width: 100%;
      font-size: 16px;
      font-weight: bold;
      line-height: 16px;
      margin-top: 10px;
      white-space: nowrap; }
    #index .mod-title .en {
      display: block;
      width: 100%;
      font-size: 12px;
      font-family: 'Arial';
      text-transform: uppercase;
      line-height: 12px;
      margin-top: 10px;
      white-space: nowrap; }
  #index .more {
    display: inline-flex;
    align-items: center;
    font-family: 'DIN';
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s; }
    #index .more i {
      margin-left: 6px;
      height: 14px;
      line-height: 14px;
      transition: all 0.3s; }
    #index .more:hover i {
      transform: rotate(90deg); }
  #index .floor1 {
    width: 100%;
    padding: 30px 0 30px;
    background-color: #fff; }
    #index .floor1 .items {
      width: 100%;
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      #index .floor1 .items .item {
        display: block;
        width: 49%;
        margin-bottom: 10px;
        background-color: #f2f4f5;
        border: 1px solid #f2f4f5;
        transition: all 0.3s; }
        #index .floor1 .items .item .img {
          width: 100%;
          height: auto; }
          #index .floor1 .items .item .img img {
            width: 100%;
            height: auto; }
        #index .floor1 .items .item .text {
          width: 100%;
          padding: 14px 14px; }
          #index .floor1 .items .item .text .title {
            font-size: 16px;
            line-height: 16px;
            margin-bottom: 10px; }
          #index .floor1 .items .item .text .desc-line {
            line-height: 14px;
            color: #888;
            margin-top: 10px; }
        #index .floor1 .items .item:hover {
          background-color: #fff;
          border-color: #01327e; }
  #index .floor2 {
    width: 100%;
    padding: 30px 0 10px;
    background-color: #ebedef; }
    #index .floor2 .blocks {
      width: 100%; }
    #index .floor2 .items {
      width: 100%;
      margin-top: 20px;
      display: none;
      justify-content: space-between; }
      #index .floor2 .items.active {
        display: block; }
      #index .floor2 .items .item {
        display: inline-flex;
        align-items: center;
        width: 100%;
        height: 140px;
        background-color: #fff;
        overflow: hidden;
        margin-bottom: 10px; }
        #index .floor2 .items .item .img {
          width: 110px;
          height: 110px;
          min-width: 110px; }
          #index .floor2 .items .item .img img {
            width: 110px;
            height: 110px; }
        #index .floor2 .items .item .text {
          width: calc(100% - 110px);
          padding: 10px; }
          #index .floor2 .items .item .text .title {
            font-size: 16px;
            line-height: 24px;
            margin-bottom: 10px; }
          #index .floor2 .items .item .text .desc-line {
            font-size: 12px;
            line-height: 16px;
            color: #888;
            margin-top: 6px; }
        #index .floor2 .items .item:hover {
          background-color: #fff;
          border-color: #01327e; }
  #index .floor3 {
    width: 100%;
    padding: 30px 0 10px;
    background-color: #fff; }
    #index .floor3 .items {
      width: 100%;
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      #index .floor3 .items .item {
        width: 49%;
        margin-left: 2%;
        margin-bottom: 10px;
        position: relative; }
        #index .floor3 .items .item:nth-child(3n+1) {
          margin-left: 2%; }
        #index .floor3 .items .item:nth-child(2n+1) {
          margin-left: 0; }
        #index .floor3 .items .item .img {
          width: 100%;
          height: auto; }
          #index .floor3 .items .item .img img {
            width: 100%;
            height: auto;
            -webkit-filter: grayscale(0);
            -moz-filter: grayscale(0);
            -ms-filter: grayscale(0);
            -o-filter: grayscale(0);
            filter: grayscale(0);
            filter: gray;
            transform: all 0.3s; }
        #index .floor3 .items .item i.mask {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.3);
          transition: all 0.3s; }
        #index .floor3 .items .item .con {
          width: 100%;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 0;
          margin-top: -30px;
          color: #fff;
          opacity: 1;
          transition: all 0.3s; }
          #index .floor3 .items .item .con i {
            display: block;
            font-size: 28px;
            margin: 0 auto; }
          #index .floor3 .items .item .con span {
            font-size: 14px;
            margin-top: 14px; }
  #index .about {
    width: 100%;
    position: relative;
    padding: 30px 0 30px;
    background-color: #ebedef; }
    #index .about .img {
      width: 100%;
      padding-left: 0; }
      #index .about .img img {
        width: 100%;
        height: auto; }
    #index .about .texts {
      width: 100%;
      padding: 20px 20px 20px 20px;
      padding-left: 20px;
      position: relative;
      top: 0;
      left: 0;
      z-index: 3;
      transform: translateY(0);
      background-color: #fff; }
      #index .about .texts .logo {
        height: 24px; }
        #index .about .texts .logo img {
          height: 24px; }
      #index .about .texts .name {
        font-size: 18px;
        font-weight: bold;
        margin-top: 10px; }
      #index .about .texts .desc {
        font-size: 14px;
        line-height: 26px;
        margin-top: 14px; }
  #index .thumb {
    width: 100%;
    padding: 0 0 70px;
    background-color: #ebedef;
    position: relative; }
    #index .thumb .swiper {
      width: 100%;
      height: auto;
      position: relative;
      z-index: 1; }
      #index .thumb .swiper .swiper-slide img {
        width: 100%;
        height: auto;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
        transform: all 0.3s; }
      #index .thumb .swiper .swiper-slide.swiper-slide-active img {
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -ms-filter: grayscale(0);
        -o-filter: grayscale(0);
        filter: grayscale(0);
        filter: gray; }
    #index .thumb .bar {
      width: 94%;
      max-width: 800px;
      height: 60px;
      overflow: hidden;
      position: absolute;
      left: 50%;
      bottom: 30px;
      z-index: 3;
      transform: translateX(-50%);
      background-color: #fff;
      padding: 10px 20px 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      #index .thumb .bar .t-swiper {
        width: calc(100% - 130px);
        height: 100%; }
        #index .thumb .bar .t-swiper .swiper-slide {
          height: 40px; }
          #index .thumb .bar .t-swiper .swiper-slide .flex {
            display: flex;
            align-items: center; }
            #index .thumb .bar .t-swiper .swiper-slide .flex .icon {
              width: 30px;
              height: 30px;
              color: #01327e; }
              #index .thumb .bar .t-swiper .swiper-slide .flex .icon i {
                font-size: 30px;
                height: 30px;
                display: block; }
            #index .thumb .bar .t-swiper .swiper-slide .flex .text {
              margin-left: 20px; }
              #index .thumb .bar .t-swiper .swiper-slide .flex .text .big {
                font-size: 14px;
                line-height: 14px;
                font-weight: bold; }
              #index .thumb .bar .t-swiper .swiper-slide .flex .text .small {
                line-height: 14px;
                margin-top: 10px; }
      #index .thumb .bar .navigation {
        width: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        #index .thumb .bar .navigation i {
          font-size: 14px;
          transition: all 0.3s; }
          #index .thumb .bar .navigation i:hover {
            color: #01327e; }
        #index .thumb .bar .navigation .c-page {
          font-size: 12px; }
          #index .thumb .bar .navigation .c-page #current {
            font-size: 14px;
            color: #01327e; }
  #index .study {
    width: 100%;
    padding: 30px 0 30px;
    background-color: #fff; }
    #index .study .items {
      width: 100%;
      margin-top: 20px;
      display: block;
      justify-content: space-between; }
      #index .study .items .mod {
        width: 100%;
        height: 40px;
        padding: 0 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #01327e;
        color: #fff; }
        #index .study .items .mod > span {
          font-size: 16px; }
        #index .study .items .mod .more {
          display: inline-flex;
          align-items: center;
          font-family: 'DIN';
          font-weight: bold;
          font-size: 14px;
          color: #fff;
          transition: all 0.3s; }
          #index .study .items .mod .more i {
            margin-left: 6px;
            height: 14px;
            line-height: 14px;
            transition: all 0.3s; }
          #index .study .items .mod .more:hover i {
            transform: rotate(90deg); }
      #index .study .items > .item {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px; }
        #index .study .items > .item ul {
          margin-top: 10px; }
        #index .study .items > .item li {
          width: 100%;
          height: 50px;
          padding: 0 14px;
          border-bottom: 1px solid #f2f4f5;
          line-height: 50px; }
          #index .study .items > .item li a {
            display: block;
            width: 100%;
            transition: all 0.3s; }
            #index .study .items > .item li a:hover {
              color: #01327e; }
      #index .study .items > .shorts {
        width: 100%; }
        #index .study .items > .shorts .type1 li {
          padding: 0 14px;
          height: 50px; }
          #index .study .items > .shorts .type1 li img {
            width: 24px; }
          #index .study .items > .shorts .type1 li a {
            width: calc(100% - 36px); }
        #index .study .items > .shorts .type2 {
          margin-top: 30px; }
          #index .study .items > .shorts .type2 li {
            padding: 0 14px;
            height: 70px;
            margin-top: 10px; }
            #index .study .items > .shorts .type2 li img {
              width: 50px; }
            #index .study .items > .shorts .type2 li a {
              width: calc(100% - 62px); }
            #index .study .items > .shorts .type2 li:first-child {
              margin-top: 0; }
        #index .study .items > .shorts ul {
          margin-top: 10px; }
        #index .study .items > .shorts li {
          width: 100%;
          border-bottom: 1px solid #f2f4f5;
          display: flex;
          align-items: center;
          overflow: hidden; }
          #index .study .items > .shorts li img {
            flex-shrink: 0;
            margin-right: 12px; }
          #index .study .items > .shorts li .text {
            width: 100%; }
          #index .study .items > .shorts li a {
            display: block;
            transition: all 0.3s; }
            #index .study .items > .shorts li a:hover {
              color: #01327e; }
  #index .news {
    width: 100%;
    padding: 30px 0 30px;
    background-color: #ebedef; }
    #index .news .news-block {
      width: 100%;
      margin-top: 20px;
      display: flex;
      align-items: stretch;
      justify-content: space-between; }
      #index .news .news-block .img {
        display: none; }
      #index .news .news-block ul {
        width: 100%;
        background-color: #fff;
        padding: 0; }
        #index .news .news-block ul li {
          width: 100%;
          padding: 15px 0 15px;
          border-bottom: 1px solid #f2f4f5; }
          #index .news .news-block ul li a {
            display: flex;
            align-items: center; }
            #index .news .news-block ul li a .date {
              width: 70px;
              text-align: center;
              white-space: nowrap;
              transition: all 0.3s;
              flex-shrink: 0; }
              #index .news .news-block ul li a .date .day {
                font-size: 28px;
                font-weight: bold;
                font-family: 'DIN';
                line-height: 28px; }
              #index .news .news-block ul li a .date .mon {
                font-size: 14px;
                font-family: 'DIN'; }
            #index .news .news-block ul li a .text {
              width: calc(100% - 95px);
              margin-left: 14px; }
              #index .news .news-block ul li a .text .title {
                font-size: 14px;
                font-weight: bold;
                transition: all 0.3s; }
              #index .news .news-block ul li a .text .desc {
                width: 100%;
                font-size: 12px;
                line-height: 20px;
                color: #888;
                margin-top: 5px;
                transition: all 0.3s; }
            #index .news .news-block ul li a:hover .date, #index .news .news-block ul li a.active .date {
              color: #01327e; }
            #index .news .news-block ul li a:hover .text .title, #index .news .news-block ul li a.active .text .title {
              color: #01327e; }
            #index .news .news-block ul li a:hover .text .desc, #index .news .news-block ul li a.active .text .desc {
              color: #333; }
    #index .news .case-block {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      #index .news .case-block .item {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
        background-color: #fff;
        padding: 15px;
        border-bottom: 1px solid #fff;
        transition: all 0.3s; }
        #index .news .case-block .item .title {
          font-size: 14px;
          font-weight: bold;
          transition: all 0.3s; }
        #index .news .case-block .item .desc {
          width: 100%;
          font-size: 12px;
          line-height: 20px;
          color: #888;
          margin-top: 5px;
          transition: all 0.3s; }
        #index .news .case-block .item:hover {
          border-color: #01327e; }
          #index .news .case-block .item:hover .title {
            color: #01327e; }
          #index .news .case-block .item:hover .desc {
            color: #333; }
        #index .news .case-block .item:nth-child(2n+1) {
          margin-left: 0; }
  #index .contact {
    width: 100%;
    background-image: url(../img/22.png);
    background-position: center;
    background-size: cover;
    padding: 50px 0 40px;
    text-align: center; }
    #index .contact .big {
      font-size: 20px;
      font-weight: bold;
      color: #fff; }
    #index .contact .small {
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      margin-top: 10px; }
    #index .contact .btn {
      display: block;
      width: 120px;
      height: 40px;
      background-color: #fff;
      border-radius: 20px;
      line-height: 40px;
      text-align: center;
      font-size: 14px;
      color: #01327e;
      margin: 20px auto 0; }
  #prod .cate .main .tops {
    height: 50px; }
    #prod .cate .main .tops::-webkit-scrollbar {
      display: none; }
    #prod .cate .main .tops .scroll {
      display: flex; }
      #prod .cate .main .tops .scroll a {
        display: inline-block;
        white-space: nowrap;
        padding: 0 14px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        transition: all 0.3s; }
        #prod .cate .main .tops .scroll a:hover, #prod .cate .main .tops .scroll a.active {
          background-color: #fff;
          color: #01327e; }
        #prod .cate .main .tops .scroll a:first-child {
          margin-left: 14px; }
        #prod .cate .main .tops .scroll a:last-child {
          margin-right: 14px; }
  #prod .cate .main .bots {
    display: flex;
    width: 100%;
    height: 50px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; }
    #prod .cate .main .bots .scroll {
      display: none;
      padding: 0; }
      #prod .cate .main .bots .scroll a {
        display: inline-block;
        white-space: nowrap;
        margin-left: 20px;
        height: 50px;
        line-height: 50px;
        transition: all 0.3s; }
        #prod .cate .main .bots .scroll a:hover, #prod .cate .main .bots .scroll a.active {
          color: #01327e; }
        #prod .cate .main .bots .scroll a:last-child {
          margin-right: 20px; }
      #prod .cate .main .bots .scroll.flex {
        display: flex !important; }
      #prod .cate .main .bots .scroll.block {
        display: flex !important; }
  #prod .prod-tip {
    width: 100%;
    background-color: #f2f4f5;
    margin-top: 20px; }
    #prod .prod-tip .main {
      background-color: #fff;
      padding: 20px;
      font-size: 14px;
      line-height: 24px; }
  #prod .prod-list {
    width: 100%;
    background-color: #f2f4f5; }
    #prod .prod-list .item {
      width: 100%;
      padding: 20px;
      background-color: #fff;
      margin-top: 10px;
      display: block; }
      #prod .prod-list .item .img {
        width: 100%;
        height: auto;
        flex-shrink: 0; }
        #prod .prod-list .item .img img {
          width: 100%;
          height: 100%; }
      #prod .prod-list .item .rights {
        width: 100%;
        margin-left: 0; }
        #prod .prod-list .item .rights .title {
          font-size: 16px;
          margin-top: 10px; }
        #prod .prod-list .item .rights .desc {
          font-size: 14px;
          line-height: 20px;
          margin-top: 10px; }
        #prod .prod-list .item .rights .bots {
          width: 100%;
          display: block;
          margin-top: 10px; }
          #prod .prod-list .item .rights .bots .labels {
            width: 100%;
            overflow: hidden; }
            #prod .prod-list .item .rights .bots .labels .label {
              float: left;
              margin-right: 80px;
              margin-top: 5px; }
          #prod .prod-list .item .rights .bots .more {
            display: block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin-top: 15px; }
        #prod .prod-list .item .rights .contact {
          width: 100%;
          border-top: 1px solid #ddd;
          margin-top: 15px; }
          #prod .prod-list .item .rights .contact .tact-item {
            margin-top: 20px;
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            margin-right: 50px; }
            #prod .prod-list .item .rights .contact .tact-item .qq {
              display: none;
              align-items: center;
              justify-content: center;
              width: 100px;
              height: 30px;
              background-color: #cc0001;
              border-radius: 15px;
              white-space: nowrap;
              flex-shrink: 0;
              margin-right: 10px; }
              #prod .prod-list .item .rights .contact .tact-item .qq.ismobile {
                display: flex; }
              #prod .prod-list .item .rights .contact .tact-item .qq i {
                font-size: 16px;
                color: #fff; }
              #prod .prod-list .item .rights .contact .tact-item .qq span {
                font-size: 12px;
                margin-left: 6px;
                color: #fff; }
            #prod .prod-list .item .rights .contact .tact-item .name {
              margin-right: 10px;
              height: 30px;
              line-height: 30px;
              white-space: nowrap;
              flex-shrink: 0; }
              #prod .prod-list .item .rights .contact .tact-item .name img {
                height: 100%; }
              #prod .prod-list .item .rights .contact .tact-item .name span {
                margin-left: 4px; }
            #prod .prod-list .item .rights .contact .tact-item .tel {
              font-size: 18px;
              height: 30px;
              line-height: 30px;
              font-family: 'DIN';
              white-space: nowrap;
              flex-shrink: 0; }
              #prod .prod-list .item .rights .contact .tact-item .tel span {
                margin-right: 10px; }
  #prod .hot {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px; }
    #prod .hot .main {
      display: block; }
    #prod .hot .label {
      width: 100%;
      flex-shrink: 0;
      white-space: nowrap;
      margin-top: 10px;
      height: 16px;
      line-height: 16px;
      padding-left: 14px; }
    #prod .hot .links {
      width: 100%;
      overflow: hidden; }
      #prod .hot .links a {
        float: left;
        padding: 0 14px;
        height: 16px;
        line-height: 16px;
        margin-top: 10px; }
  #prod .prob {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px; }
    #prod .prob .main {
      background-color: #fff; }
    #prod .prob .tops {
      width: 100%;
      height: 40px;
      padding: 0 14px;
      line-height: 40px;
      background-color: #d3eeff;
      font-size: 16px; }
    #prod .prob .list {
      width: 100%;
      overflow: hidden;
      padding: 8px 14px; }
      #prod .prob .list a {
        display: block;
        float: left;
        width: 100%;
        height: 34px;
        line-height: 34px;
        margin-top: 8px;
        border-bottom: 1px solid #f2f4f5;
        padding: 0;
        margin-left: 0;
        transition: all 0.3s; }
        #prod .prob .list a:nth-child(2n+1) {
          margin-left: 0; }
        #prod .prob .list a:hover {
          color: #01327e; }
  #prod_detail .main {
    padding: 20px 20px 20px;
    display: block; }
    #prod_detail .main .gallary {
      width: 100%;
      flex-shrink: 0; }
      #prod_detail .main .gallary .view {
        width: 100%;
        height: auto;
        border: 1px solid #ddd; }
        #prod_detail .main .gallary .view img {
          width: 100%;
          height: auto;
          cursor: pointer; }
      #prod_detail .main .gallary .thumb {
        width: 100%;
        margin-top: 10px;
        height: auto;
        display: flex;
        align-items: stretch; }
        #prod_detail .main .gallary .thumb .btn {
          width: 20px;
          height: auto;
          background-color: #f2f4f5;
          color: #fff;
          display: flex;
          flex-shrink: 0;
          align-items: center;
          justify-content: center;
          transition: all 0.3s; }
          #prod_detail .main .gallary .thumb .btn i {
            font-size: 12px; }
          #prod_detail .main .gallary .thumb .btn:hover {
            background-color: #ebf7ff;
            color: #01327e; }
        #prod_detail .main .gallary .thumb .swiper {
          width: calc(100% - 40px);
          padding: 0 10px; }
          #prod_detail .main .gallary .thumb .swiper .swiper-slide {
            width: 100px;
            height: auto;
            border: 1px solid #ddd;
            cursor: pointer; }
            #prod_detail .main .gallary .thumb .swiper .swiper-slide img {
              width: 100%;
              height: 100%; }
    #prod_detail .main .info {
      width: 100%;
      padding-left: 0;
      margin-top: 20px; }
      #prod_detail .main .info .title {
        width: 100%;
        font-size: 16px;
        font-weight: bold; }
      #prod_detail .main .info .num {
        width: 100%;
        position: relative;
        margin-top: 10px; }
        #prod_detail .main .info .num .view-num {
          color: #888;
          float: left; }
        #prod_detail .main .info .num .share-btn {
          display: none; }
      #prod_detail .main .info .title-line {
        width: 100%;
        height: 40px;
        background-color: #ebf7ff;
        padding: 0 14px;
        font-size: 16px;
        color: #01327e;
        line-height: 40px;
        margin-top: 18px; }
      #prod_detail .main .info .desc {
        width: 100%;
        height: auto;
        overflow-y: auto;
        margin-top: 14px;
        line-height: 24px; }
      #prod_detail .main .info .btns {
        width: 100%;
        max-width: unset;
        overflow: hidden;
        margin-top: 20px; }
        #prod_detail .main .info .btns a {
          display: block;
          width: 49%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: 1px solid #ddd;
          transition: all 0.3s;
          float: left;
          margin-left: 2%;
          margin-bottom: 10px; }
          #prod_detail .main .info .btns a:nth-child(3n+1) {
            margin-left: 2%; }
          #prod_detail .main .info .btns a:nth-child(2n+1) {
            margin-left: 0; }
      #prod_detail .main .info > .bot {
        width: 100%;
        overflow: hidden;
        border-top: 1px solid #ddd;
        padding-top: 5px; }
      #prod_detail .main .info .contact {
        width: 100%;
        float: none; }
        #prod_detail .main .info .contact .tact-item {
          margin-top: 14px;
          display: inline-flex;
          align-items: center;
          flex-wrap: wrap; }
          #prod_detail .main .info .contact .tact-item .qq {
            display: none;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 30px;
            background-color: #cc0001;
            border-radius: 15px;
            white-space: nowrap;
            flex-shrink: 0;
            margin-right: 10px; }
            #prod_detail .main .info .contact .tact-item .qq.ismobile {
              display: flex; }
            #prod_detail .main .info .contact .tact-item .qq i {
              font-size: 16px;
              color: #fff; }
            #prod_detail .main .info .contact .tact-item .qq span {
              font-size: 12px;
              margin-left: 6px;
              color: #fff; }
          #prod_detail .main .info .contact .tact-item .name {
            margin-right: 10px;
            height: 30px;
            line-height: 30px;
            white-space: nowrap;
            flex-shrink: 0; }
            #prod_detail .main .info .contact .tact-item .name img {
              height: 100%; }
            #prod_detail .main .info .contact .tact-item .name span {
              margin-left: 4px; }
          #prod_detail .main .info .contact .tact-item .tel {
            font-size: 18px;
            height: 30px;
            line-height: 30px;
            font-family: 'DIN';
            white-space: nowrap;
            flex-shrink: 0; }
            #prod_detail .main .info .contact .tact-item .tel span {
              margin-right: 10px; }
      #prod_detail .main .info .prev-next {
        width: 100%;
        float: none;
        margin-top: 20px; }
        #prod_detail .main .info .prev-next a {
          display: block;
          height: 30px;
          line-height: 30px;
          margin-top: 5px; }
  #contents {
    margin-top: 10px; }
    #contents .main {
      overflow: hidden; }
    #contents .scroll {
      width: 100%;
      float: left; }
      #contents .scroll .scroll-item {
        margin-bottom: 10px;
        background-color: #fff;
        padding: 20px 20px 20px; }
      #contents .scroll .title-line {
        width: 100%;
        height: 40px;
        background-color: #ebf7ff;
        padding: 0 14px;
        font-size: 16px;
        color: #01327e;
        line-height: 40px; }
        #contents .scroll .title-line a {
          display: block;
          width: 80px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background-color: #01327e;
          color: #fff;
          border-radius: 15px;
          float: right;
          margin-top: 5px;
          font-size: 12px; }
      #contents .scroll .content {
        width: 100%;
        padding: 20px 0; }
        #contents .scroll .content img {
          max-width: 100%; }
      #contents .scroll .down-list {
        width: 100%;
        overflow: hidden; }
        #contents .scroll .down-list .item {
          display: block;
          float: left;
          margin-left: 2%;
          width: 49%;
          margin-top: 10px; }
          #contents .scroll .down-list .item .img {
            width: 100%;
            border: 1px solid #ddd;
            transition: all 0.3s; }
            #contents .scroll .down-list .item .img img {
              width: 100%; }
            #contents .scroll .down-list .item .img:hover {
              border-color: #01327e; }
          #contents .scroll .down-list .item .title {
            font-size: 14px;
            margin-top: 6px; }
          #contents .scroll .down-list .item:nth-child(3n+1) {
            margin-left: 2%; }
          #contents .scroll .down-list .item:nth-child(2n+1) {
            margin-left: 0; }
      #contents .scroll .case-list .item {
        display: block;
        width: 100%;
        padding: 14px;
        border: 1px solid #d3eeff;
        margin-top: 10px; }
        #contents .scroll .case-list .item .title {
          font-size: 14px; }
        #contents .scroll .case-list .item .desc {
          font-size: 12px;
          line-height: 22px; }
      #contents .scroll .prob-list .item {
        display: block;
        width: 100%;
        padding: 6px 0;
        border-bottom: 1px solid #d3eeff;
        margin-top: 10px; }
        #contents .scroll .prob-list .item .title {
          font-size: 14px; }
        #contents .scroll .prob-list .item .desc {
          font-size: 12px;
          line-height: 22px; }
      #contents .scroll .recom {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 30px; }
        #contents .scroll .recom .title-line {
          width: 100%;
          text-align: center;
          background-color: #d3eeff; }
        #contents .scroll .recom .list {
          width: 100%;
          overflow: hidden;
          margin-top: 10px; }
          #contents .scroll .recom .list .item {
            display: block;
            width: 49%;
            margin-left: 2%;
            margin-bottom: 10px;
            float: left; }
            #contents .scroll .recom .list .item .img {
              width: 100%; }
              #contents .scroll .recom .list .item .img img {
                width: 100%; }
            #contents .scroll .recom .list .item .title {
              width: 100%;
              height: 40px;
              line-height: 40px;
              text-align: center;
              font-size: 16px;
              background-color: #d3eeff; }
            #contents .scroll .recom .list .item:nth-child(4n+1) {
              margin-left: 2%; }
            #contents .scroll .recom .list .item:nth-child(2n+1) {
              margin-left: 0; }
    #contents .target {
      display: none; }
  #search .search-box {
    width: 100%;
    margin: 40px 0 30px;
    height: 40px;
    position: relative;
    z-index: 9; }
    #search .search-box .container {
      height: 100%; }
    #search .search-box .left {
      width: calc(100% - 80px);
      max-width: unset;
      height: 100%;
      display: inline-block;
      float: left;
      border: 1px solid #e6e6e6;
      border-radius: 0; }
      #search .search-box .left .select {
        display: inline-block;
        float: left;
        width: 70px;
        height: 100%;
        padding: 0 10px 0 0;
        position: relative; }
        #search .search-box .left .select > span {
          display: block;
          width: 100%;
          height: 100%;
          line-height: 40px;
          font-size: 14px;
          padding: 0 14px 0 14px;
          background-image: url("../img/67.png");
          background-position: right center;
          background-repeat: no-repeat;
          background-size: 6px 4px;
          cursor: pointer; }
        #search .search-box .left .select .sub {
          width: 100%;
          position: absolute;
          top: 41px;
          left: 0;
          border: 1px solid #e6e6e6;
          background-color: #fff;
          z-index: 99;
          display: none; }
          #search .search-box .left .select .sub span {
            display: block;
            width: 100%;
            text-align: center;
            height: 30px;
            line-height: 30px;
            transition: all 0.3s;
            cursor: pointer; }
            #search .search-box .left .select .sub span:hover, #search .search-box .left .select .sub span.active {
              background-color: #01327e;
              color: #fff; }
      #search .search-box .left .input {
        display: inline-block;
        float: left;
        width: calc(100% - 70px);
        height: 100%;
        border-left: 1px solid #e6e6e6; }
        #search .search-box .left .input input {
          width: 100%;
          height: 100%;
          padding: 0 10px;
          border: none;
          background-color: #fff;
          border-radius: 0;
          font-size: 14px; }
    #search .search-box .btn {
      display: inline-block;
      float: left; }
      #search .search-box .btn button {
        width: 80px;
        height: 40px;
        background-color: #01327e;
        border: none;
        color: #fff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer; }
        #search .search-box .btn button span {
          display: inline-block;
          line-height: 14px; }
        #search .search-box .btn button i {
          display: inline-block;
          width: 16px;
          height: 16px;
          background-image: url("../img/66.png");
          background-size: 100% 100%;
          margin-left: 5px; }
  #search .search-result {
    width: 100%;
    padding-bottom: 30px; }
    #search .search-result .item {
      width: 100%;
      padding: 14px 0;
      border-bottom: 1px solid #e6e6e6; }
      #search .search-result .item .title {
        width: 100%;
        line-height: 14px;
        font-size: 14px;
        display: flex;
        align-items: center; }
        #search .search-result .item .title i {
          display: inline-block;
          width: 4px;
          height: 4px;
          background-color: #01327e;
          margin-right: 10px; }
        #search .search-result .item .title p {
          display: inline-block;
          width: calc(100% - 14px); }
      #search .search-result .item .date {
        width: 100%;
        font-size: 12px;
        line-height: 12px;
        color: #999;
        margin-top: 10px;
        padding-left: 14px; }
    #search .search-result .pages {
      margin-top: 30px; }
  #search .load-more {
    margin-bottom: 30px; } }

@media screen and (max-width: 480px) {
  #contact .contact .main {
    display: block; }
    #contact .contact .main .texts {
      width: 100%;
      padding: 20px 20px; }
      #contact .contact .main .texts .big {
        font-size: 24px;
        line-height: 24px; }
      #contact .contact .main .texts .name {
        font-size: 18px;
        margin-top: 10px; }
      #contact .contact .main .texts .icon-line {
        margin-top: 10px; }
        #contact .contact .main .texts .icon-line i {
          font-size: 20px; }
        #contact .contact .main .texts .icon-line span {
          font-size: 14px;
          margin-left: 15px; }
      #contact .contact .main .texts .way {
        margin-top: 10px; }
        #contact .contact .main .texts .way .title {
          font-size: 16px; }
        #contact .contact .main .texts .way .items p {
          font-size: 16px;
          margin-right: 15px; }
      #contact .contact .main .texts .wechat {
        width: 100%;
        margin-top: 20px; }
        #contact .contact .main .texts .wechat .img {
          width: 120px;
          height: 120px; }
        #contact .contact .main .texts .wechat .rights {
          width: calc(100% - 120px);
          margin-left: 16px; }
          #contact .contact .main .texts .wechat .rights .big {
            font-size: 14px;
            line-height: 24px; }
          #contact .contact .main .texts .wechat .rights .desc {
            font-size: 14px;
            margin-top: 10px; }
          #contact .contact .main .texts .wechat .rights .small {
            margin-top: 10px;
            width: 100%; }
    #contact .contact .main #map {
      width: 100%;
      height: 300px; }
  #contact .feed {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 30px; }
    #contact .feed .main {
      padding: 20px 20px; }
      #contact .feed .main .title {
        width: 100%;
        font-size: 16px;
        line-height: 24px; }
      #contact .feed .main .form {
        width: 100%;
        margin-top: 40px; }
        #contact .feed .main .form .input-line {
          width: 100%;
          flex-wrap: wrap; }
          #contact .feed .main .form .input-line input {
            width: 49%;
            height: 40px;
            padding: 0 10px;
            margin-bottom: 10px; }
        #contact .feed .main .form .textarea {
          width: 100%;
          height: 200px;
          margin-top: 0; }
          #contact .feed .main .form .textarea textarea {
            padding: 10px 10px; }
        #contact .feed .main .form .bot-line {
          flex-wrap: wrap; }
          #contact .feed .main .form .bot-line .yzm {
            display: flex;
            width: 100%; }
            #contact .feed .main .form .bot-line .yzm input {
              width: 100%;
              padding: 0 10px; }
            #contact .feed .main .form .bot-line .yzm img {
              width: 100px;
              flex-shrink: 0; }
          #contact .feed .main .form .bot-line .sub-btn {
            width: 100%;
            margin-top: 20px; }
            #contact .feed .main .form .bot-line .sub-btn .btn {
              width: 100%; }
  #ques {
    margin-top: 20px;
    margin-bottom: 30px; }
    #ques .main .list a {
      width: 100%;
      height: 50px;
      line-height: 50px; }
      #ques .main .list a .date {
        width: 100px; }
      #ques .main .list a .title {
        font-size: 14px;
        width: calc(100% - 120px);
        float: left;
        transition: all 0.3s; }
      #ques .main .list a i {
        font-size: 18px;
        color: #ddd;
        float: right;
        transition: all 0.3s; }
      #ques .main .list a:hover .title {
        color: #014193; }
      #ques .main .list a:hover i {
        color: #014193; }
    #ques .load-more {
      margin-top: 30px; }
  #sample {
    margin-top: 20px; }
    #sample .item {
      width: 100%;
      margin-left: 0;
      margin-bottom: 10px;
      padding: 15px 10px; }
      #sample .item .img {
        width: auto;
        height: 60px;
        flex-shrink: 0; }
        #sample .item .img img {
          width: auto;
          height: 100%; }
      #sample .item .rights {
        width: calc(100% - 94px);
        padding-left: 20px; }
        #sample .item .rights .date {
          color: #888;
          font-family: 'DIN'; }
        #sample .item .rights .name {
          display: block;
          font-size: 16px;
          line-height: 18px;
          margin-top: 5px; }
        #sample .item .rights .btn {
          width: 100px;
          height: 30px;
          border-radius: 15px;
          line-height: 30px;
          margin-top: 12px;
          font-size: 12px; }
      #sample .item:nth-child(3n+1) {
        margin-left: 2%; }
      #sample .item:nth-child(2n+1) {
        margin-left: 0; }
    #sample .load-more {
      margin-top: 20px;
      margin-bottom: 30px; }
  #about .about .texts {
    padding-top: 20px;
    padding-bottom: 20px; }
    #about .about .texts .slogen {
      font-size: 20px; }
    #about .about .texts .content {
      width: 100%;
      height: auto;
      overflow-x: hidden;
      overflow-y: auto;
      font-size: 14px;
      line-height: 26px;
      margin-top: 20px; }
    #about .about .texts .items {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 20px; }
      #about .about .texts .items .item {
        color: #01327e; }
        #about .about .texts .items .item .en {
          font-size: 14px;
          text-transform: uppercase; }
        #about .about .texts .items .item .num {
          font-size: 40px;
          line-height: 30px; }
        #about .about .texts .items .item .desc {
          font-size: 14px;
          margin-top: 10px; }
  #about .about .img {
    width: 100%;
    height: 200px;
    flex-shrink: 0;
    background-image: url(../img/33.png);
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; }
    #about .about .img i.play {
      display: block;
      width: 40px;
      height: 40px;
      background-image: url(../img/34.png);
      background-size: 100%;
      cursor: pointer;
      transition: all 0.3s; }
      #about .about .img i.play:hover {
        transform: scale(1.1); }
  #about .dev {
    width: 100%;
    height: auto; }
    #about .dev .imgs {
      width: 100%;
      height: 200px;
      position: relative;
      flex-shrink: 0; }
      #about .dev .imgs .swiper {
        width: 100%;
        height: 100%; }
        #about .dev .imgs .swiper .swiper-container {
          height: 100%; }
          #about .dev .imgs .swiper .swiper-container .swiper-wrapper {
            height: 100%; }
            #about .dev .imgs .swiper .swiper-container .swiper-wrapper .swiper-slide {
              height: 100%;
              background-position: center;
              background-size: cover; }
      #about .dev .imgs .btns {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 40px;
        height: 80px;
        z-index: 3; }
        #about .dev .imgs .btns a {
          display: block;
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px; }
          #about .dev .imgs .btns a i {
            font-size: 18px; }
          #about .dev .imgs .btns a.prev {
            background-color: #fff;
            color: #01327e; }
          #about .dev .imgs .btns a.next {
            background-color: #01327e;
            color: #fff; }
    #about .dev .years {
      width: 100%;
      height: 246px;
      background-color: #fff;
      overflow: hidden; }
      #about .dev .years .swiper-container {
        height: 100%; }
        #about .dev .years .swiper-container .swiper-wrapper {
          height: 100%; }
          #about .dev .years .swiper-container .swiper-wrapper .swiper-slide {
            width: 300px;
            height: 100%;
            padding: 20px 20px 20px 20px;
            border-right: 1px solid #ddd; }
      #about .dev .years .num {
        font-size: 28px; }
      #about .dev .years i {
        display: block;
        width: 40px;
        height: 2px;
        margin-top: 10px;
        background-color: #333;
        transition: all 0.3s; }
      #about .dev .years .content {
        width: 100%;
        height: 140px;
        overflow-y: auto;
        font-size: 14px;
        line-height: 28px;
        margin-top: 10px;
        -webkit-overflow-scrolling: touch; }
        #about .dev .years .content::-webkit-scrollbar {
          width: 6px;
          height: 6px;
          background-color: #F5F5F5; }
        #about .dev .years .content::-webkit-scrollbar-track {
          border-radius: 3px;
          background-color: #F5F5F5; }
        #about .dev .years .content::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background-color: #ddd; }
        #about .dev .years .content img {
          max-width: 100%; }
      #about .dev .years .swiper-slide-active .num {
        color: #01327e; }
      #about .dev .years .swiper-slide-active i {
        background-color: #01327e; }
  #about .advantage {
    width: 100%;
    padding: 20px 0;
    background-color: #f2f4f5; }
    #about .advantage .item {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px; }
      #about .advantage .item .swiper {
        width: 42.25%;
        height: 200px; }
        #about .advantage .item .swiper .swiper-slide {
          height: 200px;
          background-position: center;
          background-size: cover; }
      #about .advantage .item .texts {
        width: 57.75%;
        height: 100%;
        padding: 20px 20px;
        background-color: #fff; }
        #about .advantage .item .texts .title {
          font-size: 16px;
          font-weight: bold; }
        #about .advantage .item .texts .desc {
          font-size: 14px;
          line-height: 24px;
          margin-top: 10px;
          height: 120px;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch; }
          #about .advantage .item .texts .desc::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: #F5F5F5; }
          #about .advantage .item .texts .desc::-webkit-scrollbar-track {
            border-radius: 3px;
            background-color: #F5F5F5; }
          #about .advantage .item .texts .desc::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background-color: #ddd; }
      #about .advantage .item:nth-child(2n) {
        flex-direction: row-reverse; }
  #about .honor {
    width: 100%;
    padding: 30px 0; }
    #about .honor .swiper-slide {
      width: 29%; }
      #about .honor .swiper-slide img {
        width: 100%; }
  #about .team {
    width: 100%; }
    #about .team img {
      width: 100%; }
  #index .banner {
    height: 160px; } }