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


@media only screen and (min-width:1200px) {
    .container-sm {
        padding: 60px 10%
    }

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

    .padding20 {
        padding: 2% 0;
    }

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

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

    .padding8 {
        padding:8% 0 0 0;
    }

    .brand-title {
        background: url(../img/piSport/title-bg.png);
        background-size: 100% 100%;
        width: 80%;
        height: 16%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

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

    .brand-subtitle {
        width: 90%;
    }

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

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

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

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

    .product-title {
        background: url(../img/piSport/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
        }

    .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: 60%;
    }

    .sub-type div{
        cursor:pointer;
    }

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

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

    .product-type {
        display: flex;
        justify-content: center;
        align-items: center;
    }

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

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

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

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

    .solution-subtitle {
        font-weight: 400;
        font-size: 0.75vw;
        line-height: 1.8vw;
        margin: 0 !important;
        color: #15162A;
        padding: 0 0 0 2.1vw;
        white-space:nowrap
    }

    .solution-bg {
        width: 90%;
        height: 65%;
        background: #00BBDD;
        opacity: 0.25 !important;
        position: absolute;
        z-index: -1
    }

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

        .solution-building img {
            width: 100%;
        }

    .solution-building-title {
        font-weight: 700;
        color: #fffefe;
        font-size: 1.5vw;
    }

        .solution-building-title span {
            font-weight: 700;
            color: #00bbdd;
            font-size: 1.2vw
        }

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

    .solution-item-m {
        width: 100%;
        margin-left: 7%;
    }

    .solution-item-s {
        width: 80%;
        margin-left: 14%;
    }

    .solution-item-div1-margin {
        margin: 8% 0 0 49%
    }

    .solution-item-div2-margin {
        margin: 8% 0 0 51%
    }

    .solution-item-div {
        position: absolute;
        width: 20%;
        height: 30%;
        z-index: -1;
    }

        .solution-item-div div {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

            .solution-item-div div div {
                background: url(../img/piSport/item-bg.png) 100% 100% no-repeat;
                height: 18%;
                font-size: 1.15vw;
                font-weight: 400;
                color: #ffffff;
                text-align: center;
            }

    .case-title {
        background: url(../img/piSport/title3.png);
        background-size: 100% 100%;
    }

    .title-max {
        display: flex;
        align-items: center;
        justify-content: center;
    }

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

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

        .more-btn div {
            cursor: pointer;
            background: url(../img/piSport/more-bg.png) no-repeat;
            text-align: center;
            font-size: 0.9vw;
            background-size: 100% 100%;
            padding: 0.15%;
            width: 20%;
            height: 100%;
        }

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

        .support img {
            width: 35%;
            height: 35%;
        }

        .support p {
            margin: 0 !important;
            padding: 5% 0;
            font-size: 1.2vw;
        }


    /* Buzz Out */
    @-webkit-keyframes hvr-buzz-out {
        10% {
            -webkit-transform: translateX(3px) rotate(2deg);
            transform: translateX(3px) rotate(2deg);
        }

        20% {
            -webkit-transform: translateX(-3px) rotate(-2deg);
            transform: translateX(-3px) rotate(-2deg);
        }

        30% {
            -webkit-transform: translateX(3px) rotate(2deg);
            transform: translateX(3px) rotate(2deg);
        }

        40% {
            -webkit-transform: translateX(-3px) rotate(-2deg);
            transform: translateX(-3px) rotate(-2deg);
        }

        50% {
            -webkit-transform: translateX(2px) rotate(1deg);
            transform: translateX(2px) rotate(1deg);
        }

        60% {
            -webkit-transform: translateX(-2px) rotate(-1deg);
            transform: translateX(-2px) rotate(-1deg);
        }

        70% {
            -webkit-transform: translateX(2px) rotate(1deg);
            transform: translateX(2px) rotate(1deg);
        }

        80% {
            -webkit-transform: translateX(-2px) rotate(-1deg);
            transform: translateX(-2px) rotate(-1deg);
        }

        90% {
            -webkit-transform: translateX(1px) rotate(0);
            transform: translateX(1px) rotate(0);
        }

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

    @keyframes hvr-buzz-out {
        10% {
            -webkit-transform: translateX(3px) rotate(2deg);
            transform: translateX(3px) rotate(2deg);
        }

        20% {
            -webkit-transform: translateX(-3px) rotate(-2deg);
            transform: translateX(-3px) rotate(-2deg);
        }

        30% {
            -webkit-transform: translateX(3px) rotate(2deg);
            transform: translateX(3px) rotate(2deg);
        }

        40% {
            -webkit-transform: translateX(-3px) rotate(-2deg);
            transform: translateX(-3px) rotate(-2deg);
        }

        50% {
            -webkit-transform: translateX(2px) rotate(1deg);
            transform: translateX(2px) rotate(1deg);
        }

        60% {
            -webkit-transform: translateX(-2px) rotate(-1deg);
            transform: translateX(-2px) rotate(-1deg);
        }

        70% {
            -webkit-transform: translateX(2px) rotate(1deg);
            transform: translateX(2px) rotate(1deg);
        }

        80% {
            -webkit-transform: translateX(-2px) rotate(-1deg);
            transform: translateX(-2px) rotate(-1deg);
        }

        90% {
            -webkit-transform: translateX(1px) rotate(0);
            transform: translateX(1px) rotate(0);
        }

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

    .hvr-buzz-out {
        /*display: inline-block;
        vertical-align: middle;*/
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    }

        .hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
            -webkit-animation-name: hvr-buzz-out;
            animation-name: hvr-buzz-out;
            -webkit-animation-duration: 0.75s;
            animation-duration: 0.75s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
            /*color: #00b4d4;*/
        }

    /* Bounce in */
    .hvr-bounce-in {
        /*display: inline-block;
        vertical-align: middle;*/
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        /*box-shadow: 0 0 1px rgba(0, 0, 0, 0);*/
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
    }

        .hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
            -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
            transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
            color:#00b4d4;
        }


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

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

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

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

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

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

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

    .item2 {
        animation: horizontal-move 3s ease-in-out 0.3s infinite;
    }

    .item3 {
        animation: horizontal-move 3s ease-in-out 0.6s infinite;
    }

    .item4 {
        animation: horizontal-move 3s ease-in-out 0.9s infinite;
    }

    @-webkit-keyframes hvr-pulse {
        25% {
            -webkit-transform: scale(1.02);
            transform: scale(1.02);
        }

        75% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    @keyframes hvr-pulse {
        25% {
            -webkit-transform: scale(1.02);
            transform: scale(1.02);
        }
        75% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    .hvr-pulse {
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    }

        .hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
            -webkit-animation-name: hvr-pulse;
            animation-name: hvr-pulse;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

    /* Wobble Horizontal */
    @-webkit-keyframes hvr-wobble-horizontal {
        16.65% {
            -webkit-transform: translateX(8px);
            transform: translateX(8px);
        }

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

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

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

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

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

    @keyframes hvr-wobble-horizontal {
        16.65% {
            -webkit-transform: translateX(8px);
            transform: translateX(8px);
        }

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

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

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

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

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

    .hvr-wobble-horizontal {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    }

        .hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
            -webkit-animation-name: hvr-wobble-horizontal;
            animation-name: hvr-wobble-horizontal;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
        }
}

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

    .container-sm {
        padding: 0 5%;
    }

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

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

    .padding-sm-15 {
        padding: 15% 0 0 0;
    }

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

    .padding20 {
        padding: 5% 0;
    }

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

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

   

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

        .brand-title p {
            font-weight: 700;
            font-size: 4vw;
            margin: 0 !important
        }

    .brand-subtitle {
        width: 80%;
    }

    .sm-scene {
        display: flex;
        justify-content:space-around;
    }

        .sm-scene div {
            width: 100%;
            height: 100%;
        }

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

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

        .scene-item p {
            margin: 0 !important;
            font-size: 3vw;
            padding: 2% 0;
        }

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

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

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

    .solution-subtitle {
        font-weight: 400;
        font-size: 2.2vw;
        line-height: 5.5vw;
        margin: 0 !important;
        color: #fffefe;
        padding: 0;
        white-space: nowrap;
    }

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

        .solution-building img {
            width: 90%;
        }

    .solution-building-title {
        font-weight: 700;
        color: #fffefe;
        font-size: 3.5vw;
    }

        .solution-building-title span {
            font-weight: 700;
            color: #00bbdd;
            font-size: 3.2vw
        }

    .solution-building-absolute{
        position:absolute;
        z-index:999;
        
    }

        .solution-building-absolute img{
            width:75%;
        }

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

    .solution-item-m {
        width: 100%;
        margin: 5% 10% 0 10%;
    }

    .solution-item-s {
        width: 80%;
        margin: 5% 3% 0 3%;
    }

    .sm-width {
        width: 85%;
    }

    .solution-item-div1-margin {
        margin: 8% 0 0 61%
    }

    .solution-item-div2-margin {
        margin: 8% 0 0 62%
    }

    .solution-parent {
        display: flex;
        width: 100%;
    }

    .solution-item-div {
        width: 32%;
        height:60%;
        
        display:flex;
        flex-direction:column;
        z-index: -1;
    }

        .solution-item-div div {
            background: url(../img/piSport/item-bg.png) 100% 100% no-repeat;
            height:12%;
            width:98%;
            font-size: 2.5vw;
            font-weight: 400;
            color: #ffffff;
            text-align: center;
        }

            .solution-item-div div p {
                margin-top: -2vw;
            }


    .solution-bg {
        /*height: 24%;*/
        /*width: 100%;*/
        background: #00BBDD;
        opacity: 0.25 !important;
        position: absolute;
        z-index: -1;
        left:0;
    }

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

        .more-btn div {
            cursor: pointer;
            background: url(../img/piSport/more-bg.png) no-repeat;
            text-align: center;
            font-size: 3vw;
            background-size: 100% 100%;
            padding: 0.15%;
            width: 45%;
            height: 100%;
        }

    .support-sm {
        display:flex;
        justify-content:space-around;
        
    }

    .support-sm div{
    }

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

        .support img {
            width: 30%;
            height: 30%;
        }

        .support p {
            margin: 0 !important;
            padding: 5% 0;
            font-size: 3.5vw;
        }

    .brand-text {
        font-weight: 400;
        font-size: 4vw;
        margin: 0 !important
    }

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

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

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

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

        .sub-type div {
            cursor: pointer;
        }

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

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

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

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

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