body{background: #f0f5fa;}
.part{width: 100%;overflow: hidden;height: 100vh;}
.part01 .picsBox{width: 100%;margin: 0 auto;height: calc(100% - 74px);margin-top: 74px;}


.view {
    width: 100%;
    height: 82%;
    position: absolute;
    background-color: #ffffffde;
  }
  
  .view .date-part {
    position: absolute;
    width: 63px;
    display: inline-block;
    margin-top: 100px;
    text-align: center;
  }
  
  .view .date-part .date-day {
    font-size: 34px;
    display: flex;
    color: #004f99;
  }
  
  .view .date-part .date-ym {
    font-size: 18px;
    display: flex;
    color: #004f99;
  }
  
  .view .swiper-container {
    width: 100%;
    height: 100%;
  }
  
  .view .swiper-slide {
    width: 100%;
    height: 100%;
  }
  
  .view img {
    width: 70%;
    height: 100%;
    object-fit: cover;
    left: 0;
    position: absolute;
  }
  
  .view .image-button {
    width: 86.5%;
    position: absolute;
    height: 50px;
    bottom: 30px;
  }
  
  .view .swiper-pagination {
    position: absolute;
    bottom: 4%;
    right: 2%;
    width: 44px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #004f99;
    outline: none;
    font-size: 20px;
    transition: .3s;
    padding: 0;
  }
  
  .view .arrow-left {
    background: url(../images/arr-left-03.png) no-repeat left top;
    background-position: center;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -25px;
    width: 28px;
    height: 51px;
    z-index: 10;
  }
  
  .view .arrow-right {
    background: url(../images/arr-right-03.png) no-repeat left top;
    background-position: center;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -25px;
    width: 28px;
    height: 51px;
    z-index: 10;
  }
  .swiper-button-next, .swiper-button-prev {
    background: unset;
  }
  .preview {
    height: 18%;
    width: 100%;
    position: absolute;
    bottom: 0;
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, #e6550400, #ffffff);
  }
  
  .preview .swiper-container {
    width: 100%;
    height: 100%;
  }
  
  .preview .swiper-slide {
    width: 87px;
    height: 100%;
    cursor: pointer;
    opacity: 1;
  }
  
  .preview .active-nav {
    opacity: 1;
  }
  
  .preview .swiper-slide:first-child img {
    padding: 0;
  }
  
  .preview .swiper-slide img {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
  }
  
  .preview .arrow-left {
    background: url(images/feel3.png) no-repeat left top;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -9px;
    width: 9px;
    height: 18px;
    z-index: 10;
  }
  
  .preview .arrow-right {
    background: url(images/feel4.png) no-repeat left bottom;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -9px;
    width: 9px;
    height: 18px;
    z-index: 10;
  }
  
  .preview .image-con-slide-img {
    margin-top: 0;
    top: 5.4%;
    width: 100%;
    height: 86%;
    overflow: hidden;
    position: absolute;
    border: 4px #fff solid;
  }
  
  .preview .active-nav .image-con-slide-img {
    border: 4px #e65504 solid
  }
  
  .preview .image-con-slide-img img {
    padding: 1px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .preview .active-nav img {
    padding: 0;
    /* border: 1px solid #F00; */
  }
  
  /* swiper */
  
  .image-con-slide-img {
    width: 70%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }
  
  .image-con-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .image-con-slide-p {
    width: 26%;
    height: 100%;
    padding: 0 2% 0 2%;
    position: absolute;
    right: 0;
    background-image: url(../img/bg-global-2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
  }
  
  .image-con-slide-p h1 {
    margin-top: 200px;
    color: #004f99;
    font-size: 24px;
    text-align: left;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  
  .image-con-slide-p-box {
    margin-top: 30px;
    text-align: justify;
    max-height: 360px;
    font-size: 18px;
    line-height: .6rem;
    -webkit-line-clamp: 15;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #004f99;
  }
  
  .image-con-button {
    position: absolute;
    bottom: 4%;
    right: 0;
    width: 110px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border: 1px solid #e65504;
    outline: none;
    background: #e65504;
    font-size: 16px;
    border-radius: 40px;
    transition: .3s;
    padding: 0;
  }
  
  .image-con-button:hover {
    box-shadow: #ff7a2dbb 0px 0px 11px 3px;
  }
  
  .section-article {
    margin-top: 50px;
  }
  
  .article-header {
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 25px;
  }
  
  .article-header .article-title {
    font-size: 31px;
    color: #231815;
    margin-bottom: 29px;
  }
  
  .article-header .article-info {
    height: 56px;
  }
  
  .article-header .date-wrapper {
    float: left;
    width: 52px;
  }
  
  .article-header .date-wrapper .date-day {
    font-size: 28px;
    color: #000;
  }
  
  .article-header .date-wrapper .date-ym {
    font-size: 14px;
    color: #000;
  }
  
  .article-header .share-wrapper {
    float: right;
  }
  
  .article-body {
    padding-top: 60px;
  }
  
  .article-body p {
    font-size: 16px;
    line-height: 35px;
    color: #000;
    margin-bottom: 40px;
  }
  
  .article-footer {
    text-align: center;
    padding-bottom: 60px;
  }
  

@media screen and (max-width: 900px){
    .pageBanner .pageNav ul{padding-left: 10px;}
    .part01{background-position: 10% center;background: none;min-height: unset;}
    .part01 .picsBox{width: 100%;margin: 0 auto;margin-bottom: 60px;padding-bottom: 0;height: 100%;}
    /* .part01 .picsBox h4{width: calc(100% - .7rem);padding: 0 .35rem;margin: 0 auto;margin-top: .5rem;    display: block; font-size: .4rem; line-height: 0.64rem;}

    .part01 .picsBox .picsMsg{width: 100%;margin: 0 auto;float: unset;}
    .part01 .picsBox .picsMsg h4{width: 100%;padding: 0;margin: 0 auto;margin-top: 0;display: block; font-size: .4rem; line-height: 0.64rem;}
    .part01 .picsBox .picsMsg p{margin-top: 0;width: 100%;}
    .part01 .picsBox .picsMsg span{margin-top: 15px;}
    .part01 .picsBox .picsMsg .recruitCardLink{margin-top: 15px;width: 120px;  height: 38px;background-size: 100% 100%;line-height: 38px;float: right;font-size: 14px;}
    .part01 .picsBox .picsMsg .recruitCardLink img{margin-top: 14px;height: 10px;width: 18px;margin-right: 12px;}

    .part01 .picsBox .picsTop .picsImg{width: 100%;margin-top: 40px;height: auto;}
    .part01 .picsBox .picsTop .picsImg img{width: calc(50% - 5px);}
    .part01 .picsBox .picsTop .picsImg img:nth-child(3){width: 100%;margin-top: 10px;}


    .part01 .picsBox .picsBottom{margin-top: 50px;clear: both;}
    .part01 .picsBox .picsBottom .picsImg{width: 100%;margin: 40px 0;height: auto;}
    .part01 .picsBox .picsBottom .picsImg img{width: calc(50% - 5px);}
    .part01 .picsBox .picsBottom .picsImg img:nth-child(1){width: 100%;margin-bottom: 10px;}
    .part01 .picsBox .picsBottom .picsMsg h4{margin-top: 0.5rem;} */
}


@media screen and (max-width: 900px) {


    .image-con-slide-img {
      margin-top: 1.2rem;
      width: 100%;
      height: 32vh;
      overflow: hidden;
      position: absolute;
    }
  
    .image-con-slide-p {
      bottom: 0;
      width: 92%;
      height: 60vh;
      padding: 0 4% 0 4%;
      background-position: top;
    }
  
    .view {
      height: 100%;
    }
    .view .arrow-left,
    .view .arrow-right {
      top: 24vh;
    }
  
    .view .date-part {
      width: 63px;
      margin-top: 1vh;
    }
  
    .image-con-slide-p h1 {
      position: relative;
      top: 90px;
      margin-top: 0;
      font-size: 22px;
      font-weight: bolder;
    }
  
    .image-con-slide-p-box {
      position: relative;
      top: 110px;
      margin-top: 0;
      -webkit-line-clamp: 7;
      max-height: 170px;
      font-size: 16px;
    }
  
    .view .image-button {
      width: 92%;
    }
  
    .preview {
      display: none;
    }
    
    .bread-wrapper {
      display: none;
    }
  
    .section-article,
    .section-cnt .section-body {
      margin-top: .8rem;
    }
  
    .article-header {
      padding-bottom: .3rem;
      border-bottom: .02rem solid #e7e7e7;
    }
  
    .article-header .article-title {
      font-size: .38rem;
      font-weight: bold;
      margin-bottom: .3rem;
    }
  
    .article-header .share-wrapper {
      display: none;
    }
  
    .article-header .date-wrapper .date-day,
    .article-header .date-wrapper .date-ym {
      color: #595757;
    }
  
    .article-body {
      padding-top: .6rem;
    }
  
    .article-body .article-text {
      font-size: .3rem;
      line-height: .5rem;
      margin-bottom: .4rem;
    }
  
    .article-footer {
      padding-bottom: .6rem;
    }
    .swiper-button-next{top: 22%;}
    .swiper-button-prev{top: 22%;}
}