div, span, p {
    caret-color: transparent; /*隐藏点击光标*/
}

@keyframes horizontal-move-to-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(1vw);
        transform: translateX(1vw);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.horizontal-move-to-right {
    animation: horizontal-move-to-right 3s ease-in-out infinite;
}

@keyframes horizontal-move-to-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(-1vw);
        transform: translateX(-1vw);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.horizontal-move-to-left {
    animation: horizontal-move-to-left 3s ease-in-out infinite;
}

.vertical-item1 {
    animation: verital-move 4s ease-in-out infinite;
}

.vertical-item2 {
    animation: verital-move 4s ease-in-out 0.3s infinite;
}

.vertical-item3 {
    animation: verital-move 4s ease-in-out 0.6s infinite;
}

.vertical-item4 {
    animation: verital-move 4s ease-in-out 0.9s infinite;
}

.vertical-item5 {
    animation: verital-move 4s ease-in-out 1.2s infinite;
}

.vertical-item6 {
    animation: verital-move 4s ease-in-out 1.5s infinite;
}

.dora-bg {
    width: 100%;
    position: absolute;
    z-index: -1;
}

.dora-logo {
    width: 13%;
    position: absolute;
    right: 0;
    margin: 2% 0;
}

.dora-list {
    display: flex;
    width: 100%;
    margin-left: 1%;
}

    .dora-list img {
        width: 18%;
        height: 50%;
        margin: 17% 0 13% 0
    }

.display-100 {
    width: 100%;
    height: 100%;
    display: flex;
}

.dora-fish {
    width: 25%;
    margin: -3% 0 0 -7%;
    z-index: -1;
}

.bannar-dora {
    width: 17%;
    margin: 7% 0 7% 3%;
}

.banner-dora-logo {
    width: 13%;
    margin: 2% 0 0 40%;
}

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

    .display-column-100 {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
    }
    .solution-text {
        background: url(../img/park/intro-bg.png) no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: 100% 100%;
        margin: 2% 0 3% 0;
    }

        .solution-text p {
            padding: 1.5% 0;
            font-size: 1.2vw;
            font-weight: 400;
            line-height: 1.7vw;
            margin: 0 !important;
            text-align: center;
        }

    .mode-div {
        background: #004f40;
        border-radius: 5vw;
        width: 32%;
        margin: 5% 0 0 34%;
        font-size: 1.8vw;
        text-align: center;
        line-height: 3vw;
    }

        .mode-div p {
            margin: 0 !important;
            padding: 2%;
        }

    .mode-button {
        
        color: #ffffff!important;
        font-weight: bold
    }

    .scene-slide {
        padding: 5% 10% 8% 10%;
    }

    .scene-div {
        width: 30%;
        margin: 2% 0 0 35%;
        font-size: 1.5vw;
        text-align: center;
        line-height: 3vw;
    }

        .scene-div p {
            margin: 0 !important;
        }

    .scene-button {
        position: absolute;
        width: 100%;
        top: 40%;
        display: flex;
        justify-content: space-between;
    }

    .app-div {
        display: flex;
        width: 90%;
        position: relative;
        justify-content: space-around;
        margin: 0 0 2% 5%;
    }

    .app-left {
        width: 35%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        z-index: 998;
    }

        .app-left img {
            width: 90%;
            height: 30%;
            margin: 62% 0 35% 22%;
            z-index:1;
        }

    .app-right {
        width: 35%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
    }

        .app-right img {
            width: 90%;
            height: 30%;
            margin: 21% 21% 55% 0;
            z-index:1;
        }

    .ip-banner {
        position: relative;
        width: 100%;
        height: 60vh;
        display: flex;
        overflow: hidden;
    }

    .ip-container {
        padding: 0 10%;
    }

    .container-sm {
        padding: 60px 10%
    }

    .padding-2-5 {
        padding: 2% 0 5% 0;
    }

    .padding5 {
        padding: 5% 0 0 0;
    }

    .padding20 {
        padding: 2% 0;
    }

    .padding2 {
        padding: 2% 0 0 0;
    }

    .padding10 {
        padding: 10% 0 0 0;
    }

    .brand-text {
        font-weight: 400;
        font-size: 1.1vw;
        margin: 0 !important;
        color:#003535;
    }

    .scene-title {
        background: url(../img/park/scene-title.png);
        background-size: 100% 100%;
        width: 70%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .scene-title p{
        font-size:1vw;
        font-weight:400;
        line-height:1.1vw;
        margin:0!important;
        padding:2%;
    }

    .scene-item-div{
        width:100%;
    }

    .scene-item {
        display: flex;
        flex-direction: column;
        align-items: center
    }

        .scene-item img {
            width: 30%;
            height: 30%;
        }

        .scene-item p {
            margin: 0 !important;
            padding: 10% 0;
            font-size: 0.75vw;
            color:#0ba29a;
        }

    .scene-left {
        margin-left: 5vw;
        cursor: pointer;
        width: 3vw;
        height: 6vw;
    }

    .scene-right {
        margin-right: 5vw;
        cursor: pointer;
        width: 3vw;
        height: 6vw;
    }

    .sub-type-bg {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding: 1.2% 0 0.5%;
    }

    .subtype-div {
        width: 60%;
        height: 100%;
    }

    .sub-type {
        display: flex;
        width: 55%;
    }

        .sub-type div {
            cursor: pointer;
        }

        .sub-type div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 33%;
            font-size: 0.9vw;
            font-weight: 600;
        }

            .sub-type div p {
                margin: 0 !important;
            }

    .subtype-title-bg {
        height: 100%;
        width: 50%;
    }

    .subtype-title {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 1.2% 0 0;
    }

        .subtype-title p {
            font-weight: 700;
            font-size: 1.3vw;
            line-height: 1;
            margin: 0 !important;
        }

    .product-title {
        background: url(../img/park/title-bg.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .product-title p {
            font-weight: 700;
            font-size: 1.3vw;
            margin: 0 !important;
            padding:0.6vw 0;
        }

    .more-btn {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

        .more-btn div {
            cursor: pointer;
            background: url(../img/park/more-bg.png) no-repeat;
            text-align: center;
            font-size: 1.2vw;
            background-size: 100% 100%;
            padding: 0.5vw 0;
            width: 30%;
            height: 100%;
            color:#114242;
        }

    .solution-item-div {
        width: 100%;
    }

    .solution-item {
        display: flex;
        flex-direction: column;
        align-items: center
    }

        .solution-item img {
            width: 30%;
            height: 30%;
        }

        .solution-item p {
            margin: 0 !important;
            padding: 5% 0;
            font-size: 1vw;
            color: #008876;
        }

    .ip-banner-item-first {
        display: block;
        background: url(../img/park/ip-banner/ip-banner-1.png);
        background-size: 100% 100%;
        width: 25%;
    }

    .ip-banner-item {
        display: block;
        width: 30%;
        margin-left: -4%;
    }

    .ip-banner-title {
        display: flex;
        justify-content: center;
        position: absolute;
        z-index: 998;
        left: 0;
        bottom: 0;
        width: 100%;
    }

        .ip-banner-title img {
            width: 38%;
        }

    .swiper-right {
        right: -15vw !important;
    }

    .swiper-left {
        left: -15vw !important;
    }


    @keyframes verital-move {
        16.65% {
            -webkit-transform: translateY(8px);
            transform: translateY(8px);
        }

        33.3% {
            -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
        }

        49.95% {
            -webkit-transform: translateY(4px);
            transform: translateY(4px);
        }

        66.6% {
            -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
        }

        83.25% {
            -webkit-transform: translateY(1px);
            transform: translateY(1px);
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }
    
}

@media only screen and (max-width:768px)
{
    .padding20 {
        padding: 2% 0;
    }

    .padding2 {
        padding: 2% 0 0 0;
    }

    .padding5 {
        padding: 5% 0 0 0;
    }

    .padding-2-5 {
        padding: 5% 0 8% 0;
    }

    .padding-sm-5 {
        padding: 5% 0 0 0 !important;
    }

    .container-sm {
        padding: 5% 8%
    }

    .brand-text {
        font-weight: 400;
        font-size: 3vw;
        margin: 0 !important;
        color: #003535;
    }

    .scene-item-div {
        width: 100%;
    }

    .scene-item {
        display: flex;
        flex-direction: column;
        align-items: center
    }

        .scene-item img {
            width: 30%;
            height: 30%;
        }

        .scene-item p {
            margin: 0 !important;
            padding: 10% 0;
            font-size: 2.5vw;
            color: #0ba29a;
        }

    .scene-title {
        background: url(../img/park/scene-title.png);
        background-size: 100% 100%;
        width: 60%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin:2% 0;
    }

        .scene-title p {
            font-size: 3vw;
            font-weight: 400;
            line-height: 4vw;
            margin: 0 !important;
            padding: 3%;
        }

    .product-title {
        background: url(../img/park/title-bg.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        width:60%;
    }

        .product-title p {
            font-weight: 700;
            font-size: 3vw;
            margin: 0 !important;
            padding: 3%;
        }

    .more-btn {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

        .more-btn div {
            cursor: pointer;
            background: url(../img/park/more-bg.png) no-repeat;
            text-align: center;
            font-size: 3vw;
            background-size: 100% 100%;
            padding: 1% 0;
            width: 60%;
            height: 100%;
            color: #114242;
        }

    .solution-item-div {
        width: 100%;
    }

    .solution-item {
        display: flex;
        flex-direction: column;
        align-items: center
    }

        .solution-item img {
            width: 30%;
            height: 30%;
        }

        .solution-item p {
            margin: 0 !important;
            padding: 5% 0;
            font-size: 2.5vw;
            color: #008876;
        }

    .solution-text {
        background: url(../img/park/intro-bg-phone.png) no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: 100% 100%;
    }

        .solution-text p {
            padding: 5% 10%;
            font-size: 2.5vw;
            font-weight: 400;
            line-height: 4vw;
            margin: 0 !important;
            text-align: center;
        }

    .mode-button {
        color: #ffffff !important;
        font-weight: bold
    }

    .swiper-right {
        right: -8vw !important;
    }

    .swiper-left {
        left: -8vw !important;
    }


    .mode-div {
        background: #004f40;
        border-radius: 5vw;
        width: 32%;
        margin: 5% 0 0 34%;
        font-size: 2.5vw;
        text-align: center;
        line-height: 3vw;
    }

        .mode-div p {
            margin: 0 !important;
            padding: 8%;
        }

    .scene-button {
        position: absolute;
        width: 100%;
        top: 40%;
        display: flex;
        justify-content: space-between;
    }

    .scene-button img{
        cursor:pointer;
        width:4vw;
        height:8vw;
    }

    .scene-slide {
        padding: 0;
    }

    .scene-div {
        width: 100%;
        font-size: 3vw;
        text-align: center;
        line-height: 3vw;
        padding:5% 0 0 0;
        display:flex;
        justify-content:center;
    }

        .scene-div p {
            margin: 0 !important;
        }

    .app-div {
        display: flex;
        width: 100%;
        height:100%;
        position: relative;
        justify-content: space-around;
        margin: 0;
    }

    .app-left {
        width: 33%;
        height:100%;
        display: flex;
        justify-content: flex-start;
        align-items:center;
        position:absolute;
        left:0;
    }

        .app-left img {
            width: 100%;
            height: 11%;
            margin: 40% 0 0 6%;
            z-index:1;
        }

    .app-right {
        width: 37%;
        height:100%;
        display: flex;
        justify-content: flex-end;
        align-items:center;
        position:absolute;
        right:0;
    }

        .app-right img {
            width: 100%;
            height: 18%;
            margin: 0% 8% 65% 0;
            z-index:1;
        }

    .ip-container {
        padding: 0;
    }

    .solution-div{
        margin:0!important;
    }

    .scene-left {
        margin-left: 5vw;
        cursor: pointer;
        width: 4.5vw;
        height: 7.5vw;
    }

    .scene-right {
        margin-right: 5vw;
        cursor: pointer;
        width: 4.5vw;
        height: 7.5vw;
    }

    @keyframes verital-move {
        16.65% {
            -webkit-transform: translateY(4px);
            transform: translateY(4px);
        }

        33.3% {
            -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
        }

        49.95% {
            -webkit-transform: translateY(3px);
            transform: translateY(3px);
        }

        66.6% {
            -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
        }

        83.25% {
            -webkit-transform: translateY(1px);
            transform: translateY(1px);
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }


    .sub-type-bg {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding: 1.2% 0 0.5%;
    }

    .subtype-div {
        width: 100%;
        height: 100%;
    }

    .sub-type {
        display: flex;
        width: 55%;
    }

        .sub-type div {
            cursor: pointer;
        }

        .sub-type div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 33%;
            font-size: 2.3vw;
            font-weight: 600;
        }

            .sub-type div p {
                margin: 0 !important;
            }

    .subtype-title-bg {
        height: 100%;
        width: 50%;
    }

    .subtype-title {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 1.2% 0 0;
    }

        .subtype-title p {
            font-weight: 700;
            font-size: 3vw;
            line-height: 1;
            margin: 0 !important;
        }
}