html {
  margin: 0px;
  min-height: 100%
}

nav {
  right: 0px;

  width: 936px;

}

body {
  margin: 0px;
  min-height: 100%
}

header {
  width: 100%;
}

.mobile-nav-bar {
  background-color: rgb(240, 240,240);
  overflow: auto;
}

.mobile-nav-bar h1 {
  display: none;  
}

#picScroll-left .mobile-title {
  display: none;
}

.picScroll-left .middle-slider-item {
  float: left;

  width: 6em;
}

.search .s-inp {
  width: 112px;
}

.search .s-btn {
  margin-left: -29px;
}

.sub-menu ul li a.a-tit span i.fa-caret-down {
          display: none;
        }

        .sub-menu ul li a.a-tit span i.fa-caret-right {
          display: none;
        }




/* Hamburger Menu Styling */
  /* Hide Hamburger Menu By Default */
  .mobile-menu {
    display: none;
    
    width: 1.5em;
    height: 1.5em;

    float: right;
    padding: 0.5em;
  }
  
  /* Hamburger Bars */
  .mobile-menu .bar {
    width: 1.2em;
    height: 0.2em;
    background-color: black;
    margin-top: 0.2em;
    margin-left: auto;
    margin-right: auto;
  }


/* Links Styling */
#links {
  list-style-type: none;

  padding: 0px;
  margin: 0px;
}


.nav-item {
  text-align: center;
}

.fadein, .fadeout {
    opacity: 0;
    -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}
.fadein {
    opacity: 1;
}

.mobile-copyright {
  display: none;
}

.mobile-qr-label {
  display: none;
}


/* Mobile Change */


@media screen and (max-device-width: 768px) {
  body {
    font-size: 150% !important;
  }

  .container {
    width: 100%;
    min-width: 300px;
  }

  body section {
    margin-bottom: 1em;
  }

  
  
  /* Navigation */
    header {
      background-color: white;
      height: 7em;

      z-index: 5;
    }


    /* Container Overrides for navigation*/
    .nav {
      margin-top: 1em;
    }

    /* Logo */
      .logo-container {
        padding-bottom: 1em;
        background-color: white;
      }

      .logo-container a {
        display: block;
      }

      header .logo {
        display: block;
        margin: auto;
        
        width: 153px;
        height: 78px;
      }

    /* Search Bar Regular */
      .nav > .search-btn {
        display: none;
      }
  
    /* Hide Other In */
    .other {
      display: none;
    }

    /* Links Styling*/

      .links-container {
        width: 100%;
        position: relative;
      }

      .slider {
        display: block;
        overflow-y: hidden;
        max-height: 18em; /* approximate max height */

        transition-property: all;
        transition-duration: .5s;
        transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
      }

      .slider.closed {
        max-height: 0em;
      }


      .mobile-menu:hover + #links {
        display: block;

      }
        /* make the display not absolute*/
        .mobile-nav-bar {
          position: relative;
        }
        /* Search Button*/
        .mobile-nav-bar > .search-btn {
          font-size: 1em;

          width: 1.5em;
          height: 1.5em;
          padding: 0.5em;

          left: 0.5em ;
          top: 0px;

        }

        .search-btn img {

          width: 100%;
          height: 100%;
          background-size: cover;
        }

        /* Search Bar */
        .mobile-nav-bar > .search {
          font-size: 1em;

          width: 50%;
          height: 1.5em;
          

          position: static;
          float: left;

          margin-left: 0.5em;
        }

        .mobile-nav-bar > .search .s-inp {
          width: 100%;
          height: 1.5em;
          background: rgb(180,180,180);
          border-radius: 0.75em;
          line-height: 1.5em;

          float: none;
          position: static;

          padding-left: 0.5em;

          margin: 0.5em;
        }

        .mobile-nav-bar > h1 {
          float: left;
          position: absolute;
          
          left:50%;
          top:50%;

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

          width: 50%;
          display: block;
          text-align: center;
          font-size: 1em;
        }


        /* Show Hamburger Menu */
        .mobile-menu {
          display: block;

        }
        

        #links {
          position: static;
          background-color: rgb(220,220,220);
          z-index: 99;
        }

        header, header nav, header .nav {
          height: auto;
        }

        
        /* Override Desktop Nav items*/
        nav ul .nav-item {
          display: block;
          
          float: none;

          clear: both;
          padding: 10px 0px;
          margin: 0px;

          border-bottom: 2px solid #666666;
        }

        nav ul .nav-item .nav-cont {
            display: none !important;
        }

        nav ul .nav-item.current a {
          border-bottom: 3px solid;
        }

        nav ul .nav-item a {
          display: block;
          font-size: 1.2em;
          line-height: 1.5em;
        }

  /* Banners Styling */
    section.slideBox {
      height: 7em;
      width: auto;
    }
    section.other-banner {
      height: 4em;
      width: auto;
    }

    .slideBox .container {
        height: 100%;
        position: absolute;
        top: auto;
        bottom: 4em;
        left: 0px; 
        margin-left: 0px; 
        height: 0px;
        z-index: 9;
    }

    .slideBox .prev, .slideBox .next {
      z-index: 2;
    }
    
    section.slideBox .bd ul {
      height: 100%;
    }

    section.slideBox .bd li {
      height: 100%;
    }

    section.slideBox .bd li a {
      height: 100%;
      background-size: cover !important;

    }

  /* middle-slider */
    #picScroll-left ul {
      position: static !important;
      width: 100% !important;
    }
    #picScroll-left .mobile-title {
      display: block;
      text-align: center;
      font-size: 1em;
      margin-bottom: 0.5em;
      padding: 0.25em 0em;
      background-color: rgb(240,240,240);
    }

    #picScroll-left .middle-slider-item {
      width: auto !important;
      display: block;
      float: none;
    }

    .i-mod-01 ul li {
      height: 100%;
      margin: 0.5em;
      position: relative;

      padding-bottom: 0.5em;
      border-bottom: 0.2em dashed #cdcdcd;

    }

      .i-mod-01 .info{
        display: inline-block;
        float: none;
        position: absolute;
        width: 75%;
  
        transform: translate(0%,-50%);
        top:50%;
        right: 0.2em;
        bottom: auto;
        left: auto;

        padding: 15px;

        background-image: none;
        color: black;

        font-size: 1em;
        line-height: 1.8em;
      }
      .i-mod-01 .info span {
        
      }

      .i-mod-01 .info p{
        display: none;
      }

    #picScroll-left .pic {
      float:left;
      width: 20%;
    }

    #picScroll-left .pic img {
      height: auto;
      width: 100%;
    }

  /* Main Styling */
    .main-container {
      min-height: 80%;
    }

    .main-content {
      width: auto;
      float: none;
      padding: 0.5em;
    }

    .mod-04 li {
        width: 50%;
        float: none;
    }

    .main-content .pic {
      width: 50%;
      height: auto;
      margin: auto;
      margin-bottom: 1em;
    }

    .main-content .pic img {
      width: 100%;
      height: auto;
    }

    .mod-03 li {
        height: auto;
        line-height: 1.5em;
        border-bottom: 0.1em dotted #c1c1c1;
        padding-left: 16px;
        overflow: hidden;
        vertical-align: bottom;
        background: url(../images/img-12.png) no-repeat left 17px;
        padding-bottom: 0.3em; 
    }
    .mod-03 li a {
        font-size: 1em;
    }
    .mod-03 li > span {
        display: none;
    }

    .mod-04 {
      width: 100%;
    }

    .mod-04 li {
        width: 100%;
        float: none;
        margin: 0.5em 0.5em;
        display: block;
        overflow: hidden;
        vertical-align: bottom;
        margin-bottom: 10px;
    }

    .mod-04 li p {
        height: 1.5em;
        line-height: 20px;
        text-align: center;
        font-size: 1em;
        margin-top: 5px;
    }
    
    /* Titles */
      .i-title {
        background: url(../images/img-14.png) repeat-x left 31px bottom 5px;
        height: 1.2em;
      }

      .i-title .t-l {
        display: inline-block;
        border-bottom: 4px solid #cf000d;
        line-height: 1em;
        font-size: 1em;
        color: #000000;
      }

      .f14 {
        font-size: 1em;
      }

      .mod-02 span {
        font-size: 1em !important;
      }

      .mod-02 p {
        text-indent: 0em; 
      }



    /* LOL*/

    /* Side Bars */
      .side-bar {
        width: auto;
        float: none;

        margin-bottom: 1em;
      }
      
      /* Sub Menu */
        .sub-menu {
          margin-bottom: 0.5em;
        }
        
        .sub-menu h3 {
          height: 2em;
          font-size: 1em;
          line-height: 2em;
          padding-left: 1.5em;
        }

        h3.n {
          height: inherit;
          font-size: 1em;
          line-height: 2em;
          padding-left: 1.5em;
        }

        .sub-menu ul li {
          font-size: 1em;
          height: auto;
          line-height: 2em;
        }

        .sub-menu ul li .menu-cont {
          font-size: 1em;
          height: auto;
          line-height: 1.5em;
        }

        .sub-menu ul li .menu-cont a {
          font-size: 1em;
          height: auto;
          line-height: 1.5em;
          text-align: center;
        }

        .sub-menu ul li a.a-tit {
          /* Font Size & Center Vertically */
          font-size: 1em;
          height: auto;
          line-height: 2em;

          background-image: none;

          /* Override Padding and Center Text*/
          padding-left: 0px;
          text-align: center;
        }
        
        .sub-menu ul li a.a-tit span i.fa-caret-down {
          display: none;
        }

        .sub-menu ul li a.a-tit span i.fa-caret-right {
          display: inline-block;
        }

        .sub-menu ul li a.a-tit.selected span i.fa-caret-right {
          display: none;
        }

        .sub-menu ul li a.a-tit.selected span i.fa-caret-down {
          display: inline-block;
        }

        .page a {
            display: inline-block;
            height: auto;
            line-height: 1.5em;
            border: 0.1em solid #cccccc;
            color: #4e4e4e;
            padding: 0 10px;
            font-size: 1em;
            overflow: hidden;
        }

        .page strong {
          font-size: 1em;
          height: auto;
          line-height: 1.5em;
        }

      /* Search Products */
        .search-products h3 {
          height: 2em;
          font-size: 1em;
          line-height: 2em;
          padding-left: 1.5em;
        }

        .product-search .s-inp {
          height: 1.5em;
          line-height: 1.5em;
          border: 1px solid;
          text-indent: 0.5em;
  
          margin-bottom: 1em;
          z-index: 20;
        }

        .product-search input.s-btn {
          width: 5em;
          height: 1.2em;
          line-height: 1.2em;
          font-size: 1em;
        }
        .left-box {
          display: none;
        }
        .left-box .main {
          
          padding: 1em 1em;
          margin-bottom: 0.5em;
        }

      /*Hide 联系我们*/
      .contact-us {
        width: auto;
        float: none;
        line-height: 1em;

        margin-bottom: 1em;
      }
    
    /* Home Page Main Area*/
      
      /* Service Project */
        .service-project {
          display: none;
          float: none;
        }

      
      /* News Sections (Home*/
        .news {
          float: none;
        }
        
        /* Scrolling Certificates */
          .news .picScroll-left {
            display: none;
          }

        /* News List */
          .news .r-s {
            width: 100%;
            float: none;
          }

          .news .r-s ul {
              margin-top: 0px;
          }

          .news .r-s ul li {
              height: auto;
              line-height: 1.5em;
              font-size: 1em;
              background: url(../images/img-15.png) no-repeat left 14px;
              padding-left: 18px;
              zoom: 1;
              overflow: hidden;
              vertical-align: bottom;
              border-bottom: 1px dotted #d9d9d9;
          }

          .news .r-s img {
            float: right;
            position: static;

            height: 1em;

            margin-right: 1em;
          }





    /* Main Content Area */
      .bread-crumbs {

        height: inherit;
      }

      .bread-crumbs .b-l {
        height: 1.3em;
        font-size: 1.3em;
        line-height: 1.3em;
        /* TO-DELETE */
        background: url(./img-11.png) no-repeat left 3px;
        margin-bottom: 0.5em;
      }
      .bread-crumbs .b-r {
        display: none;  
        height: inherit;
        font-size: 0.75em;
        line-height: 1em;
        

        padding-left: 3em;
        margin-bottom: 0.5em;
      }

      /* Show-list */
        /* Left Side*/
          .main-content .show-list .l-s {
            width: 35%;
            
            margin-top: 0.5em;
          }

          /* Image */
          .mod-01 li .l-s img {
              display: block;
              width: 100%;
              height: auto;
              border: 1px solid #e2e2e2;

          }


        /*Right Side*/
          .main-content .show-list .r-s {
            width: 60%;
            
            font-size: 1em;
            line-height: 1.3em;
          }
            /* Title */
            .main-content .show-list .r-s h3.n{

              padding-left: 0px;
              margin-bottom: 0.5em;
            }

            /* Text */
            .mod-01 li {
              position: relative;
            }

            .mod-01 li .r-s {
              height: inherit;
              float: none;
              position: absolute;

              right: 0.2em;
              top: 50%;
              transform: translate(0%,-50%);
            }
            .mod-01 li .r-s h3 {
              height: 100%;
              line-height: 100%;
              text-align: center;
            }

            .mod-01 li .r-s h3 a {
                line-height: 1.2em;
                font-size: 1em;
                color: #000000;
                
            }
            .mod-01 li .r-s p {
                display: none;  
                line-height: 1em;
                font-size: 0.75em;
                color: #000000;
                text-align: center;   
            }

            .mod-01 li {
                padding-bottom: 20px;
                border-bottom: 0.2em dashed #cdcdcd;
                margin-bottom: 20px;
                zoom: 1;
                overflow: hidden;
                vertical-align: bottom;
            }


  /* Other Services Bar */
    .other-service {
      height: auto;
      margin-bottom: 0px;
    }
    .other-service ul {
      display: none;

      height: auto;
      margin-bottom: 0px;
    }

    /* QR */
    .other-service .erwm {
      width: auto !important;
      float: none;
      height: auto;
      text-align: center;
    }

    .other-service .erwm img {
      float: none;
      width: 4em !important;
      height: 4em !important;
      margin-bottom: 0.5em;
    }

    .other-service .erwm p {
      display: none;
    }

    .other-service .erwm .mobile-qr-label {
      display: block;
      float: none;
      height: auto;
      text-align: center;
      margin-bottom: 0.5em;
    }
  
  




  /* Footer Styling */
    footer {
        background: #333333;
        height: auto;
        color: #ffffff;

        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }
    footer .f-1 {
        position: static;
        display: none;
        padding-left: 30px;
        color: #ffffff;
        margin: 0.5em;
        
        background: url("../images/img-05.png") no-repeat left 25% top 0px;
        background-size: contain;
        
    }

    footer .copyright {
      display: none;
    }

    footer .mobile-copyright {
      display: block;
    }

    footer .mobile-copyright p {
      padding: 0.5em;
      line-height: 1.3em;
    }

}

@media screen and (max-device-width: 450px) {
  body {
    font-size: 300% !important;
  }

  header .logo {
    display: block;
    margin: auto;

    width: 306px;
    height: 156px;
  }
}