/* 引入字体库 */

@font-face {

  font-family: "Alimama FangYuanTi VF-Medium, Alimama FangYuanTi VF-Medium";

  src: url("../fonts/AlimamaFangYuanTiVF-Thin.ttf");

  font-weight: 600;

  font-style: normal;

}

/* 头部开始 */

.xdev_navigation_first {

  width: 100%;

  height: 90px;

  line-height: 90px;

  background-color: #ffffff;

  text-align: center;

  position: fixed;

  top: 0;

  z-index: 1000;

}

.xdev_navigation_second {

  width: 100%;

  height: 80px;

  line-height: 80px;

  background-color: #00559b;

  text-align: center;

  color: #ffffff;

  position: fixed;

  top: 90px;

  z-index: 1000;

}

/* 头部结束 */

/* 内容开始 */

.xdev_container {

  width: 100%;

  min-height: 100vh;

  /* padding-top: 170px;

  box-sizing: border-box; */

  margin-top: 0px;

}

.container_inner {

  position: relative;

}

/* 背景图 */

.xdev_bg {

  position: fixed;

  right: 120px;

  top: 0;

}

.xdev_bg_img {

  width: 840px;

  height: auto;

}

/* 轮播 */

.swiper {

  width: 100%;

  overflow: hidden;

  --swiper-theme-color: #ff6600;

  --swiper-pagination-color: #00ff33; /* 两种都可以 */

}

.xdev_swiper_home_banner{

 height: 100vh;

}

.xdev_swiper_slide {

  position: relative;

}

.dot {

  display: flex;

  align-items: center;

  justify-content: center;

  padding-top: 16px;

  box-sizing: border-box;

}



.dot .dot-customs {

  width: 14px;

  height: 4px;

  background: #dce6ed;

  border-radius: 1px 1px 1px 1px;

  transform: skew(-20deg);

  margin-right: 20px;

  cursor: pointer;

}



.dot .dot-customs-active {

  background-color: #0d9ed7;

}

/* 轮播 */

.xdev_swiper_home_banner_img {

  width: auto;

  height: 100%;

  object-fit: cover;

  animation: scaleDown 2s;

}

.xdev_swiper_slide_mask {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(0, 0, 0, 0.7);

  cursor: pointer;

}

.xdev_swiper_slide_mask_content {

  width: 100%;

  max-width: 1440px;

  height: 100%;

  margin: 0 auto;

  padding: 194px 0 0 0;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

.xdev_swiper_slide_mask_nav {

  width: 100%;

  text-align: left;

  font-size: 14px;

  font-family: Microsoft YaHei, Microsoft YaHei;

  font-weight: 400;

  color: #bbc0ca;

  line-height: 24px;

}

/* 时间 */

.xdev_swiper_slide_mask_time {

  width: 100%;

  height: 100%;

  flex: 1;

  position: relative;

}

.xdev_swiper_slide_mask_left_text {

  text-align: center;

}

.xdev_swiper_slide_mask_time_item {

  font-size: 150px;

  /*font-weight: bold;*/

  color: #ffffff;

  line-height: 176px;

  position: absolute;

  transition: all 3s;

  top:50%;

  transform: translateY(-50%);

}

.xdev_animate_first {

  top:50%;

  left: 50%;

  transform: translate(-50%,-50%) scale(1.8);

  animation: fadeInAndScale 2s ease-in-out;

  animation-duration: 2s;

  animation-delay: 0s;

  opacity: 0;

}

.xdev_animate_second {

  width: 100%;

  height: 100%;

  display: none;

  position: relative;

}

.xdev_animate_second_left {

  top:50%;

  left: 200px;

  transform: translateY(-50%) scale(1.8);

  animation: secondLeftAnimation 2s linear;

}

.xdev_animate_second_right {

  top:50%;

  right: 200px;

  transform: translateY(-50%) scale(1.8) ;

  animation: secondRightAnimation 2s linear;

  overflow: hidden;

}

.xdev_animate_second_scroll {

  position: absolute;

  top: 50%;

  right: 0;

  transform: translateY(-50%);

  width: 700px;

  overflow: hidden;

  line-height: 280px;

  margin-left: 300px;

  height: 280px;

}

.xdev_animate_second_scroll span {

  font-size: 270px;

  position: absolute;

}

.xdev_animate_third {

  display: none;

  width: 100%;

  flex: 1;

  height: 100%;

}

.xdev_animate_third_container {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 24px;

  font-family: Microsoft YaHei, Microsoft YaHei;

  font-weight: 400;

  color: #ffffff;

  line-height: 36px;

  position: relative;

}

.xdev_swiper_slide_mask_left_time {

  position: absolute;

  top:50%;

  transform: translateY(-50%);

  left: 20px;

  animation: leftAnimation 1s linear;

}

.xdev_swiper_slide_mask_right_time {

  position: absolute;

  top:50%;

  transform: translateY(-50%);

  right: 20px;

  animation: rightAnimation 1s linear;

}

.xdev_swiper_slide_mask_left_text {

  position: absolute;

  left: 50%;

  top: 46%;

  transform: translate(-50%);

  animation: textAnimation 1s ease-in;

}

.xdev_swiper_slide_mask_left_line {

  display: none;

}

/* 提示 */

.xdev_swiper_slide_mask_tips {

  font-size: 16px;

  font-family: Microsoft YaHei, Microsoft YaHei;

  font-weight: 400;

  color: #ffffff;

  line-height: 26px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}

.xdev_swiper_slide_mask_tips_icon {

  display: inline-block;

  margin-top: 15px;

  width: 20px;

  height: auto;

}

/* 时间进度 */

.xdev_progress_container {

  width: 100%;

  position: sticky;

  top: 90px;

  z-index: 10;

  background-color: #ffffff;

}

.xdev_progress_container_content {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.xdev_progress_container_content_left,

.xdev_progress_container_content_right {

  display: inline-block;

  flex: 1;

}

.xdev_progress_container_content_left {

  height: 8px;

  background-color: #00559b;

}

.xdev_progress_container_content_right {

  height: 8px;

  background-color: #f1f8fd;

}

.xdev_progress_bar_container {

  width: 1440px;

  height: 8px;

  background: #f1f8fd;

}

#progress-bar {

  height: 8px;

  background-color: #00559b;

  transition: width 2s; /* 添加过渡效果 */

}

#years {

  width: 100%;

  max-width: 1440px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 15px 0;

  box-sizing: border-box;

}

#years li {

  /* width: 25%; */

  text-align: center;

  font-size: 14px;

  font-family: Alimama FangYuanTi VF-Medium, Alimama FangYuanTi VF-Medium;

  font-weight: normal;

  color: #182b62;

  line-height: 24px;

/*  cursor: pointer;*/

}

#MOBILE{

  display: none;

}

/* 内容结束 */

/* ================================== 兼容 css ================================== */

@media all and (max-width: 1080px){

  #WEB{

    display: none;

  }

  #MOBILE{

    display: block;

  }

  .xdev_swiper_slide_mask_nav{

    display: none;

  }

  .xdev_bg{

    right:20px;

  }

  .xdev_bg_img{

    width:500px;

  }

  .xdev_navigation_first {

    height: 60px;

    line-height: 60px;

  }

  .xdev_navigation_second {

    display: none;

  }

  .xdev_container {

    /* padding-top: 60px; */

  }

  .xdev_progress_container{

    display: none;

  }

  .xdev_animate_third_container{

    font-size: 14px;

    line-height: 24px;

  }

  .xdev_swiper_slide_mask_time_item {

    font-size: 60px;

    line-height: 120px;

  }

  .xdev_animate_second_scroll {

    width: 400px;

    line-height: 110px;

    margin-left: 300px;

    height: 110px;

  }

  .xdev_animate_second_scroll span {

    font-size: 110px;

    position: absolute;

  }

}

/* ================================== Mobile css ================================== */

@media all and (max-width: 766px) {

  #WEB{

    display: none;

  }

  #MOBILE{

    display: block;

  }

  .xdev_swiper_home_banner{

    height: auto;

  }

  .xdev_swiper_slide_mask_content{

    padding: 0;

  }

  .xdev_navigation_first {

    height: 60px;

    line-height: 60px;

  }

  .xdev_navigation_second {

    display: none;

  }

  .xdev_swiper_slide_mask_nav {

    display: none;

  }

  .xdev_swiper_slide_mask_tips {

    display: none;

  }

  .xdev_container {

    /* padding-top: 60px; */

  }

  .xdev_bg {

    right: 20px;

  }

  .xdev_bg_img {

    width: 300px;

  }

  .xdev_swiper_home_banner_img {

    height: 312px;

    width: 100%;

    object-fit: cover;

  }

  .xdev_swiper_slide_mask_time {

    font-size: 16px;

    line-height: 24px;

  }

  .xdev_animate_third_container{

    font-size: 14px;

    line-height: 24px;

  }

  .xdev_swiper_slide_mask_time_item {

    font-size: 30px;

    line-height: 50px;

  }

  .xdev_animate_second_scroll {

    width: 150px;

    line-height: 80px;

    margin-left: 300px;

    height: 80px;

  }

  .xdev_animate_second_scroll span {

    font-size: 54px;

    position: absolute;

  }

  .xdev_animate_second_left {

    left: 50px;

    animation: secondLeftMobileAnimation 2s linear;

  }

  .xdev_animate_second_right {

    right: 50px;

    animation: secondRightMobileAnimation 2s linear;

  }

  .xdev_swiper_slide_mask_left_text {

    width: 80%;

    top: 60%;

    transform: translateX(-50%);

  }

  .xdev_swiper_slide_mask_left_line {

    display: block;

    width: 50px;

    height: 2px;

    background-color: #ffffff;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

  }

}



/* 动画 */

/* 背景图缩小 */

@keyframes scaleDown {

  0% {

    transform: scale(1.2);

  }

  100% {

    transform: scale(1);

  }

}

@keyframes fadeInAndScale {

  0% {

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%) scale(1);

    opacity: 0;

  }

  100% {

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%) scale(1.8);

    opacity: 1;

  }

}



@keyframes secondLeftAnimation {

  0% {

    top:50%;

    left: 50%;

    transform: translate(-50%,-50%) scale(1.8) ;

  }



  100% {

    top:50%;

    left: 200px;

    transform:  translateY(-50%) scale(1.8);

  }

}

@keyframes secondRightAnimation {

  0% {

    top:50%;

    transform:  translate(50%,-50%) scale(1.8);

    right: 50%;

  }



  100% {

    top:50%;

    transform:  translateY(-50%) scale(1.8);

    right: 200px;

  }

}

@keyframes secondLeftMobileAnimation {

  0% {

    top:50%;

    left: 50%;

    transform: translate(-50%,-50%) scale(1.8) ;

  }



  100% {

    top:50%;

    left: 50px;

    transform:  translateY(-50%) scale(1.8);

  }

}

@keyframes secondRightMobileAnimation {

  0% {

    top:50%;

    transform:  translate(50%,-50%) scale(1.8);

    right: 50%;

  }



  100% {

    top:50%;

    transform:  translateY(-50%) scale(1.8);

    right: 50px;

  }

}

@keyframes leftAnimation {

  0% {

    transform:  translateY(-50%) scale(1.8);

    left: 50px;

  }



  100% {

    transform:  translateY(-50%) scale(1);

    left: 20px;

  }

}



@keyframes rightAnimation {

  0% {

    transform:  translateY(-50%) scale(1.8);

    right: 50px;

  }



  100% {

    transform:  translateY(-50%) scale(1);

    right: 20px;

  }

}

@keyframes textAnimation {

  0% {

    opacity: 0;

  }



  100% {

    opacity: 1;

  }

}

