/* 应用中心、服务领域的内容板块 */

/* .header > .wrap {

    !!!!!!  头部背景图

    直接在页面内插入图片

    background-image: url("../images/product_bg (2).png");

} */



.application h1,.application .h3{

  font-weight: 700;

  color: #222;
  text-transform: capitalize;
}



.application .contents .subtitle .title {

  font-size: 40px;

}



.application .contents .subtitle {

  font-size: 18px;

  line-height: 36px;

  margin: 21px 0 23px 0;

  color: #333;

}

.application .contents .subtitle:hover p {

  color: #2a78ab;

}

.application .contents .line {

  width: 50px;

  height: 4px;

  opacity: 1;

  background: #2a78ab;

}



.application .contents .box {

  display: block;

  width: 100%;

  margin-top: 40px;

}



.application .contents .container .swiper-container {

  overflow: hidden;

  display: none;

  margin-top: 40px;

}



.application .contents .container .swiper-container .item a {

  width: 48%;

  float: left;

  position: relative;

}

.application .contents .container .swiper-container .item a span {

  position: absolute;

  left: 14px;

  bottom: 18px;

  color: #fff;

  font-size: 18px;

}

.application .contents .container .swiper-container .item a > img {

  width: 100%;

}



.application .contents .container .swiper-container .item a:nth-child(2) {

  float: right;

}



.application .contents .box.server .item {

  margin-top: 2%;

}



.application .contents .box.server .item:nth-child(2n) {

  text-align: left;

}



.application .contents .box.server .item:nth-child(n + 3) {

  margin-top: 0%;

}



.application .contents .box.server img {

  display: block;

  width: 90%;

}



.application .contents .box.server a {

  position: relative;

}



.application .contents .box.server a .cheack_more {

  position: absolute;

  top: 0;

  left: 0;

  width: 90%;

  height: 100%;

  background: -webkit-linear-gradient(

    to top,

    rgba(2, 34, 100, 0.8),

    rgba(255, 255, 255, 0)

  );

  background: -o-linear-gradient(

    to top,

    rgba(19, 54, 126, 0.8),

    rgba(255, 255, 255, 0)

  );

  background: -moz-linear-gradient(

    to top,

    rgba(19, 54, 126, 0.8),

    rgba(255, 255, 255, 0)

  );

  background: linear-gradient(

    to top,

    rgba(19, 54, 126, 0.8),

    rgba(255, 255, 255, 0)

  );

  opacity: 0;

  transition: all 0.5s;

}



.application .contents .box.server  a.active .cheack_more {

  opacity: 1;

}



.application .contents .box.server  a .cheack_more .more_text {

  position: absolute;

  right: 18px;

  bottom: 22px;

  color: #fff;

  font-size: 16px;

}



.application .contents .box.server  a .cheack_more .more_text img {

  display: inline-block;

  width: 24px;

  height: 10px;

  margin-left: 10px;

}



.application .contents .box.server  a  .title {

  position: absolute;

  left: 18px;

  bottom: 5%;

  font-size: 20px;

  color: #fff;

  z-index: 1;

}



.application .contents .box img {

  display: inline-block;

  width: 98%;

  border-radius: 6px;

}



/* .application .contents .box .item:nth-child(2n) {

  text-align: right;

} */



/* .application .contents .box .item:nth-child(n + 3) {

  margin-top: 2%;

} */



/* .application .contents .bottom img {

  width: 100%;

} */



.application_box .item {

  display: block;

  box-shadow: 0px 2px 6px 1px #969696;

  margin: 40px 40px 0 0;

  overflow: hidden;

  /* border: 1px solid #000; */

  border-radius: 5px;

  /* width: 680px; */

  width: calc(100% / 2 - 20px);

  height: 280px;

  position: relative;

  background-size: 100% 100%;

  background-repeat: no-repeat;

  padding: 30px;

  background-size: 100% 100%;

}

.application_box .item:nth-child(2n) {

  margin-right: 0;

}



.application_box .item:hover .more {

  transform: translateY(-5px);

}

.application_box .item:hover::before {

  opacity: 1;

}

.application_box .item::before {

  transition: all 0.5s;

  content: "";

  transform: scale(1.5);

  width: 100%;

  height: 100%;

  display: block;

  opacity: 0;

  z-index: 999;

  background: linear-gradient(

    to right,

    rgba(75, 132, 245, 0.8),

    rgba(255, 255, 255, 0)

  );

}

.application_box .item:nth-child(1) {

  background-image: url(../images/server_page_img2.png);

}

.application_box .item:nth-child(2) {

  background-image: url(../images/app_img_2.png);

}

.application_box .item:nth-child(3) {

  background-image: url(../images/app_img_3.png);

}

.application_box .item:nth-child(4) {

  background-image: url(../images/app_img_4.png);

}

.application_box .item > .content {

  color: white;

  position: absolute;

  top: 50%;

  max-width: 340px;

  /* border: 1px solid #000; */

  transform: translateY(-50%);

}

.application_box .item > .content > h2 {

  font-size: 30px;

}

.application_box .item > .content .more {

  transition: all 0.5s;

  font-size: 16px;

  display: flex;

  align-items: baseline;

}

.application_box .item > .content .more .icon {

  width: 18px;

  height: 9px;

  margin-left: 8px;

  display: inline-block;

  vertical-align: middle;

  text-align: center;

}

.application_box .item > .content > p {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

  font-size: 16px;

  margin: 38px 0;

}



@media (max-width: 1680px) {

  .application_box .item {

    width: calc(100% / 2 - 5px);

    margin: 10px 10px 0 0;

    height: calc(280px - 50px);

  }

}



@media (max-width: 1280px) {

  .application_box .item {

    width: 100%;

    margin: 10px 10px 0 0;

    height: 300px;

  }

}



@media (max-width: 921px) {

  .application_box .item {

    padding: 10px;

    width: 100%;

    margin: 10px 10px 0 0;

    height: 180px;

  }

  .application_box .item > .content > h2 {

    font-size: 18px;

  }

  .application_box .item > .content > p {

    margin: 15px 0;

    font-size: 14px;

  }

  .application_box .item > .content .more {

    font-size: 12px;

  }

}



@media (max-width: 768px) {

  /* .application .contents .box {

        display: none;

    } */



  .application .contents .box {

    display: none;

  }

  .application .contents .box.application_box {

    display: block;

  }



  .application .contents .container .swiper-container {

    display: block;

  }

  .application .contents .box.server .item{

    width: 50%;

    float: left;

  }

}



@media (max-width: 991px) {

  .application .contents .container {

    width: auto;

  }

  .application .contents .box.server img {

    display: inline-block;

    width: 98%;

  }

  .application .contents .box.server .item:nth-child(2n) {

    float: right;

    text-align: right;

  }

  .application .contents .box.server .item:nth-child(2n) .title{

    left: 30px;

  }

  .application .contents .box.server{

    display: block;

  }

  /* .application .contents .box .item:nth-child(2n) {

    text-align: left;

  }



  .application .contents .box .item:nth-child(2) {

    margin-top: 2%;

  }

 */

  /*  .application .contents .box.server .item {

    margin: 0;

  } */

}



@media (min-width: 992px) {

  /*    .header {

        height: 132px;

    } */



  /*  .application .contents .box.server .item:nth-child(n + 4) {

    margin-top: 2%;

  } */



  /* .application .contents .box .item:nth-child(2) {

        margin-top: 0%;

    } */

}

@media(max-width: 500px) {

  .application .contents .subtitle {

    font-size: 14px;

    line-height: 22px;

    margin: 10px 0 20px 0;

}

.pr_box {

  margin-top: 26px;

}

.application .contents .box {

  margin-top: 28px;

}

.application .contents .box.server img {

  width: 100%;

}

.application .contents .box.server .item {

  width: 100%;

}

.application .contents .box.server .item {

  display: none;

}

.application .contents .box.server .item:nth-child(-n+4) {

  display: block;

}

.application h1 {

  font-size: 22px;

}

}