@charset "UTF-8";
/**
 *	mixin flex 水平垂直居中
 */
@media screen and (min-width: 320px) {
  aside > a {
    width: 1.5rem;
    height: 1.5rem; }

  .swiper-container {
    height: 10rem; } }
@media (min-width: 350px) {
  aside > a {
    width: 2rem;
    height: 2rem; }

  .swiper-container {
    height: 12rem; } }
@media (min-width: 750px) {
  aside > a {
    width: 2.5rem;
    height: 2.5rem; }

  .swiper-container {
    height: 30rem; } }
#app {
  display: none; }
  #app aside {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 102; }
    #app aside > a {
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      -webkit-justify-content: center;
      align-items: center;
      -webkit-align-items: center;
      flex-direction: column;
      background: #008CEE;
      border-radius: .1rem; }
      #app aside > a span {
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        width: 60%;
        height: .085rem;
        background: white;
        transform: rotateY(0);
        -ms-transform: rotateY(0);
        /* IE 9 */
        -moz-transform: rotateY(0);
        /* Firefox */
        -webkit-transform: rotateY(0);
        /* Safari 和 Chrome */
        -o-transform: rotateY(0); }
      #app aside > a .rotate_1, #app aside > a .rotate_2 {
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease; }
      #app aside > a span + span {
        margin-top: .15rem; }
    #app aside .menu_active {
      background: white; }
      #app aside .menu_active .middle {
        opacity: 0; }
      #app aside .menu_active .rotate_1 {
        background-color: gray;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        /* IE 9 */
        -moz-transform: rotate(45deg);
        /* Firefox */
        -webkit-transform: rotate(45deg);
        /* Safari 和 Chrome */
        -o-transform: rotate(45deg); }
      #app aside .menu_active .rotate_2 {
        margin-top: -.3rem;
        background-color: gray;
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        /* IE 9 */
        -moz-transform: rotate(-45deg);
        /* Firefox */
        -webkit-transform: rotate(-45deg);
        /* Safari 和 Chrome */
        -o-transform: rotate(-45deg); }
  #app .menu_list {
    background: white;
    z-index: 101;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 420px; }
    #app .menu_list ul {
      padding-top: 2rem;
      text-align: center;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      -webkit-justify-content: center;
      flex-direction: column;
      -webkit-flex-direction: column; }
      #app .menu_list ul li {
        width: 100%;
        border-bottom: 1px solid #eeeeee; }
        #app .menu_list ul li a {
          width: 100%;
          display: block;
          background-color: white;
          text-decoration: none;
          font-size: .7rem;
          height: 2rem;
          line-height: 2rem;
          color: black; }
          #app .menu_list ul li a:hover {
            color: #008CEE; }
  #app .bg_view {
    width: 100%; }
  #app .bg_view {
    width: 100%;
    height: 50rem;
    position: fixed;
    z-index: 99;
    opacity: 0;
    display: none; }
  #app .bgView_active {
    opacity: .4;
    background-color: black;
    display: block; }
  #app .fadeInDown {
    animation-duration: .3s; }
  #app .swiper-container {
    width: 100%; }
    #app .swiper-container .swiper-wrapper .swiper-slide {
      background-size: cover !important;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      -webkit-justify-content: center;
      align-items: center;
      -webkit-align-items: center; }
      #app .swiper-container .swiper-wrapper .swiper-slide .text {
        color: white;
        padding: 0 20px;
        text-align: center; }
        #app .swiper-container .swiper-wrapper .swiper-slide .text .title {
          font-size: 22px; }
          @media screen and (min-width: 700px) {
            #app .swiper-container .swiper-wrapper .swiper-slide .text .title {
              font-size: 40px; } }
        #app .swiper-container .swiper-wrapper .swiper-slide .text .subTitle {
          margin-top: 18px;
          font-size: 14px; }
          @media screen and (min-width: 700px) {
            #app .swiper-container .swiper-wrapper .swiper-slide .text .subTitle {
              font-size: 20px; } }
  #app .about-us-wrapper {
    max-width: 1200px;
    border-bottom: 1px solid #eeeeee;
    background-color: white; }
    #app .about-us-wrapper .us {
      padding: 20px 10px; }
      #app .about-us-wrapper .us .v_title {
        margin-bottom: 10px;
        text-align: center; }
      #app .about-us-wrapper .us .bg_img {
        margin-top: 10px; }
        @media screen and (min-width: 320px) {
          #app .about-us-wrapper .us .bg_img {
            height: 180px; } }
        @media screen and (min-width: 370px) {
          #app .about-us-wrapper .us .bg_img {
            height: 220px; } }
        @media screen and (min-width: 400px) {
          #app .about-us-wrapper .us .bg_img {
            height: 260px; } }
    #app .about-us-wrapper .v_us_container {
      margin: 20px 0;
      color: #666; }
      #app .about-us-wrapper .v_us_container div .title {
        margin-left: 10px;
        font-size: 18px;
        margin-bottom: 10px;
        line-height: 20px;
        border-left: 2px solid #008CEE;
        padding-left: 10px; }
    #app .about-us-wrapper .culture .c-list .c-title {
      font-size: 16px;
      color: #333;
      line-height: 30px; }
    #app .about-us-wrapper .culture .c-list .c-desc {
      font-size: 14px;
      color: #666; }
  #app .main_pro {
    width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid #eeeeee; }
    #app .main_pro .header {
      margin: 0 auto;
      padding-top: 30px; }
      #app .main_pro .header p.caption {
        font-size: 20px;
        text-align: center;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px; }
      #app .main_pro .header p.en {
        font-size: 14px;
        text-align: center;
        color: #999; }
      #app .main_pro .header p.cap_desc {
        padding: 0 20px;
        text-align: center;
        margin: 0 auto;
        font-size: 14px;
        line-height: 25px;
        color: #333;
        margin-top: 10px; }
    #app .main_pro .content {
      width: 100%; }
      #app .main_pro .content .citem {
        margin-top: 20px;
        padding: 20px;
        /*padding: 30px;*/
        text-align: left;
        /*width: 600px;*/ }
        #app .main_pro .content .citem .ctext {
          text-align: left;
          margin-bottom: 30px;
          display: flex;
          display: -webkit-flex; }
          #app .main_pro .content .citem .ctext .pro01 {
            width: 30px;
            height: 35px;
            background-size: cover !important; }
          #app .main_pro .content .citem .ctext .pro02 {
            width: 35px;
            height: 35px;
            background-size: cover !important; }
          #app .main_pro .content .citem .ctext .pro03 {
            width: 35px;
            height: 35px;
            background-size: cover !important; }
          #app .main_pro .content .citem .ctext .pro04 {
            width: 35px;
            min-width: 35px;
            height: 35px;
            background-size: cover !important; }
          #app .main_pro .content .citem .ctext .ctitle {
            margin-top: 10px;
            margin-left: 10px;
            font-size: 16px;
            color: #008cee;
            line-height: 25px; }
          #app .main_pro .content .citem .ctext .cen {
            font-size: 14px;
            color: #008cee;
            margin-left: 10px; }
          #app .main_pro .content .citem .ctext .cright {
            text-align: right; }
        #app .main_pro .content .citem .tdesc {
          font-size: 14px;
          color: #666;
          text-align: left;
          line-height: 25px;
          margin-bottom: 10px; }
        #app .main_pro .content .citem .cimg {
          width: 100%;
          height: 160px;
          margin: 0 auto;
          background-size: contain !important;
          margin-bottom: 30px; }
        #app .main_pro .content .citem .chimg {
          height: 240px; }
        #app .main_pro .content .citem .jtitle {
          font-size: 14px;
          font-weight: bold;
          color: #008cee;
          text-align: left;
          margin-bottom: 10px; }
        #app .main_pro .content .citem .jdesc {
          font-size: 14px;
          color: #666;
          margin-bottom: 10px; }
  #app .profession-wrapper {
    max-width: 1200px;
    padding-top: 1rem;
    padding-bottom: 1rem; }
    #app .profession-wrapper ul.content_list {
      margin-top: 1rem;
      display: flex;
      display: -webkit-flex;
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap; }
      #app .profession-wrapper ul.content_list > li {
        margin-top: 1rem;
        min-width: 260px;
        margin: 0 auto;
        text-align: center; }
        #app .profession-wrapper ul.content_list > li div.bg_img {
          background-size: 50% 50% !important;
          width: 60px;
          height: 60px;
          margin: 0 auto;
          display: block;
          box-shadow: border-box;
          border: 2px solid #008CEE;
          border-radius: 31px; }
        #app .profession-wrapper ul.content_list > li div.text {
          display: block;
          margin: 0 auto;
          padding: 1rem 0;
          border-radius: 3px; }
          #app .profession-wrapper ul.content_list > li div.text p:first-child {
            font-size: .7rem;
            color: #666;
            margin-bottom: 8px;
            padding: 0 8px; }
          #app .profession-wrapper ul.content_list > li div.text p:last-child {
            font-size: .6rem;
            color: #777; }
  #app .cases-wrapper {
    background-color: #eaecf0;
    max-width: 1200px; }
    #app .cases-wrapper .caption {
      font-size: 20px;
      text-align: center;
      font-weight: bold;
      color: #333;
      margin-bottom: 20px; }
    #app .cases-wrapper ul {
      width: 100%;
      display: flex;
      display: -webkit-flex;
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      justify-content: space-around;
      -webkit-justify-content: space-around; }
      #app .cases-wrapper ul li {
        margin-top: 20px; }
        @media screen and (min-width: 320px) {
          #app .cases-wrapper ul li {
            max-width: 360px;
            min-width: 280px; } }
        @media screen and (min-width: 375px) {
          #app .cases-wrapper ul li {
            min-width: 300px; } }
        #app .cases-wrapper ul li .case_img {
          background-size: cover !important;
          width: 92%; }
          @media screen and (min-width: 320px) {
            #app .cases-wrapper ul li .case_img {
              height: 200px; } }
          @media screen and (min-width: 375px) {
            #app .cases-wrapper ul li .case_img {
              height: 240px; } }
        #app .cases-wrapper ul li p {
          margin-top: 10px;
          text-align: center;
          color: #666;
          font-size: 14px; }
  #app .solutions-wrapper {
    max-width: 1200px;
    background-color: #eaecf0; }
    @media screen and (min-width: 500px) {
      #app .solutions-wrapper ul {
        display: flex;
        display: -webkit-flex;
        justify-content: space-around;
        -webkit-justify-content: space-around;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap; } }
    #app .solutions-wrapper ul li a {
      color: #666;
      margin: 15px 0;
      background-color: white;
      display: flex;
      display: -webkit-flex; }
      #app .solutions-wrapper ul li a p {
        margin-left: 20px; }
      @media screen and (min-width: 320px) {
        #app .solutions-wrapper ul li a img {
          height: 48px; }
        #app .solutions-wrapper ul li a p.title {
          height: 48px;
          line-height: 48px; } }
      @media screen and (min-width: 500px) {
        #app .solutions-wrapper ul li a {
          flex-direction: column;
          -webkit-flex-direction: column; }
          #app .solutions-wrapper ul li a img {
            height: 200px;
            width: 280px;
            display: block; }
          #app .solutions-wrapper ul li a p.title {
            height: 40px;
            line-height: 40px;
            text-align: center; } }
  #app .contact {
    background-color: #eaecf0;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    padding: 20px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center; }
    #app .contact .code {
      color: #666; }
      #app .contact .code > img {
        width: 100px;
        height: 100px; }
    #app .contact ul {
      height: 100px; }
      #app .contact ul li {
        display: flex;
        display: -webkit-flex;
        height: 40px;
        margin-top: 10px; }
        @media screen and (min-width: 320px) {
          #app .contact ul li {
            padding-left: 30px; } }
        @media screen and (min-width: 375px) {
          #app .contact ul li {
            padding-left: 50px; } }
        @media screen and (min-width: 410px) {
          #app .contact ul li {
            padding-left: 80px; } }
        #app .contact ul li img {
          height: 26px;
          width: 26px;
          margin-top: 7px; }
        #app .contact ul li a {
          text-decoration: '';
          font-size: 14px;
          color: #666;
          display: block;
          line-height: 40px;
          margin-left: 10px; }
  #app footer {
    height: 60px;
    width: 100%; }
    #app footer p {
      height: 60px;
      line-height: 60px;
      background-color: #333;
      color: #eeeeee;
      text-align: center; }

/*# sourceMappingURL=main.css.map */