@font-face {
    font-family: 'RuizChaopai' ;
    src: url("/assets/fonts/source/RuizChaopai.ttf");
}

#header-banner {
    width: 100%;
    height: calc( 37*0.53vw);
    position: relative;

    > img {
        width: 100%;
        height: calc( 37*0.53vw);
    }

    .masking {
        position: absolute;
        top: 0;
        left: 0;

        width: 60vw;
        height: calc( 37*0.53vw);
        /*background-color: #3C3C3C;*/
        background-image: linear-gradient(to right, rgba(4, 15, 43, 0.8), rgba(4, 15, 43, 0.5), rgba(4, 15, 43, 0.3), rgba(4, 15, 43, 0));
        z-index: 10;
    }

    color: #ffffff;

    .banner-title {
        position: absolute;
        bottom:  calc(14.54*0.53vw);
        left: 18.75vw;
        font-size: 2.2rem;
        z-index: 20;
        font-weight: bold
    }

    .banner-navigation {
        position: absolute;
        bottom:  calc(2.96*0.53vw);
        left: 18.75vw;
        font-size: 0.6rem;
        z-index: 20;
        >a:hover{
            text-decoration: underline;
        }
    }
}

#describe {
    margin: 0 18.75vw;
    margin-top:  calc(6.85*0.53vw);
    margin-bottom:  calc(6.5*0.53vw);

    .label {
        border-left: 5px solid #005BAD;


        > span {
            color: #333333;
            font-size: 1rem;
            margin-left: 8px;
        }
    }

    .text {
        font-size: 0.8rem;
        line-height: 1.2rem;
        margin-top:  calc(2.97*0.53vw);
        color: #333;
    }
}

#pain {
    margin: 0 18.75vw;
    margin-top:  calc(6.85*0.53vw);
    margin-bottom:  calc(6.5*0.53vw);

    .label {
        border-left: 5px solid #005BAD;


        > span {
            color: #333333;
            font-size: 1rem;
            margin-left: 8px;
        }
    }

    .list-box {
        margin-top:  calc(2.97*0.53vw);
        display: flex;
        justify-content: space-between;

        > li {
            background-color: #F6F6F6;
            cursor: pointer;
            width: 18.1vw;
            height:  calc(15.37*0.53vw);
            display: flex;
            padding-left: 1.04vw;
            padding-right: 0.9vw;

            .li-left {
                width: 5.31vw;
                display: flex;
                justify-content: center;
                align-items: center;

                > img {
                    width: 3.22vw;
                    height:  calc(5.28*0.53vw);
                }
            }

            .li-right {
                width: 23vw;
                margin-left: 0.93vw;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .p1 {
                    /*margin-top:  calc(3.98*0.53vw);*/
                    color: #3C3C3C;
                }

                .p2 {
                    margin-top:  calc(1.09*0.53vw);
                    color: #3C3C3C;
                    font-size: 0.7rem;
                    line-height: 1rem;
                }
            }
        }
    }
}

#architecture-img {
    background-color: #FFFFFF;
    margin: 0 18.75vw;
    /*margin-top:  calc(6.85*0.53vw);*/
    margin-bottom:  calc(6.5*0.53vw);

    .label {
        border-left: 5px solid #005BAD;


        > span {
            color: #333333;
            font-size: 1rem;
            margin-left: 8px;
        }
    }

    .img-box {
        margin: calc( 3*0.53vw) 1.25vw  calc(5.92*0.53vw) 1.25vw;

        > img {
            width: 100%;
        }
    }

}

#scene {
    background-color: #FFFFFF;
    margin-top:  calc(6.85*0.53vw);
    margin-bottom:  calc(8.14*0.53vw);
    display: flex;
    flex-direction: column;

    .label {
        margin: 0 18.75vw;
        border-left: 5px solid #005BAD;


        > span {
            color: #333333;
            font-size: 1rem;
            margin-left: 8px;
        }
    }

    .card-type-1 {
        margin: 0 18.75vw;
        display: flex;
        margin-top:  calc(3.98*0.53vw);
        height:  calc(61.76*0.53vw);

        .card-type-1-l {
            > p {
                cursor: pointer;
                width: 10vw;
                height:  calc(5.37*0.53vw);
                line-height:  calc(5.37*0.53vw);
                color: #333333;
                font-size: 0.9rem;
                margin-right: 1.14vw;
                margin-bottom: calc( 1*0.53vw);
                padding-left:  calc(1.25*0.53vw);

                > span {
                    margin-right: 0.8vw;
                }

            }

            > p:hover {
                background-color: #016BCA;
                color: #ffffff;
            }

            .cur {
                background-color: #016BCA;
                color: #ffffff;
            }
        }

        .content {
            display: none;
            width: 47.7vw;
            height:  calc(62.13*0.53vw);
            background-size: 100% 100%;

            .content-box {
                width: 47.7vw;
                height:  calc(62.13*0.53vw);
                display: flex;
                flex-direction: column;

                .p1 {
                    margin-left: 2.13vw;
                    margin-right: 2.13vw;
                    margin-top:  calc(4.62*0.53vw);
                    font-size: 1.2rem;
                    color: #333333;
                }

                .p2 {
                    margin-left: 2.13vw;
                    margin-right: 2.13vw;
                    margin-top: calc( 2*0.53vw);
                    font-size: 0.8rem;
                    color: #333333;
                }
            }

        }

        .selected {
            display: block;
        }
    }

    .card-type-2 {
        display: flex;
        flex-direction: column;

        .index_tab {
            margin: 0 18.75vw;
            margin-top:  calc(3.61*0.53vw);
            margin-bottom: calc( 4*0.53vw);
            display: flex;

            > a {
                cursor: pointer;
                width: 7.81vw;
                height:  calc(5.37*0.53vw);
                line-height:  calc(5.37*0.53vw);
                background-color: #F0F0F0;
                color: #333333;
                font-size: 0.9rem;
                margin-right: 1.14vw;
                text-align: center;
            }

            > a:hover {
                background-color: #016BCA;
                color: #ffffff;
            }

            .cur {
                background-color: #016BCA;
                color: #ffffff;
            }
        }

        .index_cont {
            display: flex;

            .list {
                display: none;
                padding: 0 18.75vw;
                /*padding-top:  calc(6.66*0.53vw);*/
                width: 62.5vw;
                height:  calc(65.55*0.53vw);
                background-size: 100% 100%;

                .list-box {
                    margin-top:  calc(6.66*0.53vw);
                    height:  calc(52.4*0.53vw);
                    background-color: rgba(255, 255, 255, 0.1);
                    display: flex;

                    .list-box-l {
                        width: 33.6vw;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        margin-right: 1.36vw;
                        margin-left: 1.36vw;

                        > p {
                            margin-top:  calc(4.26*0.53vw);
                            color: #ffffff;
                            font-size: 1.4rem;
                        }

                        > img {
                            margin-top:  calc(4.81*0.53vw);
                            /*width: 34.9vw;*/
                            height:  calc(36.57*0.53vw);
                        }
                    }

                    .list-box-r {
                        /*width: 24.89vw;*/
                        height: 100%;
                        width: 24vw;
                        background-color: #ffffff;
                        padding-left: 1.21vw;

                        .characteristic {
                            padding-top:  calc(2.33*0.53vw);
                        }

                        .list-box-r-rl {
                            margin-top:  calc(1.2*0.53vw);
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            width: 18.89vw;

                            > li {
                                background-color: #F6F6F6;
                                cursor: pointer;
                                margin-top:  calc(1.66*0.53vw);
                                height:  calc(8.8*0.53vw);
                                width: 21.45vw;
                                display: flex;
                                /*padding-left: 0.9vw ;*/
                                /*padding-right: 0.9vw ;*/

                                .li-left {
                                    margin-left:  calc(1.66*0.53vw);
                                    width: 3.37vw;
                                    display: flex;
                                    align-items: center;

                                    > div {
                                        width: 2.68vw;
                                        height:  calc(4.35*0.53vw);
                                        background-color: #016BCA;
                                        text-align: center;
                                        line-height:  calc(4.35*0.53vw);
                                        color: #fff;
                                        font-size: 1.2rem;
                                        font-weight: bold

                                    }
                                }

                                .li-right {
                                    width: 17vw;
                                    .p1 {
                                        margin-top:  calc(2.22*0.53vw);
                                        color: #333;
                                        font-size: 0.9rem;
                                    }

                                    .p2 {
                                        margin-top:  calc(0.99*0.53vw);
                                        color: #3C3C3C;
                                        font-size: 0.7rem;
                                        line-height: 0.8rem;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .selected {
                display: block;
            }
        }
    }

    .card-type-3 {
        margin: 0 18.75vw;

        > img {
            width: 100%;
        }

    }

    .card-type-4 {
        margin: 0 18.75vw;
        margin-top:  calc(3.98*0.53vw);
        display: flex;

        .card-type-4-l {

            background-color: #005BAD;
            padding-top:  calc(2.87*0.53vw);
            padding-bottom:  calc(2.87*0.53vw);

            .card-type-4-l-box {
                width: 16.28vw;
                padding:  calc(1.2*0.53vw) 1vw;
                display: flex;
                align-items: center;

                .circle {
                    /*line-height: 1.2rem;*/
                    /*font-size: 2rem;*/
                    /*color: #005BAD;*/
                    /*margin-right: 0.1vw;*/

                    width: 0.2vw;
                    height: 0.2vw;
                    border-radius: 0.2vw;
                    background-color: #005BAD;
                    margin-right: 0.2vw;
                }

                .title {
                    cursor: pointer;
                    color: #ffffff;
                    padding-right:  calc(1.25*0.53vw);
                    font-size: 0.8rem;
                    line-height: 1.4rem;

                }

            }

            .card-type-4-l-box:hover {
                background-color: #357DBE;
                .circle {
                    background-color: #fff;
                }
            }

            .cur {
                background-color: #357DBE;

                .circle {
                    background-color: #fff;
                }
            }

        }

        .card-type-4-r {
            background-color: #F6F6F6;

            .content {
                display: none;

                .content-box {
                    display: flex;
                    flex-direction: column;
                    margin-top: calc( 2*0.53vw);

                    .p1 {
                        word-break: break-all;
                        margin-left: 1.25vw;
                        margin-right: 1.25vw;
                        margin-top: calc( 3*0.53vw);
                        font-size: 0.8rem;
                        color: #333333;
                        line-height: 1.4rem;
                    }
                }

            }

            .selected {
                display: block;
            }
        }
    }
}

#advantage {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    margin: 0 18.75vw;
    margin-top:  calc(6.85*0.53vw);
    margin-bottom:  calc(8.14*0.53vw);

    .label {
        border-left: 5px solid #005BAD;


        > span {
            color: #333333;
            font-size: 1rem;
            margin-left: 8px;
        }
    }

    > ul {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
        margin-top:  calc(1.4*0.53vw);

        > li {
            margin-top: calc( 2*0.53vw);
            display: flex;
            flex-direction: column;
            width: 25.68vw;
            padding: 0 2.29vw;
            height:  calc(16.85*0.53vw);
            background-color: #F6F6F6;

            .p1 {
                margin-top:  calc(5.18*0.53vw);
                font-size: 1rem;
                color: #333333;
                display: flex;
                > span {
                    font-size: 1.3rem;
                    color: #016BCA;
                    margin-right: 0.5vw;
                    font-family: 'RuizChaopai';
                }
            }

            .p2 {
                margin-top:  calc(1.57*0.53vw);
                color: #333333;
                font-size: 0.7rem;
                line-height: 1.1rem;
            }
        }
    }
}