body {
    padding-bottom: 0;
}

a {
    color: #000;
    text-decoration: none;
    transition: color 1s;
}

a:hover {
    color: #000;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

ul,
p {
    padding: 0;
    margin: 0;
}

li {
    list-style-type: none;
}

.navbar-brand {
    padding: 0;
}

.navbar-brand img {
    width: 190px;
}

.navbar-inverse {
    background-color: #2220;
    border-color: #08080800;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
    background-color: #2220;
}

.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
    background-color: #2220;
}

.navbar-inverse .navbar-nav>li>a {
    font-weight: 600;
    font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
    .navbar-inverse {
        background-color: #222;
        border-color: #080808;
    }
    .navbar-wrapper .navbar {
        padding-left: 0;
    }
}

/* GLOBAL STYLES
-------------------------------------------------- */

/* Padding below the footer and lighter body text */

body {
    color: #5a5a5a;
}

/* CUSTOMIZE THE NAVBAR
  -------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */

.navbar-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */

.navbar-wrapper>.container {
    padding-right: 0;
    padding-left: 0;
}

.navbar-wrapper .navbar {
    padding-right: 15px;
    padding-left: 15px;
}

.navbar-wrapper .navbar .container {
    width: auto;
}

/* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */

/* Carousel base class */

.carousel {
    height: 380px;
}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {
    z-index: 10;
    bottom: 24%;
}

/* Declare heights because of positioning of img element */

.carousel .item {
    height: 380px;
    background-color: #777;
}

.carousel-inner>.item>img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 380px;
}

/* MARKETING CONTENT
  -------------------------------------------------- */

/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {
    margin-bottom: 20px;
    text-align: center;
}

.marketing h2 {
    font-weight: normal;
}

.marketing .col-lg-4 p {
    margin-right: 10px;
    margin-left: 10px;
}

/* Featurettes
  ------------------------- */

.featurette-divider {
    margin: 80px 0;
    /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */

.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
}

/* RESPONSIVE CSS
  -------------------------------------------------- */

@media (min-width: 768px) {
    /* Navbar positioning foo */
    .navbar-wrapper {
        margin-top: 20px;
    }
    .navbar-wrapper .container {
        padding-right: 15px;
        padding-left: 15px;
    }
    .navbar-wrapper .navbar {
        padding-right: 0;
        padding-left: 0;
    }
    /* The navbar becomes detached from the top, so we round the corners */
    .navbar-wrapper .navbar {
        border-radius: 4px;
    }
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 20px;
        font-size: 1.6rem;
        line-height: 1.4;
    }
    .featurette-heading {
        font-size: 50px;
    }
}

@media (min-width: 992px) {
    .featurette-heading {
        margin-top: 120px;
    }
}

/* home */

.home-products {
    background: #f5f5f5;
}

.home-products .col-sm-3 {
    padding: 0;
}

.home-products .col-sm-3 .itemClass {
    padding: 1.8rem 0;
    text-align: center;
}

.home-products .col-sm-3 .itemClass .itemText span {
    font-size: 1.6rem;
    color: #000;
}

.home-products .col-sm-3 .itemClass .icon img {
    width: 6rem;
    padding: 1rem;
}

.home-products .col-sm-3 .itemClass:hover {
    background: #e3e3e3;
    transition: background .8s;
}

.application {
    padding: 3rem 0;
}

.application .header {
    margin: 1rem 0;
    text-align: center;
    font-size: 3.2rem;
    color: #000;
    margin-bottom: 2rem;
}

.application .header .borderStyle {
    border-top: 3px solid #019944;
    width: 8rem;
    margin: 0 auto;
    margin-top: 1rem;
}

.application .header .instructions {
    padding: 2rem;
    display: flex;
    justify-content: center;
}

.application .header .instructions p {
    max-width: 50rem;
    font-size: 1.6rem;
    color: #616161;
}

.application .main .con {
    position: relative;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin-bottom: 2rem;
}

.application .main .con:hover>.vcenter {
    opacity: 1;
}

.application .main .con:hover>.appImg {
    transition: all 0.8s ease-out;
    transform: scale(1.1);
}

.application .main .con .appImg {
    width: 100%;
}

.application .main .con .vcenter {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #000000a8;
    opacity: 0;
    transition: opacity .4s;
}

.application .main .con .vcenter .tb .tb-c .bian1 {
    color: #fff;
    text-align: center;
    font-size: 4rem;
}

.application .main .con .vcenter .tb .tb-c .bian2 {
    font-size: 1.6rem;
    color: #fff;
}

.application .main .consulting {
    text-align: center;
}

.application .main .consulting a {
    background: #019944;
    border: #4CAF50;
    color: #fff;
    padding: 1rem 3rem;
    border-radius: 4rem;
}

.application .main .consulting a:hover {
    background: #4CAF50;
    transition: background .4s;
}

.about {
    padding: 3rem 0;
    background-image: url("../images/slide-01_1.jpg");
    background-size: cover;
}

.about .header {
    margin: 1rem 0;
    text-align: center;
    font-size: 3.2rem;
    color: #fff;
    margin-bottom: 2rem;
}

.about .header .borderStyle {
    border-top: 3px solid #019944;
    width: 8rem;
    margin: 0 auto;
    margin-top: 1rem;
}

.about .main {
    padding: 1rem;
}

.about .main .textBody {
    padding: 2rem;
    color: #fff;
}

.about .main .textBody p {
    font-size: 1.8rem;
    line-height: 2;
    text-indent: 2em;
}

.about .main .aboutImg img {
    width: 100%;
    border-radius: .4rem;
}

.cooperation {
    margin: 3rem 0;
}

.cooperation .header {
    margin: 1rem 0;
    text-align: center;
    font-size: 3.2rem;
    color: #000;
}

.cooperation .header .borderStyle {
    border-top: 3px solid #019944;
    width: 8rem;
    margin: 0 auto;
    margin-top: 1rem;
}

.cooperation .text {
    text-align: center;
    padding: 6rem 0;
}

.cooperation .text .num span {
    font-size: 5rem;
    color: #db0001;
}

.cooperation .text .name span {
    font-size: 2rem;
}

@media screen and (max-width: 425px) {
    .cooperation .text {
        padding: 3rem 0;
    }
    .cooperation .text .num span {
        font-size: 2rem;
        color: #db0001;
    }
    .cooperation .text .name span {
        font-size: 1rem;
    }
}

/* details */

.inner-list {
    background-image: url("../images/inner-details.png");
    height: 320px;
}

.inner-list .statement {
    display: flex;
    height: -webkit-fill-available;
    align-items: center;
    padding-top: 4rem;
}

.inner-list .statement .left span {
    font-size: 3.4rem;
    color: #fff;
    margin-right: .8rem;
}

.inner-list .statement .right span {
    font-size: 1.6rem;
    color: #fff;
}

.detailsWrap {
    margin: 2rem 0;
}

.detailsWrap .header {
    margin-bottom: 2rem;
}

.detailsWrap .header span {
    font-size: 1.8rem;
    color: #9E9E9E;
}

.detailsWrap .sidebar .menu {
    line-height: 2;
}

.detailsWrap .sidebar .menu li {
    display: grid;
    margin-bottom: 1rem;
}

.detailsWrap .sidebar .menu li a {
    width: 100%;
    background: #f5f5f5;
    padding: 1rem 2rem;
    font-size: 1.6rem;
    color: #9E9E9E;
    transition: background .4s;
}

.detailsWrap .sidebar .menu li a:hover {
    background: #eee;
}

.detailsWrap .sidebar .menu li.active a {
    background: #019944;
    color: #fff;
}

.detailsWrap .sidebar .menu li.active:after {
    content: " ";
    position: absolute;
    margin-top: 1.3rem;
    right: 1rem;
    width: 4rem;
    border: 1rem solid #db0001;
}

.detailsWrap .sidebar .contact .head span {
    font-size: 3rem;
}

.detailsWrap .sidebar .contact .text {
    line-height: 2;
    margin-top: .6rem;
}

.detailsWrap .sidebar .contact .text p {
    font-size: 1.8rem;
}

.detailsWrap .content {
    background: #FAFAFA;
    padding: 5rem 2rem;
    font-size: 1.8rem;
    line-height: 2;
}

.detailsWrap .content:after {
    content: " ";
    position: absolute;
    top: 1.3rem;
    right: 1rem;
    width: 4rem;
    border: 1rem solid #db0001;
}

.detailsWrap .content p img {
    max-width: 100%;
    padding: 1rem;
    margin: 2rem 0;
}

.detailsWrap .content img {
    max-width: 100%;
    margin: 2rem 0;
}

@media screen and (max-width: 768px) {
    .detailsWrap .sidebar {
        display: none;
    }
}

/* product */

.inner-list {
    background-image: url("../images/inner-list.png");
    height: 320px;
}

.inner-list .statement {
    display: flex;
    height: -webkit-fill-available;
    align-items: center;
    padding-top: 4rem;
}

.inner-list .statement .left span {
    font-size: 3.4rem;
    color: #fff;
    margin-right: .8rem;
}

.inner-list .statement .right span {
    font-size: 1.6rem;
    color: #fff;
}

.productWrap {
    margin-bottom: 2rem;
}

.productWrap .sidebar .menu {
    line-height: 2;
}

.productWrap .sidebar .menu li {
    display: grid;
    margin-bottom: 1rem;
}

.productWrap .sidebar .menu li a {
    width: 100%;
    background: #f5f5f5;
    padding: 1rem 2rem;
    font-size: 1.6rem;
    color: #9E9E9E;
    transition: background .4s;
}

.productWrap .sidebar .menu li a:hover {
    background: #eee;
}

.productWrap .sidebar .menu li.active a {
    background: #019944;
    color: #fff;
}

.productWrap .sidebar .menu li.active:after {
    content: " ";
    position: absolute;
    top: 1.3rem;
    right: 1rem;
    width: 4rem;
    border: 1rem solid #db0001;
}

.productWrap .sidebar .contact .head span {
    font-size: 3rem;
}

.productWrap .sidebar .contact .text {
    line-height: 2;
    margin-top: .6rem;
}

.productWrap .sidebar .contact .text p {
    font-size: 1.8rem;
}

.productWrap .content .screening {
    background: #eeeeee;
    margin-bottom: 2rem;
}

.productWrap .content .screening .header {
    margin-top: 2rem;
    color: #9E9E9E;
}

.productWrap .content .screening .header span {
    font-size: 1.8rem;
    color: #9E9E9E;
}

.productWrap .content .screening .top-row {
    padding: 2rem 0;
}

.productWrap .content .screening .top-row h4 {
    position: relative;
}

.productWrap .content .screening .top-row h4 a {
    color: #666;
}

.productWrap .content .screening .top-row h4:after {
    content: " ";
    position: absolute;
    width: 5rem;
    border: 1px solid #db0001;
    top: -10px;
    left: 0;
}

.productWrap .content .screening .top-row ul>li a {
    color: #666;
    line-height: 2;
    font-size: 1.6rem;
    transition: all 0.5s ease 0s;
}

.productWrap .content .screening .top-row ul>li a:hover {
    color: #db0001;
}

.productWrap .content .productShow .thumbnail {
    background-color: #f5f5f5;
    border-radius: 0;
    padding: 0;
    border: none;
    position: relative;
}

.productWrap .content .productShow .thumbnail .itemLink .imgHover {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.productWrap .content .productShow .thumbnail .itemLink .imgHover img {
    width: 100%;
    transition: all 0.5s ease 0s;
}

.productWrap .content .productShow .thumbnail .itemLink .caption {
    position: absolute;
    bottom: 0;
    background: #eee;
    width: 100%;
    height: 5rem;
    padding: 1rem;
    color: #666;
    transition: all 0.5s ease 0s;
}

.productWrap .content .productShow .thumbnail .itemLink .caption span {
    font-size: 1.8rem;
}

.productWrap .content .productShow .thumbnail .itemLink:hover img {
    transform: scale(1.2);
}

.productWrap .content .productShow .thumbnail .itemLink:hover .caption {
    background: #e2e2e2;
}

/* footer */

.footerNav {
    background: #313131;
    padding: 2rem 0;
    color: #8f8f8f;
}

.footerNav .head {
    color: #fff;
}

.footerNav .head h5 {
    font-size: 1.8rem;
}

.footerNav ul {
    line-height: 2;
    font-size: 1.6rem;
}

.footerNav ul a {
    color: #8f8f8f;
    font-size: 1.6rem;
}

.footerNav ul a:hover {
    color: #fff;
}

.footerNav .footerLogo {
    padding: 1rem 0;
}

.footerNav .footerLogo img {
    width: 80%;
}

.websiteStated {
    background: #313131;
}

.websiteStated .borderTop {
    border-top: 1px solid #3e3e3e;
}

.websiteStated .borderTop p {
    text-align: center;
    color: #8f8f8f;
    padding: 1rem 0;
}