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

.div_page_dbtl {
    width: 100vw;
    height: 1300vh;
    background-color: #EDFAFF;
}
.div_page_dbtl img {
    width: 100%;
    height: auto;
    overflow: hidden;
}
.div_page_dbtl .div_image {
    width: 80%;
    margin-left: 10%;
}
.div_page_dbtl svg {
    width: 100%;
    height: 100%;
}
.div_page_dbtl .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_dbtl .div_content_container {
    width: 53.48vw;
    height: 100%;
    left: 2.5vw;
    position: absolute;
}
.div_page_dbtl .div_scroll_container {
    width: 100%;
    height: 100%;
    display: flex;
    will-change: transform;
}
.div_page_dbtl .div_horizontal_scroll {
    height: 100vh;
    width: max-content;
    display: flex;
    flex-direction: row;
}
.pin-spacer {
    z-index: 1 !important;
}


.div_page_dbtl .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_dbtl .title {
    font-size: 18px;
    line-height: 1.1;
    font-family: 'HarmonyOS Sans SC', sans-serif;
    font-weight: 900;
    font-style: normal;
    letter-spacing: 0.05em;
    color: #16576B;
}
.div_page_dbtl .subtitle {
    font-size: 15px;
    line-height: 1;
    font-family: 'HarmonyOS Sans SC', sans-serif;
    font-weight: 900;
    font-style: normal;
    letter-spacing: 0.05em;
    color: #4494AA;
}


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


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


.div_page_dbtl .div_coral1 {
    position: fixed;
    transform: rotate(75deg);
    width: 20.82vw;
    height: auto;
    left: -5.96vw;
    top: 1.73vh;
    z-index: 1;
}
.div_page_dbtl .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_dbtl .div_coral3 {
    position: fixed;
    transform: rotate(87deg);
    width: 14.38vw;
    height: auto;
    left: 22.04vw;
    top: -11.27vh;
    z-index: 1;
}
.div_page_dbtl .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_dbtl .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_dbtl .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_dbtl .div_coral7 {
    transform: rotate(9deg);
    position: fixed;
    width: 16.97vw;
    height: auto;
    left: 78.04vw;
    top: 73.73vh;
    z-index: 1;
}
.div_page_dbtl .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_dbtl .title_text{
    font-family: 'HarmonyOS Sans SC', sans-serif;
    font-weight: 900;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.05em;
    color: #4494AA;
    font-size: 18px;
}
.div_page_dbtl .div_title_inner {
    width: 100%;
    height: 12%;
    margin-top: 2%;
    margin-bottom: 2%;
}
.div_page_dbtl .div_title_image {
    width: 4.42vw;
    position: absolute;
    height: 9.63vh;
    left: -1vw;
    top: 1vh;
}
.div_page_dbtl .div_title_text {
    position: absolute;
    width: 5.42vw;
    height: auto;
    left: 3vw;
    top: 5vh;
}
.div_page_dbtl .svg_container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.div_page_dbtl svg.papper, .div_page_dbtl svg.wrench {
    margin-left: 16%;
    margin-top: 16%;
    width: 73%;
}
.div_page_dbtl .line {
    background: #B8DFE7;
    width: 100%;
    height: 0.59%;
}

.div_page_dbtl .div_page1,
.div_page_dbtl .div_page2,
.div_page_dbtl .div_page3,
.div_page_dbtl .div_page4,
.div_page_dbtl .div_page5,
.div_page_dbtl .div_page6 {
    position: relative;
    width: 100vw;
    height: 100vh;
}
.div_page_dbtl .div_Design,.div_page_dbtl .div_Build,.div_page_dbtl .div_Test,.div_page_dbtl .div_Learn {
    /* display: none; */
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 1;
}
.div_page_dbtl .content_text {
    font-family: 'HarmonyOS Sans SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.05em;
    color: #267389;
    font-size: 14px;
    line-height: 1.4;
}
.div_page_dbtl .note_text {
    font-family: 'HarmonyOS Sans SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: #4494AA;
    text-align: center;
    font-size: 9px;
}
.div_page_dbtl .div_content_inner {
    width: 100%;
    height: 75%;
    margin-top: 2%;
}
.div_page_dbtl .div_page2 {
    display: block;
}
.div_page_dbtl .div_page2 .div_Build {
    display: block;
}
.div_page_dbtl .div_table {
    width: 100%;
    height: auto;
}
.div_page_dbtl .div_page2 .div_Build .div_images {
    width: 80%;
    margin-left: 10%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    row-gap: 0vh;
    column-gap: 4.79vw;
}
.div_page_dbtl .div_page2 .div_Build .div_images .div_image_text {
    display: flex;
}
.div_page_dbtl .div_page2 .div_Build .div_images .div_image_text .div_image {
    width: 9.79vw;
}
.div_page_dbtl .div_page2 .div_Test .div_images {
    display: flex;
    column-gap: 1.48vw;
    margin-top: 1vh;
    justify-content: center;
}
.div_page_dbtl .div_page2 .div_Test .div_images .div_image {
    width: 12.15vw;
}
.div_page_dbtl .div_page4 .div_Test .div_image {
    width: 17.99vw;
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    margin-left: auto;
    margin-right: auto;
}
.div_page_dbtl .div_page5 .div_Test .div_image {
    width: 22.99vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
}

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