/* comments in css are done like this */
/* uncomment the properties below to see how they effect the text in the html file */
/* then try them in combinations and altering their values */

/* these styles are set up, so that everything will be full width, with a small margin, on mobile devices */

/* how do you change the background color?? */
/* uncomment the line below */
/* but choose this colour meaningfully */

body{
  /* background-color: #eeee99; */
}

img{
  width: 100%;
  margin-top: 20px;
}



h1{
  /* we use the google font specified font family */
  font-family: 'Work Sans', sans-serif;
  color: #000000; /* you can use the adobe color wheel to get the values of "HEX" colors */
  font-size: 65px;
  margin: 20px;
}

h2{
  /* we use the google font specified font family */
  font-family: 'Work Sans', sans-serif;
  color: #000000; /* you can use the adobe color wheel to get the values of "HEX" colors */
  font-size: 35px;
  margin: 20px;
}

/* a centered heading instead */

/*
h1{
  font-family: 'Work Sans', sans-serif;
  color: #000000;
  font-size: 65px;
  max-width: 600px;  
  margin-left: 20px;
  margin-right:20px;
  margin-left: auto;
  margin-right: auto;
}
*/

/* these styles will effect links */
a{
  color: #0000ff;
  text-decoration: underline;
}

/* and this will effect the paragraph 'p' elements */
p{
  font-size: 20px;
  color: #888888;
  /* we can also set the width of a box */
  max-width: 900px;
  /* and the margins on each side of the box */
  margin-top: 20px;
  margin-bottom: 20px;
    
  /* use margin-left and margin-right to control where the paragraph sits */
  /* this below code gives it a bit of padding to match the <h1> but it alighs to the left */
  margin-left: 20px;
  margin-right:20px;
    
  /* but if you un-comment the below, paragraphs will center align */
  /* maybe you then want to change the css for the <h1> to match ? */
  /*
  margin-left: auto;
  margin-right: auto;
  */
}

/* this is the class of the 'div' that all of the content sits in */

.container{
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: 60px;
}

.top{
    width: 10%;

    /* 设置固定定位 */
    position: fixed;
    top: 0;
    left: 0;
    height: 200px;
    background-color: skyblue;

    /* 设置水平居中 */
    text-align: left;

    /* 该盒子位于最上层 不要被其它盒子覆盖 */
    z-index: 3;
}
/* 轮播容器 */
:root {
  /* 轮播的条数，可以覆盖 */
  --s: 6;
  /* 单个条目的宽度 */
  --w: 900;
  /* 单次动画的时长 */
  --speed: 3s;
}
.carousel {
  margin: auto;
  width: calc(var(--w) * 1px);
  height: 605px;
  line-height: 600px;
  border-radius: 4px;
  border: 1px solid darkgray;
  overflow: hidden;
}

.carousel-ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}

.carousel-ul li {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  list-style: none;
  animation: liMove calc(var(--speed)) infinite;
}

.carouselul li img {
  width: 100%;
  height: 100%;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(calc(var(--s) * var(--w) * -1px), 0);
  }
}

@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }

  80%,
  100% {
    transform: translate(calc(var(--w) * -1px), 0);
  }
}

.development img {
    display: inline-block;
    width: 20%; /* 根据需要调整 */
    margin: 1%; /* 为了显示间距 */
    background-color: #f0f0f0; /* 为了看得更清楚 */
    text-align: center; /* 文本居中显示 */
}

.process1 {
    display: inline-block;
    width: 30%; /* 根据需要调整 */
    margin: 1%; /* 为了显示间距 */
    background-color: #f0f0f0; /* 为了看得更清楚 */
    text-align: center; /* 文本居中显示 */
}

.process2{
    outline: 1px solid green;
}

.process2 img {
    width: 100%; 
    height: auto;
}

.pictext {
  width: auto;
  text-align: center;
  background-color: azure;
}