﻿



.width100 {
    width: 100%;
}

.font-content, .font-content div {
    font-size: 16px;
}

.under-line {
    text-decoration: underline;
}

/*.threebox-height {
    height: 900px;
}*/

.threebox-title {
    line-height: 1.2;
    margin-bottom: 15px;
}
  .scrol {
    position:relative;
    display:none;
    }
  .scrol > div{
      position:absolute;
      background-color:gray;
      opacity:0.5;
      width:100%;
      height:100%;
  }

.main-title {
    font-size: 31px;
    font-weight: bold;
    color: #1a1a1a;
}

.main-title-en {
    color: #c3a443;
    font-size: 24px;
}

.minor-title {
    color: #1a1a1a;
    font-size: 16px;
    font-weight: bold;
}

.about-content {
    font-size: 16px;
    color: #1a1a1a;
}

.about-content-en {
    font-size: 16px;
    color: #c3a443;
}

.font-bold {
    font-weight: bold;
}


.font-white-title {
    font-size: 22px;
}

.font-white {
    color: #ffffff;
}

.font-mini {
    font-size: 14px;
}

.p-15 {
    padding: 15px;
}
  .p-25 {
    padding: 25px!important;
}
  

.background-gray {
    position: relative;
    background-color: #f2f2f2;
}


.certification {
    height: 880px;
}

    .certification > div {
        position: absolute;
        width: 20%;
    }

        .certification > div > img {
            width: 200px;
        }

.five-guarantees {
    border: 1px solid #c3a443;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 360px;
    padding: 10px;
}

.line-height-cus {
    line-height: 1.9;
}

.certification .about-content {
    text-align: center;
}


.certification1 {
    left: 0;
    right: 0;
    margin: 0 auto;
}

.certification2 {
    top: 130px;
    right: 10%;
}

.certification3 {
    top: 500px;
    right: 28%;
}

.certification4 {
    top: 500px;
    left: 28%;
}

.certification5 {
    top: 130px;
    left: 10%;
}

.haze {
    background-color: white;
    opacity: 0.1;
    height: 97%;
    width:96%;
    position: absolute;
    border-radius: 5px;
}



.text-area textarea, .text-area input {
    border-radius: 5px;
    box-shadow: 1px 1px #4d4d4d;
}

.text-area input {
    width: 100%;
    height: 30px;
    border: none;
}

.text-title {
    color: #ffffff;
    font-size: 20px;
}



.slogan .en {
    color: #bfda81;
}



.container {
    width: 80%;
}

.offset-2 {
    margin-left: 10%;
}

/*.slogan > div{
    width:80%;
}*/
@media (max-width:1170px)
{
    .haze {
        width:87%;
    }
        .offset-2 {
        margin-left: unset;
    }
}

@media (max-width: 1025px) {
    .container {
        width:95%;
        padding: 0;
    }

    .about-content, .font-content div {
        font-size: 16px;
    }
    .threebox-height{
          height: 1020px;
    }

    .certification {
        height: 1280px;
    }

        .certification > div {
            width: 42%;
        }

            .certification > div > img {
                width: 240px;
            }


    .five-guarantees {
        top: 20px;
        width: 60% !important;
    }

        .five-guarantees .main-title {
            font-size: 23px;
        }

        .five-guarantees .main-title-en {
            font-size: 15px;
        }


    .certification1 {
        left: 5%;
        top: 130px;
        right: unset;
        margin: unset;
    }

    .certification2 {
        right: 5%;
    }

    .certification3 {
        top: 550px;
        left: 5%;
        right: unset;
    }

    .certification4 {
        top: 550px;
        left: unset;
        right: 5%;
    }

    .certification5 {
        width: 80% !important;
        top: 900px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .haze {
        width: 97%;
    }
}

@media (max-width: 1170px) {
    .threebox-height {
        height: 1020px;
    }
}
@media (max-width: 992px) {
    .threebox-height {
        height: auto;
    }
}


@media (max-width: 769px) {
                .mobilehide {
                display:none;
            }
    .threebox-height {
         visibility: hidden;
         max-height: 0;
        transition: visibility 0s,max-height  0.2s;
    }
        .threebox-height.clicked {
            visibility: visible;
           max-height: 2000px;
        }

  


    .scrol {
        display:block;
        height: 30px;
    }
     .haze {
        width: 95%;
    }
}

@media (max-width: 430px) {
      .certification {
        height: 1650px;
    }

        .certification > div {
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 90%;
        }

            .certification > div > img {
                width: 150px;
            }

    .certification1 {
        top: 130px;
    }

    .certification2 {
        top: 430px;
    }

    .certification3 {
        top: 730px;
    }

    .certification4 {
        top: 1030px;
    }

    .certification5 {
        top: 1330px;
    }
 .haze {
        width: 92%;
    }
}

.footer {
    border-top: none;
}

.scrol-down{
        cursor: pointer;
    position : absolute;
    z-index:1;
    margin:0 auto;
    top:15%;
    left:0;
    right:0;
}


.goodwidth {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
}

.aboutgood {
    margin-top: 80px;
    margin-bottom: 100px;
    padding-top: 100px;
    padding-bottom: 70px;
    background-color: #EEE;
}


.part1 {
    text-align: center;
    width: 250px;
    height: 70px;
    background-color: #FFF;
    color: black;
    border: solid 1.5px #EEE;
    margin-right: auto;
    margin-left: auto;
    margin-top: -135px;
}

.part2 {
    text-align: center;
    width: 250px;
    height: 70px;
    background-color: #FFF;
    color: black;
    border: solid 1.5px #EEE;
    margin-right: auto;
    margin-left: auto;
}

.padding50 {
    padding: 50px;
}

.padding30 {
    padding: 30px;
}

/*@media screen and (min-width:769px) and (max-width:1199px) {
    .col-lg-4 {
        width: 80%;
        margin: 0 auto;
    }
}*/

@media (max-width:1980px) {
    .row2 {
        width: 850px;
    }
}

@media (max-width:768px) {
    .row2 {
        width: 750px;
    }
}

@media (max-width:480px) {
    .row2 {
        width: 100%;
    }
}
