@charset "utf-8";
/* CSS Document */
.banner{ background: url(../images/3dengine/bg1.jpg)no-repeat center top; background-size: 100% 100%; padding: 166px 0 0px;}
.banner .banner_content .text h1{ color: #fff; font-size: 68px; white-space: nowrap;}
.banner .banner_content .text p{ font-size: 28px; color: #fff; font-weight: lighter;}
.banner .banner_content .text .p1{font-size: 24px; font-weight: normal;}
.banner .banner_content .text a{ background: #13c064; margin-top: 20px;}

.content1{ background:url(../images/3dengine/bg2.jpg)no-repeat center top; background-size: 100% 100%; }
.content1 .content1_box .title{ width: 50%; margin: 0 auto;}
.content1 .content1_box .title p{ color: #9a9a9a; text-align: center; font-size: 16px; line-height: 24px;}
.content1 .content1_box ul{ flex-wrap: wrap; margin: 50px 0 0;}
.content1 .content1_box ul li{ width: calc(25% - 20px); background: #fff; overflow: hidden; border-radius: 12px; display: flex; flex-direction: column; justify-items: flex-start; align-items: center; margin-bottom: 40px;}
.content1 .content1_box ul li img{ width: 100%; border-radius: 0;}
.content1 .content1_box ul li .text{ padding: 30px; box-sizing: border-box;}
.content1 .content1_box ul li .text h2{ position: static; color: #000; font-size: 22px; padding-bottom: 20px;}
.content1 .content1_box ul li .text p{ color: #999999; font-size: 14px; line-height: 20px;}

.content2{ background:url(../images/3dengine/bg3.jpg)no-repeat center top; background-size: 100% 100%; padding-top: 0;}
.content2 .content2_box{ text-align: center;}
.content2 .content2_box h1{color: #fff;}
.content2 .content2_box iframe{ width: 70%;border-radius: 30px; border: none; border-top: 50px solid #363b43; height: 650px; margin: 0 auto; overflow: hidden;}


.content3{ background:url(../images/3dengine/bg4.jpg)no-repeat center top; background-size: 100% 100%; }
.content4{ background:url(../images/3dengine/bg5.jpg)no-repeat center top; background-size: 100% 100%; }
.swiper_cj {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  .swiper_cj .swiper-wrapper{     width: 100%;
    height: 100%;}
    .swiper_cj .swiper-wrapper  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    
  }

  .swiper_cj .swiper-wrapper  .swiper-slide img {
    display: block;
    width: calc(100% - 2px);
    height:  calc(100% - 2px);
    object-fit: cover;
    border: 0.5px solid #2278ff;

     border-radius: 12px;
  }
  .swiper_cj .swiper-wrapper .swiper-slide  p{ position: absolute; bottom: 0; left: 0; color: #fff; font-size: 14px; text-align: center; line-height: 38px; height: 38px; background: rgba(34,120,255,0.7); width: 100%;}

  .content2 .content2_box .anli{ flex-wrap: wrap;}
  .content2 .content2_box .anli li{ width: calc(25% - 20px); height: 120px; border-radius: 10px; background: #fff; overflow: hidden; position: relative; margin-bottom: 30px; padding: 0; display: flex; align-items: center; justify-content: center;}
  .content2 .content2_box .anli li img{ height: 100px; width: auto;}
  .content2 .content2_box .anli li .text{ position: absolute; width: 100%; height: 120px; background: #2278ff; top: 120px; left: 0; box-sizing: border-box; padding: 20px 10%;}
  .content2 .content2_box .anli li:hover .text{ top: 0px; transition: 0.8s ease;}
  .content2 .content2_box .anli li .text h3{ font-size: 16px; color: #fff; font-weight: bold; text-align: left; padding: 0 0; padding-bottom: 10px;}
  .content2 .content2_box .anli li .text p{ font-size: 14px; color: #fff; text-align: left; padding: 0 0; line-height: 20px;}






  @media(max-width:1660px){
    
    .banner .banner_content{ width: 90%;}
    .content1 .content1_box ul li .text h2{font-size: 18px;}
    .content1 .content1_box{ width: 90%;}
    .content2 .content2_box iframe{ width: 80%;}
  }
  @media(max-width:1366px){
    .content2 .content2_box iframe{ width: 90%;}
    
  }
  @media(max-width:960px)
  { 
    .banner{ padding: 100px 0 0;}
    .banner .banner_content .text p{ font-size: 14px;}
    .banner .banner_content .text h1{ font-size: 28px;}
    .banner .banner_content .text .p1{  font-size: 14px;}
    .content1 .content1_box .title{ width: 100%;}
    .content1 .content1_box .title p{ font-size: 12px;}
    .content1 .content1_box ul li{ width: calc(50% - 10px);}
    .content1 .content1_box ul li .text h2{ font-size: 14px; padding-bottom: 10px;}
    .content1 .content1_box ul li .text p{ font-size: 12px;}
    .content1 .content1_box ul li .text{ padding: 15px;}
    .content1{ padding: 50px 0 0;}
    .content1 .content1_box ul{ margin: 50px 0 0;}
    .content2 .content2_box iframe{ width:100%; height: 400px; border-top: 30px; border-radius: 12px;}
    .swiper_cj .swiper-wrapper .swiper-slide p{font-size: 12px;}
    .content2 .content2_box .anli li{ width: calc(50% - 5px); height: 60px; margin-bottom: 15px;}
    .content2 .content2_box .anli li img{ height: 60px; width: auto;;}
    .content2 .content2_box .anli li .text{ height: 60px;  top: 60px;  padding: 10px;}
    .content2 .content2_box .anli li .text h3{ font-size: 12px; padding-bottom: 4px;}
    .content2 .content2_box .anli li .text p{ font-size: 12px;   line-height: 18px;}
  }