* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 上面这个定义的东西应该去搞清楚 */

nav {
    display: grid;
    grid-template-columns: 5% 1fr 40% 1fr 1fr 1fr 1fr 5%;
    min-height: 7vh;
    color:white;
    justify-items: flex-end;
    align-items: center;
}
/* 这里的对齐方式后面应该还是需要修改的 */

#logon {
    color:white;
    grid-column:2/3;
    font-size:24px;
    font-weight: 320;
}

#guide1 {
    grid-column: 4/5;
}

.guiden{
    font-size: 16px;
    font-weight: 350;
}

.sptline0 {
    background: rgb(255, 255, 255, 0.8);
    width:90%;
    height:6px;
    margin-bottom:1rem;
    margin-left: auto;
    margin-right: auto;
}

section {
    display: flex;
    justify-content: center;
    /* height:80vh; */
    /* margin-left: auto;
    margin-right: auto; */
  }

.hero {
    position:relative;
}

.hero img {
    width:100%;
    height:60%;
    object-fit: cover;
}

.headline {
    position: absolute;
    top:63%;
    left:7%;
    font-size: 5rem;
    font-weight:450;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    transform: translate(0,0);
    /* 这里其实并没有完全的明白 */
    color:white;
    z-index:2;
}

.slider {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:350vh;
    background: linear-gradient(to left,#c5ed90,#3fd9e4);
    z-index: -1;
}

.sptline1 {
    background: rgb(255, 255, 255, 0.8);
    /* background: linear-gradient(to left,#3fd9e4,#c5ed90); */
    width:90%;
    height:6px;
    margin-top:1rem;
    margin-bottom:2rem;
    margin-left: auto;
    margin-right: auto;
}

.slimit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width:90%;
    margin-top:1rem;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
  }

.aboutpart {
    width:100%;
    display: grid;
    grid-template-columns: 4fr 6fr ;
    grid-gap:2rem;
    grid-auto-rows: minmax(50px,auto);
    /* 这一句之后应该需要推敲一下 */
    color:white;
    /* justify-items: flex-start;
    align-items: center; */
}

#selfp {
    width: 100%;
    height: 100%;
}

.aboutintro {
    display: grid;
    color:white;
    /* justify-items: flex-start; */
}

.aboutintro h2 {
    font-size: 6rem;
    font-weight:350;
    text-indent: 2rem;
    /* background: rgb(159, 244, 255); */
    background: linear-gradient(to right,rgb(159, 244, 255, 0.8),rgb(255, 255, 255, 0.2));
}

.introcontent {
    display: grid;
    grid-template-columns: 4fr 6fr ;
}

#introcard-adjust {
    grid-column: 2/3;
}

.introcard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:2rem;
    justify-items: center;
    align-items:center;
}

.introcard div {
    width:100%;
    height:100%;
    font-size: 1.5rem;
    font-weight: 300;
    text-indent:1rem;
}

#squ1 {
    background: rgb(101, 233, 189);
}

#squ2 {
    background: rgb(87, 228, 146);
}

#squ3 {
    background: rgb(65, 219, 194);
}

#squ4 {
    background: rgb(131, 228, 152);
}

.SW-intro {
    width:100%;
    font-size: 6rem;
    font-weight:350;
    color: white;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:3rem;
    /* background:rgb(206, 241, 149); */
    background: linear-gradient(to right,rgb(206, 241, 149, 1),rgb(255, 255, 255, 0.2));
}

.wpart {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap:5rem;
    margin-bottom: 1rem;
}

.cpart {
    position: relative;
    /* margin-bottom:1rem; */
}

.cpart::after {
    content:"";
    background: white;
    width: 100%;
    height:100%;
    position:absolute;
    left:0;
    opacity:0.2;
    top:0;
 }  
 
.cpart img {
    aspect-ratio: 1;
    object-fit: cover;
    width:100%;
    margin-bottom: 1rem;
}

.cpart h3 {
    color:white;
}

.cpart p {
    color:white;
}

.expro {
    text-indent:1rem;
    font-weight:350;
}

.excon {
    font-weight: 280;
    text-indent:2rem;
}

.flimit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width:90%;
    margin-top:2rem;
    margin-left: auto;
    margin-right: auto;
    /* background: wheat; */
    background: linear-gradient(to bottom,#c5ed90,#3fd9e4);
  }

.Contact-intro {
    font-size: 6rem;
    font-weight:500;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: white;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:3rem;
    margin-top:1rem;
}

.contactwords {
    font-size: 1rem;
    font-weight:350;
    color: white;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:0.5rem;
}

.sptline2 {
    background: rgb(255, 255, 255, 0.8);
    width:90%;
    height:0.25rem;
    margin-bottom:1rem;
    margin-left: auto;
    margin-right: auto;
}

.imagepart {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap:2rem;
    justify-items: center;
    align-items:center;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.imagepart img {
    aspect-ratio: 1;
    object-fit: cover;
    width:6rem;
    margin-bottom:1rem;
}

.elimit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width:100%;
    margin-top:2rem;
    /* margin-bottom: 2rem; */
    /* margin-left: auto;
    margin-right: auto; */
    /* background: white; */
    background: linear-gradient(to left,#c5ed90,#3fd9e4);
  }

.sptline {
    background: linear-gradient(to right,rgb(197, 237, 144, 0.3),rgb()63, 217, 228, 0.9);
    width:100%;
    height:0.25rem;
}

 .endline {
    display: grid;
    grid-template-columns: 5% 1fr 20% 1fr 5%;
    min-height: 8vh;
    color:white;
    justify-items: flex-start;
    align-items: center;
}

#logon2 {
    grid-column:2/3;
    font-size:16px;
    font-weight: 300;
}

#guidenf {
    grid-column:4/5;
    font-size:16px;
    font-weight: 300;
}