@keyframes silkScroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }

#cp-box .cp-box-title{
	font-size: 50px;
	color: #fff;
	text-align: center;
	opacity: 0.8;
	position: absolute;
	top: 150px;
	left: 50%;
	transform: translate(-50%);
}
#cp-box{
      width: 100%;
	  height: 100vh;
	  min-height: 800px;
      position: relative;
    }
	
	 #cp-box .list,#cp-box .list li {
		 width: 100%;
		 height: 100vh;
		 min-height: 100vh;
	 }
	
    #cp-box .list li{
      position: absolute;
      top: 0;
      left: 0;
      display: none;
	  
    }
	#cp-box .list li img{
		width:100%;
		
	}
    #cp-box .list li.current{
      display: block;
	  /* white-space: nowrap;
	  animation: silkScroll 1s linear infinite; */
    }
    #cp-box .count{
      position: absolute;
      left: 10px;
      bottom: 10px;
    }
    #cp-box .count li{
      float: left;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fa0;
      text-align: center;
      line-height: 20px;
      margin-left: 10px;
      color: #fff;
      opacity: 0.8;
      cursor: pointer;
	  transition: width 2s;
    }
    #cp-box .count li.current{
      background-color: #f60;
      opacity: 1;
    }
    #cp-box .btn{
      position: absolute;
      bottom:10px;
      right: 15px;
    }
    
    #cp-box .btn li{
      width: 50px;
      height: 50px;
      background-color: #ccc;
      float: right;
      margin-left: 15px; 
      opacity: 0.8;
      cursor: pointer;
      text-align: center;
      line-height: 50px;
    }

body  .main-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 200ms ease;
  background: var(--background-modal-color);
  height: 120px;
  min-width: 100vw;
  padding: 0 calc(155 / 1920 * 100vw);
  padding: 0 var(--padding-lr) 50px;
  flex-grow: 1;
  position: absolute;
  bottom: 0px;
}

body  .main-container .steps-container {
  box-sizing: border-box;
  padding: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
body  .main-container .steps-container .step {
 box-sizing: border-box;
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
  flex-grow: 0;
  height: 10px;
  width: 10px;
  border: 4px solid #f1f4f8;
  border-radius: 50%;
  background-color: #f1f4f8;
  transition: background-color 3s ease-in-out;
}
body  .main-container .steps-container .step.current {
	background-color: #fff;
}
body  .main-container .steps-container .step.current .label {
	color: #fff;
}
body  .main-container .steps-container .step.current .icon {
	opacity: 1;
}
body .main-container .steps-container .step .preloader, body .main-container .steps-container .step svg {
  display: none;
}
body  .main-container .steps-container .step.completed {
  width: 12px;
    height: 12px;
    background: #FFF;
  border: none;
}
body  .main-container .steps-container .step.completed svg {
  transition: all 200ms ease;
  display: block;
  height: 10px;
  width: 10px;
  fill: var(--color-checkmark-completed);
}
body .main-container .steps-container .step.in-progress {
  width: 18px;
  height: 18px;
  background: var(--color-in-progress);
  border: none;
}
body .main-container .steps-container .step.in-progress .preloader {
  display: block;
  height: 10px;
  width: 10px;
  border: 2px solid #adb0b5;
  border-radius: 50%;
  border-left-color: transparent;
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
body .main-container .steps-container .step .label {
  position: absolute;
  top: 30px;
  filter: none;
  z-index: 2000;
  color: var(--color-label-default);
  transition: all 200ms ease;
  font-weight: 500;
  width: 80px;
  padding-left: 0px;
  text-align: center;
  color: #adb0b5;
}
body .main-container .steps-container .step .label.completed {
  color: #adb0b5;
}
body .main-container .steps-container .step .label.loading {
  color: var(--color-label-loading);
}
body .main-container .steps-container .step .icon {
  font-size: 40px;
  position: absolute;
  top: -90px;
  color: var(--color-icon-default);
  transition: color 200ms ease;
  opacity: 0.5;
  width: 60px;
}
body .main-container .steps-container .step .icon.completed {
  color: var(--color-icon-completed);
}
body .main-container .steps-container .step .icon.in-progress {
  color: var(--color-in-progress);
}
body .main-container .steps-container .line {
	box-sizing: border-box;
  height: 1px;
  flex-grow: 1;
  max-width: 250px;
  border: 1px solid #979a9c;
  transition: border-color 5s infinite;
  position:relative;
}
body .main-container .steps-container .line .loading{
	width: 0px; height: 100%; 
	/* background: #fff; */
	height: 1px;
	transition: width 3s ease-in-out;
	border: 0px solid #fff;
	position:absolute;
	top:-1px;
	left:0px;
}

body .main-container .steps-container .step.current + .line .loading{
	width: 100%;
	border: 1px solid #fff;
}
@keyframes p1 {
	100% {border: 2px dashed #fff}
}
@keyframes colorChange {
  0% {
    border-color: red;
  }
  50% {
    border-color: blue;
  }
  100% {
    border-color: green;
  }
}

body .main-container .steps-container .line.next-step-uncomplete {
  background: linear-gradient(to right, var(--color-step-completed), var(--color-timeline-default));
}
body .main-container .steps-container .line.next-step-in-progress {
  background: linear-gradient(to right, var(--color-step-completed), var(--color-in-progress));
}
body .main-container .steps-container .line.prev-step-in-progress {
  background: linear-gradient(to right, var(--color-in-progress), var(--color-timeline-default));
}

@media only screen and (max-width: 1536px){
	body  .main-container{
		bottom: 270px;
	}
}
@media screen and (min-width: 1921px) {
	#cp-box{
		height: 1080px;
	}
	#cp-box .list,#cp-box .list li {
		height: 1080px;
	}
}


@media screen and (max-width: 750px) {
	  #cp-box .list, #cp-box .list li {
	    /* min-height: 400px; */
	    /* height: 400px; */
	    /* max-height: 400px; */
	    min-height: 600px;
	    height: 600px;
	    max-height: 600px;
	  }
	  #cp-box {
	    /* height: 400px; */
	    /* max-height: 400px; */
	    height: 600px;
	    max-height: 600px;
	  }
	
	
	#cp-box .cp-box-title {
	  /* font-size: 50px; */
	  /* top: 150px; */
	  font-size: var(--max-font-size);
	  top: 0px;
	  transform: translate(-50%);
	  padding-top: 100px;
	}
	
	#cp-box {
	  /* height: 100vh; */
	  /* min-height: 800px; */
	  height: 600px;
	  min-height: 600px;
	}
	
	body .main-container {
	  /* bottom: 270px; */
	  bottom: 20px;
	}
	
	
	/* timeline.css | http://localhost.gj.com/assets/index/css/timeline.css?v=1711199316 */
	
	body .main-container .steps-container .step .icon {
	  /* font-size: 40px; */
	  /* top: -90px; */
	  /* width: 60px; */
	  font-size: 12px;
	  top: -60px;
	  width: 35px;
	}
	
	body .main-container .steps-container .step .label {
	  /* top: 30px; */
	  /* width: 80px; */
	  top: 20px;
	  width: 60px;
	  font-size: 14px;
	}
	
	body .main-container .steps-container {
	  /* padding: 40px; */
	  padding: 10px;
	}
	
	/* timeline.css | http://localhost.gj.com/assets/index/css/timeline.css?v=1711198647 */
	
	#cp-box .list li img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  object-position: center center;
	  transition: transform 10s;
	  transform-origin: 60% 50%;
	}
	body .main-container .steps-container .step{
		height: 5px;
		width: 5px;
	}
}

@media screen and (max-height: 768px){
	body .main-container {
	    bottom: 100px;
	}
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*：此代码只作为演示用,不是源代码。源码地址唯一出处: http://www.bootstrapmb.com/item/4810(这个说明仅在演示里会看到,下载的源码里没有)*/