@charset "utf-8";

.indexbg {
    padding: 50px 0;
}

/* indexabout*/
.indexabout {
    padding: 80px 0;
}

.indexabout_box {
    padding-top: 20px;
}

.indexabout_box h2 {
    font-size: 45px;
    color: #000;
    font-weight: bold;
    margin-bottom: 20px;
}

.indexabout_box p {
    font-size: 16px;
    color: #333;
    line-height: 28px;
    margin-bottom: 10px;
}

.indexaboutlist {
    margin-top: 20px;
}

.indexaboutlist li {
    margin-bottom: 20px;
}

.indexaboutlist span {
    display: inline-block;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    background-color: #f4f4f4;
    border-radius: 10px;
    position: absolute;
}

.indexaboutlist i {
    font-size: 60px;
    color: #ffd600;
}

.indexaboutlisttxt {
    margin-left: 100px;
}

.indexaboutlisttxt h3 {
    font-size: 22px;
    color: #000;
    font-weight: bold;
    margin-bottom: 8px;
}

.indexaboutlisttxt p {
    font-size: 16px;
    color: #333;
}

.indexaboutbtn {
    display: inline-block;
    margin-top: 10px;
}

.indexaboutmore {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 30px;
    border-radius: 5px;
    background-color: #ffd600;
    transition: all ease 0.3s;
}

.indexaboutmore a {
    color: #ffd600;
}

.indexaboutmore i {
    font-size: 20px;
    color: #000;
    margin-left: 5px;
    transition: all ease 0.3s;
}

.indexaboutmore:hover {
    background-color: #000;
    color: #ffd600;
}

.indexaboutmore:hover a {
    color: #ffd600
}

.indexaboutmore:hover i {
    color: #ffd600;
}

.indexaboutimg img {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    vertical-align: middle;
}

/* indexproduct */
.indexproduct {
    background-color: #f0f0f0;
    padding: 50px 0;
}

.index_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.index_title h2 {
    font-size: 45px;
    color: #000;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    word-break: break-word;
}

.index_title span {
    font-size: 18px;
    color: #666;
    text-align: center;
}

.indexproductli {
    margin-bottom: 30px;
}

.indexproductbox {
    height: 100%;
    background-color: #fff;
    padding: 20px 15px;
    border-radius: 10px;
}

.indexproductimg {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    border-radius: 5px;
    height: auto;
    padding-top: 100%;
}

.indexproductimg img {
    width: 100%;
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.indexproducttxt {
    display: block;
    padding: 15px 15px;
    text-align: center;
    background-color: #000;
    border-radius: 10px;
    margin-top: 15px;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.indexproducttxt h3 {
    font-size: 20px;
    color: #fff;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.indexproductli:hover .indexproducttxt {
    background-color: #ffd600;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.indexproductli:hover .indexproducttxt h3 {
    color: #000;
}

.indexproductli:hover .indexproductimg img {
    transform: scale(1.2);
}

.indexproductbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.indexproductmore {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 60px;
    border-radius: 10px;
    border: 1px solid #000;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.indexproductmore i {
    color: #000;
    font-size: 20px;
    margin-left: 15px;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.indexproductmore:hover {
    background-color: #ffd600;
    border: 1px solid #ffd600;
    padding: 15px 80px;
}

.indexproductmore:hover i {
    color: #000;
}

/* indexcontact */
.indexcontact {
    padding: 50px 0;
}

.indexcontactmain {
    padding: 80px 30px;
    background-color: #eaeaea;
    border-radius: 10px;
}

.indexcontactli input {
    width: 100%;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #000;
    border: none;
    outline: none;
    background-color: #fff;
}

.indexcontactli {
    margin-bottom: 20px;
}

.indexcontactli textarea {
    width: 100%;
    padding: 15px;
    height: 120px;
    font-size: 16px;
    color: #000;
    border: none;
    outline: none;
    background-color: #fff;
    resize: none;
}

.agree_check {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 30px 0;
}

.agree_check span {
    font-size: 16px;
    color: #666;
    flex: 1;
    margin-left: 10px;
}

.indexcontactbtn input {
    padding: 10px 60px;
    background-color: #ffd600;
    font-weight: bold;
    color: #000;
    border-radius: 30px;
    font-size: 18px;
    text-align: center;
    border: none;
    outline: none;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.indexcontactbtn input:hover {
    background-color: #000;
    color: #ffd600;
}

.indexcontactwenan h2 {
    font-size: 45px;
    color: #000;
    font-weight: bold;
    margin-bottom: 10px;
}

.indexcontactwenan p {
    font-size: 16px;
    color: #333;
    line-height: 28px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.indexcontactimg {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 30px;
    padding-top: 48%;
}

.indexcontactimg img {
    width: 100%;
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.indexcontactimg:hover img {
    transform: scale(1.2);
}

/* server */
.indexserver {
    padding: 50px 0
}

.indexserverli {
    margin-bottom: 30px;
}

.indexserverbox {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.indexserverimg {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    display: block;
    padding-top: 80%;
}

.indexserverimg img {
    width: 100%;
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.indexservercover {
    z-index: 9;
    width: 100%;
    height: 0;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.indexservertxt {
    display: block;
    visibility: hidden;
    z-index: 99;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 80%);
    width: 90%;
    margin: 0 auto;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.indexservertxt h3 {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*.indexserverli:hover .indexservercover {*/
/*    height: 100%;*/
/*}*/

/*.indexserverli:hover .indexservertxt {*/
/*    transform: translate(-50%, -50%);*/
/*    visibility: visible;*/
/*}*/

.indexserverli:hover .indexserverimg img {
    transform: scale(1.2);
}

/* indexban */
.call-action {
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 80px 0;
}

.overlay::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #111;
    opacity: 0.8;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    z-index: 0;
}

.call-action .call-content {
    text-align: center;
    z-index: 9;
    position: relative;
}

.call-action .call-content h3 {
    text-transform: capitalize;
    color: #ffd808;
    font-size: 36px;
    font-weight: 700;
    padding-top: 6px;
}

.call-action .call-content h3 .span2 {
    color: #fff;
    font-weight: 500;
    font-size: 17px;
    display: block;
    margin: 22px 0px 26px 0px;
}

.call-action .call-content .button .btn {
    background: #fff;
    color: #333;
    padding: 5px 20px;
    transition: all ease 0.3s;     
}

.call-action .call-content .button .btn:before {
    display: none;
}

.call-action .call-content .button .btn:hover {
    background: #ffd808;
    color: #333;
    padding: 5px 30px;
    transition: all ease 0.3s;
}

/* indexcustomer */
.indexcustomer {
    background-color: #e5e5e5;
    padding: 50px 0;
}

.indexcustomerli {
    position: relative;
}

.indexcustomerbox {
    height: 100%;
    background-color: #fff;
    border-radius: 15px;
    padding: 60px 20px 30px 20px;
}

.indexcustomertop {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}

.indexcustomerimg {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    margin-right: 20px;
}

.indexcustomerimg img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.indexcustomertxt h3 {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.indexcustomertxt p {
    font-size: 14px;
    color: #666;
}

.indexcustomertxt {
    flex: 1;
}

.indexcustomerwenan p {
    font-size: 16px;
    color: #333;
    line-height: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.indexcustomericon {
    position: absolute;
    top: -20px;
    right: 50px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 5px;
    background-color: #ffd600;
    text-align: center;
}

.indexcustomericon i {
    font-size: 35px;
    color: #fff;
}

.indexcustomer_main .mySwiper2 {
    padding: 20px 0 50px 0;
}

/* news */
.inexblog {
    padding: 50px 0;
}

.inexblog_img {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    height: auto;
    padding-top: 100%;
}

.inexblog_img img {
    width: 100%;
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.inexblog_txt {
    padding-top: 15px;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.inexblog_txt span {
    font-size: 16px;
    color: #000;
    display: block;
    margin-bottom: 15px;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.inexblog_txt p {
    font-size: 16px;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.inexblog_title h3 {
    font-size: 20px;
    color: #000;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.inexblog_title {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding-bottom: 15px;
}

.inexblog_title b {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffd600;
    display: block;
    margin: 0 0 3px 5px;
}

.inexblog_more {
    display: inline-block;
    justify-content: flex-start;
    align-items: center;
    margin: 30px 0 15px 0;
    padding: 13px 40px;
    border: 1px solid #ffd600;
    border-radius: 30px;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.inexblog_more h4 {
    font-size: 18px;
    color: #000;
    display: inline-block;
}

.inexblog_more h5 {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    line-height: 25px;
    text-align: center;
    background-color: #ffd600;
    margin-left: 15px;
}

.inexblog_more i {
    font-size: 16px;
    color: #fff;
}

.inexblog_box {
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    cursor: pointer;
    margin-bottom: 10px;
}

.inexblog_li:hover .inexblog_box {
    background-color: #ffd600;
}

.inexblog_li:hover .inexblog_txt {
    padding: 15px 15px 0 15px;
}


.inexblog_li:hover .inexblog_txt span,
.inexblog_li:hover .inexblog_txt p,
.inexblog_li:hover .inexblog_txt h3 {
    color: #fff;
}

.inexblog_li:hover .inexblog_more {
    border: 1px solid #fff;
    background-color: #fff;
}

/* footer */
.footer {
    background-color: #171717;
    padding: 50px 0 50px 0;
}

.footernav h3 {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 20px;
}

.footernav li a {
    font-size: 16px;
    color: #999;
    word-wrap: break-word;
    word-break: break-all;
}

.footernav li {
    margin-bottom: 15px;
}

.footernav b {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #999;
    border-radius: 50%;
    margin-right: 10px;
}

.footerway_li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
}

.footerway_li i {
    font-size: 18px;
    color: #fff;
    margin-right: 10px;
}

.footerway_li p {
    font-size: 16px;
    color: #999;
    flex: 1;
    word-break: break-word;
}

.footernav li:hover a {
    color: #ffd600;
}

.footer_bd {
    border-top: 1px solid #444;
    padding-top: 30px;
    margin-top: 30px;
}

.footer_bdtxt {
    color: #fff;
    text-align: center;
}

.footer_bdtxt a {
    font-size: 16px;
    color: #fff;
    text-align: center;
    display: inline-block;
}

.footericon h3{
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 20px;
}

.footericon a {
    display: inline-block;
    margin: 0 5px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    margin-bottom: 10px;
}

.footericon i {
    font-size: 20px;
    color: #000;
    transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

.footericon a:hover {
    background-color: #ffd600;
    transform: scale(0.9);
}

.footericon a:hover i {
    color: #fff;
}

@media (max-width:576px) {
    .bg-dark {
        background-color: #fff !important;
    }
    .navbar-toggler{
        background-color: #ffd600;
    }
    .indexabout{
        padding: 30px 0;
    }
    .indexaboutimg{
        margin-top: 20px;
    }
    .indexcontactwenan{
        margin-top: 20px;
    }
    .call-action .call-content h3{
        font-size:24px
    }
    .index_title h2{
        font-size:36px
    }
    .indexservertxt h3{
        font-size:24px;
        line-height: 24px;
    }
}

@media (min-width:576px) and (max-width:768px) {
    .bg-dark {
        background-color: #fff !important;
    }
    .navbar-toggler{
        background-color: #ffd600;
    }
    .indexabout{
        padding: 30px 0;
    }
    .indexaboutimg{
        margin-top: 20px;
    }
    .indexcontactwenan{
        margin-top: 20px;
    }
    .call-action .call-content h3{
        font-size:24px
    }
    .index_title h2{
        font-size:36px
    }
    .indexservertxt h3{
        font-size:24px;
        line-height: 24px;
    }
.bottomDiv {display: block;}

}

@media (min-width:768px) and (max-width:992px) {
    .bg-dark {
        background-color: #fff !important;
    }
    .navbar-toggler{
        background-color: #ffd600;
    }
    .indexaboutimg{
        margin-top: 20px
    }
    .indexcustomerimg img{
        height: auto;
    }
    .inexblog_more{
        padding:10px 20px
    }
    .bottomDiv {display: block;}

}

@media (min-width:992px) and (max-width:1199px) {
    .bg-dark {
        background-color: #fff !important;
    }
    .navbar-toggler{
        background-color: #ffd600;
    }
    .indexabout_box{
        padding-top: 0;
    }
    .indexaboutimg{
        margin-top: 20px;
    }
    .indexcontactmain{
        padding:5/0px 20px
    }
    .bottomDiv {display: block;}
}


/*.footer{    padding: 50px 0 100px 0;}*/

@media (min-width:1200px) and (max-width:1400px) {
    .indexabout_box{
        padding-top: 0;
    }
    .bottomDiv {display: block;}
}

@media (min-width:1400px) and (max-width:1680px) {
  
}