.logo-animate-home {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
}

.logo-animate-home .item {
    position: absolute;
    top: 0;
    height: 33.33%;
    width: 100%;
    left: 0;
    background: #fff;
}

.logo-animate-home .item+.item {
    top: 33.33%;
}

.logo-animate-home .item+.item+.item {
    top: 66.66%;
}

.logo-animate-home .item.play {
    animation: animate-logo-bg 0.5s forwards ease;
}

.logo-animate-home .next {
    position: absolute;
    bottom: 1rem;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 3;
    font-size: 0.3rem;
    display: none;
}

.logo-animate-home.play .next {
    display: none;
}

@keyframes animate-logo-bg {
    0% {
        transform: translate(0%, 0);
    }

    100% {
        transform: translate(100%, 0);
    }
}

.logo-animate-home .home-logo {
    width: 4.3rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.logo-animate-home .home-logo * {
    fill: #023886;
}

.logo-animate-home .animate-r {
    stroke: #023886;
    stroke-width: 4px;
    stroke-dasharray: 50.4;
    fill: none;
}

.logo-animate-home.play .animate-r {
    animation: animate-r 1.2s forwards ease-in;
}

.logo-animate-home .animate-j {
    stroke: #16A7A8;
    stroke-width: 4px;
    stroke-dasharray: 20.45;
    fill: none;
}


.logo-animate-home.play .animate-j {
    animation: animate-j 0.8s forwards ease-in;
}

.logo-animate-home.play .animate-zm {
    animation: animate-zm 1s forwards ease-in;
}

.logo-animate-home.play .animate-zw {
    animation: animate-zw 1.5s forwards ease-in;
}



.banner {
    position: relative;
    overflow: hidden;
    height: 100vh;
}

.banner .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../imgs/banner1.jpg) no-repeat center center;
    background-size: cover;
    z-index: 2;
}

.banner .logo {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}


.banner .logo * {
    fill: rgba(255, 255, 255, 0.2);
}

.banner .logo.play {
    animation: animate-banner-logo 2s forwards ease;
}

@keyframes animate-banner-logo {
    0% {
        bottom: 0;
        transform: translateY(0%);
    }

    100% {
        bottom: 50%;
        transform: translateY(30%);
    }
}

.banner .text {
    position: absolute;
    bottom: 50%;
    left: 0;
    width: 100%;
    z-index: 3;
}

.banner .text .content {
    opacity: 0;
    transform: translateY(300%) scale(0);
    display: inline-block;
}

.banner .text.play .content {
    animation: animate-banner-text 2s forwards ease;
}

@keyframes animate-banner-text {
    0% {
        opacity: 0;
        transform: translateY(400%) scale(1);
    }

    100% {
        opacity: 1;
        transform: translateY(300%) scale(1);
    }
}

.banner .text h2 {
    font-size: 0.16rem;
}

.banner .text h3 {
    font-size: 0.6rem;
}

.banner .text h2,
.banner .text h3 {
    padding-left: 0.87rem;
    color: #fff;
}

.banner .video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.banner .video::after {
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    opacity: 0.15;
    width: 100%;
    height: 100%;
    content: '';
}

.banner .video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modular1 {
    height: 10rem;
    position: relative;
}

.modular1 ul {
    margin: 0 2.2rem;
    height: 100%;
    position: relative;
}

.modular1 ul::after {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    content: '';
    border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.modular1 ul::before {
    height: 3.4rem;
    width: 0.06rem;
    background: #16A7A8;
    position: absolute;
    content: '';
    right: 0;
    bottom: 1.3rem;
    z-index: 3;
}

.modular1 li {
    font-size: 0.16rem;
    width: 30%;
    float: left;
    padding: 0.4rem;
    box-sizing: border-box;
    transition: all 1s;
    height: 100%;
    position: relative;
    cursor: url(../imgs/mouse.svg), auto;
}

.modular1 li::before,
.modular1 li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    width: 100%;
    z-index: 1;
    box-sizing: border-box;
}

.modular1 li::before {
    transition: height 1s;
    height: 0;
    top: 1.2rem;
    z-index: 3;
    width: 0;
    /* margin-left: calc(-0.06rem + 1px); */
    border-left: 0.06rem solid #16A7A8;
    transform: translate(calc(-100% + 1px), 0);
}

.modular1 li.active::before {
    height: 1rem;
}



.modular1 li.active {
    width: 40%;
}

.modular1 .list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
}

.modular1 .list .details {
    position: absolute;
    top: 4.4rem;
    z-index: 2;
}

.modular1 .list .wrap {
    height: 100%;
}

.modular1 .title {
    font-size: 0.4rem;
    margin-bottom: 1em;
}

.modular1 .sub_title {
    font-size: 0.24rem;
    margin-bottom: 1em;
    font-weight: 500;
}

.modular1 .hide {
    overflow: hidden;
    width: 4rem;
}

.modular1 .text {
    line-height: 1.8;
}

.modular1 .text,
.modular1 .sub_title,
.modular1 .mores {
    transform: translate(-101%, 0);
    transition: all 1s;
}

.modular1 li .text {
    height: 10.8em;
    overflow: hidden;
    font-weight: 100;
}

.modular1 .more {
    margin-top: 0.2rem;
    display: inline-block;
    /* padding: 0.5em 2em; */
    /* background: #fff; */
    border-radius: 0.05rem;
    color: #fff;
    position: relative;
    padding-right: 1em;
    margin-right: 2em;

}

.modular1 .more span {
    padding-bottom: 0.2em;
    position: relative;
    display: inline-block;
    font-weight: 500;
}

.modular1 .more span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 1s;
    width: 100%;
    border-bottom: 1px solid #fff;
}

.modular1 .more::after {
  content: '';
  display: block;
  width: 0.07rem;
  height: 0.07rem;
  border: 0.02rem solid #fff;
  border-left: 0;
  border-bottom: 0;
  position: absolute;
  right: 0;
  top: 0;
  background: none;
}

.modular1 .more[href]::after{
  animation: animate-mark 2s infinite ease;
}


@keyframes animate-mark {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }

    100% {
        opacity: 1;
        transform: translate(0.1rem, 0);
    }
}

.modular1 .more:hover {
    /* background: #023886; */
    color: #fff !important;
}

.modular1 li.active .text,
.modular1 li.active .sub_title,
.modular1 li.active .mores {
    transform: translate(0, 0);
}

.modular1 .bgs {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}

.modular1 .bgs .item {
    position: absolute;
    width: 100%;
    height: 100%;
    background: no-repeat center center;
    background-size: cover;
    opacity: 1;
    transition: all 1s;
}

.modular1 .bgs .item.active {
    opacity: 1;
    z-index: 1;
    animation: modular1-bg 1s;
}

@keyframes modular1-bg {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.modular2 {
    margin: 0.6rem 0 1rem 0;
}

.modular2 h2 {
    margin-bottom: 0.3rem;
    font-size: 0.4rem;
    padding-left: 0.87rem;
    letter-spacing: 0.1em;
}

.modular2 h2 .more {
    border: 1px solid #090909;
    border-radius: 0.05rem;
    display: block;
    float: right;
    font-size: 0.12rem;
    letter-spacing: 0;
    padding: 0.5em 1.5em;
    margin-top: 0.2rem;
    position: relative;
    overflow: hidden;
}

.modular2 h2 .more:hover {
    color: #fff !important;
}

.modular2 h2 .more:hover::after {
    width: 100%;
}

.modular2 h2 .more::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #023886;
    position: absolute;
    z-index: -1;
    width: 0%;
    transition: all .3s;
}

.modular2 .box {
    margin: -0.1rem;
    font-size: 0;
}

.modular2 .item {
    width: calc(33.33% - 0.2rem);
    margin: 0.1rem;
    display: inline-block;
    overflow: hidden;
    position: relative;
    background: #f6f6f6;
    height: 8.08rem;
    z-index: 2;
}

.modular2 .item img {
    transition: all 1s;
    height: 100%;
    object-fit: cover;
}

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

.modular2 .item .text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    font-size: 0.2rem;
    color: #fff;
    padding: 0.45rem;
    box-sizing: border-box;
}

.modular2 .item.list {
    padding-top: 0.25rem;
    box-sizing: border-box;
    z-index: 0;
}

.modular2 .item.list a {
    display: block;
}

.modular2 .item .text h4 {
    padding-top: 0.3rem;
    border-top: 1px solid #fff;
}

.modular2 .item .text h3 {
    /* margin-bottom: 0.4rem; */
    padding-top: 0.3rem;
    font-size: 0.2rem;
    line-height: 1;
    /* font-family: 'Aleo'; */
    letter-spacing: 0.1em;
}

.modular2 .item.list .text h4 {
    border: none;
    padding-top: 0;
}

.modular2 .item.list .text h3 {
    font-family: inherit;
    letter-spacing: 0;
    padding-top: 0;
}


.modular2 .item.list .text {
    color: inherit;
    position: static;
    padding: 0 0.45rem 0 0.45rem;
}

.modular2 .item.list .text h3 {
    font-size: 0.2rem;
    border: none;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #090909;
    position: relative;
}

.modular2 .item.list .text h4 {
    margin-top: 0.45rem;
    margin-bottom: 0.2rem;
    transition: all .3s;
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
}

.modular2 .item.list a+a .text h3 {
    border-top-color: #090909;
}

.modular2 .item.list a:hover .text h4 {
    border-color: #1955b3;
}

.modular2 .item.list .text h3::before {
    content: '';
    display: block;
    width: 0.07rem;
    height: 0.07rem;
    position: absolute;
    right: 0;
    top: 0;
    border: 0.02rem solid #16A7A8;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
}

.modular3 {
    padding: 1rem 0;
    background-size: cover;
    overflow: hidden;
}

.modular3 .left,
.modular3 .right {
    width: 50%;
    height: 4.75rem;
    float: left;
    overflow: hidden;
    position: relative;
}

.modular3 .left video,
.modular3 .right video,
.modular3 .left img,
.modular3 .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s;
}

.modular3 .left:hover img {
    transform: scale(1.1);
}

.modular3 .right .text,
.modular3 .left .text {
    padding: 0.5rem 2.3rem 0.5rem 0.9rem;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translate(0, -50%);
    z-index: 1;
    color: #fff;
    font-size: 0.16rem;
}

.modular3 .left .text h2 {
    font-size: 0.4rem;
    letter-spacing: 0.1em;
    margin-bottom: 1.5em;
}

.modular3 .left .text p {
    line-height: 1.6;
    font-weight: 100;
}

.modular3 .right .text a {
    font-size: 0.24rem;
    display: inline-block;
    margin: 0.5em 0;
    position: relative;
    color: #fff !important;
}

.modular3 .right .text a {
    position: relative;
    display: inline-block;
    padding-right: 1em;
    line-height: 1;
}

.modular3 .right .text a::after {
    content: '';
    display: block;
    width: 0.07rem;
    height: 0.07rem;
    border: 0.02rem solid #fff;
    border-left: 0;
    border-bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    background: none;
}

.modular3 .right .text a::before {
    content: '';
    display: block;
    width: 0.04rem;
    height: 0.04rem;
    background: #fff;
    position: absolute;
    left: -1em;
    top: 50%;
    margin-top: -0.02rem;
    display: none;
}

.modular3 .right .text a:hover::before {
    display: block;
}

.modular3 .right .text a span {
    padding-bottom: 0.2em;
    position: relative;
}

.modular3 .right .text a span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 1s;
    width: 100%;
    border: 1px solid #fff;
    transform: scale(0, 1);
}

.modular3 .right .text a.on span::after {
    transform: scale(1, 1);
}

.modular3 .right video {
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modular3 .right video.on {
    animation: modular1-bg 1s;
}

.modular4 {
    height: 6.8rem;
    background-size: cover;
    font-size: 0.4rem;
    text-align: center;
    padding-top: 3rem;
}

.modular4 h2 {
    margin-bottom: 0.5em;
}

.modular4 .btn {
    font-size: 0.12rem;
    color: #fff;
    margin-top: 0.2rem;
    display: inline-block;
    padding: 0.5em 2em;
    background: #032a65;
    border-radius: 0.05rem;
    transition: all .5s;
}


@media screen and (min-width: 768px) {

    .modular4 .btn:hover {
        background: #fff;
    }

    .modular1 li {
        background: none !important;
    }
}

@media screen and (max-width: 768px) {
    .modular2 .item {
        width: calc(100% - 0.2rem);
        height: auto;
    }

    .modular3 .left,
    .modular3 .right {
        width: 100%;
        height: auto;
    }

    .modular3 .right .text,
    .modular3 .left .text {
        position: relative;
        z-index: 1;
        transform: none;
        padding: 1rem 1rem 1rem 0.9rem;
    }

    .modular3 .left video,
    .modular3 .right video,
    .modular3 .left img,
    .modular3 .right img {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .modular1 .title,
    .modular2 h2 {
        font-size: 20px;
    }

    .modular1 li.active .sub_title,
    .modular1 li .sub_title,
    .modular3 .right .text a,
    .modular2 .item .text h3 {
        font-size: 16px;
    }

    .modular2 h2 .more {
        font-size: 9px;
        margin-top: 0;
        margin-top: -6px;
    }

    .modular1 li,
    .modular2 .item .text,
    .modular2 .item.list .text h3,
    .modular2 .item.list .text h4,
    .modular3 .right .text,
    .modular3 .left .text,
    .modular4 .btn {
        font-size: 14px;
    }

    .modular1 {
        height: auto;
        margin: 0.6rem 0 1rem 0;
    }

    .modular1 .bgs {
        display: none;
    }

    .modular1 ul {
        margin: 0;
    }

    .modular1 li {
        background-size: cover;
        width: 100% !important;
        float: none;
        padding: 32px;
    }

    .modular1 .list .details,
    .modular1 .list {
        position: static;
    }

    .modular1 .list .details {
        position: relative;
        top: 0;
    }

    .modular1 li .text,
    .modular1 li .sub_title,
    .modular1 li .mores {
        transform: translate(0, 0);
    }

    .modular1 .hide {
        width: 90%;
    }
}


/*.modular1 .sub_title{font-size: 0.24rem;}
.modular1 li .text,.modular1 .mores{font-size: 0.16rem;}*/

@media screen and (max-width: 768px) {
    .banner .text h2 {
        font-size: 14px;
    }

    .modular1 li .text,
    .modular1 .mores,
    .modular2 .item .text,
    .modular2 h2 .more {
        font-size: 14px;
    }
}