@font-face{
font-family: 'Font';
src: url('/Application/Home/Public/animation-img/font.ttf');
}
.box{
  width: 100%;

}
.header { 
  width: 100%; 
  height: 950px;
  /* padding-bottom: 50%; */
  position: relative;
  background: url("/Application/Home/Public/animation-img/banner.png") no-repeat; background-size: 100% 100%; 
}
.header .header-address {
  width: 100%; 
  position: fixed; 
  top: 0; 
  z-index: 210; 
}
.header .header-address .header-address-top { width: 100%; background: #404040; margin-bottom: 17px; }

.header .header-address .header-address-top .header-address-in { width: 90%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; }

.header .header-address .header-address-top .header-address-in p { line-height: 45px; }

.header .header-address .header-address-top .header-address-in p:nth-child(1) { font-size: 14px; color: white; }

.header .header-address .header-address-top .header-address-in p:nth-child(2) { font-size: 14px; font-weight: 700; color: white; }

.header .header-address .header-dh { 
  width: 90%; 
  max-width: 1200px; 
  margin: 0 auto; 
  height: 34px; 
  position: relative; 
  display: flex; 
  z-index: 11; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 17px; }

.header .header-address .header-dh .header-dh-img { width: 205px; height: 100%; position: relative; }

.header .header-address .header-dh .header-dh-img img { width: 100%; position: absolute; top: 0; left: 0; }

.header .header-address .header-dh .header-dh-img img:nth-child(2) { display: none; }

.header .header-address .header-dh .header-tel { width: 30px; cursor: pointer; display: none; }

.header .header-address .header-dh .header-tel .header-tel-btn { width: 100%; }

.header .header-address .header-dh .header-tel .header-tel-btn div { width: 100%; height: 5px; margin-bottom: 5px; background: white; }

.header .header-address .header-dh .header-tel .header-tel-btn div:last-child { margin-bottom: 0; }

.header .header-address .header-dh .header-dh-sou { width: 179px; height: 34px; background: rgba(255, 255, 255, 0.4); border-radius: 24px; margin: 0 57px 0 26px; padding: 9px 13px; box-sizing: border-box; display: flex; }

.header .header-address .header-dh .header-dh-sou input { width: 90%; background: none; margin-left: 4px; }

.header .header-address .header-dh .header-dh-sou input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); }

.header .header-address .header-dh .header-dh-banner li { font-size: 14px; line-height: 34px; color: white; margin-right: 26px; }

.header .header-address .header-dh .header-dh-banner li a { color: white; font-weight: 700; }

.header .header-address .header-dh .header-dh-banner li:last-child { margin: 0; }

.header .header-address .header-dh .header-dh-banner li:hover a { color: #2e57bb; }

.header .header-address .header-tel-banner { width: 100%; height: 0; overflow: hidden; }

.header .header-address .header-tel-banner li { float: none; height: 20px; background: white; text-align: center; padding: 10px 0; }

.header .header-address .header-tel-banner li a { color: #444; }

.header .header-address .header-tel-banner li:hover { background: white; }

.header-main{
  width: 100%;
  /* height: 100%; */
  color: white;
  position: relative;
}
.header-main-in{
  margin-top: 384px;
  margin-left: 200px;
  position: absolute;
}
.header-main-in .title{
  /* width: 790px;
  height: 100px; */
  font-size: 79px;
  font-family: Font;
}
.header-main-in .middle{
  display: flex;
}
.header-main-in .middle a{
  width: 212px;
  height: 72px;
  background: #FFFFFF;
  border: 1px solid #707070;
  opacity: 1;
  color: #A0009A;
  font-size: 28px;
  text-align: center;
  line-height: 72px;
  font-weight: bold;
  margin-right: 6px;
  margin-top: 20px;
}
.header-main-in .bottom{
  display: flex;
}
.header-main-in .bottom p{
  margin-right: 6px;
  margin-top: 16px;
  width: 214px;
  color: white;
  font-size: 20px;
  text-align: center;
}
.header-main-in .bottom .x{
  height: 1px;
  background: #fff;
  margin-top: 32px;
}
.item{
  width: 100%;
  height: auto;
  background: url("/Application/Home/Public/animation-img/bg.png") no-repeat; background-size: 100% 100%; 
}
.item .title{
  width: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #333333;
  opacity: 1;
  padding-top: 30px;
}
.item .item-top{
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
  /* margin-top: 63px; */
}
.item .item-top .tp{
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
.item .item-top .tp li{
  width: 20%;
  margin-top: 50px;
}
.item .item-top .tp li img{
  width: 100px;
  height: 100px;
  box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.14);
}
.item .item-top .tp li p{
  text-align: center;
  padding-top: 30px;
  font-size: 18px;
  font-weight: 400;
}
.item .item-top .tp li:hover .i1{
  transform:scale(1.05,1.05)
}
.item .case{
  width: 90%; 
  max-width: 1200px;
  margin: 0 auto;
  /* position: relative; */
  padding-top: 50px;
}
.item .case .case-in{
  width: 90%;
  max-width: 1200px; 
  margin: 0 auto;
}
.item .case .case-in .tit{
  width: 100%;
  font-size: 24px;
  font-weight: 500;
}
.item .case .case-in .case-top{
  width: 100%;
  display: flex;
  padding-top: 57px;
}
.item .case .case-in .case-top p{
  width: 190px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  /* margin-top: 320px; */
  border-radius: 5px;
  border-radius: 10px;
}

.item .case .case-in .case-top .p1{
  /* background: #FFFFFF; */
  border: 1px solid #5191FF;
  color: #5191FF;
}
.item .case .case-in .case-top .p2{
  /* background: #FFFFFF; */
  border: 1px solid #5191FF;
  color: #5191FF;
}
.case .case-in .case-bot{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  color: white;
  margin-top: 38px;
}
.case .case-in .case-bot ul{
  width: 100%;
  /* height: 290px; */
  padding-bottom: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.case .case-in .case-bot ul li{
  background: white;
  box-shadow: 8px 8px 20px rgb(0 0 0 / 5%);
  margin-bottom: 38px;
  margin-right: 2%;
  flex: 0 0 23%;
  float: none;
  cursor: pointer;
}
.case-bot3{
  display: none;
}
.case .case-in .case-bot ul li .tp img{
  width: 100%;
  height: 155px;
  object-fit: cover;
}
.case .case-in .case-bot ul li .mi .txt1{
  width: 90%;
  margin: 0 auto;
  margin-top: 10px; 
  margin-bottom: 10px; 
}
.case .case-in .case-bot ul li .mi div{
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
  display: flex;
  margin-bottom: 10px; 
}
.case .case-in .case-bot ul li .mi div p .s1{
  margin-left: 15px;
  margin-right: 155px;
  font-size: 12px;
  color: #999999;
}
.case .case-in .case-bot ul li .mi div img{
  vertical-align: middle;
  width: 12px;
}
.case .case-in .case-bot ul li .mi div p .s2{
  color: #666666;
  font-size: 12px;
}
.case .case-in .case-bot ul li{
  box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.14);
}
.case .case-in .case-bot ul li:hover{
  transform:scale(1.05,1.05)
}


@-webkit-keyframes b {
  0% {
    -webkit-transform: translateX(-1000px);
  }	
  100% {
    -webkit-transform: translateX(0);
  }
}

@-webkit-keyframes abc {
  0% {
    -webkit-transform: translateX(1000px);
  }	
  100% {
    -webkit-transform: translateX(0);
  }
}

@-webkit-keyframes bb {
  0% {
    opacity: 0.1;
  }	
  100% {
    opacity: 1;
  }
}

@keyframes bb {
  0% {
    opacity: 0.1;
  }	
  100% {
    opacity: 1;
  }
}

.service{
  position: relative;
  width: 100%;
  height: 520px;
  background: url("/Application/Home/Public/animation-img/bg2.png") no-repeat; background-size: 100% 100%; 
}
.service .img1{
  position: absolute;
  left: 32%;
  top: 50%;
}
.service .title{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 24px;
  font-weight: 500;
  padding-top: 50px;
}
.service .process ul{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
}
.service .process li{
  position: relative;
}
.service .process .i1{
  margin-top: 160px;
  margin-left: 200px;
}
.service .process .i2{
  margin-top: 210px;
  margin-left: 90px;
}
.service .process .i3{
  margin-top: 70px;
  margin-left: 45px;
}
.service .process .i4{
  margin-top: 210px;
  margin-left: 70px;
}
.service .process .i5{
  margin-top: 90px;
  margin-left: 50px;
}
.service .process .i6{
  margin-top: 170px;
  margin-left: 80px;
}
.service .process li p{
  width: 72px;
  text-align: center;
  font-size: 18px;
  color: #5191FF;
}
.service .process li .tp{
  margin-bottom: 15px;
}

.thing{
  width: 100%;
  padding-bottom: 100px;
}
.thing .thing-in{
  width: 90%;
  max-width: 1200px;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}
.thing .thing-in .txt{
  width: 530px;
  margin-top: 54px;
  margin-right: 70px;
}
.thing .thing-in .txt .t1{
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  width: 168px;
opacity: 1;
}
.thing .thing-in .txt .t2{
  height: 36px;
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  color: #333333;
  opacity: 1;
}
.thing .thing-in .txt .t3{
  height: 174px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  opacity: 1;
  margin-top: 28px;
}
.thing .thing-in .picture img{
  width: 600px;
  background: #B5B5B5;
  border-radius: 240px;
  margin-top: 100px;
}
.thing .thing-in .picture img:hover{
  transform:scale(1.05)
}

.thing .thing-in .txt{ -webkit-animation:'b' 2s 1}
.thing .thing-in .picture{ -webkit-animation:'abc' 2s 1}

.propaganda{
  width: 100%;
}
.propaganda img:hover{
  box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.14);
  transform:scale(1.05,1.05)
}
.propaganda .head{
  width: 90%;
  max-width: 1200px;
  display: flex;
  margin: 0 auto;
}
.propaganda .img1{
  margin-left: 322px;
}
.propaganda .casket{
  width: 294px;
  height: 281px;
  background: #5191FF;
  opacity: 1;
  color: #fff;
  text-align: center;
}
.propaganda .caskets{
  background: linear-gradient(136deg, #5191FF 0%, #986DFF 100%);
}
.propaganda .propaganda-mi{
  width: 100%;
  height: 844px;
  background: url("/Application/Home/Public/animation-img/bg3.png") no-repeat; 
  background-size: 100% 100%; 
}

.propaganda p{
  color: #fff;
}
.propaganda .txt1{
  font-size: 18px;
  font-weight: 400;
  margin-top: 105px;
}
.propaganda .txt2{
  font-size: 30px;
  font-weight: 500;
}
.propaganda .txt3{
  padding-top: 61px;
  width: 232px;
  margin: 0 auto;
}
.propaganda .txt4{
  width: 226px;
  margin: 0 auto;
  padding-top: 16px;
}
.propaganda .heads{
  width: 90%;
  max-width: 1200px;
  display: flex;
  /* margin: 0 auto; */
  margin-left: 654px;
}
.propaganda .heads .casket{
  width: 294px;
  height: 281px;
  background: #5191FF;
  opacity: 1;
  color: #fff;
  text-align: center;
}
.customer{
  width: 100%;
  margin-top: 100px;
}
.customer .title{
  width: 90%;
  text-align: center;
  padding-bottom: 16px;
  font-size: 30px;
  font-weight: 500;
  margin: 0 auto;
}
.customer .x-title{
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #5191FF;
  padding-bottom: 40px;
}
.customer .lists{
  width: 90%;
  max-width: 1200px;
  display: flex;
  flex-flow: wrap;
  height: auto;
  margin: 0 auto;
}
.customer .lists li img{
  width: 100%;
  height: 100%;
}
.information{
  width: 100%;
  /* height: 1025px; */
  /* padding-bottom: 95%; */
  height: auto;
  position: relative;
  background: url("/Application/Home/Public/animation-img/bg4.png") no-repeat; 
  background-size: 100% 100%; 
}
.information .title{
  padding-top: 190px;
  width: 90%;
  max-width: 1200px;
  border-bottom: 1px solid #D3D3D3;
  font-size: 24px;
  font-weight: 500;
  margin: 0 auto;
  padding-bottom: 16px;
}
/* .information .x-b{
  padding-top: 36px;
}
.information .bot{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.information .bot li{
  margin-top: 30px;
  background-color: white;
  box-shadow: 0px 7px 6px rgba(0, 0, 0, 0.14);
}
.information .bot li:hover{
  transform:scale(1.05,1.05)
}
.information .bot li .mi{
  padding-top: 16px;
  padding-left: 15px;
  background-color: white;
}
.information .bot li .bo{
  padding-top: 13px;
  padding-left: 15px;
  color: #999999;
  font-size: 14px;
  padding-bottom: 12px;
}
.information .bot li .bo .s1{
  padding-right: 14px;
}
.information .bot li .bo .s2{
  padding-right: 120px;
} */


.box .news { width: 100%; height: auto;
}

.box .news .news-in { width: 90%; max-width: 1200px; margin: 0 auto; overflow: hidden; }

.box .news .news-in .news-bottom { margin-top: 70px; display: flex; flex-flow: row wrap; justify-content: space-between; }

.box .news .news-in .news-bottom > div { background: white; box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.05); margin-bottom: 38px; flex: 0 0 23%; float: none; cursor: pointer; }

.box .news .news-in .news-bottom > div .news-bottom-img { width: 100%; height: 170px; object-fit: cover; }

.box .news .news-in .news-bottom > div .news-bottom-text { padding: 16px 12px 0 15px; box-sizing: border-box; display: flex; flex-flow: column wrap; }

.box .news .news-in .news-bottom > div .news-bottom-text > p:nth-child(1) { color: #333333; }

.box .news .news-in .news-bottom > div .news-bottom-text > p:nth-child(2) { font-size: 14px; color: #999999; margin: 14px 0 23px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }

.box .news .news-in .news-bottom > div .news-bottom-text .news-details { font-size: 14px; margin-bottom: 14px; }

.box .news .news-in .news-bottom > div .news-bottom-text .news-details div { float: left; display: flex; flex-direction: row; justify-content: center; align-items: center; }

.box .news .news-in .news-bottom > div .news-bottom-text .news-details div img { height: 100%; margin-right: 3px; }

.box .news .news-in .news-bottom > div .news-bottom-text .news-details div p { color: #666666; font-size: 12px; }

.box .news .news-in .news-bottom > div .news-bottom-text .news-details > p { font-size: 12px; float: right; color: #acacac; }
.slogan{
  width: 100%;
  height: 388px;
  background: url("/Application/Home/Public/animation-img/bg5 .png") no-repeat; 
  background-size: 100% 100%; 
}


@media screen and (max-width: 1200px) { 
  .box{width: 100%;}
  .header {height: auto;padding-bottom: 50%;}
  .header .header-address {width: 100%;}
  .header .header-address .header-dh .header-dh-sou { margin: 0; }
  /* .header .header-main { } */
  .header .header-main .header-main-in { margin-top: 200px;margin-left: 130px; }
  .header .header-main .header-main-in .title{font-size: 50px;}
  .header .header-main .header-main-in .middle a{width: 120px;height: 50px;line-height: 50px;font-size: 20px;}
  .header .header-main .header-main-in .bottom p{width: 140px;font-size: 10px;margin-top: 22px;}
  /* .header-main{display: none;} */
  .item{width: 100%;height: auto; background: #fff;}
  .item .item-top{padding-bottom: 20px;}
  .item .case{width: 90%;margin: 0 auto;padding-top: 50px;}
  .item .case-bot ul {width: 100%; flex-flow: wrap;}
  .item .case .case-in{height: auto;padding-bottom: 20px;}
  .service{display: none;}
  .propaganda{height: auto;}
  .propaganda .head{display: inherit;}
  .propaganda .head img{margin-left: 0;width: 100%;margin: 0 auto;vertical-align: middle;}
  .propaganda .head .casket{width: 100%;}
  .propaganda .head .casket .txt1{width: 100%;margin-top: 0;padding-top: 105px;}
  .propaganda .heads{display: inherit;margin: 0 auto;}
  .propaganda .heads img{margin-left: 0;width: 100%;margin: 0 auto;vertical-align: middle;}
  .propaganda .heads .casket{width: 100%;}
  .propaganda .heads .casket .txt1{width: 100%;margin-top: 0;padding-top: 105px;}
  .propaganda .propaganda-mi{background: #FFF;height: auto;}

  .customer{height: auto;}
  .customer .lists li {width: 25%;}
  .customer .lists li img{width: 100%;height: 100%;}

  .information{background: #fff;}
  .information .title{padding-top: 50px;}

  .slogan{display: none;}
}
@media screen and (max-width: 1000px) {
  .thing .thing-in{display:unset;}
  .thing .thing-in .txt{width: 90%;margin: 0 auto;}
  .thing .thing-in .picture {width: 90%;margin: 0 auto;}
  .thing .thing-in .picture img{width: 100%;}

  
  .customer{height: auto;}
  .customer .lists li {width: 33%;}
  .customer .lists li img{width: 100%;height: 100%;}
}
@media screen and (max-width: 800px) {
  .header .header-main .header-main-in { margin-top: 130px;margin-left: 30px; }
  .header .header-address .header-address-top{display: none;}
  .header .header-address .header-dh {  margin-top: 17px;}
  .header .header-address .header-dh .header-dh-banner { display: none; }
  .header .header-address .header-dh .header-dh-sou { display: none; }
  .header .header-address .header-dh .header-tel { display: block; }
  .item .item-top .tp li{width: 25%;}
  .case .case-in .case-bot ul li{flex: 0 0 31%;}
  .information .news .news-in .news-bottom > div { flex: 0 0 31%; }
}
@media screen and (max-width: 600px) {
  .header .header-main .header-main-in {margin: 100px auto;padding-left: 100px;}
  .header .header-main .header-main-in .title{font-size: 30px;}
  .header .header-main .header-main-in .middle a{width: 80px;height: 30px;line-height: 30px;font-size: 10px;}
  .header .header-main .header-main-in .bottom .x{display: none;}

  .item .item-top .tp li{width: 50%;margin-top: 0;}
  .case .case-in .case-bot ul li{flex: 0 0 48%;}
  .case .case-in .case-bot ul li:nth-child(2n) {margin-right: 0;}
  .thing{padding-bottom: 50px;}

  .customer{height: auto;}
  .customer .lists li {width: 50%;}
  .customer .lists li img{width: 100%;height: 100%;}
  .case .case-in .case-bot ul li{flex: 0 0 48%;}
  .information .news .news-in .news-bottom > div { flex: 0 0 48%; }
}
@media screen and (max-width: 375px) {
  .header .header-main .header-main-in {margin: 70px auto;padding-left: 20px;}
  .header .header-main .header-main-in .title{font-size: 20px;}
  .header .header-main .header-main-in .middle a{width: 80px;height: 30px;line-height: 30px;font-size: 10px;}
  .header .header-main .header-main-in .bottom p{margin-top: 10px;}
  .header .header-main .header-main-in .bottom .x{display: none;}
}