/* css */
body {
    margin: 30px 0;
    padding: 0;
    font-size: 16px;
    box-sizing: border-box;
}

.img-box,
.text-box,
.download-box {
    width: 80%;
    margin: auto;
}

h2 {
    text-align: center;
}

h3 {
    margin: 10px 0 10px 40px;
}

.text-p,
.introduce-box {
    margin: 0 100px;
}

h5 {
    margin-bottom: 10px;
}

p {
    margin: 8px 0;
}

a {
    text-decoration: none;
}

.download-box {
    display: flex;
    margin-top: 20px;
}

.down-div {
    margin: 0 10px;
}

.first-line {
    text-indent: 1em;
}

.framework-box {
    width: 70%;
    margin: auto;
}

.introduce-img {
    width: 300px;
    height: 200px;
}

.team-box {
    width: 400px;
    height: 300px;
}

.laboratory-img,
.team-img,
.facilities-img,
.explain-img,
.img-introduce {
    width: 100%;
    height: 100%;
}

.facilities-box {
    display: flex;
}

.facilities-div {
    flex: 1;
}

.facilities-middle {
    margin: 0 10px;
}

.facilities-one {
    margin-right: 10px;
}

.bottom-box {
    margin-bottom: 60px;
}

.explain-box {
    position: relative;
    width: 65%;
    height: 100%;
    margin: auto;
}

.explain-text {
    position: absolute;
    top: 18%;
}

.indent-text {
    text-indent: 2em;
    line-height: 30px;
}

.bottom-text {
    margin: 30px 100px;
    text-align: right;
}

.container {
    width: 65%;
    margin: auto;
}

.container-box,
.container-one {
    position: relative;
}

.triangle-bottomleft,
.triangle-bottomleft-one,
.triangle-bottomright,
.triangle-bottomright-one,
.triangle-bottomleft-two,
.triangle-bottomleft-three {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
}

.introduce-div {
    height: 70px;
    width: 608px;
    background-color: #b7c3b5;
    box-shadow: 0 8px #b7c3b5;
}

.title-box {
    position: absolute;
    top: 0px;
    left: 8px;
    height: 70px;
    width: 600px;
    background-color: #e0e5df;
}

.triangle-bottomleft {
    border-bottom: 70px solid #b7c3b5;
    border-right: 36px solid transparent;
}

.triangle-bottomleft-one {
    border-bottom: 80px solid #fff;
    border-right: 40px solid transparent;
}

.laboratory-box {
    display: flex;
    margin-left: 60px;
}

.img-left,
.img-right {
    width: 260px;
    height: 200px;
}

.text-laboratory {
    margin: 20px 0 0 30px;
}

.introduce-div-one {
    position: absolute;
    top: 0px;
    left: 0;
    height: 50px;
    width: 208px;
    background-color: #b7c3b5;
    box-shadow: 0px 8px #b7c3b5;
}

.title-box-one {
    position: absolute;
    top: 0px;
    right: 8px;
    height: 50px;
    width: 200px;
    background-color: #e0e5df;
}

.triangle-bottomright {
    right: 0;
    border-bottom: 50px solid #b7c3b5;
    border-left: 30px solid transparent;
}

.triangle-bottomright-one {
    right: 0;
    border-bottom: 60px solid #fff;
    border-left: 35px solid transparent;
}

.personnel-one,
.personnel-two-p,
.personnel-three-p,
.introduce-div,
.introduce-div-two {
    position: absolute;
    top: 0;
    right: 0;
}

.personnel-one {
    display: flex;
}

.personnel-one-p {
    margin: 100px 30px 0 60px;
}

.container-two,
.container-three {
    position: relative;
    margin-left: 160px;
    height: 260px;
    background-color: #e0e5df;
}

.container-two-img,
.container-three-img {
    position: absolute;
    top: 0;
    left: -100px;
    width: 180px;
    height: 260px;
    border-radius: 60%;
}

.personnel-two-p {
    margin: 20px 20px 20px 130px;
}

.personnel-three-p {
    margin: 40px 20px 40px 130px;
}

.introduce-div-two {
    height: 50px;
    width: 308px;
    background-color: #b7c3b5;
    box-shadow: 0 8px #b7c3b5;
}

.title-box-two {
    position: absolute;
    top: 0px;
    left: 8px;
    height: 50px;
    width: 300px;
    background-color: #e0e5df;
}

.triangle-bottomleft-two {
    border-bottom: 50px solid #b7c3b5;
    border-right: 30px solid transparent;
}

.triangle-bottomleft-three {
    border-bottom: 60px solid #fff;
    border-right: 35px solid transparent;
}

.introduce-div-two-text,
.research-direction {
    margin-left: 60px;
}

.indent-style {
    text-indent: 1.5em;
}