/* css 重置 */

@font-face {
  font-family: family;
  src: url("../fonts/Gilroy-Medium-2.eot");
  src: local("☺"), url("../fonts/Gilroy-Medium-2.woff") format("woff"), url("../fonts/Gilroy-Medium-2.ttf") format("truetype"), url("../fonts/Gilroy-Medium-2.svg") format("svg"); }

body,
p,
input,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
dl,
dt,
dd,
form {
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: middle;
  font-weight: normal;
  font-family:family,Tahoma,Geneva,sans-serif;
}




img {
  display: block;
  max-width: 100%;
  border: 0;
}

body {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0;
  line-height: 1.01;
  font-size: 14px;
  color: #231815;
  text-align: left;
}

a:focus,
input,
textarea,
select {
  outline: none;
}

header,
section,
footer,
img {
  display: block;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
  text-decoration: none;
  color:#c01929;
}

li {
  list-style: none;
}

.clearfix {
  zoom: 1;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/* swiper初始化 ↓↓↓ */
¡ .swiper {
  overflow: hidden;
}

.swiper-container,
.swiper {
  position: relative;
  width: 100%;
  height: 100%;
}

.swiper-wrapper {
  position: relative;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  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;
}

/* swiper初始化 ↑↑↑ */

.container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
  box-sizing: border-box;
}



header { position:fixed; top:0; left:0; width:100%; padding:50px 0; transition: all .4s; z-index:20}

header .container{display: flex;justify-content: space-between;}

header .logo{ width:127px; height:55px; background:url(../img/logo.png) no-repeat center; background-size:contain}

header ul li{ display:inline-block; text-transform:uppercase; font-size:16px; margin-left:45px; line-height:55px;}

header ul li a.m{ padding-bottom:100px;}

header ul li a{ color:#fff;}

header.fix ul li a{ color:#0c0c0c}

header.fix .logo{ background:url(../img/logos.png) no-repeat center; background-size:contain}

header.fix{ background:#fff; padding:25px 0; border-bottom:solid 1px #e7e7e7;}

header .menu{ display:none; margin-top:20px;}

header.fix .menu img{ filter:invert(100%);}

header .menu img{height:23px;}

.header-div{ overflow:hidden; height:106px; width:100%; display:block;}

.titles{ overflow:hidden; margin:97px 0 90px; text-transform:uppercase}

.titles .container{display: flex;justify-content: space-between;}

.titles h1{ font-size:40px; color:#444; line-height:40px;}

.titles h1 font{ display:block; font-size:18px; color:#909090; margin-top:30px; max-width:760px; line-height:25px;}

.titles .more{ font-size:15px; width:150px; border-radius:20px;line-height:45px; height:45px; text-transform:uppercase;text-align:center; color:#c01929; border:solid 1px #676767;}

.titles .more:hover{ color:#fff;border:solid 1px #c01929; background:#c01929;}

.mores{ background:#c01929; font-size:18px; color:#fff; line-height:50px; padding:35px 0; cursor:pointer}

.mores .container{display: flex;justify-content: space-between;}

.mores a{ width:300px; border-radius:20px; text-align:center; color:#c01929; background:#e7e7e7;}

.caseitem{ width:100%; position:relative; margin-bottom:5%;}

.caseitem p{ position:absolute; top:50px; left:0; background:url(../img/home.png) repeat; color:#444; font-size:30px; max-width:500px; line-height:40px; width:100%; padding:2.5% 2.5% 5% 2.5%; text-align:left;}


.infos ul li{display:inline-block; width: calc((100% - 86px) / 4); margin-bottom:30px; position:relative;}

.infos ul li img{ width:100%;}

.infos ul li p{font-size:22px; color:#444; background:#e7e7e7; line-height:65px; margin-top:10px; text-align:center;}

.infos ul li:not(:nth-child(4n)) { margin-right:25px;}

.infos ul li:hover p{ background:#c01929; color:#fff;}

.footer{ background:#0c0c0c; margin-top:150px; overflow:hidden;}

.footer .mores{ margin-bottom:60px;}

.footer .by{ clear:both;display: flex;justify-content: space-between; padding:180px 0 110px; overflow:hidden}

.footer .by p{ font-size:15px; color:#fff; text-transform:uppercase}

.footer .by p a{ color:#c01929; text-decoration:underline}

.footer .box{display: flex;justify-content: space-between;}

.footer .box .l{ max-width:280px;}

.footer .box .l .p1{ color:#fff; font-size:18px; line-height:25px;}

.footer .box .l .p1 img{ width:127px}

.footer .box .l .p1 a{ color:#fff;}

.footer .box .l .p2{ color:#636363; font-size:15px; line-height:25px; margin-top:25px;}

.footer .box .r{ width:80%;}

.footer .box .r .dl{ float:right; clear:both; margin-top:60px}

.footer .box .r nav{ float:right; clear:both; overflow:hidden; display:block}

.footer .box .r nav a{ display:inline-block; margin-left:15px;}

.footer .box .r dl{ float:left; line-height:35px; margin-left:60px;}

.footer .box .r dl dt{ font-size:22px; color:#fff; margin-bottom:10px;}

.footer .box .r dl dt a{color:#fff;}

.footer .box .r dl dd{ font-size:15px; color:#898989;text-transform: uppercase;}

.footer .box .r dl dd a{color:#898989;}

.postion{ background:#e7e7e7; line-height:50px; font-size:15px; color:#0c0c0c}

.postion a{ color:#0c0c0c}

.head nav{ overflow:hidden; margin:100px 0 150px;}

.head nav a{ display: inline-block; margin-right:20px; font-size:15px; padding: 0 30px; border-radius:20px;line-height:40px;text-transform:uppercase;text-align:center; color:#c01929; border:solid 1px #676767; margin-bottom:20px;}

.head nav a:hover,.head nav a.on{ color:#fff;border:solid 1px #c01929; background:#c01929;}


.head big{ display:block; font-size:40px; color:#444444;}

.head small{ font-size:18px; color:#909090; text-align:center; border-top:solid 1px #e9e9e9; border-bottom:solid 1px #e9e9e9; margin:70px 0 100px; display:block; padding:38px 20%; line-height:23px;}


.fixs{ position:fixed; right:0; top:60%; z-index:99}

.fixs ul li img{ display:inline-block}

.fixs ul li{ display:block; border-bottom:solid 1px #fff;transition: all .4s; overflow:hidden;height:50px;background:#444444; font-size:14px; line-height:50px; text-align:left;}

.fixs ul li a{ color:#fff;display: flex;justify-content:flex-start; height:50px;}

.fixs ul li p{ opacity:0; width:0;transition: all .4s; }

.fixs ul:hover p{width:200px; opacity:1}


  .form{ color:#fff; width:100%;max-width:960px; margin:0 auto;display: flex;justify-content: space-between;position: absolute; top:50%; left:50%;transform: translate(-50%, -50%);}
  .form .item .p1{ font-size:60px; text-transform:uppercase}
  .form .item .p2{ font-size:30px; margin-top:30px;}
  .form .item{ margin-top:80px; max-width:440px;}
  .form form{ background:#fff; border-radius:25px; padding:50px;width:300px;}
  .form form input{ display:block; background:none; font-size:20px; line-height:30px;color:#c01929; border-bottom:solid 1px #e7e7e7; padding:0 1%; border-top: none; border-left:none; border-right: none; margin:0 0 35px 0; width:98%;}
  .form form input::placeholder{color:#c01929;}
  .form form .submit{width: 145px; font-size:15px; margin:0 auto;line-height:44px;border-radius: 20px;text-align: center;color: #fff;background: #c01929;}
  .form form .submit a{ color:#fff;}
.formbg{ display:none;background:url(../img/bg.png) repeat; width:100%; height:100%; position:fixed; top:0; left:0; z-index:99}
  .form .close{ position:absolute; right:-70px; top:-50px;}


/* 视频 */
.menuAbout,
.callback {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0;
    transition: all .55s;
    background-color: rgba(255, 255, 255, 0);
  }

  .menuAbout .wrap,
  .callback .wrap {
    position: absolute;
    top: 40%;
    left: 50%;
    max-width: 70%;
    max-height: 60%;
    transform: translate(-50%,-50%);
  }

  .menuAbout.active,
  .callback.active {
    z-index: 1000;
    opacity: 1;
    background-color: rgba(0, 0, 0, .5);
  }

.menuAbout .closeBtn {
  display: block;
  margin: 30px 30px 190px auto;
  cursor: pointer;
  max-width: 49px;
}

.menuAbout .menuMain {
  display: none;
}

.menuAbout .closeBtn {
  margin: 30px 0 0 auto;
}

.menuAbout video {
  display: block;
  margin: 0 auto;
  width: 100%;
}

.menuAbout .menuMain {
  display: none;
}

.menuAbout .closeBtn {
  margin: 30px 0 10px auto;
}

.menuAbout video {
  display: block;
  margin: 0 auto;
}

#sidr {
  text-align: left;
  position: fixed;
  font-size: 17px;
  left: -100%;
  top: 0;
  width:70%;
  max-width: 480px;
  text-transform: uppercase;
  height: 100%;
  background: #fff;
  z-index: 999;
  overflow-y: scroll;
}
#sidr .menu {
  position: absolute;
  right: 5%;
  top: 2.5%;
}
#sidr ul {
  width: 100%;
  margin-top: 15%;
}
#sidr ul li {
  line-height: 50px;
  border-bottom: solid 1px #efefef;
  display: block;
  text-indent: 10%;
  font-weight: bold;
}
#sidr ul li.click {
  background: url(../img/d.png) no-repeat 90% 20px;
}
#sidr ul li .down {
  display: none;
  background: #c01929;
  margin: 0;
  text-transform: capitalize;
}
#sidr ul li .down li {
  border-top: solid 1px #fff;
  font-size: 14px;
  margin: 0;
  border-bottom: none;
  font-weight: normal;
}
#sidr ul li .down li a {
  color: #fff;
}
.sidr-open .sidr-bg {
  background: #000;
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  -ms-opacity: 0.5;
  -o-opacity: 0.5;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}


.allScreenNav{ background:#e7e7e7; display:none; width:100%; padding:55px 0; position:absolute; top:137px; left:0; width:100%;}
.allScreenNav dl { width:20%; display:inline-block; clear:both; overflow:hidden;font-size:15px;}
.allScreenNav dl dt{ display:block; text-transform:uppercase; margin-bottom:35px; font-weight: bold;}
.allScreenNav dl dt a{ color:#444} 
.allScreenNav dl dd{ display:block; line-height:28px;}
.allScreenNav dl dd a{ color:#909090} 


@media (max-width:1024px) {
.menuAbout .wrap,.callback .wrap{ top:0; left:0;transform: translate(0,40%); max-width:inherit; max-height:inherit; margin:0 auto;}
.form .close{ right:15px;}
.allScreenNav{ display:none !important}
}

@media (max-width:1023px) {
header ul{ display:none}
header .menu{ display:block}
}

@media (max-width:768px) {
header{ padding:35px 0;}	
.mores .container{ display:block;}
.mores a{ display:block;}
.caseitem p{ padding:5% 5% 10% 5%;font-size:24px; line-height:30px;position:static; max-width:inherit; width:90%;}
.infos ul li{width: calc((100% - 34px) / 2)}
.infos ul li:not(:nth-child(4n)) { margin-right:0;}
.infos ul li:not(:nth-child(2n)) { margin-right:30px;}
.head nav,.head small{ margin:10% 0 15%}
.form{ padding:0 5%; width:90%;max-width:inherit}
.form .item .p1{ font-size:40px;}
.form .item .p2{ font-size:24px;}
.form{ display:block}
.form .item,.form form{ margin:0 auto;}
.form form{ width:336px; margin-top:10%;}
}

@media (max-width:640px) {
header{ padding:25px 0;}	
.titles h1{ font-size:26px; line-height:34px;}	
.titles .container{ display:block}
.titles .more{ display:block; margin-top:25px;}	
.titles { margin:20% 0 10%;}	
.titles h1 font{ font-size:16px; line-height:23px; margin-top:20px;}
.mores{ line-height:30px;}
.mores a{ line-height:40px; margin-top:15px;}
.caseitem p{ font-size:20px;}
.infos ul li p{ font-size:18px;}	
.footer .box,.footer .by{ display:block}	
.footer .by p{ margin-bottom:20px;}
.footer .by{ padding:20% 0 10%;}	
.footer .box .l{ max-width:inherit}
.footer .box .r{ width:100%; margin-top:10%;}
.footer .box .r nav{ float:left;}
.footer .box .r dl{ margin-left:0; width:32.33%; margin-bottom:5%;}
.footer .box .r nav a{ margin:0 15px 0 0;}
.footer{ margin-top:20%;}
.footer .box .r dl dt{ font-size:18px;}
.footer .box .r dl dd{ font-size:15px;}
.head big{ font-size:30px;}
.head small{ padding:10% 0; font-size:16px;}
.form form{ width:90%; padding:10% 5%;}
.form .item .p1{ font-size:34px;}
.form .item .p2{ font-size:20px;}
.form .item{ max-width:inherit}
.form form input{ font-size:18px;}
}



@media (max-width:480px) {
.infos ul li{width:100%; margin:0 0 5% 0 !important;}
.head big{ font-size:26px;}

}