.big-logo-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 150px;
}

.big-logo-box img {
    width: 90%;
    transition: transform 0.5s ease-in-out forwards;
}

/* 动画关键帧 */
@keyframes scaleIn {
    from {
        transform: translateY(-250px) scale(0);
    }

    to {
        transform: translateY(0px) scale(1);
    }
}

@keyframes scaleOut {
    from {
        transform: translateY(0px) scale(1);
    }

    to {
        transform: translateY(-250px) scale(0);
    }
}

/* 滚动进入视区的动画类 */
.animate-in {
    animation: scaleIn 0.5s forwards;
}

/* 滚动离开视区的动画类 */
.animate-out {
    animation: scaleOut 0.5s forwards;
}

.scroll-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 1.5s ease-in-out;
}

.scroll-tip span {
    color: #029898;
}

.scroll-tip img {
    margin-top: 5px;
}

.banner-box {
    margin-top: 77px;
    position: relative;
    background: whitesmoke;
    overflow: hidden;
}

.banner-box img {
    display: block;
    width: 100%;
}

.banner-box .dot-box {
    position: absolute;
    right: 100px;
    bottom: 60px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.dot-box .num {
    margin: 0 10px 20px 0;
    color: rgba(255, 255, 255, .45);
}

.dot-box .num span {
    color: white;
}

.dot-box .btn-box img {
    margin: 0 5px;
}

.title-box {
    padding: 100px 0;
    text-align: center;
    color: black;
    font-size: 46px;
}

.use-box {
    display: flex;
    flex-direction: row;
    width: calc(100% - 60px);
    padding: 0 30px;
    overflow: hidden;
    margin-bottom: 80px;
}

.use-item {
    flex: 1;
    margin: 0 5px;
    overflow: hidden;
}

.use-item .img-box {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
}

.use-item .img-box .img {
    display: block;
    width: 100%;
    transform: translateY(0);
    transition: transform .5s ease-in-out;
}

.use-item .img-box .hover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    transform: translateY(-100%);
    transition: transform .5s ease-in-out;
}

.use-item:hover .img-box img {
    transform: translateY(100%);
}

.use-item:hover .img-box .hover {
    transform: translateY(0);
}

.use-item .info {
    color: black;
    font-size: 18px;
}

.info div:last-child {
    color: #999;
}

.video-box {
    position: relative;
}

.video-box img {
    width: 100%;
}

.video-box .left-img {
    position: absolute;
    left: 3.6vw;
    top: 6.5vw;
}

.video-box .right-img {
    position: absolute;
    right: 4.2vw;
    top: 6.5vw;
}

.progress-box {
    margin-top: 6.2vw;
    position: relative;
    width: 31vw;
    height: 31vw;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background-image .5s ease-in-out;
}

.progress-box::after {
    position: absolute;
    content: '';
    left: 5px;
    top: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    background: white;
}

.progress-box .dial-box {
    width: 90%;
    height: 90%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
}

/* 数字区域定位 */
.dial-box .num {
    display: block;
    position: absolute;
    width: 100%;
}

.dial-box .num:nth-child(1) {
    transform: rotate(141deg);
}

.dial-box .num:nth-child(2) {
    transform: rotate(193deg);
}

.dial-box .num:nth-child(3) {
    transform: rotate(244deg);
}

.dial-box .num:nth-child(4) {
    transform: rotate(296deg);
}

.dial-box .num:nth-child(5) {
    transform: rotate(347deg);
}

.dial-box .num:nth-child(6) {
    transform: rotate(39deg);
}

.dial-box .num:nth-child(7) {
    transform: rotate(90deg);
}

.dial-box .num span {
    display: inline-block;
    width: 0.5vw;
    height: 0.12vw;
    background: black;
    transition: background-color .5s ease-in-out;
}

.dial-box .num.active span {
    background: #029898;
}

.progress-box .img-box {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 60%;
    overflow: hidden;
    z-index: 1;
}

.progress-box .img-box img {
    position: absolute;
    display: block;
    width: 100%;
    opacity: 1;
    transition: opacity .8s ease-in-out;
}

.video-box .tip-info {
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    width: 300px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tip-info #day {
    position: relative;
    color: #333;
    font-size: 46px;
}

.tip-info #tip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    color: #333;
    font-size: 22px;
    width: 100%;
}

.tip-info #tip div {
    position: absolute;
    opacity: 1;
    transition: opacity .5s ease-in-out;
}

.video-box .view-btn {
    position: absolute;
    bottom: 62px;
    left: calc(50% - 101px);
    width: 202px;
    height: 61px;
    line-height: 61px;
    text-align: center;
    color: white;
    font-size: 16px;
    cursor: pointer;
    background: black;
    border-radius: 60px;
    transition: background-color .5s ease-in-out;
}

.view-btn:hover {
    background: #029898;
}

.section-box {
    display: flex;
    flex-direction: row;
    padding: 50px 30px;
}

.section-box .txt-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.6vw 4.1666vw;
    font-size: 1vw;
    color: #333;
}

.txt-box .question {
    font-size: 2.4vw;
}

.txt-box .brief {
    padding-bottom: 2vw;
    letter-spacing: 0.08vw;
}

.section-box .img-box {
    position: relative;
    flex: 1;
    height: 40vw;
}

.section-box .img-box img {
    width: 50%;
    transition: transform .5s ease-in-out;
}

.section-box .img-box img:hover {
    transform: scale(1.1);
}

.section-box .img-box .img1 {
    position: absolute;
    left: 25%;
    top: 1vw;
}

.section-box .img-box .img2 {
    position: absolute;
    bottom: 1vw;
    left: 1.5vw;
}

.section-box .img-box .img3 {
    position: absolute;
    bottom: 1vw;
    right: 1.5vw;
}

.expain-box {
    position: relative;
}

.expain-box img {
    display: block;
    width: 100%;
}

.expain-box .name {
    position: absolute;
    left: 12.2vw;
    top: 7.18vw;
    line-height: 1.35;
    font-size: 2.4vw;
    color: white;
}

.expain-box .des {
    position: absolute;
    left: 12.2vw;
    top: 15.5vw;
    line-height: 1.53;
    font-size: 0.95vw;
    letter-spacing: 0.08vw;
    color: white;
}

.expain-box .article-box {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.article-box .article-item {
    width: 24.615625vw;
    margin: 0 0.26vw;
    position: relative;
    color: #333;
    transition: color .8s ease-in-out;
    overflow: hidden;
}

.article-item div {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.article-item div span {
    padding: 0 10%;
    margin-right: 5%;
    flex-shrink: 0;
}


.article-item div label {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 2%;
}

.article-item .bg {
    display: block;
}

.article-item .bg-active {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity .8s ease-in-out;
}

.article-item:hover {
    color: white;
}

.article-item:hover .bg-active {
    opacity: 1;
}

.power-box {
    position: relative;
}

.power-box img {
    display: block;
    width: 100%;
}

.power-box .title {
    position: absolute;
    color: white;
    font-size: 2.23vw;
    left: 12.45vw;
    top: 9.75vw;
    letter-spacing: 0.14vw;
}

.power-box .msg-box {
    position: absolute;
    right: 12.45vw;
    top: 7.55vw;
}

.msg-box .row-box {
    display: flex;
    flex-direction: row;
    padding-top: 2.2vw;
    padding-left: 1vw;
    width: 41.52vw;
    height: 6.2vw;
    color: white;
    border-bottom: 1px solid whitesmoke;
    transform: scale(1);
    transform-origin: left top;
    transition: transform .5s ease-in-out;
}

.msg-box .row-box:hover {
    background: rgba(0, 0, 0, .3);
    transform: scale(1.1);
}

.row-box .num {
    flex-shrink: 0;
    width: 9.4vw;
    font-size: 2.23vw;
    letter-spacing: 0.12vw;
}

.row-box .msg {
    flex: 1;
    margin-top: 0.62vw;
    font-size: 1vw;
    letter-spacing: 0.08vw;
}

.news-box {
    padding: 0.5px 30px;
    width: calc(100% - 60px);
    background: whitesmoke;
}

.news-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: white;
    margin-bottom: 10px;
    text-decoration: none;
}

.news-item .name {
    flex: 1;
    padding-left: 8%;
    font-size: 0.9375vw;
    color: #333;
}

.news-item .info-box {
    position: relative;
    width: 40%;
    overflow: hidden;
}

.info-box .bg,
.info-box .bg-active {
    display: block;
    width: 100%;
    transform: translateX(0%);
    transition: transform .8s ease-in-out;
}

.info-box .date {
    position: absolute;
    top: 0;
    right: 30px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    color: white;
    font-size: 3.542vw;
    line-height: 1;
}

.info-box .date div:first-child {
    font-size: 1.1458vw;
}

.news-item .info-box .bg-active {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateX(0%);
    transition: opacity .8s ease-in-out, transform .8s ease-in-out;
}

.news-item:hover .info-box .bg,
.news-item:hover .info-box .bg-active {
    opacity: 1;
    transform: translateX(20%);
}

.news-grid {
    padding: 80px;
    background: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.news-grid .grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(25% - 100px);
    margin: 40px 50px;
    text-decoration: none;
}

.grid-item .img {
    width: 60%;
    height: 8vw;
    object-fit: contain;
    transform: scale(1);
    transition: transform .5s ease-in-out;
}

.grid-item:hover .img {
    transform: scale(1.1);
}

.grid-item .name {
    text-align: center;
    padding: 20px 30px;
    color: #999;
    font-size: 16px;
}

.grid-item .tip {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    color: white;
    font-size: 16px;
    background: #029898;
    border-radius: 10px;
    box-shadow: 21px 20px 29px 0 #a90c1f17;
    opacity: 0;
    transition: opacity .8s ease-in-out;
}

.grid-item:hover .tip {
    opacity: 1;
}


@media (max-width: 768px) {
    .banner-box {
        margin-top: 57px;
    }

    .banner-box .dot-box {
        right: 20px;
        bottom: 20px;
    }

    .dot-box .num {
        margin: 0 10px 10px 0;
    }

    .dot-box img {
        width: 30px;
        height: 30px;
    }

    .title-box {
        padding: 20px 0;
        font-size: 24px;
    }

    .use-box {
        flex-wrap: wrap;
        margin-bottom: 0;
    }

    .use-box .use-item {
        flex: none;
        margin-bottom: 40px;
        width: calc(50% - 10px);
    }

    .use-item .info {
        font-size: 14px;
    }

    .video-box .tip-info {
        width: 160px;
        height: 160px;
        left: calc(50% - 80px);
        top: calc(50% - 80px);
    }

    .tip-info #day {
        font-size: 16px;
    }

    .tip-info #tip {
        font-size: 12px;
    }

    .video-box .view-btn {
        left: calc(50% - 60px);
        bottom: 15px;
        width: 120px;
        height: 36px;
        line-height: 36px;
        font-size: 12px;
    }

    .row-box .msg {
        overflow-y: scroll;
    }

    .section-box .img-box {
        height: 35vw;
    }

    .article-box .article-item {
        font-size: 1.28vw;
    }

    .news-item .name {
        font-size: 12px;
    }

    .news-item .date div {
        font-size: 16px;
    }

    .news-item .date div:first-child {
        font-size: 12px;
    }

    .news-grid {
        padding: 20px;
    }

    .news-grid .grid-item {
        width: calc(50% - 20px);
        margin: 20px 10px;
    }

    .news-grid .grid-item .img {
        width: 100px;
        height: 100px;
    }

    .news-grid .grid-item .name {
        padding: 10px 15px;
    }
}