.indexbanner{ height: auto; position: relative;}
.indexbanner img{ max-width: 100%;width: 100%;}



.bannerDetail{ height: auto; overflow: hidden; width: 100%; background: rgba(255,255,255,0.6); position: absolute; bottom:0px; left:0px; height: 110px;} 




.indexTitle{ height: auto; overflow: hidden; text-align: center;position: relative; }
.indexTitle .titlehtp{ font-size: 36px; color: #116db7; font-weight: bold;    margin-bottom: 5px;}
.indexTitle .titlehtp a{ color: #116db7;}
.indexTitle .abre{ height: auto; position: relative;    height:22px;}
.indexTitle p{ height: auto;  position: absolute; width: 100%; bottom:0px;z-index: 2; }
.indexTitle p span{     font-size: 14px;color: #808080;display: inline-block;background: #fff;padding: 0 13px;font-family: "Arial";}
.indexTitle em{font-style: normal; display: block; height: 1px; position: absolute;    bottom: 9px; width: 100%; z-index: 1; background: #dbdbdb;}




.mse-question{ height: auto; overflow: hidden; margin:2% 0px;}
.mse-question .quesul{ height: auto; background: url(../images/quesbg.png) no-repeat center; margin-top: 4%;background-size: contain;}

.mse-question .quesul li{ float: left; width: 50%;margin-top: 5%;  }
.mse-question .quesul li .quescont{ width: 52%; border:2px solid #116db7; position: relative; height: 132px;}

.mse-question .quesul li .quescont .queabsu{ height: 100%;position: absolute;bottom: 0px;left: 0px;right: 0px;width: 100%;}


.mse-question .quesul li .quescont p{ color: #333333; font-size: 20px;    text-align: justify;    position: absolute;
    top: 50%;
    transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);

    width: 100%; padding-left: 45px; padding-right: 2%;
  }
.mse-question .quesul li:nth-child(2n) .quescont{ float: right;}
.mse-question .quesul li:nth-child(1) .quescont,.mse-question .quesul li:nth-child(3) .quescont{ margin-left: 5%;}

.mse-question .quesul li span{ display: inline-block; width: 60px; height: 90px; font-family: "Impact"; background: #116db7; color: #fff; font-size: 33px; line-height: 90px; position: absolute; text-align: center; top:50%; margin-top: -45px; left:-30px;}



.dl-golab{ height: auto; overflow: hidden; margin:3% 0px 0px; background: url(../images/golab_bg.jpg) no-repeat top center; background: :cover;}
.gobin{ height: auto; overflow: hidden; padding:2% 0px;}
.gobin p{ font-size: 16px; color: #ffffff; background: url(../images/call1.png) no-repeat left center; padding-left: 66px;}
.gobin p b{ font-size: 32px;}

.dl-buy{ height: auto; overflow: hidden; background: #f5f5f5; padding:4% 0px;}

.dl-buy .indexTitle p span{     background: #f5f5f5;}

.buyul{ height: auto; margin-top: 2%;}
.buyul li{ float: left; margin-right: 2%; background: #fff;  width: 23%;  -webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.1);
    box-shadow: 0 1px 10px rgba(0,0,0,0.1); }
.buyul li a{ height: auto; overflow: hidden; padding:10%;    display: block;}
.buyul li:last-child{ margin-right: 2%;}

.buyul li img{ display: block;margin:0 auto; max-width: 100%;transition: all 5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s; }
.buyul li .buytitle{ text-align: center;  font-size: 20px; color: #116db7; font-weight: bold; margin:8% 0px 8%;}
.buyul li p{ font-size: 14px; color: #666666; text-align: center;}
.buyul li span{ display: block; width: 114px; height: 34px; background: #e77f00; line-height: 34px; text-align: center; border-radius: 30px; color: #fff; margin:15% auto 0px;}

.buyul li:hover img{ -webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);}




.dl-product{ height: auto; overflow: hidden; margin:2% 0px;}
.prool{ height: auto; overflow: hidden; margin-top: 2%;}
.prool li{ float: left; width: 145px; margin-right: 5px; height: 40px; background: #116db7;  text-align: center; overflow: hidden; line-height: 40px; border-radius: 30px; color: #fff; font-size: 16px; margin-bottom: 6px; cursor: pointer;}
.prool li:nth-child(8n){ margin-right: 0px;}
.prool li.cur{ background: #f08502;}

.procont{ height: auto; overflow: hidden; margin-top: 2%;}
.procont .proin{ height: auto; overflow: hidden; display: none;}
.procont .proin .proul{ height: auto; overflow: hidden; margin-bottom: 25px;}
.procont .proin .proul a{ height: auto; overflow: hidden; display: block; border:1px solid #e8e8e8;  padding:1px;}
.procont .proin .proul a > div{ height: auto; overflow: hidden; }
.procont .proin .proul a >div img{display: block; height: auto; overflow: hidden;transition: all 5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;}
.procont .proin .proul a:hover img{ transform: scale(1.2);
    -webkit-transform: scale(1.2);
    overflow: hidden;}

.procont .proin .proul p{ width: 100%; height: 37px; background: #287bbe; text-align: center; line-height: 37px; line-height: 37px; color: #fff; font-size: 14px;}




.dl-server{ height: auto; overflow: hidden; background: url(../images/serv_bg.jpg) no-repeat top center;  background-size: cover;}
.servin{ width: 380px; padding:2% 0px; text-align: center;}
.servin .sevht{ font-size: 28px; color: #ffffff; font-style: italic;}
.servin .servnum{ font-size:36px; color: #ffffff; font-weight: bold; }
.servin a{ display: block; width: 116px; height: 32px; border:1px solid #fff; color: #fff; border-radius: 30px; margin:0 auto; line-height: 32px; margin-top: 10px;}




.dl-case{ height: auto; overflow: hidden; padding:3% 0px; background: url(../images/case_bg.jpg) no-repeat top center;}
.dl-case .indexTitle .titlehtp{ color: #fff;}
.dl-case .indexTitle p span{ background: #81add0; color:#fff;}
.dl-case .indexTitle p em{ background: #fff;}

.casein{ height: auto; overflow: hidden; margin-top: 2%;}
.casein a{ display: block; height: auto; overflow: hidden; background: #fff;}
.casein a .grarimg {height: auto; overflow: hidden;}
.casein a .grarimg img{ display: block; height: auto; overflow: hidden;transition: all 5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s; cursor: pointer; width: auto; margin:0 auto;}


.casein a:hover img{  transform: scale(1.2);
    -webkit-transform: scale(1.2);
    overflow: hidden;}




.casein .casecont{ height: auto; overflow: hidden; background: #fff; padding:18px;}
.casein .casecont .casetitle{ text-align:  center; color: #494949; font-size: 16px;}
.casein .casecont p{ font-size: 14px; color: #797979; line-height: 25px; margin:10px 0px;}
.casein .casecont span{ display: block; width: 127px; height: 33px; background: #116db7; color: #fff; font-size: 14px; border-radius: 30px; line-height: 33px; text-align: center; margin:0 auto;}


.mse-chose{ height: auto; overflow: hidden; background: #f5f5f5; padding:3% 0px 5%;}
.mse-chose .indexTitle p span{ background: #f5f5f5;}
.mse-chose .indexTitle em{ background: #dbdbdb;}
.chosein{ height: 135px;  position: relative;}
.chosein ul{ height: auto; position: relative; padding:0 19px;}
.chosein ul li{ float: left; margin-right:2%; width: 18%; position: relative; cursor: pointer;}
.chosein ul li:last-child{ margin-right: 0px;}
.chosein ul li div{ position: absolute;
    width: 172px;
    height: 172px;
    overflow: hidden;
    left:50%;
    top: 19%;
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    backface-visibility: hidden; background: #f4f4f4; margin-left: -86px;}
.chosein ul li .div1{     z-index: 1;}
.chosein ul li .div2 {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.chosein ul li div img{ max-width:100%; margin:0 auto; display: block;}
.chosein ul li p{ font-size: 18px;
    color: #333333;
    text-align: center;
    margin-top:233px;
    font-weight: normal;}


.chosein ul li:hover .div1{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.chosein ul li:hover .div2{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}

.chosein ul li:hover p{ color: #116db7;}





.mse-parnet{ height: auto; overflow: hidden; padding:4% 0px;}
.parowl{ height: auto; overflow: hidden; margin-top: 2%;} 
.parowl .swiper-slide{ border:1px solid #e8e8e8;   }
.parowl .swiper-slide a{ display: block; height: auto; overflow: hidden; position: relative;}
.parowl .swiper-slide a .gray{
  height: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    background: rgba(0,0,0,0.75);
    transition: all .8s;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    opacity: 0;
  }

.parowl .swiper-slide a .gray p{

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);

    width: 100%;
    text-align: center;
    font-size: 20px; color: #ffffff;


}
.parowl .swiper-slide a .gray p img{ display: block;
    margin: 2% auto 0px;}


 .swiper-container {
      width: 100%;
      height: auto;
      margin-left: auto;
      margin-right: auto;
    }
    .swiper-slide {
      text-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      overflow: hidden;
    }



.parowl .swiper-slide img{ display: block; height: auto; overflow: hidden;transition: all 5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s; cursor: pointer;}
.parowl .swiper-slide:hover img{  transform: scale(1.2);
    -webkit-transform: scale(1.2);
    overflow: hidden;}

.parowl .swiper-pagination{ display: none !important;}
.parowl .swiper-slide:hover a .gray{ opacity: 1;}



.mse-about{ height: auto; overflow: hidden; background: url(../images/about_bg.jpg) no-repeat center; padding:8% 0px 3%;}
.mse-about .aboutin{ min-height: 400px;  background: rgba(255,255,255,0.8);  padding:3%;}
.mse-about .aboutin .aboutle{ height: auto; position: relative;}
.mse-about .aboutin .aboutle img{ max-width: 100%; height: auto; position: absolute; top:-110px;}

.mse-about .aboutin .aboutri .about_title{ font-size: 30px; color: #116db7; font-weight: bold; border-bottom: 3px solid #116db7; padding-bottom: 15px;}
.mse-about .aboutin .aboutri p{ text-indent: 1em; font-size: 14px; color: #2e2726; line-height: 28px; margin-top: 4%;}
.mse-about .aboutin .aboutri a{ font-size: 16px; color: #fff; background:#116db7; width: 184px; height: 40px; display: inline-block; float: right; line-height: 40px; margin-top: 6%; text-align: center; border-radius: 30px;}









@media screen and (min-width: 769px) and (max-width: 1199px){
img{ max-width: 100%;}

}

@media screen and (min-width: 992px) and (max-width: 1199px){


}
@media screen and (min-width: 769px) and (max-width: 992px){

.chosein ul li div{ width: 135px; height: 135px;  margin-left: -67.5px;    top: 29%; }
.chosein ul li p{ margin-top: 209px;}
.msi-made .maderi ul{ background:none;}
.mse-question .quesul li .quescont p{ font-size: 16px;}
.mse-about .aboutin .aboutle img{ position: inherit; top:0px;}
.mse-about .aboutin .aboutri .about_title{ font-size: 24px;}
.servercont .servin .ser-le p{ font-size: 20px;}

}


@media screen and (max-width: 768px) {

.indexTitle .titlehtp{ font-size: 20px;}

.mse-question .quesul{ background: none;}
.mse-question .quesul li .quescont{ width: 80%;}
.chosein{ height: 86px;}
.chosein ul li div{ width: 105px; height: 105px;margin-left: -53px;}
.chosein ul li p{ margin-top: 150px; font-size: 14px;}
.mse-question .quesul li .quescont p{ font-size: 16px;}

.mse-about{ background-size:cover; }
.mse-about .aboutin .aboutle img{ position: inherit; top:0px;}
.mse-about .aboutin .aboutri .about_title{ font-size: 18px; padding-bottom: 2%;}
.mse-about .aboutin .aboutri p{ font-size: 12px; line-height: 26px;}
.dl-product{ overflow: inherit; background: #fff; width: 100%;}
.prool{ position: absolute;
    top: 62px;
    left: 0;
    z-index: 9;
    width: 100%;
    background: #fff;
    display: none;
    }
.prool li{ float: none; width: 100%; background: #fff; color: #333; text-align: left; border-bottom: 1px dashed #cec9c9; border-radius: 0px; height: 40px; line-height: 40px;}
.prool li.cur{  background: #fff; color:#116db7;}


.dl-server,.dl-golab{ display: none;}



.proin .row{ margin:0 -8px;}
.proin [class*="col-"]{ padding:0 8px;}
.proin .caseli p{ font-size: 14px;}
.procont .proin .proul{ margin-bottom: 8px;}


}


@media screen and (max-width: 414px) {
.indexTitle .titlehtp{ font-size: 16px;}
.indexTitle p{ font-size: 12px;}

.mse-question .quesul li .quescont p{ font-size: 12px; padding-left: 31px;}

.mse-question .quesul li span{ width: 45px; height: 72px; line-height: 72px; font-size: 22px; margin-top: -36px; left:-21px;}
.mse-question .quesul li .quescont{ width: 90%; height: 99px;}
.chosein ul li:nth-child(4){ margin-left: 15%;}
.chosein ul li:nth-child(4) div,.chosein ul li:nth-child(5) div{ top:10%;}
.chosein ul li:nth-child(4) p,.chosein ul li:nth-child(5) p{ margin-top: 126px;}

.chosein ul li{ width: 31%; }
.chosein ul li:nth-child(3n){ margin-right: 0px;}



.proin .row{ margin:0 -4px;}
.proin [class*="col-"]{ padding:0 4px;}
.proin .caseli p{ font-size: 14px;}
.procont .proin .proul{ margin-bottom: 4px;}

.mse-about{ padding:0px;}
.mse-about .aboutin{ padding:0px; padding-bottom: 3%;}
.aboutin .row{ margin:0px;}
.aboutin .row [class*=col-]{ padding:0px 10px;}
.mse-about .aboutin .aboutle{ margin-bottom: 3%;}
.mse-about .aboutin .aboutri a{ font-size: 14px; text-indent: 4em;    display: block;
    float: none;
    margin: 2% auto;}
.chosein{ border:none;}
.chosein ul li p{ font-size: 12px;}

.newsmob .news_ul li a{ font-size: 12px;}
.buyul{ margin-top: 5%;}
.buyul li{ width: 49%; margin-bottom: 3%;}
.buyul li:nth-child(2n){ margin-right: 0px;}
.buyul li a{ padding:5%;}
.buyul li img{ max-width: 60%;}

.buyul li .buytitle{ font-size: 14px; margin:2% 0px; height: 20px; overflow: hidden;}
.buyul li p{ font-size: 12px; max-height: 52px; overflow: hidden;}
.buyul li span{ margin-top: 5%; font-size: 12px;}




}