body{background: #000; color: #333;  letter-spacing: 1px;}
a, a:link { color: #333; text-decoration: none; -webkit-transition: 0.3s; transition: 0.3s;}
a:visited {}
a:active, a:hover { text-decoration: none; color:#00aaff; -webkit-transition: 0.3s; transition: 0.3s;}
a:focus { outline: none; }

.blank0{clear:both;display:block;font-size:1px;visibility:hidden;height:0;line-height:0;}
.blank5{clear:both;display:block;font-size:1px;overflow:hidden;height:5px;}
.blank8{clear:both;display:block;font-size:1px;overflow:hidden;height:8px;}
.blank10{clear:both;display:block;font-size:1px;overflow:hidden;height:10px;}
.blank12{clear:both;display:block;font-size:1px;overflow:hidden;height:12px;}
.blank15{clear:both;display:block;font-size:1px;overflow:hidden;height:15px;}
.blank20{clear:both;display:block;font-size:1px;overflow:hidden;height:20px;}
.blank25{clear:both;display:block;font-size:1px;overflow:hidden;height:25px;}
.blank28{clear:both;display:block;font-size:1px;overflow:hidden;height:28px;}
.blank30{clear:both;display:block;font-size:1px;overflow:hidden;height:30px;}
.blank35{clear:both;display:block;font-size:1px;overflow:hidden;height:35px;}
.blank40{clear:both;display:block;font-size:1px;overflow:hidden;height:40px;}
.blank45{clear:both;display:block;font-size:1px;overflow:hidden;height:45px;}
.blank50{clear:both;display:block;font-size:1px;overflow:hidden;height:50px;}
.blank60{clear:both;display:block;font-size:1px;overflow:hidden;height:60px;}
.blank80{clear:both;display:block;font-size:1px;overflow:hidden;height:80px;}
.blank90{clear:both;display:block;font-size:1px;overflow:hidden;height:90px;}
.blank100{clear:both;display:block;font-size:1px;overflow:hidden;height:100px;}
.blank110{clear:both;display:block;font-size:1px;overflow:hidden;height:110px;}
.blank170{clear:both;display:block;font-size:1px;overflow:hidden;height:170px;}

@font-face {font-family: "iconfont";
  src: url('../fonts/iconfont.eot?t=1590391884841'); /* IE9*/
  src: url('../fonts/iconfont.eot?t=1590391884841#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/iconfont.woff?t=1590391884841') format('woff'), /* chrome, firefox */
  url('../fonts/iconfont.ttf?t=1590391884841') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../fonts/iconfont.svg?t=1590391884841#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.iconlianjie:before {
  content: "\e600";
}

.iconsearch:before {
  content: "\e64e";
}

.iconleibie:before {
  content: "\e649";
}

.iconweb:before {
  content: "\e64b";
}

.iconApplet:before {
  content: "\e64c";
}

.copyright{ text-align:center; padding:15px 0; font-size:12px;  }
.copyright a{ color:#999;}

.kkx_sidebar{background: #e83437; position: fixed; width: 360px; top: 0; height: 100%; left: 0; z-index: 99; padding: 70px;}
.kkx_sidebar::before{content: ""; position: absolute; border: 10px #000000 solid; top: 10px; bottom: 10px; left: 10px; right: 10px;}
.kkx_sidebar .con{ position: relative; padding: 50px; width: 100%;}
.kkx_sidebar img{ width: 100%;}
.kkx_sidebar .logo{margin-bottom: 30px;}
.kkx_sidebar .sp1{position: absolute; bottom: 70px; width: calc(100% - 100px); left: 50px; right: 50px;}

.kkx_sidebar_m{display: none;}



.kkx_content{position: relative; padding-top: 40px; padding-left: 400px; padding-right: 40px;}
.case_list{}
.case_list ul{ margin: 0; padding: 0;}
.case_list ul li{ width: calc(33.33% - 14px); float: left; margin-right: 21px; margin-bottom: 21px;}
.case_list ul li:nth-child(3n){margin-right: 0;}
.case_list ul li a{display: block; text-align: center; position: relative;}
.case_list ul li a i{ display: block; position: absolute; width: 100px; height: 100px; line-height: 100px; text-align: center; border-radius: 50%; background: rgba(232,52,55,0.9); color: #fff; font-size: 45px; top: 50%;  left: 50%; margin-left: -50px; opacity: 0; -webkit-transition: 0.3s; transition: 0.3s; z-index: 9;}
.case_list ul li a span{display: block; overflow: hidden; background: #000;}
.case_list ul li a span img{width: 100%; -webkit-transition: 0.3s; transition: 0.3s; opacity: 0.8; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;}
.case_list ul li a h3{ font-size: 18px; font-weight: bold; color: #fff; padding: 20px 0; margin: 0;}
.case_list ul li a:hover{ background: #e83437; }
.case_list ul li a:hover i{opacity: 1; -webkit-transition: 0.3s; transition: 0.3s; margin-top: -90px;}
.case_list ul li a:hover span img{-webkit-transition: 0.3s; transition: 0.3s; -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0); filter: none;}

.detailed_con{ text-align: center;}
.detailed_con .tit{ padding-bottom: 0px; margin-bottom: 20px; }
.detailed_con .tit h1{ color: #fff; font-weight: bold; margin: 0;}
.detailed_con .tit p{color: #999;}
.detailed_con .con{ font-size: 16px; color: #999; line-height: 2em; margin-bottom: 25px;}
.detailed_con .con span{ border: 1px #999 solid; font-size: 12px; padding: 0px 15px; border-radius: 3px; display: inline-block; margin-right: 15px;}


.btn_back{background: #e83437; color: #fff; width: 150px; height: 50px; line-height: 50px; display: inline-block; text-align: center; }
.btn_back:hover{color: #fff;}


.img_list{ column-count:2; column-gap:30px;}
.img_list .item{ break-inside:avoid; margin-bottom:30px;}
.img_list .item img{width: 100%;}

.img_list_3{ column-count:4; column-gap:30px;}
.img_list_3 .item{ break-inside:avoid; margin-bottom:30px;}
.img_list_3 .item img{width: 100%;}




@media (max-width: 1500px){
.kkx_sidebar{ width: 300px; padding: 50px;}
.banner{padding-left:10%; padding-right: 10%; width: calc(100% - 300px); left: 300px;}
.kkx_bar{ left: 300px;}
.kkx_content{position: relative; padding-top: 70px; padding-left: 340px; padding-right: 40px;}
}

@media (max-width: 1360px){
.kkx_content{ padding-left: 340px; padding-right: 40px;}
.case_list ul li{ width: calc(50% - 8px); float: left; margin-right: 15px; margin-bottom: 15px;}
.case_list ul li:nth-child(3n){margin-right: 15px;}
.case_list ul li:nth-child(2n){margin-right: 0;}
.case_list ul li a i{ display: block; position: absolute; width: 70px; height: 70px; line-height: 70px;  font-size: 30px; top: 60%;  left: 50%; margin-left: -35px; }
.case_list ul li a h3{ font-size: 16px; padding: 15px 0;}
}

@media (max-width: 767px){
.kkx_sidebar{display: none;}
.kkx_sidebar_m{ display: block; background: #e83437; position: fixed; width: 100%; top: 0; left: 0; z-index: 99; padding: 20px;}
.kkx_sidebar_m .con{ position: relative; padding: 50px; width: 100%;}
.kkx_sidebar_m img{ height: 30px;}
.kkx_sidebar_m .logo{margin-bottom: 0;}




.kkx_content{padding-top: 90px; padding-left: 15px; padding-right: 15px;}

.detailed_con{}
.detailed_con .tit h1{ font-size: 20px;}


.case_list ul li{ width: calc(50% - 8px); float: left; margin-right: 15px; margin-bottom: 15px;}
.case_list ul li:nth-child(3n){margin-right: 15px;}
.case_list ul li:nth-child(2n){margin-right: 0;}
.case_list ul li a i{ display: block; position: absolute; width: 60px; height: 60px; line-height: 60px;  font-size: 30px; top: 70%;  left: 50%; margin-left: -25px; }
.case_list ul li a h3{ font-size: 12px; padding: 10px 0;}

.img_list{ column-count:1;}
.img_list .item{  margin-bottom:15px;}

.img_list_3{ column-count:1; column-gap:30px;}
.img_list_3 .item{  margin-bottom:15px;}

}