* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


.div_page_engineering {
    width: 100vw;
    height: 1500vh;
    background-color: #EDFAFF;
    /* flex: 0 0 100%; */
    /* overflow: hidden; */
}
.div_page_engineering img {
    width: 100%;
    height: auto;
    overflow: hidden;
}
.div_page_engineering svg {
    width: 100%;
    height: 100%;
}
.div_page_engineering .div_content {
    position: absolute;
    width: 59.31vw;
    height: 63.21vh;
    left: 29.31vw;
    top: 18.83vh;
    flex-shrink: 0;
    border-radius: 20px;
    opacity: 0.8;
    background: #FFF;
    z-index: 5;
}
.div_page_engineering .div_content_container {
    width: 53.48vw;
    height: 100%;
    left: 2.5vw;
    position: absolute;
}
.div_page_engineering .div_scroll_container {
    width: 100%;
    height: 100%;
    display: flex;
    will-change: transform;
}
.div_page_engineering .div_horizontal_scroll {
    height: 100vh;
    width: max-content;
    display: flex;
    flex-direction: row;
}
.pin-spacer {
    z-index: 1 !important;
}


.div_page_engineering .div_title {
    position: absolute;
    width: 82.36vw;
    height: 5.56vh;
    left: 6.04vw;
    top: 4.73vh;
    z-index: 9999;
    transform: translateZ(100);
    will-change: transform;
}
.div_page_engineering .title {
    color: #16576B;
    font-family: "HarmonyOS Sans SC";
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.9px;
}
.div_page_engineering .subtitle {
    color: #1F7B95;
    font-family: "HarmonyOS Sans SC";
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    letter-spacing: 1.5px;
}


.div_page_engineering .div_arrows {
    position: absolute;
    width: 27.36vw;
    height: 61vh;
    left: 6vw;
    top: 20vh;
    z-index: 1;
}
.div_page_engineering .div_arrow1 {
    width: 10.35vw;
    position: absolute;
    left: 2vw;
    top: 14vh;
    z-index: 1;
}
.div_page_engineering .div_arrow2 {
    width: 10.35vw;
    position: absolute;
    left: 10vw;
    top: 19vh;
    z-index: 1;
    transform: rotate(90deg);
}
.div_page_engineering .div_arrow3 {
    width: 10.35vw;
    position: absolute;
    left: 7vw;
    top: 33vh;
    z-index: 1;
    transform: rotate(180deg);
}
.div_page_engineering .div_arrow4 {
    width: 10.35vw;
    position: absolute;
    left: -1vw;
    top: 28vh;
    z-index: 1;
    transform: rotate(270deg);
}
.div_page_engineering .arrow {
    fill: #CDEFF2;
}
/* .div_page_engineering .arrow:hover {
    transform: scale(1.1);
} */
.div_page_engineering .div_arrow_text1 {
    width: 13.15vw;
    position: absolute;
    left: 3.7vw;
    top: 15.5vh;
    z-index: 1;
    pointer-events: none;
}
.div_page_engineering .div_arrow_text2 {
    width: 3.28vw;
    position: absolute;
    left: 12.4vw;
    top: 38vh;
    z-index: 1;
    pointer-events: none;
}
.div_page_engineering .div_arrow_text3 {
    width: 4.28vw;
    position: absolute;
    left: 1.9vw;
    top: 34vh;
    z-index: 1;
    pointer-events: none;
}


.div_page_engineering .div_trees {
    width: 12.28vw;
    position: absolute;
    left: 9.9vw;
    top: 42vh;
    z-index: 1;
    pointer-events: none;
}
.div_page_engineering .div_tree {
    position: absolute;
    width: 100%;
}
.div_page_engineering .div_ground {
    position: absolute;
    width: 100%;
    top: 2.6vh;
}
.div_page_engineering .div_scissor {
    position: absolute;
    width: 100%;
    left: -2.6vw;
}


.div_page_engineering .div_coral1 {
    position: fixed;
    transform: rotate(75deg);
    width: 20.82vw;
    height: auto;
    left: -5.96vw;
    top: 1.73vh;
    z-index: 1;
}
.div_page_engineering .div_coral2 {
    opacity: 0.7;
    position: fixed;
    transform: rotate(87deg);
    width: 22.78vw;
    height: auto;
    left: 5.04vw;
    top: -8.27vh;
    z-index: 1;
}
.div_page_engineering .div_coral3 {
    position: fixed;
    transform: rotate(87deg);
    width: 14.38vw;
    height: auto;
    left: 22.04vw;
    top: -11.27vh;
    z-index: 1;
}
.div_page_engineering .div_coral4 {
    position: fixed;
    transform: rotate(106deg);
    width: 14.79vw;
    height: auto;
    left: 33.04vw;
    top: -3.27vh;
    opacity: 0.5;
    z-index: 1;
}
.div_page_engineering .div_coral5 {
    transform: scaleX(-1) rotate(292deg);
    position: fixed;
    width: 24.56vw;
    height: auto;
    left: 48.04vw;
    top: 81.73vh;
    z-index: 1;
}
.div_page_engineering .div_coral6 {
    opacity: 0.7;
    transform: rotate(347deg);
    position: fixed;
    width: 21.25vw;
    height: auto;
    left: 61.04vw;
    top: 73.73vh;
    z-index: 1;
}
.div_page_engineering .div_coral7 {
    transform: rotate(9deg);
    position: fixed;
    width: 16.97vw;
    height: auto;
    left: 78.04vw;
    top: 73.73vh;
    z-index: 1;
}
.div_page_engineering .div_coral8 {
    opacity: 0.5;
    transform: rotate(19deg);
    position: fixed;
    width: 16.04vw;
    height: auto;
    left: 89.04vw;
    top: 61.73vh;
    z-index: 1;
}

.div_page_engineering .title_text{
    color: #1F7B95;
    font-family: "HarmonyOS Sans SC";
    font-size: 32px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    letter-spacing: 1.6px;
}
.div_page_engineering .div_title_inner {
    width: 100%;
    height: 12%;
    margin-top: 2%;
    margin-bottom: 2%;
}
.div_page_engineering .div_title_image {
    position: absolute;
    width: 5.42vw;
    height: 9.63vh;
    left: -1vw;
    top: 1vh;
}
.div_page_engineering .div_title_text {
    position: absolute;
    width: 5.42vw;
    height: auto;
    left: 4vw;
    top: 5vh;
}
.div_page_engineering .svg_container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.div_page_engineering svg.papper, .div_page_engineering svg.wrench {
    margin-left: 16%;
    margin-top: 16%;
    width: 73%;
}
.div_page_engineering .line {
    background: #B8DFE7;
    width: 100%;
    height: 0.59%;
}
.div_page_engineering .div_page2,.div_page_engineering .div_page4_1,.div_page_engineering .div_page5_1,.div_page_engineering .div_page5_2,.div_page_engineering .div_page1,.div_page_engineering .div_page3,.div_page_engineering .div_page4_2 {
    position: relative;
    width: 100vw;
    height: 100vh;
}
.div_page_engineering .div_Design,.div_page_engineering .div_Build,.div_page_engineering .div_Test,.div_page_engineering .div_Learn {
    /* display: none; */
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 1;
}
.div_page_engineering .content_text {
    color: #27687A;
    font-family: "HarmonyOS Sans SC";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 1.1px;
}
.div_page_engineering .note_text {
    color: #4494AA;
    font-family: "HarmonyOS Sans SC";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.9px;
}
.div_page_engineering p.text_center {
    text-align: center;
}
.div_page_engineering .div_content_inner {
    width: 100%;
    height: 75%;
    margin-top: 2%;
}
.div_page_engineering .div_page2 {
    display: block;
}
.div_page_engineering .div_page2 .div_Design {
    /* display: block; */
}
.div_page_engineering .div_page2 .div_Build {
    display: block;
}
.div_page_engineering .div_table {
    width: 100%;
    height: auto;
}
.div_page_engineering .div_page2 .div_Build .div_images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    row-gap: 0vh;
    column-gap: 4.79vw;
}
.div_page_engineering .div_page2 .div_Build .div_images .div_image_text {
    display: flex;
}
.div_page_engineering .div_page2 .div_Build .div_images .div_image_text .div_image {
    width: 9.79vw;
}
.div_page_engineering .div_page2 .div_Test {
}
.div_page_engineering .div_page2 .div_Test .div_images {
    display: flex;
    column-gap: 1.48vw;
    margin-top: 1vh;
    justify-content: center;
}
.div_page_engineering .div_page2 .div_Test .div_images .div_image {
    width: 12.15vw;
}
.div_page_engineering .div_page2 .div_Learn {
}

.div_page_engineering .div_page4_1 {
}
.div_page_engineering .div_page4_1 .div_Design {
}
.div_page_engineering .div_page4_1 .div_Build {
}
.div_page_engineering .div_page4_1 .div_Test {
}
.div_page_engineering .div_page4_1 .div_Test .div_image {
    width: 17.99vw;
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    margin-left: auto;
    margin-right: auto;
}
.div_page_engineering .div_page4_1 .div_Learn {
}

.div_page_engineering .div_page5_1 {
}
.div_page_engineering .div_page5_1 .div_Design {
}
.div_page_engineering .div_page5_1 .div_Build {
}
.div_page_engineering .div_page5_1 .div_Test {
}
.div_page_engineering .div_page5_1 .div_Test .div_image {
    width: 22.99vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
}
.div_page_engineering .div_page5_1 .div_Learn {
}

.div_page_engineering .div_page5_2 {
    display: block;
}
.div_page_engineering .div_page5_2 .div_Design {
}
.div_page_engineering .div_page5_2 .div_Build {
}
.div_page_engineering .div_page5_2 .div_Test {
}
.div_page_engineering .div_page5_2 .div_Test .div_image_text {
    display: flex;
}
.div_page_engineering .div_page5_2 .div_Test .div_image_text .div_image {
    width: 23.68vw;
    margin-left: 3.89vw;
}
.div_page_engineering .div_page5_2 .div_Test .div_image_text .div_text {
    margin-top: 18.86vh;
    width: 24.31vw;
}
.div_page_engineering .div_page5_2 .div_Learn {
}

.div_page_engineering .div_circles {
    position: fixed;
    width: 36.72vw;
    height: max-content;
    top: 86.19vh;
    left: 9.02vw;
    display: flex;
    opacity: 0;
    justify-content: space-between;
    z-index: 2;
}
.div_page_engineering .div_circle.big{
    width: 1.51vw
}
.div_page_engineering .div_circle.small {
    width: 1.01vw
}
.div_page_engineering .div_circle:hover {
    transform: scale(1.2);
}
.div_page_engineering .circle {
    fill: #E3E3E3;
}