/*lyTop start*/
.lyTop { padding: 20px 0; background-color: #fff;}
.lyTop a { display: block; height: 60px; overflow: hidden; float: left;}
.lyTop a img { max-height: 100%;}

.lyTop .lyTel { height: 60px; float: right;}
.lyTel i { display: block; width: 50px; height: 50px; overflow: hidden; margin: 5px 10px 5px 0; padding: 14px; border-radius: 50%; background-color: #f50; border-radius: 50%; float: left;}
.lyTel p { margin: 5px 0; float: left;}
.lyTel p span { display: block; line-height: 18px; color: #333; font-size: 14px; margin-bottom: 6px;}
.lyTel p em { display: block; line-height: 26px; color: #f50; font-family: "Impact"; font-size: 30px; font-style: normal;}
/*lyTop end*/


/*lyBanner start*/
.lyBanner { height: 810px; overflow: hidden; position: relative;}
.lyBanner_con { display: flex; align-items: center; height: 100%; position: relative;}
.lyBanner_con .lyBanner_text { width: calc(100% - 700px);}
.lyBanner_text h3, .lyBanner_text h3 font { line-height: 80px; color: #fff; font-family: "Pangmen"; font-size: 88px;}
.lyBanner_text h3 { margin-bottom: 10px;}
.lyBanner_text h3 font { color: #f50;}
.lyBanner_text p { line-height: 56px; color: #fff; font-size: 48px; margin-bottom: 80px;}
.lyBanner_text span { display: block; line-height: 40px; color: rgba(255, 255, 255, .35); font-family: '\5FAE\8F6F\96C5\9ED1'; font-size: 36px; margin-bottom: 10px;}
.lyBanner_text em { display: block; line-height: 30px; color: rgba(255, 255, 255, .35); font-family: '\5FAE\8F6F\96C5\9ED1'; font-size: 24px; font-weight: lighter; font-style: normal;}

.lyBanner_con .lyBanner_pic { width: 700px; height: 700px; overflow: hidden; position: relative;}

.lyBanner_scroll { width: 20px; position: absolute; left: 0; bottom: 30px;}
.lyBanner_scroll p { width: 20px; height: 28px; overflow: hidden; margin: 0 auto; border: 2px solid #fff; border-radius: 10px;}
.lyBanner_scroll p i { display: block; width: 2px; height: 6px; overflow: hidden; background-color: #fff; margin: 10px auto; animation-name: scrollTip; animation-duration: 2s; animation-iteration-count: infinite;}
/*lyBanner end*/


/*lyCase start*/
.lyCase { overflow: hidden; padding: 100px 0;}
.lyCase ul { display: flex; flex-wrap: wrap; justify-items: left; margin: 0 -25px -50px;}
.lyCase ul li { width: 33.333333%; margin-bottom: 50px; padding: 0 25px;}
.lyCase_con { min-height: 100%; overflow: hidden; box-shadow: 0 0 24px rgba(0, 0, 0, .12); position: relative;}
.lyCase_con .lyCase_img { width: 100%; height: 320px; overflow: hidden; background-color: #fff;}
.lyCase_con .lyCase_img a { display: block; width: 100%; height: 100%; overflow: hidden; position: relative;}
.lyCase_con:hover .lyCase_img a img { transform: scale(1.05); -webkit-transform: scale(1.05);}

.lyCase_con .lyCase_text { display: flex; align-items: center; width: 100%; height: 80px; overflow: hidden; padding: 20px; background-color: #fff;}
.lyCase_text a.lyCase_name { display: block; width: calc(100% - 150px); height: 40px; overflow: hidden; line-height: 40px; color: #222; font-size: 18px; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; padding-left: 16px; position: relative;}
.lyCase_text a.lyCase_name::before { content: ''; display: block; width: 6px; height: 6px; overflow: hidden; background-color: #ddd; border-radius: 50%; position: absolute; left: 0; top: 17px;}
.lyCase_text span { display: block; width: 150px; height: 40px; overflow: hidden; line-height: 40px; color: #999; font-size: 14px; text-align: right;}

.lyCase_con .lyCase_down { display: flex; align-items: center; width: 100%; height: 100%; overflow: hidden; padding: 20px; background: linear-gradient(to bottom, rgba(255, 85, 0, .85), rgba(255, 185, 16, .85)); position: absolute; left: 0; bottom: 100%;}
.lyCase_con:hover .lyCase_down { bottom: 0;}
.lyCase_down p { width: 100%;}
.lyCase_down span { display: block; width: 100%; height: 40px; overflow: hidden; line-height: 40px; color: #fff; font-size: 24px; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; text-align: center;}
.lyCase_down a.lyCase_btn { display: block; width: 72px; height: 72px; margin: 30px auto 0; position: relative;}
.lyCase_down a.lyCase_btn::before, .lyCase_down a.lyCase_btn::after { content: ''; display: block; width: 0; height: 0; border: 1px solid #fff; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);animation-iteration-count: infinite;}
.lyCase_down a.lyCase_btn::before { opacity: .45; animation-name: pulseBefore; animation-duration: 2s; animation-delay: 0.2s;}
.lyCase_down a.lyCase_btn::after { opacity: .15; animation-name: pulseAfter; animation-duration: 2s;}
.lyCase_down a.lyCase_btn i { display: block; width: 100%; height: 100%; overflow: hidden; padding: 22px; background-color: #fff; border-radius: 50%; position: relative; z-index: 1;}
/* 定义before伪元素的动画 */
@keyframes pulseBefore {
  0% { width: 70px; height: 70px;}
  50% { width: 84px; height: 84px;}
  100% { width: 70px; height: 70px;}
}
/* 定义after伪元素的动画 */
@keyframes pulseAfter {
  0% { width: 70px; height: 70px;}
  50% { width: 96px; height: 96px;}
  100% { width: 70px; height: 70px;}
}
/*lyCase end*/


@media (max-width:1680px) {
  .lyBanner { height: 710px;}
  .lyBanner_con .lyBanner_text { width: calc(100% - 600px);}
  .lyBanner_text h3, .lyBanner_text h3 font { line-height: 70px; font-size: 80px;}
  .lyBanner_text p { line-height: 48px; font-size: 36px; margin-bottom: 60px;}
  .lyBanner_text span { line-height: 36px; font-size: 30px;}
  .lyBanner_text em { line-height: 24px; font-size: 20px;}
  .lyBanner_con .lyBanner_pic { width: 600px; height: 600px;}

}

@media (max-width:1600px) {
  .lyTop { padding: 10px 0;}

  .lyBanner { height: 680px;}

  .lyCase { padding: 80px 0;}
  .lyCase ul { margin: 0 -20px -40px;}
  .lyCase ul li { margin-bottom: 40px; padding: 0 20px;}
  .lyCase_con .lyCase_img { height: 310px;}
  .lyCase_con .lyCase_text { height: 60px; padding: 10px 20px;}
  .lyCase_text a.lyCase_name { font-size: 16px;}
  .lyCase_down span { height: 36px; line-height: 36px; font-size: 22px;}
  .lyCase_down a.lyCase_btn { width: 64px; height: 64px; margin: 20px auto 0;}
  .lyCase_down a.lyCase_btn i { padding: 20px;}
  @keyframes pulseBefore {
    0% { width: 60px; height: 60px;}
    50% { width: 80px; height: 80px;}
    100% { width: 60px; height: 60px;}
  }
  /* 定义after伪元素的动画 */
  @keyframes pulseAfter {
    0% { width: 60px; height: 60px;}
    50% { width: 92px; height: 92px;}
    100% { width: 60px; height: 60px;}
  }
}

@media (max-width:1560px) {}

@media (max-width:1440px) {
  .lyBanner { height: 620px;}
  .lyBanner_con .lyBanner_text { width: calc(100% - 540px);}
  .lyBanner_text h3, .lyBanner_text h3 font { line-height: 60px; font-size: 72px;}
  .lyBanner_text p { line-height: 44px; font-size: 32px; margin-bottom: 40px;}
  .lyBanner_text span { line-height: 32px; font-size: 26px;}
  .lyBanner_text em { line-height: 22px; font-size: 18px;}
  .lyBanner_con .lyBanner_pic { width: 540px; height: 540px;}

  .lyCase { padding: 60px 0;}
  .lyCase ul { margin: 0 -16px -32px;}
  .lyCase ul li { margin-bottom: 32px; padding: 0 16px;}
  .lyCase_con .lyCase_img { height: 280px;}
  .lyCase_down span { height: 30px; line-height: 30px; font-size: 20px;}
  .lyCase_down a.lyCase_btn { width: 60px; height: 60px;}
  .lyCase_down a.lyCase_btn i { padding: 18px;}
  @keyframes pulseBefore {
    0% { width: 52px; height: 52px;}
    50% { width: 70px; height: 70px;}
    100% { width: 52px; height: 52px;}
  }
  /* 定义after伪元素的动画 */
  @keyframes pulseAfter {
    0% { width: 52px; height: 52px;}
    50% { width: 80px; height: 80px;}
    100% { width: 52px; height: 52px;}
  }
}

@media (max-width:1366px) {
  .lyBanner { height: 580px;}
  .lyBanner_con .lyBanner_text { width: calc(100% - 520px);}
  .lyBanner_con .lyBanner_pic { width: 520px; height: 520px;}

  .lyCase_con .lyCase_img { height: 260px;}
  .lyCase_con .lyCase_text { height: 50px; padding: 10px 16px;}
  .lyCase_text a.lyCase_name { height: 30px; line-height: 30px; font-size: 15px;}
  .lyCase_text a.lyCase_name::before { top: 12px;}
  .lyCase_text span { height: 30px; line-height: 30px;}
}

@media (max-width:1280px) {
  .lyBanner { height: 540px;}
  .lyBanner_con .lyBanner_text { width: calc(100% - 500px);}
  .lyBanner_text h3, .lyBanner_text h3 font { line-height: 56px; font-size: 64px;}
  .lyBanner_text p { line-height: 40px; font-size: 30px;}
  .lyBanner_text span { line-height: 30px; font-size: 24px;}
  .lyBanner_text em { line-height: 20px; font-size: 16px;}
  .lyBanner_con .lyBanner_pic { width: 500px; height: 500px;}
  .lyBanner_scroll { bottom: 20px;}

  .lyCase { padding: 40px 0;}
  .lyCase ul { margin: 0 -12px -24px;}
  .lyCase ul li { margin-bottom: 24px; padding: 0 12px;}
  .lyCase_con .lyCase_img { height: 246px;}
  .lyCase_down span { font-size: 18px;}
  .lyCase_down a.lyCase_btn { width: 54px; height: 54px;}
  .lyCase_down a.lyCase_btn i { padding: 15px;}
  @keyframes pulseBefore {
    0% { width: 50px; height: 50px;}
    50% { width: 64px; height: 64px;}
    100% { width: 50px; height: 50px;}
  }
  /* 定义after伪元素的动画 */
  @keyframes pulseAfter {
    0% { width: 50px; height: 50px;}
    50% { width: 74px; height: 74px;}
    100% { width: 50px; height: 50px;}
  }
}

@media (max-width:1200px) {}

@media (max-width:1080px) {}

@media (max-width:1024px) {}

@media (max-width:920px) {}

@media (max-width:820px) {}

@media (max-width:767px) {}

@media (max-width:390px) {}

@media (max-width:320px) {}