.public_w{
    max-width: 1480;
    width: 85%;
    margin: 0 auto;
}

*{
    margin: 0;
    padding: 0;
}
.title{
    font-family: Gothic_bold;
    font-size: calc(10px + 2rem);
    color: #333333;
}

.home{
    /* 顶部banner */
    .swiper1{
        width: 100%;
        position: relative;

        .swiper-slide{
            width: 100%;
            height: 100%;
            position: relative;

            >img{
                width: 100%;
            }

            >div{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                /* border: 1px solid #000; */

                .public_w{
                    width: 85%;
                    display: flex;
                    flex-direction: column;
                    /* border: 1px solid #000; */

                    .wow.fadeInUp {
                        animation-name: fadeInUp;
                        animation-duration: 3s;
                        animation-iteration-count: infinite;
                        /* animation-iteration-count: inherit; */
                    }
                    >p{
                        font-family: Gothic_bold;
                        font-size: calc(18px + 1.5rem);
                        color: #FFFFFF;
                    }
                    >span{
                        font-family: CenturyGothic_Regular;
                        font-size: calc(10px + 0.6rem);
                        color: #FFFFFF;
                        margin-top: calc(10px + 1.5rem);
                        margin-bottom: calc(20px + 3rem);
                    }
                    >a{
                        width: calc(100px + 6rem);
                        height: calc(30px + 1.5rem);
                        border-radius: calc(30px + 1.5rem);
                        border: 1px solid #FFFFFF80;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        transition: all 0.3s;

                        >p{
                            margin-left: calc(10px + 0.9rem);
                            font-family: CenturyGothic_Regular;
                            font-size: calc(10px + 0.3rem);
                            color: #FFFFFF;
                        }
                        >img{
                            margin-right: calc(3px + 0.5rem);
                            width: calc(18px + 1rem);
                        }
                    }
                    >a:hover{
                        border: 1px solid #00529D;
                        background: #00529D;
                    }
                }
            }
        }

        /* 分页器 */
        .swiper-pagination{
            position: absolute;
            width: 85%;
            height: 10px;
            left: 50%;
            transform: translateX(-50%);
            bottom: calc(13px + 2rem);
            display: flex;
            /* align-items: center; */
            /* border: 1px solid #000; */

            .swiper-pagination-bullet{
                width: 10px;
                height: 10px;
                background: #9F9F9F;
                border-radius: 50%;
                margin-right: calc(4px + 0.5rem);
            }
            .swiper-pagination-bullet-active{
                width: 10px;
                height: 10px;
                background: #00529D;
                border-radius: 50%;
            }
        }

        >img{
            width: calc(10px + 0.9rem);
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: calc(13px + 1rem);
            z-index: 10;
            animation: a1 3s linear infinite;
        }
    }

    /* 国舜简介 */
    .index_about{
        width: 100%;
        background: url('../images/index_bg1.png') no-repeat center center;
        background-size: 100% 100%;
        padding-top: calc(20px + 4rem);
        padding-bottom: calc(47px + 4rem);
        display: flex;
        position: relative;

        .index_about1{
            width: 47.291%;
            position: relative;

            >div{
                width: calc(36px + 5rem);
                height: calc(36px + 5rem);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                /* border: 1px solid #000; */
                >img{
                    width: calc(13px + 0.5rem);
                    z-index: 10;
                }
                >div{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    /* width: 5px;
                    height: 5px; */
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-self: center;
                    opacity: 0.7;
                }
                >div:nth-of-type(1){
                    border: 1px solid #ffffff50;
                    background: #ffffff00;
                    animation: a2 5s  infinite;
                }
                >div:nth-of-type(2){
                    border: 1px solid #ffffff45;
                    animation: a3 4s  infinite;
                }
                >div:nth-of-type(3){
                    border: 1px solid #ffffff40;
                    animation: a4 3s  infinite;
                }
                >div:nth-of-type(4){
                    border: 1px solid #ffffff35;
                    animation: a5 2s  infinite;
                }
            }
        }
        .index_about2{
            width: 39.77%;
            /* height: 100px; */
            margin-left: calc(21px + 2rem);
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* border: 1px solid #000; */

            >span{
                font-family: CenturyGothic_Regular;
                font-size: calc(10px + 0.3rem);
                color: #333333;
                line-height: calc(10px + 1rem);
                margin-top: calc(10px + 1rem);
                margin-bottom: calc(14px + 1rem);
            }
            >div{
                width: calc(100px + 3.5rem);
                height: calc(32px + 1rem);
                background: #00529D;
                border-radius: calc(32px + 1rem);
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                
                >a{
                    width: 100%;
                    height: 100%;
                    background: #00529D;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transform: translateX(calc(10px + 0.5rem));
                    transition: all 0.3s;

                    >p{
                        font-family: CenturyGothic_Regular;
                        font-size: calc(10px + 0.3rem);
                        color: #FFFFFF;
                        margin-right: calc(10px + 0.35rem);
                    }
                    >img{
                        width: calc(10px + 0.4rem);
                        opacity: 0;
                        /* transform: translateX(25px); */
                    }
                }
                >a:hover{
                    transform: translateX(0);

                    >img{
                        opacity: 1;
                    }
                }
            }
        }
        .index_about3{
            position: absolute;
            width: 85%;
            left: 50%;
            bottom: calc(10px + 1.5rem);
            transform: translateX(-50%);
            display: flex;
            justify-content: space-between;
            /* border: 1px solid #000; */
            
            >li{
                width: 31.89%;
                background: #FFFFFF;
                box-shadow: 6px 7px 20px 0px rgba(56,101,142,0.2);
                border-radius: 4px;
                padding-top: calc(14px + 2rem);
                padding-bottom: calc(10px + 2rem);
                padding-left: calc(14px + 3rem);
                display: flex;
                align-items: center;
                transition: all 0.3s;

                >img{
                    margin-right: calc(13px + 1rem);
                }
                >div{
                    display: flex;
                    flex-direction: column;

                    >p{
                        font-family: Gothic_bold;
                        font-size: calc(10px + 0.5rem);
                        color: #00529D;
                        margin-bottom: 0.5rem;
                        transition: all 0.3s;

                        >span{
                            font-size: calc(12px + 1.5rem);
                            transition: all 0.3s;
                        }
                    }
                    >span{
                        font-family: CenturyGothic_Regular;
                        font-size: calc(10px + 0.4rem);
                        color: #666666;
                        transition: all 0.3s;
                    }
                }
            }
            >li:hover{
                background: #00529D;

                >div{
                    >p{
                        color: #fff;

                        >span{
                            color: #FFFFFF;
                        }
                    }
                    >span{
                        color: #FFFFFF;
                    }
                }
            }
            >li:nth-child(1){
                >img{
                    width: calc(13px + 2.5rem);
                    height: calc(18px + 2rem);
                }
            }
            >li:nth-child(2){
                >img{
                    width: calc(14px + 2rem);
                    height: calc(18px + 2rem);
                }
            }
            >li:nth-child(3){
                >img{
                    width: calc(19px + 2rem);
                    height: calc(11px + 2rem);
                }
            }
        }
    }

    /* 产品 */
    .index_pro{
        width: 100%;
        background: url('../images/index_bg3.png') no-repeat center center;
        background-size: 100% 100%;
        padding: calc(30px + 5rem) 0;
        display: flex;
        flex-direction: column;
        /* border: 1px solid #000; */

        .index_pro1{
            width: 85%;

            /* border: 1px solid #000; */

            .index_pro1_top{
                width: 100%;
                border-bottom: 1px #E5E5E5 solid;
                display: flex;
                justify-content: space-between;
                
                >.swiper2{
                    width: 67.36%;
                    overflow: hidden;
                    /* border: 1px solid #f00; */

                    .swiper-slide{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        position: relative;
                        cursor: pointer;
                        padding-bottom: calc(10px + 0.5rem);
                        /* border: 1px solid #0f0; */

                        >div{
                            width: 100%;
                            height: calc(34px + 1.5rem);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            position: relative;

                            >img{
                                position: absolute;
                                transition: all 0.4s;
                            }
                            >img:nth-child(1){
                                opacity: 1;
                            }
                            >img:nth-child(2){
                                opacity: 0;
                            }
                        }
                        >p{
                            font-family: CenturyGothic_Regular;
                            font-size: calc(10px + 0.3rem);
                            color: #666666;
                            margin-top: calc(10px + 0.25rem);
                            transition: all 0.4s;
                        }
                        >span{
                            width: calc(24px + 4rem);
                            height: 2px;
                            background: #00529D;
                            position: absolute;
                            left: 50%;
                            transform: translateX(-50%);
                            /* bottom: calc(-10px - 0.65rem); */
                            bottom: 0;
                            transition: all 0.4s;
                            /* z-index: 100; */
                            opacity: 0;
                        }
                    }
                    .swiper-slide:hover{
                        >div{
                            >img:nth-child(1){
                                opacity: 0;
                            }
                            >img:nth-child(2){
                                opacity: 1;
                            }
                        }
                        >p{
                            color: #00529D;
                        }
                        >span{
                            opacity: 1;
                        }
                    }
                    .swiper-slide-thumb-active{
                        >div{
                            >img:nth-child(1){
                                opacity: 0;
                            }
                            >img:nth-child(2){
                                opacity: 1;
                            }
                        }
                        >p{
                            color: #00529D;
                        }
                        >span{
                            opacity: 1;
                        }
                    }
                }
            }
        }
        .index_pro2{
            width: 85%;
            /* height: calc(100px + 20rem); */
            margin-top: calc(10px + 2rem);
            box-shadow: 0px 0px 16px 0px rgba(70,108,143,0.2);
            /* border: 1px solid #000; */

            >.swiper3{
                width: 100%;
                height: 100%;
                overflow: hidden;

                .swiper-slide{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: space-between;
                    opacity: 0;
                    transition: all 0.3s;
                    z-index: 10;
                    background: #fff;

                    >div{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    >div:nth-child(1){
                        width: 56.3%;
                        height: 100%;

                        >img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    >div:nth-child(2){
                        width: 43.6%;
                        flex-direction: column;
                        padding: 0 calc(30px + 3.5rem);

                        >p:nth-of-type(1){
                            font-family: Gothic_bold;
                            font-size: calc(14px + 1rem);
                            color: #333333;
                        }
                        >p:nth-of-type(2){
                            font-family: CenturyGothic_Regular;
                            font-size: calc(10px + 0.3rem);
                            color: #333333;
                            line-height: calc(10px + 1rem);
                            margin-top: calc(18px + 1rem);
                            margin-bottom: calc(10px + 1.5rem);
                        }
                        >div{
                            width: calc(100px + 3.5rem);
                            height: calc(32px + 1rem);
                            background: #00529D;
                            border-radius: calc(32px + 1rem);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            overflow: hidden;
                            
                            >a{
                                width: 100%;
                                height: 100%;
                                background: #00529D;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                transform: translateX(calc(10px + 0.5rem));
                                transition: all 0.3s;
            
                                >p{
                                    font-family: CenturyGothic_Regular;
                                    font-size: calc(10px + 0.3rem);
                                    color: #FFFFFF;
                                    margin-right: calc(10px + 0.35rem);
                                }
                                >img{
                                    width: calc(10px + 0.4rem);
                                    opacity: 0;
                                    /* transform: translateX(25px); */
                                }
                            }
                            >a:hover{
                                transform: translateX(0);
            
                                >img{
                                    opacity: 1;
                                }
                            }
                        }
                    }
                }
                .swiper-slide-active{
                    opacity: 1;
                    z-index: 20;
                }
            }
        }
        .index_pro3{
            width: 85%;
            margin-top: calc(20px + 5rem);
            display: flex;
            flex-direction: column;
            align-items: center;
            /* border: 1px solid #000; */

            >ul{
                width: 100%;
                margin-top: calc(10px + 2rem);
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                /* border: 1px solid #000; */

                >li{
                    width: 32.16%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    background: #F9F9F9;
                    transition: all 0.3s;
                    padding: calc(10px + 2rem) 0;
                    margin-top: calc(10px + 0.8rem);

                    >img{
                        width: calc(11px + 4rem);
                        height: calc(11px + 4rem);
                    }
                    >p{
                        font-family: Gothic_bold;
                        font-size: calc(10px + 0.5rem);
                        color: #666666;
                        margin-top: calc(10px + 0.5rem);
                    }
                }
                >li:nth-child(1),>li:nth-child(2),>li:nth-child(3){
                    margin-top: 0;
                }
                >li:hover{
                    box-shadow: 0px 0px 20px 0px rgba(44,65,84,0.16);
                }
            }
        }
    }

    /* Marketing Network */
    .wp1{
        width: 100%;
        background: url('../images/index_bg4.jpg') no-repeat center center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        padding: calc(25px + 4rem) 0;

        >.public_w{
            width: 85%;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* border: 1px solid #f00; */

            >p{
                margin-bottom: calc(20px + 3.5rem);
                color: #fff;
            }
            >div{
                width: 100%;
                display: flex;
                justify-content: space-between;


                >.l{
                    width: 38.1%;

                    .mess_form{
                        width: 100%;
                        background: #F6F6F6;
                        box-shadow: 0px 0px 16px 0px rgba(0,82,157,0.11);
                        border-radius: 6px;
                        padding: 0 calc(15px + 1.5rem);
                        padding-top: calc(10px + 2rem);
                        padding-bottom: calc(17px + 1.5rem);
                        display: flex;
                        flex-direction: column;

                        >p{
                            font-family: Gothic_bold;
                            font-size: calc(10px + 0.4rem);
                            color: #666666;
                            line-height: calc(10px + 1rem);
                            margin-bottom: calc(10px + 0.5rem);
                        }
                        .input{
                            width: 100%;
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-between;

                            .inp{
                                border-radius: 4px;
                                margin-bottom: calc(10px + 0.2rem);
                                font-family: CenturyGothic_Regular;
                                font-size: calc(10px + 0.3rem);
                                color: #666666;
                            }
                            .inp:nth-last-of-type(1){
                                margin-bottom: 0;
                            }
                            .inp1{
                                width: 48.52%;
                                
                            }
                            .inp2{
                                width: 100%;
                                height: calc(22px + 1.5rem);

                            }
                            .inp3{
                                width: 100%;
                            }
                            .in1,.in2{
                                width: 100%;
                                border: none;
                                border: 1px solid #CCCCCC;
                                background: #F6F6F6;
                            }
                            .in1{
                                height: calc(22px + 1.5rem);
                                padding: 0 calc(10px + 0.5rem);
                            }
                            .in2{
                                height: calc(50px + 2.5rem);
                                padding: calc(10px + 0.5rem) calc(10px + 0.5rem);
                            }
                        }
                        .Emails{
                            width: 100%;
                            margin-top: calc(10px + 0.45rem);

                            .subBox{
                                width: 100%;
                                height: calc(26px + 1rem);
                                background: #00529D;
                                border-radius: 4px;
                                border: none;
                                font-family: CenturyGothic_Regular;
                                font-size: calc(10px + 0.3rem);
                                color: #FFFFFF;
                            }
                        }
                    }
                }
                >.r{
                    width: 61.55%;
                    position: relative;
                    /* border: 1px #f00 solid; */

                    >.map{
                        width: 100%;
                    }
                    .dian{
                        position: absolute;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        animation: a6 5s  infinite;
                        background: #D8181050;
                        border-radius: 50%;
                        width: 2px;
                        height: 2px;

                        >p{
                            width: 2px;
                            height: 2px;
                            background: #D81810;
                            border-radius: 50%;
                            animation: a7 3s infinite;
                        }
                    }
                    .dian1{
                        top: 36.14%;
                        left: 16.52%;
                    }
                    .dian2{
                        top: 36.14%;
                        left: 47.24%;
                    }
                    .dian3{
                        top: 43.49%;
                        left: 58.52%;
                    }
                    .dian4{
                        top: 56.51%;
                        left: 51.93%;
                    }
                    .dian5{
                        top: 43.73%;
                        right: 19.18%;
                    }
                    .dian6{
                        top: 74.57%;
                        right: 14.68%;
                    }

                    .gj{
                        width: calc(20px + 2.5rem);
                        height: calc(17px + 1.5rem);
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                    .gj1{
                        top: 40.29%;
                        left: 19.98%;
                    }
                    .gj2{
                        top: 23.79%;
                        left: 48.3%;
                    }
                    .gj3{
                        top: 49.2%;
                        left: 61.58%;
                    }
                    .gj4{
                        top: 61.54%;
                        left: 54.77%;
                    }
                    .gj5{
                        top: 79.16%;
                        left: 87.71%;
                    }
                    .gj6{
                        width: calc(100px + 5.5rem);
                        height: calc(40px + 2.3rem);
                        /* display: flex; */
                        background: #2271CE86;
                        border-radius: 2px;
                        font-family: CenturyGothic_Regular;
                        font-size: calc(8px + 0.5rem);
                        color: #FFFFFF;
                        line-height: calc(10px + 0.9rem);
                        padding: calc(10px + 0.55rem) calc(10px + 0.8rem);
                        top: 21.53%;
                        left: 68.83%;
                    }
                }
            }
        }
    }

    /* Power Display */
    .wp2{
        width: 85%;
        margin-top: calc(30px + 5rem);
        margin-bottom: calc(60px + 5rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        /* border: 1px solid #000; */

        >ul{
            width: 100%;
            margin-top: calc(10px + 2rem);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            >li{
                position: relative;
                margin-bottom: calc(10px + 0.4rem);
                overflow: hidden;
                cursor: pointer;
                
                >img{
                    width: 100%;
                    transition: all 0.5s;
                }
                >div{
                    width: 100%;
                    height: calc(48px + 3rem);
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    padding-left: calc(10px + 2rem);
                    padding-right: calc(17px + 1.5rem);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    /*background: linear-gradient(0deg, rgba(26,52,76,0.06) 0%,  #1A344C10 100%);*/

                    >p{
                        font-family: Gothic_bold;
                        font-size: calc(10px + 0.5rem);
                        color: #FFFFFF;
                    }
                    >img{
                        width: calc(15px + 1.5rem);
                    }
                }
            }
            >li:nth-child(1){
                width: 63.51%;
            }
            >li:nth-child(2){
                width: 35.27%;
            }
            >li:nth-child(3),>li:nth-child(4){
                width: 49.32%;
                margin-bottom: 0;
            }
            >li:nth-child(4){
                >div{
                    background: linear-gradient(0deg, rgba(26,52,76,0.16) 0%,  rgba(26,52,76,0.16) 100%);
                }
            }
            >li:hover{
                >img{
                    transform: scale(1.1);
                }
            }
        }
    }


    /* vr */
    .vr{
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* display: none; */
        z-index: 1001;
        transition: all 3s;

        #frame_1{
            width: 80%;
            height: 80%;
        }
        >div{
            width: calc(80px + 5rem);
            height: calc(26px + 1.5rem);
            background: #00529D;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: calc(10px + 0.8rem);
            cursor: pointer;

            >img{
                width: calc(10px + 0.4rem);
            }
            >p{
                font-family: CenturyGothic_Regular;
                font-size: calc(10px + 0.4rem);
                color: #FFFFFF;
                margin-left: calc(10px + 0.35rem);
            }
        }
    }
}

@keyframes a1{
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-30px);
    }
}

@keyframes a2{
    100%{
        transform: scale(30);
    }
    0%{
        transform: scale(2);
    }
}
@keyframes a3{
    100%{
        transform: scale(35);
    }
    0%{
        transform: scale(2);
    }
}
@keyframes a4{
    100%{
        transform: scale(40);
    }
    0%{
        transform: scale(2);
    }
}
@keyframes a5{
    100%{
        transform: scale(50);
    }
    0%{
        transform: scale(2);
    }
}

@keyframes a6{
    100%{
        transform: scale(20);
    }
    0%{
        transform: scale(2);
    }
}
@keyframes a7{
    100%{
        transform: scale(0.6);
    }
    0%{
        transform: scale(0);
    }
}




@media screen and (max-width: 1100px){
    .home{
        /* 国舜简介 */
        .index_about{
            flex-direction: column;
            align-items: center;
            /* padding-bottom: calc(20px + 10rem);       */

            .index_about1{
                width: 85%;
            }
            .index_about2{
                width: 85%;
                margin: calc(10px + 1rem) 0;
            }
            .index_about3{
                width: 85%;
                flex-direction: column;
                position: static;
                transform: translateX(0);

                >li{
                    width: 100%;
                }
                >li:nth-child(2){
                    margin: calc(10px + 0.5rem) 0;
                }
            }
        }

        /* 产品 */
        .index_pro{
            .index_pro1{
                width: 100%;

                .index_pro1_top{
                    width: 85%;
                    flex-direction: column;
                    margin: 0 auto;

                    >.swiper2{
                        width: 100%;

                        .swiper-slide{

                            >p{
                                text-align: center;
                            }
                        }
                    }
                }
            }
            .index_pro2{
                width: 85%;

                >.swiper3{
                    width: 100%;

                    .swiper-slide{
                        flex-direction: column;

                        >div:nth-child(1){
                            width: 100%;
                        }
                        >div:nth-child(2){
                            width: 100%;
                            padding: calc(10px + 1rem) calc(30px + 3.5rem);
                        }
                    }
                }
            }
            .index_pro3{
                width: 85%;

                >ul{
                    >li{
                        width: 48%;
                        text-align: center;
                        padding: calc(10px + 2rem) calc(10px + 0.5rem);
                    }
                    >li:nth-child(3){
                        margin-top: calc(10px + 0.8rem);
                    }
                }
            }
        }

        /* Marketing Network */
        .wp1{
            >.public_w{
                width: 85%;

                >div{
                    width: 100%;
                    flex-direction: column;

                    >.l{
                        width: 100%;
                    }
                    >.r{
                        width: 100%;
                        margin-top: calc(10px + 2rem);

                        .gj6{
                            top: 4.53%;
                            left: 68.83%;
                        }
                    }
                }
            }
        }
    }


    @keyframes a6{
        100%{
            transform: scale(10);
        }
        0%{
            transform: scale(0.5);
        }
    }
    @keyframes a7{
        100%{
            transform: scale(0.4);
        }
        0%{
            transform: scale(0);
        }
    }
    
}