.dot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .setBetween { display: flex; justify-content: space-between; } .setRowCenter { display: flex; align-items: center; } .setColumnCenter { display: flex; align-items: center; } .setCenter { display: flex; flex-direction: column; align-items: center; justify-content: center; } .ra { border-radius: 0.2rem; overflow: hidden; } .bs { box-shadow: 0 0 0.5rem #ebebeb; } .box-shadow { box-shadow: 0rem 0.3rem 0.5rem 0rem rgba(36, 65, 116, 0.1); } .btn { padding: 0.3rem 0.9rem; background-color: #3b52f6; color: #fff; border-radius: 2rem; font-size: 0.9rem; } .btn.s1 { background-color: transparent; border: 1px solid #3b52f6; color: #3b52f6; } .a-hover:hover { color: #3b52f6; } .see-banner{ position: relative; } .see-banner .main-center { max-width: 100%; background-color: #00dced; } .see-banner>img{ width: 18.85rem; position: absolute; top: 5.4rem; left: 0; } .see-banner h1 { font-family: "HarmonyOS_Sans_Black" !important; font-size: 2.4rem; font-size: 2rem; line-height: 1.2; padding: 5.4rem 0; text-align: center; position: relative; color: #ffffff; z-index: 2; } .see-banner em{ display: block; width: 5rem; height: 6.2rem; position: absolute; left: 50%; top: 50%; z-index: 0; transform: translate(-50%,-50%); /* animation: bg_name 0.8s infinite; */ } .see-banner em>img{ width: 100%; height: 100%; } @keyframes bg_name { 0% { background-color: #18d777; } 33.33% { background-color: #ffff1b; } 66.66%{ background-color: #ff8710; } 100%{ background-color: #3b33dd; } } .process .main-title h2 { font-family: "HarmonyOS_Sans_Black" !important; font-size: 1.9rem; margin-bottom: 0; text-align: center; } .process .main-title p { font-size: 0.85rem; color: #505050; max-width: 100%; text-align: center; margin-bottom: 0; margin-top: 2rem; } .main-4 { padding: 5rem 0 3.9rem; } .main-4 .main-center{ max-width: 70.31%; } .main-4 .participate-list{ margin-top: 2rem; } .main-4 .participate-list .item{ display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; } .main-4 .participate-list .item>span{ display: flex; align-items: center; justify-content: center; width: 11.8rem; height: 3.5rem; background-color: #ffff1b; font-size: 1rem; } .main-4 .participate-list .item>span:last-child{ width: calc(100% - 12.3rem); background-color: #dedede; justify-content: flex-start; text-indent: 8.5rem; } .main-4 .participate-list .item:nth-of-type(6n), .main-4 .participate-list .item:nth-of-type(6n-1), .main-4 .participate-list .item:nth-of-type(6n-2){ flex-direction: row-reverse; } .main-1{ position: relative; padding: 0 0 5rem; } .main-1>img{ width: 24rem; position: absolute; right: 0; bottom: 5rem; z-index: 1; } .main-1 .main-center{ max-width: 70.31%; background-color: #00dced; padding: 3.6rem; } .main-1 .main-title{ margin-bottom: 0; padding-bottom: 0.6rem; } .main-1 .main-title h2{ color: #ffff1b; } .main-1 .wrap{ color: #ffffff; } .main-1 .wrap p{ font-family: "HarmonyOS_Sans_Bold" !important; font-size: 0.85rem; line-height: 1.8; margin-top: 1.5rem; margin-bottom: 0; } .main-1 .wrap p a{ color: #ffffff; } @media screen and (max-width: 768px) { .process .main-1 .container .code { position: initial; margin-bottom: 2rem; } }