.bannerBox.lsyg{height: 620px; background: url('/uploadfiles/img/zsgl_lsyg_head_bg_01.jpg') no-repeat top center; background-size: cover; }
.warpBox.lsyg .th1 {padding: 52px; box-sizing: border-box; background-color: #fff; box-shadow: 1px 0px 11px rgba(179, 179, 179, 0.4);}
.warpBox.lsyg .th1 .titleBox{font-size: 45px; color: #333;}
.warpBox.lsyg .th1 .titleBox b{display: block; font-weight: initial;}
.warpBox.lsyg .th1 .titleBox .b1{line-height: 48px;}
.warpBox.lsyg .th1 .titleBox .b2{font-size: 29px; color: #b8b8b8;}
.warpBox.lsyg .th1 .themeBox ul{padding: 0 40px; position: relative;}
.warpBox.lsyg .th1 .themeBox ul::before{content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 0px; bottom: 0px; border-left: 1px dashed #004889;}
.warpBox.lsyg .th1 .themeBox ul li{width: 570px; position: relative; margin-bottom: 30px;}
/* .warpBox.lsyg .th1 .themeBox ul li.minH{min-height: 340px;} */
.warpBox.lsyg .th1 .themeBox ul li.li1{transform: translateX(744px);}
/* .warpBox.lsyg .th1 .themeBox ul li.li2{transform: translateX(-100%);} */
/* .warpBox.lsyg .th1 .themeBox ul li.a1{padding-top: 172px;} */

.warpBox.lsyg .th1 .themeBox ul li .liContent{ position: relative; background-color: #f4f9ff; padding: 23px 25px 30px; font-size: 15px; color: #333; line-height: 28px;}
.warpBox.lsyg .th1 .themeBox ul li .liContent img{max-width: 100%; margin-top: 8px;}
.warpBox.lsyg .th1 .themeBox ul li.li1 .liContent .year{position: absolute; left: -130px; top: -33px; width: 84px; height: 84px; line-height: 84px; text-align: center; font-size: 22px; font-weight: bold; color: #004889; border-radius: 100%; background-color: #fff; box-shadow: 0px 1px 11px rgba(0, 98, 155, 0.5);}
.warpBox.lsyg .th1 .themeBox ul li.li1 .liContent .year::before{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110px; height: 110px; background: url(/uploadfiles/img/zsgl_lsyg_item_bg.png) no-repeat center; background-size: 100%, 100%;}
.warpBox.lsyg .th1 .themeBox ul li.li1 .liContent .year .line{ position: absolute; width: 610px; height: 1px; left: 96px; top: 39%; transform: translateY(-50%); background-color: #75c4fd; }
.warpBox.lsyg .th1 .themeBox ul li.li1 .liContent .year .line::after{content: ''; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); right: 3px; width: 12px; height: 12px; background-color: #fff; border: 1px solid #4689e5;}

.warpBox.lsyg .th1 .themeBox ul li.li2 .liContent .year{position: absolute; right: -130px; top: -33px; width: 84px; height: 84px; line-height: 84px; text-align: center; font-size: 22px; font-weight: bold; color: #004889; border-radius: 100%; background-color: #fff; box-shadow: 0px 1px 11px rgba(0, 98, 155, 0.5);}
.warpBox.lsyg .th1 .themeBox ul li.li2 .liContent .year::before{content: ''; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); width: 110px; height: 110px; background: url(/uploadfiles/img/zsgl_lsyg_item_bg.png) no-repeat center; background-size: 100%, 100%;}
.warpBox.lsyg .th1 .themeBox ul li.li2 .liContent .year .line{ position: absolute; width: 610px; height: 1px; right: 96px; top: 39%; transform: translateY(-50%); background-color: #75c4fd; }
.warpBox.lsyg .th1 .themeBox ul li.li2 .liContent .year .line::after{content: ''; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); left: 3px; width: 12px; height: 12px; background-color: #fff; border: 1px solid #4689e5;}
.warpBox.lsyg .th1 .themeBox ul li.last .liContent::before{content: ''; position: absolute; height: 100%; right: -90px; width: 10px; background-color: #fff; }
.warpBox.lsyg .th1 .themeBox ul li.li2.last .liContent::before{right: -90px;  }
.warpBox.lsyg .th1 .themeBox ul li.li1.last .liContent::before{left: -87px;  }


@media screen and (max-width: 1655px) {
  .warpBox.lsyg .th1{padding: 35px 30px;}
  .warpBox.lsyg .th1 .themeBox ul{padding: 0px;}
  .warpBox.lsyg .th1 .themeBox ul li{width: 500px;}
  .warpBox.lsyg .th1 .themeBox ul li .liContent{font-size: 14px; line-height: 26px; padding: 15px 15px 20px;}
  .warpBox.lsyg .th1 .themeBox ul li.li2 .liContent .year .line{width: 537px;}
  .warpBox.lsyg .th1 .themeBox ul li.li2 .liContent .year{width: 65px; height: 65px; line-height: 65px; top: -25px; font-size: 18px;}
  .warpBox.lsyg .th1 .themeBox ul li.li2 .liContent .year{right: -102px;}
  .warpBox.lsyg .th1 .themeBox ul li.li2 .liContent .year::before{width: 85px; height: 85px;}
  .warpBox.lsyg .th1 .themeBox ul li.li2 .liContent .year .line{right: 74px;}

  .warpBox.lsyg .th1 .themeBox ul li.li1{transform: translateX(639px);}
  .warpBox.lsyg .th1 .themeBox ul li.li1 .liContent .year .line{width: 537px;}
  .warpBox.lsyg .th1 .themeBox ul li.li1 .liContent .year{width: 65px; height: 65px; line-height: 65px; top: -25px; font-size: 18px;}
  .warpBox.lsyg .th1 .themeBox ul li.li1 .liContent .year{left: -102px;}
  .warpBox.lsyg .th1 .themeBox ul li.li1 .liContent .year::before{width: 85px; height: 85px;}
  .warpBox.lsyg .th1 .themeBox ul li.li1 .liContent .year .line{left: 74px;}
  .warpBox.lsyg .th1 .themeBox ul li.li2.last .liContent::before{right: -72px;}
  .warpBox.lsyg .th1 .themeBox ul li.li1.last .liContent::before{left: -71px;}
}
@media screen and (max-width: 1200px) {
  .bannerBox.lsyg{height: 225px;}
  .bannerBox.lsyg .bannerContent .bTitleBox img{height: 50px;}
  .warpBox.lsyg{padding: 0 15px;}
  .warpBox.lsyg .th1{padding: 20px 15px 25px;}
  .warpBox.lsyg .th1 .titleBox {margin-bottom: 30px;}
  .warpBox.lsyg .th1 .titleBox .b1{font-size: 22px; line-height: 26px; font-weight: bold;}
  .warpBox.lsyg .th1 .titleBox .b2{font-size: 18px;}

  .warpBox.lsyg .th1 .themeBox ul li{transform: none !important; width: auto; margin-bottom: 15px;}
  .warpBox.lsyg .th1 .themeBox ul{padding-left: 60px;}
  .warpBox.lsyg .th1 .themeBox ul::before{left: 25px;}
  .warpBox.lsyg .th1 .themeBox ul li .liContent .year::before{width: 60px !important; height: 60px !important; }
  .warpBox.lsyg .th1 .themeBox ul li .liContent .year{right: auto; left: -59px !important; top: -17px !important; width: 45px !important; height: 45px !important; line-height: 45px !important; font-size: 15px !important;}
  .warpBox.lsyg .th1 .themeBox ul li.li1 .liContent .year .line{display: none;}
  .warpBox.lsyg .th1 .themeBox ul li .liContent{font-size: 13px; line-height: 24px;}

  .warpBox.lsyg .th1 .themeBox ul li.last .liContent::before{right: auto; left: -40px;}
}