a {
 color: inherit;
 text-decoration: inherit;
 cursor: inherit;
 color: #999;
 cursor: pointer
}
a:active, a:focus {
 outline: none
}
a, div {
 -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
}
body {
 overflow-y: visible !important
}
@media only all and (max-width: 1366px) {
 .hide1366 {
  display: none
 }
}
.container {
 width: 75%;
 margin: 0 auto;
 overflow: hidden
}
@media only all and (max-width: 1700px) {
 .container {
  width: 1024px
 }
}
@media only all and (max-width: 960px) {
 .container {
  width: 800px !important
 }
}
.navbar-nav ul li {
 padding: 4px 0px 0px 0px
}
@-webkit-keyframes filpZUp {
 0% {
  -webkit-transform: scale(3);
  -moz-transform: scale(3);
  -ms-transform: scale(3);
  transform: scale(3);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg)
 }
 100% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg)
 }
}
.banner {
 width: 100%;
 height: 600px;
 overflow: hidden;
 margin-top: -80px;
 cursor: w-resize
}
@media only all and (max-width: 1440px) {
 .banner {
  height: 550px
 }
}
@media only all and (max-width: 768px) {
 .banner {
  height: 400px
 }
}
@media only all and (max-width: 640px) {
 .banner {
  height: 240px
 }
}
.banner .banner1 .title, .banner .banner1 .b-link {
 z-index: 9999999999999999999999999999999999999999999;
 opacity: 1 !important;
}
.banner .b-link {
 width: 100px;
 margin: 0 auto;
 display: block;
 padding: 5px;
 position: absolute;
 border: 1px solid #868482;
 border-radius: 50px;
 text-align: center;
 font-size: 14px;
 text-decoration: none;
 color: #868482
}
@media only all and (max-width: 768px) {
 .banner .b-link {
  font-size: 12px;
  padding: 2px;
  width: 80px
 }
}
.banner .b-link:hover {
 color: #fff;
 border: 1px solid #fff
}
@media only all and (max-width: 768px) {
 .banner .jb-banner .title {
  width: 25% !important;
  background-size: 100%;
  margin-left: -12.5% !important
 }
}
@media only all and (max-width: 640px) {
 .banner .jb-banner .title {
  width: 30% !important;
  height: 30px !important;
  background-size: 100%;
  margin-left: -15% !important
 }
}
.banner .banner1 {
 width: 100%;
 height: 600px;
 background: url(../images/jb-kv.jpg) no-repeat top center;
 position: relative
}
.banner .banner1 .banner-bg-video {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 10;
 width: 100%;
 height: 100%
}
.banner .banner1 .title {
 width: 575px;
 height: 75px;
 background-repeat: no-repeat;
 background-position: center center;
 position: absolute;
 top: 43%;
 left: 50%;
 margin-left: -287.5px
}
.banner .banner1 .b-link {
 bottom: 35%;
 left: 50%;
 margin-left: -50px
}
.banner .banner1 .title, .banner .banner1 .b-link {
 z-index: 99999999
}
@media only all and (max-width: 768px) {
 .banner .banner1 .title {
  width: 50%;
  background-size: contain;
  margin-left: -25%
 }
 .banner .banner1 .b-link {
  margin-left: -40px;
  bottom: 34%
 }
}
@media only all and (max-width: 640px) {
 .banner .banner1 .title {
  width: 280px;
  height: 20px;
  margin-left: -140px;
  top: 42%
 }
 .banner .banner1 .b-link {
  bottom: 30%
 }
}
@media only all and (max-width: 320px) {
 .banner .banner1 .title {
  width: 250px;
  margin-left: -120px
 }
}
.banner .banner2 {
 width: 100%;
 height: 600px;
 background: url(../images/banner2.jpg) no-repeat top center;
 position: relative;
 -webkit-perspective: 1200px;
 -moz-perspective: 1200px;
 -ms-perspective: 1200px;
 perspective: 1200px
}
.banner .banner2 .center {
 width: 1000px;
 height: 100%;
 margin: 0 auto;
 position: relative
}
.banner .banner2 .title {
 width: 50%;
 min-width: 180px;
 height: 180px;
 background: url(../images/banner2_font.png) no-repeat center center;
 background-size: 100%;
 -ms-behavior: url(../css/backgroundsize.min.htc);
 behavior: url(../css/backgroundsize.min.htc);
 position: absolute;
 top: 30%;
 left: 0%
}
.banner .banner2 .b-link {
 bottom: 31%;
 left: 1%
}
.banner .banner2 .phone {
 width: 313px;
 height: 641px;
 background: url(../images/phone_3.png) no-repeat center top;
 position: absolute;
 bottom: -150px;
 right: 0%
}
.banner .banner2 .phone .pic1, .banner .banner2 .phone .pic2 {
 width: 271px;
 height: 402px;
 position: absolute;
 left: 50% !important;
 top: 50% !important;
 bottom: 10px;
 margin-left: -135.5px;
 margin-top: -70%
}
@media only all and (max-width: 1280px) {
 .banner .banner2 .b-link {
  left: 5%
 }
 .banner .banner2 .title {
  width: 40%;
  left: 5%
 }
 .banner .banner2 .phone {
  right: 6%
 }
}
@media only all and (max-width: 1024px) {
 .banner .banner2 .phone {
  right: 10%
 }
 .banner .banner2 .title {
  width: 35%;
  left: 5%
 }
 .banner .banner2 .b-link {
  left: 6%
 }
}
@media only all and (max-width: 960px) {
 .banner .banner2 .phone {
  right: 16%
 }
}
@media only all and (max-width: 870px) {
 .banner .banner2 .phone {
  width: 280px;
  height: 601px;
  bottom: -110px;
  background-size: 100%;
  right: 25%
 }
 .banner .banner2 .phone .pic1, .banner .banner2 .phone .pic2 {
  width: 200px;
  height: 402px;
  background-size: 100%;
  margin-left: -100px;
  margin-top: -80%
 }
 .banner .banner2 .phone .pic1 img, .banner .banner2 .phone .pic2 img {
  width: 200px
 }
}
@media only all and (max-width: 768px) {
 .banner .banner2 .center {
  width: 520px
 }
 .banner .banner2 .title {
  width: 35%;
  left: -8%
 }
 .banner .banner2 .b-link {
  left: -6%
 }
 .banner .banner2 .phone {
  width: 213px;
  height: 441px;
  bottom: -125px;
  background-size: 100%;
  right: 0%
 }
 .banner .banner2 .phone .pic1, .banner .banner2 .phone .pic2 {
  width: 200px;
  height: 300px;
  background-size: 100%;
  margin-left: -100px;
  margin-top: -80%
 }
 .banner .banner2 .phone .pic1 img, .banner .banner2 .phone .pic2 img {
  width: 200px
 }
}
@media only all and (max-width: 640px) {
 .banner .banner2 .center {
  width: 300px
 }
 .banner .banner2 .title {
  left: 0;
  height: 70px;
  top: 35%
 }
 .banner .banner2 .b-link {
  bottom: 26%;
  left: 3%
 }
 .banner .banner2 .phone {
  width: 100px;
  height: 205px;
  bottom: -25px
 }
 .banner .banner2 .phone .pic1, .banner .banner2 .phone .pic2 {
  width: 200px;
  height: 300px;
  background-size: 100%;
  margin-left: -100px;
  margin-top: -65%
 }
 .banner .banner2 .phone .pic1 img, .banner .banner2 .phone .pic2 img {
  width: 86px
 }
}
.banner .slick-active .banner2 .title {
 animation: flipInX 1.2s;
 -moz-animation: flipInX 1.2s;
 -webkit-animation: flipInX 1.2s;
 -ms-animation: flipInX 1.2s
}
.banner .slick-active .banner2 .b-link {
 animation: fadeIn 1s;
 -moz-animation: fadeIn 1s;
 -webkit-animation: fadeIn 1s;
 -ms-animation: fadeIn 1s
}
.banner .slick-active .banner2 .phone {
 animation: filpZUp 1s;
 -moz-animation: filpZUp 1s;
 -webkit-animation: filpZUp 1s;
 -ms-animation: filpZUp 1s
}
.banner .banner3 {
 width: 100%;
 height: 600px;
 background: url(../images/banner3.jpg) no-repeat top center;
 position: relative
}
.banner .banner3 ul {
 width: 803px;
 height: 418px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -401.5px;
 margin-top: -209px
}
.banner .banner3 ul li {
 position: absolute;
 top: 0;
 left: 0
}
@media only all and (max-width: 768px) {
 .banner .banner3 ul {
  width: 380px;
  height: 210px;
  margin-left: -190px;
  margin-top: -105px
 }
 .banner .banner3 img {
  width: 100%
 }
}
@media only all and (max-width: 640px) {
 .banner .banner3 ul {
  width: 280px;
  height: 140px;
  margin-left: -140px;
  margin-top: -55px
 }
}
.banner .slick-active .banner3 .scene {
 animation: bounceInDown 1s;
 -moz-animation: bounceInDown 1s;
 -webkit-animation: bounceInDown 1s;
 -ms-animation: bounceInDown 1s
}




.banner .banner6 {
 width: 100%;
 height: 600px;
 background: url("../images/banner-wdzx-bg.jpg") no-repeat top center;
 position: relative
}
.banner .banner6 .center {
 width: 100%;
 max-width: 1400px;
 height: 100%;
 position: relative;
 margin: 0 auto
}
.banner .banner6 .oil {
 width: 569px;
 height: 375px;
 background: url("../images/banner-wdzl-main.png") no-repeat center center;
 position: absolute;
 top: 24%;
 right: 0%
}
@media only all and (max-width: 1366px) {
 .banner .banner6 .oil {
  right: 3%;
  top: 32%;
  width: 400px;
  height: 264px;
  background-size: cover
 }
}
@media only all and (max-width: 768px) {
 .banner .banner6 .oil {
  right: 10%;
  top: 26%;
  width: 230px;
  height: 152px;
  background-size: cover
 }
}
.banner .banner6 .title {
 position: absolute;
 top: 35%;
 left: 0%;
 font-weight: bolder;
 font-size: 42px;
 color: #fff;
 font-family: "Microsoft Yahei", "黑体";
 margin-bottom: 10px
}
@media only all and (max-width: 1366px) {
 .banner .banner6 .title {
  left: 3%;
  font-size: 40px
 }
}
@media only all and (max-width: 1200px) {
 .banner .banner6 .title {
  font-size: 37px
 }
}
@media only all and (max-width: 1024px) {
 .banner .banner6 .title {
  font-size: 30px
 }
}
@media only all and (max-width: 768px) {
 .banner .banner6 .title {
  font-size: 24px;
  top: 25%;
  left: 10%
 }
}
.banner .banner6 .title img {
 margin: 0px 0 10px
}
@media only all and (max-width: 768px) {
 .banner .banner6 .title img {
  width: 100px
 }
}
.banner .banner6 .b-link {
 bottom: 31%;
 left: 1%;
 color: #b7c6db;
 border: 1px solid #b7c6db
}
@media only all and (max-width: 1366px) {
 .banner .banner6 .b-link {
  left: 4%
 }
}
@media only all and (max-width: 768px) {
 .banner .banner6 .b-link {
  bottom: 41%;
  left: 11%
 }
}
.banner .banner6 .b-link:hover {
 color: #fff;
 border: 1px solid #fff
}
@media only all and (max-width: 640px) {
 .banner .banner6 .oil {
  width: 140px;
  height: 200px;
  top: 40px;
  right: 5%;
  background-size: contain
 }
 .banner .banner6 .title {
  font-size: 15px;
  top: 37%;
  left: 5%;
  margin-left: 0
 }
 .banner .banner6 .title img {
  width: 60px;
  margin-bottom: 5px
 }
 .banner .banner6 .b-link {
  bottom: 26%;
  left: 5%
 }
}
@media only all and (max-width: 320px) {
 .banner .banner6 .oil {
  width: 125px;
  right: 2%;
  background-size: contain
 }
 .banner .banner6 .title {
  font-size: 13px;
  top: 40%;
  left: 2%
 }
 .banner .banner6 .title img {
  width: 60px
 }
 .banner .banner6 .b-link {
  bottom: 25%;
  left: 2%
 }
}













.banner .banner16 {
 width: 100%;
 height: 600px;
 background: url("../images/banner-wdzx-bg2.jpg") no-repeat top center;
 position: relative
}
.banner .banner16 .center {
 width: 100%;
 max-width: 1400px;
 height: 100%;
 position: relative;
 margin: 0 auto
}
.banner .banner16 .oil {
 width: 569px;
 height: 375px;
 background: url("../images/banner-wdzl-main.png") no-repeat center center;
 position: absolute;
 top: 24%;
 right: 0%
}
@media only all and (max-width: 1366px) {
 .banner .banner16 .oil {
  right: 3%;
  top: 32%;
  width: 400px;
  height: 264px;
  background-size: cover
 }
}
@media only all and (max-width: 768px) {
 .banner .banner16 .oil {
  right: 10%;
  top: 26%;
  width: 230px;
  height: 152px;
  background-size: cover
 }
}
.banner .banner16 .title {
 position: absolute;
 top: 35%;
 left: 0%;
 font-weight: bolder;
 font-size: 42px;
 color: #fff;
 font-family: "Microsoft Yahei", "黑体";
 margin-bottom: 10px
}
@media only all and (max-width: 1366px) {
 .banner .banner16 .title {
  left: 3%;
  font-size: 40px
 }
}
@media only all and (max-width: 1200px) {
 .banner .banner16 .title {
  font-size: 37px
 }
}
@media only all and (max-width: 1024px) {
 .banner .banner16 .title {
  font-size: 30px
 }
}
@media only all and (max-width: 768px) {
 .banner .banner16 .title {
  font-size: 24px;
  top: 25%;
  left: 10%
 }
}
.banner .banner16 .title img {
 margin: 0px 0 10px
}
@media only all and (max-width: 768px) {
 .banner .banner16 .title img {
  width: 100px
 }
}
.banner .banner16 .b-link {
 bottom: 31%;
 left: 1%;
 color: #b7c6db;
 border: 1px solid #b7c6db
}
@media only all and (max-width: 1366px) {
 .banner .banner16 .b-link {
  left: 4%
 }
}
@media only all and (max-width: 768px) {
 .banner .banner16 .b-link {
  bottom: 41%;
  left: 11%
 }
}
.banner .banner16 .b-link:hover {
 color: #fff;
 border: 1px solid #fff
}
@media only all and (max-width: 640px) {
 .banner .banner16 .oil {
  width: 140px;
  height: 200px;
  top: 40px;
  right: 5%;
  background-size: contain
 }
 .banner .banner16 .title {
  font-size: 15px;
  top: 37%;
  left: 5%;
  margin-left: 0
 }
 .banner .banner16 .title img {
  width: 60px;
  margin-bottom: 5px
 }
 .banner .banner16 .b-link {
  bottom: 26%;
  left: 5%
 }
}
@media only all and (max-width: 320px) {
 .banner .banner16 .oil {
  width: 125px;
  right: 2%;
  background-size: contain
 }
 .banner .banner16 .title {
  font-size: 13px;
  top: 40%;
  left: 2%
 }
 .banner .banner16 .title img {
  width: 60px
 }
 .banner .banner16 .b-link {
  bottom: 25%;
  left: 2%
 }
}





















.banner .banner4 {
 width: 100%;
 height: 600px;
 background: url("../images/sanling-bg.jpg") no-repeat top center;
 position: relative
}
.banner .banner4 .center {
 width: 100%;
 max-width: 1400px;
 height: 100%;
 position: relative;
 margin: 0 auto
}
.banner .banner4 .oil {
 width: 721px;
 height: 338px;
 background-repeat: no-repeat;
 background-position: center center;
 position: absolute;
 top: 24%;
 right: 0%
}
.banner .banner4 .title {
 position: absolute;
 top: 40%;
 left: 0%;
 font-weight: bolder;
 font-size: 42px;
 color: #fff;
 font-family: "Microsoft Yahei", "黑体";
 margin-bottom: 10px
}
.banner .banner4 .title img {
 margin: 0px
}
@media only all and (max-width: 768px) {
 .banner .banner4 .title img {
  width: 65%
 }
}
.banner .banner4 .b-link {
 bottom: 38%;
 left: 1%;
 color: #b7c6db;
 border: 1px solid #b7c6db
}
.banner .banner4 .b-link:hover {
 color: #fff;
 border: 1px solid #fff
}
@media only all and (max-width: 1366px) {
 .banner .banner4 .oil {
  background-size: 90%;
  right: 3%;
  width: 50%
 }
 .banner .banner4 .title {
  font-size: 40px;
  left: 5%
 }
 .banner .banner4 .b-link {
  left: 6%
 }
}
@media only all and (max-width: 1024px) {
 .banner .banner4 .title {
  font-size: 35px;
  left: 10%
 }
 .banner .banner4 .oil {
  background-size: 80%;
  right: 5%;
  top: 23%
 }
 .banner .banner4 .b-link {
  left: 11%
 }
}
@media only all and (max-width: 768px) {
 .banner .banner4 .center {
  width: 100%
 }
 .banner .banner4 .oil {
  top: 10%
 }
 .banner .banner4 .title {
  font-size: 24px;
  top: 38%
 }
 .banner .banner4 .b-link {
  bottom: 37%
 }
}
@media only all and (max-width: 640px) {
 .banner .banner4 .oil {
  width: 140px;
  height: 180px;
  top: 20%;
  right: 10%;
  background-size: 100%
 }
 .banner .banner4 .title {
  font-size: 15px;
  top: 43%;
  left: 10%;
  margin-left: 0
 }
 .banner .banner4 .title img {
  width: 48%;
  margin-bottom: 5px
 }
 .banner .banner4 .b-link {
  bottom: 28%
 }
}
@media only all and (max-width: 375px) {
 .banner .banner4 .oil {
  right: 5%
 }
 .banner .banner4 .title {
  left: 5%
 }
 .banner .banner4 .b-link {
  left: 5%
 }
}
@media only all and (max-width: 320px) {
 .banner .banner4 .title {
  left: 2%
 }
 .banner .banner4 .b-link {
  left: 3%
 }
 .banner .banner4 .oil {
  right: 0%
 }
}
.banner .slick-active .banner4 .title {
 animation: fadeInLeft 1.2s;
 -moz-animation: fadeInLeft 1.2s;
 -webkit-animation: fadeInLeft 1.2s;
 -ms-animation: fadeInLeft 1.2s
}
.banner .slick-active .banner4 .oil {
 animation: fadeInRight 1.2s;
 -moz-animation: fadeInRight 1.2s;
 -webkit-animation: fadeInRight 1.2s;
 -ms-animation: fadeInRight 1.2s
}
.banner .slick-active .banner4 .b-link {
 animation: fadeInLeft 0.9s;
 -moz-animation: fadeInLeft 0.9s;
 -webkit-animation: fadeInLeft 0.9s;
 -ms-animation: fadeInLeft 0.9s
}
.banner .slick-active .banner6 .title {
 animation: fadeInLeft 1.2s;
 -moz-animation: fadeInLeft 1.2s;
 -webkit-animation: fadeInLeft 1.2s;
 -ms-animation: fadeInLeft 1.2s
}
.banner .slick-active .banner6 .oil {
 animation: fadeInRight 1.2s;
 -moz-animation: fadeInRight 1.2s;
 -webkit-animation: fadeInRight 1.2s;
 -ms-animation: fadeInRight 1.2s
}
.banner .slick-active .banner6 .b-link {
 animation: fadeInLeft 0.9s;
 -moz-animation: fadeInLeft 0.9s;
 -webkit-animation: fadeInLeft 0.9s;
 -ms-animation: fadeInLeft 0.9s
}
.banner .banner8 {
 width: 100%;
 height: 600px;
 background: url(../images/banner8-bg.jpg) no-repeat top center;
 position: relative
}
.banner .banner8 .center {
 width: 1400px;
 height: 100%;
 margin: 0 auto;
 position: relative;
 overflow: hidden;
 clear: both;
 *zoom: 1
}
.banner .banner8 .title {
 left: 0;
 bottom: 275px
}
.banner .banner8 .title .b-link {
 margin-top: 25px;
 border: 1px solid #fff;
 color: #fff !important
}
.banner .banner8 .pro {
 width: 70%;
 bottom: 43px;
 right: 0
}
.banner .banner8 .pro, .banner .banner8 .title {
 position: absolute
}
.banner .banner8 .pro img, .banner .banner8 .title img {
 width: 100%;
 display: block
}
.banner .banner5 {
 width: 100%;
 height: 600px;
 background: url(../images/banner5.jpg) no-repeat center center;
 position: relative;
 overflow: hidden
}
.banner .banner5 .title {
 margin-top: 200px
}
.banner .banner5 p {
 text-align: center;
 font-family: "Microsoft Yahei", "黑体"
}
.banner .banner5 .main-title {
 font-size: 50px;
 color: #fff;
 font-weight: bolder
}
.banner .banner5 .intro {
 visibility: hidden;
 font-size: 22px;
 color: #fff;
 padding: 5px;
 border: 1px solid #949494;
 border-radius: 50px;
 width: 450px;
 margin: 25px auto;
 letter-spacing: 5px
}
.banner .banner5 .slogan {
 font-size: 22px;
 color: #fff
}
.banner .banner5 .slogan span {
 color: #9d9d9d
}
@media only all and (max-width: 768px) {
 .banner .banner5 .main-title {
  font-size: 22px
 }
 .banner .banner5 .title {
  margin-top: 165px
 }
 .banner .banner5 .slogan {
  font-size: 14px
 }
 .banner .banner5 .intro {
  font-size: 14px;
  width: 280px;
  margin: 10px auto
 }
}
@media only all and (max-width: 640px) {
 .banner .banner5 .title {
  margin-top: 80px
 }
 .banner .banner5 .intro {
  letter-spacing: 2px;
  width: 230px
 }
}
.banner .slick-active .banner5 .main-title, .banner .slick-active .banner5 .slogan {
 animation: fadeInDown 1.2s;
 -moz-animation: fadeInDown 1.2s;
 -webkit-animation: fadeInDown 1.2s;
 -ms-animation: fadeInDown 1.2s
}
.banner .slick-active .banner5 .intro {
 visibility: visible;
 animation: flipInX 1.2s forwards;
 -moz-animation: flipInX 1.2s forwards;
 -webkit-animation: flipInX 1.2s forwards;
 -ms-animation: flipInX 1.2s forwards
}
.banner .banner1, .banner .banner2, .banner .banner3, .banner .banner6, .banner .banner4, .banner .banner5, .banner .banner8 {
 overflow: hidden
}
@media only all and (max-width: 1440px) {
 .banner .banner1, .banner .banner2, .banner .banner3, .banner .banner6, .banner .banner4, .banner .banner5, .banner .banner8 {
  height: 550px
 }
}
@media only all and (max-width: 768px) {
 .banner .banner1, .banner .banner2, .banner .banner3, .banner .banner6, .banner .banner4, .banner .banner5, .banner .banner8 {
  height: 400px
 }
}
@media only all and (max-width: 640px) {
 .banner .banner1, .banner .banner2, .banner .banner3, .banner .banner6, .banner .banner4, .banner .banner5, .banner .banner8 {
  height: 240px;
  background-size: auto 300px
 }
}
@media only all and (max-width: 1440px) {
 .banner .banner8 .center {
  width: 1100px
 }
 .banner .banner8 .title {
  width: 380px
 }
 .banner .banner8 .pro {
  width: 75%
 }
}
@media only all and (max-width: 768px) {
 .banner .banner8 .center {
  width: 100%
 }
 .banner .banner8 .title {
  width: 300px;
  bottom: 170px;
  left: 50%;
  margin-left: -150px;
  position: absolute
 }
 .banner .banner8 .pro {
  display: none
 }
}
@media only all and (max-width: 640px) {
 .banner .banner8 .center {
  width: 100%
 }
 .banner .banner8 .title {
  width: 250px;
  bottom: 90px;
  margin-left: -125px
 }
 .banner .banner8 .pro {
  width: 75%
 }
}
.banner .slick-dots {
 bottom: 12px !important
}
@media only all and (max-width: 640px) {
 .banner .slick-dots {
  bottom: 5px !important
 }
}
.banner .slick-dots li {
 width: 60px;
 height: 20px;
 background: url(../images/b_g.jpg) center center repeat-x
}
@media only all and (max-width: 1440px) {
 .banner .slick-dots li {
  width: 40px
 }
}
@media only all and (max-width: 640px) {
 .banner .slick-dots li {
  width: 30px;
  margin: 0 2px
 }
}
.banner .slick-dots li button {
 width: 60px;
 height: 2px;
 padding: 10px 0
}
@media only all and (max-width: 1440px) {
 .banner .slick-dots li button {
  width: 40px
 }
}
@media only all and (max-width: 640px) {
 .banner .slick-dots li button {
  width: 30px
 }
}
.banner .slick-dots li button:before {
 content: no-close-quote
}
.banner .slick-dots .slick-active {
 background: url(../images/b_r.jpg) center center repeat-x
}
.banner .slick-dots .slick-active button:before {
 width: 60px;
 height: 2px
}
@media only all and (max-width: 640px) {
 .banner .slick-dots .slick-active button:before {
  width: 30px
 }
}
.banner.slick-slider {
 margin-top: 0;
 margin-bottom: 0px !important
}
#slick-banner .slick-dots {
 top: 95%;
 left: 50%;
 width: 350px;
 margin-top: -34px;
 margin-left: -175px;
 position: absolute;
 bottom: 0px
}
@media only all and (max-width: 480px) {
 #slick-banner .slick-dots {
  top: 96% !important
 }
}
#slick-banner .slick-dots li {
 width: 60px;
 height: 2px;
 background-color: #949494
}
@media only all and (max-width: 640px) {
 #slick-banner .slick-dots li {
  width: 30px
 }
}
#slick-banner .slick-dots li button {
 width: 60px;
 height: 2px;
 padding: 10px 0
}
@media only all and (max-width: 640px) {
 #slick-banner .slick-dots li button {
  width: 30px
 }
}
#slick-banner .slick-dots li button:before {
 content: no-close-quote
}
#slick-banner .slick-active {
 background: url(../images/b_r.jpg) center center repeat-x
}
#slick-banner .slick-active button:before {
 width: 60px;
 height: 2px
}
@media only all and (max-width: 640px) {
 #slick-banner .slick-active button:before {
  width: 30px
 }
}
.slick-slide img {
 margin: 0 auto
}
.service {
 padding: 25px 0;
 background-color: #fff;
 padding-top: 40px !important
}
@media only all and (max-width: 640px) {
 .service {
  padding-top: 20px !important
 }
}
.service .container {
 border-bottom: 1px #e4e4e4 solid;
 padding-bottom: 25px
}
@media only all and (max-width: 480px) {
 .service .container {
  width: 300px !important
 }
}
.service-ul {
 margin: 0;
 padding: 0;
 border: 0;
 overflow: hidden;
 *zoom: 1;
 width: 1024px;
 margin: 0 auto
}
.service-ul li {
 list-style-image: none;
 list-style-type: none;
 margin-left: 0;
 display: inline-block;
 vertical-align: middle;
 *vertical-align: auto;
 *zoom: 1;
 *display: inline;
 white-space: nowrap
}
@media only all and (max-width: 740px) {
 .service-ul {
  width: auto
 }
}
.service-ul li {
 margin-left: 18px;
 margin-right: 46px;
 margin-top: 0;
 margin-bottom: 0;
 display: inline-block;
 *display: inline
}
.icon-computer {
 background-image: url('../images/computer.png?1512537662');
 background-repeat: no-repeat;
 background-position: center center;
 cursor: pointer
}
.icon-computer:hover {
 background-image: url(../images/icon-computer.gif)
}
@media only all and (max-width: 1024px) {
 .icon-computer {
  background-image: url('../images/computer.png?1512537662');
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer
 }
 .icon-computer:hover {
  background-image: url('../images/computer.png?1512537662')
 }
}
.icon-click {
 background-image: url('../images/click.png?1512537686');
 background-repeat: no-repeat;
 background-position: center center;
 cursor: pointer
}
.icon-click:hover {
 background-image: url(../images/icon-click.gif)
}
@media only all and (max-width: 1024px) {
 .icon-click {
  background-image: url('../images/click.png?1512537686');
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer
 }
 .icon-click:hover {
  background-image: url('../images/click.png?1512537686')
 }
}
.icon-phone {
 background-image: url('../images/phone.png?1512537655');
 background-repeat: no-repeat;
 background-position: center center;
 cursor: pointer
}
.icon-phone:hover {
 background-image: url(../images/icon-phone.gif)
}
@media only all and (max-width: 1024px) {
 .icon-phone {
  background-image: url('../images/phone.png?1512537655');
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer
 }
 .icon-phone:hover {
  background-image: url('../images/phone.png?1512537655')
 }
}
.icon-cart {
 background-image: url('../images/cart.png?1512537684');
 background-repeat: no-repeat;
 background-position: center center;
 cursor: pointer
}
.icon-cart:hover {
 background-image: url(../images/icon-cart.gif)
}
@media only all and (max-width: 1024px) {
 .icon-cart {
  background-image: url('../images/cart.png?1512537684');
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer
 }
 .icon-cart:hover {
  background-image: url('../images/cart.png?1512537684')
 }
}
.icon-gear {
 background-image: url('../images/gear.png?1512537689');
 background-repeat: no-repeat;
 background-position: center center;
 cursor: pointer
}
.icon-gear:hover {
 background-image: url(../images/icon-gear.gif)
}
@media only all and (max-width: 1024px) {
 .icon-gear {
  background-image: url('../images/gear.png?1512537689');
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer
 }
 .icon-gear:hover {
  background-image: url('../images/gear.png?1512537689')
 }
}
.icon-terminal {
 background-image: url('../images/terminal.png?1512537688');
 background-repeat: no-repeat;
 background-position: center center;
 cursor: pointer
}
.icon-terminal:hover {
 background-image: url(../images/icon-terminal.gif)
}
@media only all and (max-width: 1024px) {
 .icon-terminal {
  background-image: url('../images/terminal.png?1512537688');
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer
 }
 .icon-terminal:hover {
  background-image: url('../images/terminal.png?1512537688')
 }
}
.service-item-icon {
 width: 65px;
 height: 65px;
 margin: 0 auto;
 background-repeat: no-repeat;
 background-position: center center;
}
@media only all and (max-width: 640px) {
 .service-item-icon {
  height: 50px;
  background-size: 65%
 }
}
.service-item-name {
 color: #585858;
 font-size: 17px;
 margin-top: 8px
}
@media only all and (max-width: 640px) {
 .service-item-name {
  margin-top: 5px
 }
}
.service-item-name span {
 display: none
}
.service-item {
 width: 103px;
 text-align: center
}
@media only all and (max-width: 480px) {
 .service-item {
  width: auto !important
 }
}
.service-item a:hover .service-item-name {
 color: #e83828
}
.case {
 padding: 25px 0
}
@media only all and (max-width: 640px) {
 .case {
  padding: 0 0 25px !important
 }
}
.case #slick-case .slick-dots li {
 width: 30px;
 height: 20px;
 background: url(../images/b_g.jpg) center center repeat-x
}
@media only all and (max-width: 640px) {
 .case #slick-case .slick-dots li {
  width: 30px;
  margin: 0 2px
 }
}
.case #slick-case .slick-dots li button {
 width: 60px;
 height: 2px;
 padding: 10px 0
}
@media only all and (max-width: 640px) {
 .case #slick-case .slick-dots li button {
  width: 30px
 }
}
.case #slick-case .slick-dots li button:before {
 content: no-close-quote
}
@media only all and (max-width: 640px) {
 .case #slick-case .slick-dots li {
  width: 30px
 }
}
.case #slick-case .slick-dots .slick-active {
 background: url(../images/b_r.jpg) center center repeat-x
}
.case #slick-case .slick-dots .slick-active button:before {
 width: 60px;
 height: 2px
}
@media only all and (max-width: 640px) {
 .case #slick-case .slick-dots .slick-active button:before {
  width: 30px
 }
}
.case-slide {
 position: relative
}
.title {
 *zoom: 1;
 margin-left: 10px;
 margin-bottom: 10px
}
.title:after {
 content: "";
 display: table;
 clear: both
}
.case-slide {
 *zoom: 1;
 overflow: hidden
}
.case-slide:after {
 content: "";
 display: table;
 clear: both
}
.title-en {
 color: #555;
 font-size: 30px;
 margin: 0;
 margin-bottom: 15px;
 text-align: center
}
@media only all and (max-width: 960px) {
 .title-en {
  text-align: left
 }
}
@media only all and (max-width: 640px) {
 .title-en {
  text-align: left;
  margin-bottom: 10px
 }
}
.title-zh {
 color: #555;
 font-size: 20px;
 padding-top: 23px;
 padding-left: 4px;
 float: left
}
.case-detail {
 display: none;
 padding: 30px 0;
 position: absolute;
 bottom: 0;
 width: 100%;
 background-color: transparent !important
}
@media only all and (max-width: 1440px) {
 .case-detail {
  padding: 20px 0
 }
}
@media only all and (max-width: 1200px) {
 .case-detail {
  padding: 10px 0
 }
}
@media only all and (max-width: 640px) {
 .case-detail {
  padding: 5px 0
 }
}
.case-detail-title {
 text-align: left;
 padding: 0 30px
}
@media only all and (max-width: 1440px) {
 .case-detail-title {
  padding: 0 20px
 }
}
@media only all and (max-width: 1200px) {
 .case-detail-title {
  padding: 0 15px
 }
}
@media only all and (max-width: 640px) {
 .case-detail-title {
  padding: 0 10px
 }
}
.case-detail-title a, .case-detail-title p {
 width: 80%;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis
}
@media only all and (max-width: 768px) {
 .case-detail-title a, .case-detail-title p {
  width: 95%
 }
}
.case-detail-title a {
 font-size: 18px !important;
 color: #fff;
 display: block;
 font-weight: bold
}
@media only all and (max-width: 1440px) {
 .case-detail-title a {
  font-size: 16px !important
 }
}
@media only all and (max-width: 768px) {
 .case-detail-title a {
  font-size: 14px !important
 }
}
.case-detail-title p {
 font-size: 14px;
 color: #fff
}
@media only all and (max-width: 768px) {
 .case-detail-title p {
  font-size: 12px !important
 }
}
.case-item {
 float: left;
 width: 25%;
 *width: 24.9%
}
@media only all and (max-width: 640px) {
 .case-item {
  width: 50%
 }
}
.case-item-inner {
 background-color: #fff
}
.case-item-inner .case-image {
 position: relative;
 overflow: hidden
}
.case-item-inner .case-image a {
 display: block;
 font-size: 0
}
.case-item-inner .case-image img {
 width: 100%;
 -webkit-transition: all 1s;
 -moz-transition: all 1s;
 -ms-transition: all 1s;
 transition: all 1s
}
.case-item-inner .case-image .case-shadow {
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 opacity: 0;
 position: absolute;
 top: 0;
 left: 0;
 display: none\9;
 -webkit-transition: all 1s;
 -moz-transition: all 1s;
 -ms-transition: all 1s;
 transition: all 1s
}
.case-item-inner .case-image .case-shadow img {
 float: right;
 margin: 30px;
 width: 17px
}
@media only all and (max-width: 1440px) {
 .case-item-inner .case-image .case-shadow img {
  margin: 20px
 }
}
@media only all and (max-width: 768px) {
 .case-item-inner .case-image .case-shadow img {
  margin: 15px;
  width: 12px
 }
}
.case-item-inner .case-image:hover img {
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1)
}
.case-item-inner .case-image:hover .case-shadow {
 opacity: 1
}
.client-item {
 float: left;
 width: 173px;
 width: 100% \9
}
.client-item div {
 margin: 10px;
 margin: 4 px\9;
 border: 1px solid #D4D4D4
}
@media only all and (max-width: 640px) {
 .client-item div {
  margin: 20px
 }
}
.client {
 padding: 25px 0
}
#slick-client {
 margin-bottom: 0;
 height: 170px\0;
 overflow: hidden\0
}
.about {
 margin-top: 30px;
 *zoom: 1
}
.about:after {
 content: "";
 display: table;
 clear: both
}
@media only all and (max-width: 1024px) {
 .about {
  margin-top: 0px
 }
}
@media only all and (max-width: 640px) {
 .about {
  padding-top: 0px
 }
}
.about-phone {
 cursor: pointer;
 display: none
}
.about-phone .about-us-phone {
 border-top: 1px solid #dfdfdf;
 border-bottom: 1px solid #dfdfdf;
 padding: 12px 13px;
 font-size: 16px;
 *zoom: 1
}
.about-phone .about-us-phone:after {
 content: "";
 display: table;
 clear: both
}
.about-phone .about-news-phone {
 border-bottom: 1px solid #dfdfdf;
 padding: 14px 13px;
 font-size: 16px;
 *zoom: 1
}
.about-phone .about-news-phone:after {
 content: "";
 display: table;
 clear: both
}
.about-phone .about-phone-title {
 float: left
}
.about-phone .about-phone-num {
 color: #9D9D9D;
 float: right;
 margin-top: -2px
}
.about-phone .arrow-right {
 width: 13px;
 height: 20px;
 float: right;
 background-image: url('../images/arrow-right.png?1512537691');
 background-repeat: no-repeat;
 background-position: center center;
 cursor: pointer;
 margin-left: 10px
}
.about-phone .arrow-right:hover {
 background-image: fasle
}
.about-us {
 margin: 20px 0 90px;
 width: 100% !important;
 text-align: center;
 background-color: #fff
}
.about-news {
 padding-top: 50px;
 width: 100%;
 background-color: #f3f3f3
}
.about-title {
 font-size: 30px;
 color: #585858;
 position: relative;
 overflow: hidden;
 padding-bottom: 20px;
 text-align: center
}
a.more {
 position: absolute;
 top: 0;
 right: 0;
 z-index: 1;
 font-size: 12px;
 float: right;
 margin-top: 6px;
 color: #767676;
 width: 70px;
 height: 20px;
 line-height: 20px;
 display: block;
 background: url(../images/more_btn_01.png) no-repeat;
 padding-left: 12px;
 text-align: left
}
a.more:hover {
 color: #fff;
 background: url(../images/more_btn_03.png) no-repeat
}
.about-us-subtitle {
 font-size: 22px;
 margin-top: 40px;
 margin-bottom: 20px;
 color: #555555
}
@media only all and (max-width: 1024px) {
 .about-us-subtitle {
  font-size: 20px
 }
}
.about-us-content p {
 line-height: 23px;
 color: #767676;
 font-size: 15px
}
@media only all and (max-width: 1024px) {
 .about-us-content p {
  line-height: 20px;
  font-size: 13px
 }
}
.about-news-date {
 float: right;
 color: #767676;
 font-size: 13px
}
.about-news-list {
 margin-left: 0;
 margin: 0;
 padding: 0;
 border: 0;
 overflow: hidden;
 *zoom: 1
}
.about-news-list li {
 padding-left: 30px;
 background: url('../images/hotnews_liicon.png?1512537697') no-repeat 5px 10px;
 list-style-type: none
}
.about-news-list li {
 color: #535353;
 line-height: 40px;
 font-size: 14px
}
.case {
 padding: 25px 0 10px 0
}
@media only all and (max-width: 640px) {
 .case {
  padding: 0 0 10px 0
 }
}
.client {
 padding: 50px 0
}
@media only all and (max-width: 640px) {
 .client {
  padding: 0 0 50px 0
 }
}
.title {
 position: relative;
 margin-bottom: 0px
}
#slick-banner .slick-dots {
 margin-top: -25px
}
@media only all and (max-width: 480px) {
 #slick-banner .slick-dots {
  margin-top: -12px
 }
}
@media only all and (max-width: 480px) {
 #slick-banner .slick-dots {
  margin-top: -16px
 }
}
.slick-slide a {
 display: block
}
.home-news {
 overflow: hidden;
 position: relative;
 margin-bottom: 80px
}
.home-news #home-news-wrap, .home-news #home-news-wrap2 {
 height: 123px\0;
 overflow: hidden\0;
 margin-bottom: 4%
}
.home-news .home-news-wrap {
 width: 47%;
 float: left
}
.home-news .home-news-wrap2 {
 width: 47%;
 float: right
}
.home-news .home-news-items:last-child .news-list {
 border-bottom: none
}
.home-news .news-list {
 width: 100%;
 padding: 18px 0;
 border-bottom: 1px solid #d2d2d2
}
@media only all and (max-width: 1720px) {
 .home-news .news-list {
  width: 100%
 }
}
.home-news .news-list .pic {
 float: left;
 width: 80px
}
.home-news .news-list .news-intro {
 float: left;
 width: 80%;
 margin-left: 10px
}
@media only all and (max-width: 1720px) {
 .home-news .news-list .news-intro {
  float: left;
  width: 69%;
  margin-left: 3%
 }
}
.home-news .news-list .news-intro h2 {
 color: #333;
 font-size: 14px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 width: 100%;
 -webkit-transition: all 0.6s;
 -moz-transition: all 0.6s;
 -ms-transition: all 0.6s;
 transition: all 0.6s
}
.home-news .news-list .news-intro p {
 color: #949494
}
.home-news .news-list .news-intro p.info {
 height: 17px;
 margin-top: 5px;
 margin-bottom: 20px;
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden
}
.home-news .news-list:hover .news-intro h2 {
 color: #e83828
}
.home-news .news-list-t {
 margin-left: 30px;
 padding-left: 30px;
 border-left: 1px #d2d2d2 solid
}
#home-news-wrap2 .slick-dots {
 bottom: -10px !important
}
#home-news-wrap2 .slick-dots li {
 width: 30px;
 height: 20px;
 background: url(../images/b_g.jpg) center center repeat-x
}
@media only all and (max-width: 640px) {
 #home-news-wrap2 .slick-dots li {
  width: 10px;
  margin: 0 2px
 }
}
#home-news-wrap2 .slick-dots li button {
 width: 30px;
 height: 2px;
 padding: 10px 0
}
#home-news-wrap2 .slick-dots li button:before {
 content: no-close-quote
}
#home-news-wrap2 .slick-dots .slick-active {
 background: url(../images/b_r.jpg) center center repeat-x
}
#home-news-wrap2 .slick-dots .slick-active button:before {
 width: 30px;
 height: 2px
}
@media only all and (max-width: 640px) {
 #home-news-wrap2 .slick-dots .slick-active button:before {
  width: 30px
 }
}
.hvr-outline-in {
 vertical-align: baseline
}
.hvr-outline-in:before {
 border: #e1e1e1 solid 3px
}
.slick-slide img {
 margin: 0 auto
}
@media only all and (max-width: 960px) {
 .service-ul li {
  margin-left: 24px !important;
  margin-right: 24px !important
 }
}
@media only all and (max-width: 520px) {
 .service-ul li {
  margin-top: 0;
  margin-left: 18px !important;
  margin-right: 14px !important;
  margin-bottom: 20px !important
 }
}
@media only all and (max-width: 480px) {
 .service-ul li {
  margin-left: 16px !important;
  margin-right: 16px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important
 }
}
.about-us .about-title {
 border-bottom: 1px solid #d2d2d2
}
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
 .about-phone {
  display: none
 }
 .title-en {
  font-size: 30px;
  margin: 0
 }
 .title-zh {
  padding-top: 19px
 }
 .service-item-name {
  font-size: 16px;
  margin-top: 0px
 }
 .menu, .nav-mobile-inner {
  display: none
 }
 .slick-dots {
  bottom: -30px !important
 }
 .service-ul {
  padding-left: 50px
 }
 .service-ul .service-li-6 {
  margin-right: 0
 }
 .service-ul li {
  margin-left: 0;
  margin-right: 56px;
  margin-top: 0;
  margin-bottom: 0
 }
 .icon-computer {
  background-position: 0px 0px
 }
 .icon-computer:hover {
  background-position: -9px -8px
 }
 .icon-terminal {
  background-position: 0px 0
 }
 .about-us {
  width: 48%
 }
 .about-us-subtitle {
  margin-bottom: 10px
 }
 .about-us-content p {
  line-height: 20px
 }
 .footer {
  width: 100%;
  min-width: 100%
 }
 .footer-nav {
  float: right
 }
 .footer-nav-list {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  *zoom: 1
 }
 .footer-nav-list li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  white-space: nowrap
 }
 .footer-nav-list li {
  vertical-align: top;
  margin-left: 18px
 }
}
@media only screen and (min-width: 1441px) and (max-width: 1920px) {
 .about-phone {
  display: none
 }
 .menu, .nav-mobile-inner {
  display: none
 }
 .service-ul {
  padding-left: 40px
 }
 .service-ul .service-li-6 {
  margin-right: 0
 }
 .service-ul li {
  margin-left: 18px;
  margin-right: 46px;
  margin-top: 0;
  margin-bottom: 0
 }
 .slick-dots {
  bottom: -20px !important
 }
 .footer {
  width: 100%;
  min-width: 100%
 }
 .footer-nav {
  float: right
 }
 .footer-nav-list {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  *zoom: 1
 }
 .footer-nav-list li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  white-space: nowrap
 }
 .footer-nav-list li {
  vertical-align: top;
  margin-left: 18px
 }
}
@media only screen and (min-width: 871px) and (max-width: 1024px) {
 body {
  background-color: #DFDFDF
 }
 .container {
  width: 900px
 }
 .navbar-contact, .navbar-nav {
  display: none
 }
 .title {
  margin-left: 10px
 }
 .title-en {
  font-size: 30px
 }
 .title-zh {
  font-size: 18px;
  margin-top: 5px;
  padding-top: 10px
 }
 .about-news-list li {
  line-height: 30px
 }
 .about-phone {
  display: none
 }
 .service-item-name {
  font-size: 14px
 }
 .service-item {
  width: 85px
 }
 .service-item-icon {
  width: 71px
 }
 .service-ul .service-li-6 {
  margin-right: 0
 }
 .service-ul li {
  margin-left: 30px;
  margin-right: 32px;
  margin-top: 0;
  margin-bottom: 0
 }
 .slick-dots {
  bottom: -30px !important
 }
 .case {
  background-color: #fff
 }
 .case-item-inner {
  box-shadow: none
 }
 .case-detail {
  padding: 10px 0;
  background-color: #E7E6E6
 }
 .client {
  background-color: #fff
 }
 .about {
  padding-bottom: 40px;
  background-color: #fff
 }
 .footer-nav {
  float: right
 }
 .footer-nav-list {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  *zoom: 1
 }
 .footer-nav-list li {
  line-height: 33px;
  font-weight: solid !important
 }
 .footer-nav-inner-list {
  display: none
 }
}
@media only screen and (min-width: 741px) and (max-width: 870px) {
 body {
  background-color: #DFDFDF;
  position: relative
 }
 .container {
  width: 701px !important
 }
 .navbar-contact, .navbar-nav {
  display: none
 }
 .title {
  margin-left: 10px
 }
 .title-en {
  font-size: 36px;
  text-align: left
 }
 .title-zh {
  font-size: 18px;
  margin-top: 5px;
  padding-top: 10px
 }
 .about-us-subtitle {
  font-size: 18px
 }
 .about-us-content p {
  font-size: 12px
 }
 .about-news-list li {
  line-height: 30px
 }
 .about-phone {
  display: none
 }
 .service-item-name {
  font-size: 14px
 }
 .service-item {
  width: 85px
 }
 .service-item-icon {
  width: 71px
 }
 .service-ul .service-li-6 {
  margin-right: 0
 }
 .service-ul li {
  margin-left: 0 !important;
  margin-right: 34px !important;
  margin-top: 0;
  margin-bottom: 0
 }
 .slick-dots {
  bottom: -30px !important
 }
 .case {
  background-color: #fff
 }
 .case-item-inner {
  box-shadow: none
 }
 .case-detail {
  padding: 10px 0;
  background-color: #E7E6E6
 }
 .client {
  background-color: #fff
 }
 .about {
  padding-bottom: 40px;
  background-color: #fff
 }
 .footer-nav {
  float: right
 }
 .footer-nav-list {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  *zoom: 1
 }
 .footer-nav-list li {
  line-height: 33px;
  font-weight: solid !important
 }
 .footer-nav-inner-list {
  display: none
 }
}
@media only screen and (min-width: 521px) and (max-width: 740px) {
 body {
  background-color: #DFDFDF
 }
 .container {
  width: 460px !important
 }
 .navbar-contact, .navbar-nav {
  display: none
 }
 #slick-banner .slick-dots {
  margin-top: -34px;
  margin-left: -100px
 }
 .title {
  margin-left: 10px
 }
 .title-en {
  font-size: 34px
 }
 .title-zh {
  font-size: 16px;
  margin-top: 17px;
  padding-top: 0px
 }
 .client {
  background-color: #fff;
  padding: 25px 0
 }
 .about-news, .about-us {
  display: none
 }
 .about {
  padding-bottom: 40px;
  background-color: #fff
 }
 .case {
  background-color: #fff;
  padding: 25px 0
 }
 .case-detail {
  padding: 10px 0;
  background-color: #E7E6E6
 }
 .case-detail-title a {
  font-size: 15px
 }
 .case-item-inner {
  box-shadow: none
 }
 .service-item-name {
  font-size: 15px
 }
 .service-ul li {
  margin-left: 30px !important;
  margin-right: 16px !important;
  margin-bottom: 20px
 }
 .slick-dots {
  bottom: -26px !important
 }
 .footer-nav {
  float: none;
  margin-bottom: 18px
 }
 .footer-nav ul, .footer-nav li {
  list-style-type: none
 }
 .contact {
  float: none
 }
 .footer-nav-title {
  font-size: 14px
 }
 .footer-nav-inner-list {
  display: none
 }
}
@media only screen and (min-width: 321px) and (max-width: 520px) {
 body {
  background-color: #DFDFDF;
  position: relative
 }
 .container {
  width: 281px !important
 }
 .navbar-contact, .navbar-nav {
  display: none
 }
 #slick-banner .slick-dots {
  margin-top: -24px;
  margin-left: -100px
 }
 #slick-banner .slick-dots li {
  width: 14px;
  height: 3px;
  margin: 0px 3px
 }
 #slick-banner .slick-dots li button {
  background-color: #E5E5E5;
  width: 14px;
  height: 3px;
  padding: 0px
 }
 #slick-banner .slick-dots li button:before {
  content: no-close-quote
 }
 #slick-banner .slick-active button:before {
  width: 14px;
  height: 3px;
  background-color: #E83828
 }
 .about-news, .about-us {
  display: none
 }
 .about {
  padding-bottom: 40px
 }
 .container {
  width: 335px !important
 }
 .service-item {
  width: 77px
 }
 .service-item-name {
  font-size: 15px
 }
 .service-item-name p {
  display: none
 }
 .service-item-name span {
  display: block
 }
 .case {
  background-color: #fff;
  padding: 25px 0
 }
 .title {
  margin-left: 15px
 }
 .title-en {
  font-size: 32px
 }
 .title-zh {
  font-size: 16px;
  margin-top: 14px;
  padding-top: 0px
 }
 .case-item-inner {
  box-shadow: none
 }
 .case-detail {
  padding: 10px 0;
  background-color: #E7E6E6
 }
 .case-detail-title h3 {
  height: auto;
  margin-bottom: 0px;
  border-bottom: 0px;
  padding: 0px
 }
 .slick-dots {
  bottom: -16px !important
 }
 .client {
  background-color: #fff;
  padding: 25px 0
 }
 .about {
  padding-bottom: 40px;
  background-color: #fff
 }
 .footer-nav {
  float: none;
  margin-bottom: 18px
 }
 .footer-nav ul, .footer-nav li {
  list-style-type: none
 }
 .contact {
  float: none
 }
 .footer-nav-title {
  font-size: 14px
 }
 .footer-nav-inner-list {
  display: none
 }
}
@media only screen and (max-width: 320px) {
 body {
  background-color: #DFDFDF
 }
 .container {
  width: 230px !important
 }
 .case .container, .client .container, .about .container, .footer .container {
  width: 280px !important
 }
 .navbar-contact, .navbar-nav {
  display: none
 }
 #slick-banner img {
  height: 120px
 }
 #slick-banner .slick-dots {
  margin-top: -24px;
  margin-left: -100px
 }
 #slick-banner .slick-dots li {
  width: 14px;
  height: 3px;
  margin: 0px 3px
 }
 #slick-banner .slick-dots li button {
  background-color: #E5E5E5;
  width: 14px;
  height: 3px;
  padding: 0px
 }
 #slick-banner .slick-dots li button:before {
  content: no-close-quote
 }
 #slick-banner .slick-active button:before {
  width: 14px;
  height: 3px;
  background-color: #E83828
 }
 .case {
  background-color: #fff
 }
 .title {
  margin-left: 10px
 }
 .title-en {
  font-size: 22px
 }
 .title-zh {
  font-size: 16px;
  margin-top: 5px;
  padding-top: 0px
 }
 .case-item-inner {
  box-shadow: none
 }
 .case-detail {
  padding: 10px 0;
  background-color: #E7E6E6
 }
 .case-detail-title a {
  font-size: 14px
 }
 .case-slide .slick-dots {
  bottom: -20px
 }
 #slick-case .slick-dots li {
  margin: 0px 3px
 }
 #slick-case .slick-dots li button:before {
  opacity: 0.20
 }
 #slick-case .slick-dots li.slick-active button:before {
  opacity: 0.5
 }
 .about-news, .about-us {
  display: none
 }
 .about {
  padding-bottom: 40px;
  background-color: #fff
 }
 .about-phone .about-phone-title {
  font-size: 13px
 }
 .service-item-name {
  font-size: 14px
 }
 .service-item-name p {
  display: none
 }
 .service-item-name span {
  display: block
 }
 .service-item {
  width: 60px
 }
 .service-ul .service-li-4, .service-ul .service-li-5 {
  margin-right: 20px
 }
 .service-ul .service-li-1, .service-ul .service-li-2, .service-ul .service-li-3 {
  margin-right: 20px
 }
 .service-ul li {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 69px
 }
 .client {
  background-color: #fff
 }
 .footer-nav {
  float: none;
  margin-bottom: 18px
 }
 .footer-top p {
  display: none
 }
 .footer-top span {
  display: block
 }
 .contact {
  float: none;
  font-size: 75%;
  width: 230px
 }
 .footer-nav-title {
  font-size: 15px
 }
 .footer-nav-inner-list {
  display: none
 }
 .footer-nav-list {
  margin-bottom: 30px
 }
 .footer-nav-list li {
  margin-bottom: 8px
 }
 .footer-nav-list li a {
  color: #ABABAB
 }
}