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

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

    color: #ffffff;

    .banner-title {
        position: absolute;
        bottom:  calc(29.8*0.53vw);
        left: 45.75vw;
        font-size: 2.5rem;
    }

    .banner-navigation {
        position: absolute;
        bottom:  calc(20.91*0.53vw);
        left: 42.75vw;
        font-size: 1.3rem;
    }
}

#introduce {
    .title {
        margin: calc( 6*0.53vw) 18.75vw calc( 2*0.53vw) 18.75vw;
        text-align: center;
        color: #3C3C3C;
        font-size: 1.8rem;
    }

    .text {
        margin: 0 18.75vw;
        line-height: 1.8rem;
        font-size: 0.9rem;
        color: #4D4D4D;
    }

    .imgs {
        margin: 0 9vw;
        display: flex;
        justify-content: space-between;
        margin-top: calc( 5*0.53vw);

        > div {
            width: 26vw;
            height: calc( 48*0.53vw);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-size: 100% 100%;

            .p1 {
                font-size: 1.8rem;
                color: #fff;
            }

            .p2 {
                margin-top: calc( 3*0.53vw);
                font-size: 1.2rem;
                color: #fff;
            }
        }
    }
}

#course {
    background-color: #FAFAFA;
    padding: calc( 6*0.53vw) 18.75vw calc( 6*0.53vw) 18.75vw;

    .title {
        text-align: center;
        color: #3C3C3C;
        font-size: 1.8rem;
    }

    .coures-box {
        display: flex;

        .coures-box-l {
            width: 61.3vw;
            margin-top: calc( 5*0.53vw);
            height: calc( 45*0.53vw); /* 容器固定高度，超过的部分将会出现滚动条 */
            .year {
                cursor: pointer;
                font-size: 3.5rem;
                color: #ccc;
            }
            .year-box{
                display: none;
                .year {
                    font-size: 3.5rem;
                    color: #ccc;
                }
                .year-list{
                    padding-right: 30vw;
                    margin-top: calc( 3*0.53vw);
                    margin-bottom: calc( 2*0.53vw);
                    overflow: auto;
                    cursor: pointer;
                    height: calc( 31*0.53vw);
                    .list {
                        margin-top: calc( 2*0.53vw);
                        line-height: 1.4rem;
                        font-size: 0.9rem;
                        color: #333;
                    }
                }
            }

            .year-box-is{
                display: block;
                .year {
                    font-size: 3.5rem;
                    color: #016BCA;
                }
            }
        }

        .year-list::-webkit-scrollbar {
            width: 0; /* 隐藏滚动条 */
        }

        .coures-box-r {
            margin-top: calc( 2*0.53vw);
            border-right: 1px solid #D5D5D5;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: calc( 3*0.53vw) 0;

            .coures-box-r-year {
                cursor: pointer;
                height: calc( 4*0.53vw);
                padding-right: calc( 2*0.53vw);
                line-height: calc( 4*0.53vw);
                color: #333;
            }

            .is {
                border-right: 2px solid #016BCA;
            }
        }
    }
}
#qualifications{
    margin: 0 18.75vw;
    .title {
        margin: calc( 6*0.53vw) 18.75vw calc( 5*0.53vw) 18.75vw;
        text-align: center;
        color: #3C3C3C;
        font-size: 1.8rem;
    }
    >ul{
        display: flex;
        justify-content: space-between;
        margin-bottom: calc( 4*0.53vw);
        >li{
            /*margin-right: 3vw;*/
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            >img{
                width: 5vw;
                height:  calc(6.7*0.53vw);
            }
            >p{
                font-size: 0.8rem;
                line-height: 1rem;
                color: #333;
            }
            .p1{
                height: calc( 2*0.53vw)
            }
        }
    }
    .more {
        text-align: right;
        margin-top: 50px;
        margin-bottom: 50px;
        font-size: 0.9rem;
        color: #333;
        .span1 {
            font-size: 0.9rem;
            margin-left: 6px;
        }
    }
    .more:hover{
        text-decoration: underline;
    }
}
#advantage{
    height:  calc(55.8*0.53vw);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    .p1{
        margin-top: calc( 8*0.53vw);
        color: #fff;
        font-size: 1.3rem;
        text-align: center;
    }
    .p2{
        margin-top: calc( 3*0.53vw);
        color: #fff;
        font-size: 1.3rem;
        text-align: center;
    }
    >ul{
        margin-top: calc( 12*0.53vw);
        display: flex;
        justify-content: center;
        align-items: center;
        >li{
            margin-left: 6vw;
            margin-right: 6vw;
            .li-p1{
                font-size: 6rem;
                color: #fff;
                text-align: center;
            }
            .li-p2{
                margin-top: calc( 4*0.53vw);
                font-size: 1.3rem;
                color: #fff;
                text-align: center;
            }
        }
    }
}
#contact{
    margin: calc( 6*0.53vw) 18.75vw calc( 7*0.53vw) 18.75vw;
    .title{
        text-align: center;
        color: #3C3C3C;
        font-size: 1.8rem;
    }
    .box{
        margin-top: calc( 5*0.53vw);
        display: flex;
        justify-content: space-between;
        .phone,.address,.wx{
            width: 15.8vw;
            padding: 0 2vw;
            height:  calc(34.5*0.53vw);
            background-color: #FAFAFA;
        }
        .phone{
            .top-box{
                height: calc( 17*0.53vw);
                .phone-title{
                    margin-top: calc( 3*0.53vw);
                    font-size: 1.1rem;
                    color: #333333;
                }
                .phone-border{
                    margin-top: calc( 2*0.53vw);
                    border-bottom: 1px solid #ccc;;
                }
                .phone-label{
                    margin-top: calc( 4*0.53vw);
                    font-size: 0.8rem;
                    color: #343434 ;
                }
                .phone-no{
                    margin-top: calc( 2*0.53vw);
                    color: #016BCA;
                    font-size: 1.8rem;
                }
            }

            .phone-email-label{
                margin-top: calc( 3*0.53vw);
                font-size: 0.8rem;
                color: #343434 ;
            }
            .phone-email-no{
                margin-top: calc( 2*0.53vw);
                color: #333;
                font-size: 0.8rem;
            }
        }
        .address{
            .top-box {
                height: calc( 17*0.53vw);
                .address-title{
                    margin-top: calc( 3*0.53vw);
                    font-size: 1.1rem;
                    color: #333333;
                }
                .address-border{
                    margin-top: calc( 2*0.53vw);
                    border-bottom: 1px solid #ccc;;
                }
                .address-label{
                    margin-top: calc( 4*0.53vw);
                    font-size: 0.8rem;
                    color: #343434 ;
                }
                .address-no{
                    margin-top: calc( 2*0.53vw);
                    color: #333333;
                    font-size: 0.8rem;
                }
            }

            .address-2-label{
                margin-top: calc( 3*0.53vw);
                font-size: 0.8rem;
                color: #333333 ;
            }
            .address-2-no{
                margin-top: calc( 2*0.53vw);
                color: #333;
                font-size: 0.8rem;
            }
        }
        .wx{
            .wx-title{
                margin-top: calc( 3*0.53vw);
                font-size: 1.1rem;
                color: #333333;
            }
            .wx-border{
                margin-top: calc( 2*0.53vw);
                border-bottom: 1px solid #ccc;;
            }
            .img-box{
                margin-top:  calc(5.5*0.53vw);
                text-align: center;
                >img{
                    width: 7.4vw;
                }
            }
            .tx{
                margin-top: calc( 1*0.53vw);
                text-align: center;
                font-size: 0.8rem;
                color: #333;
            }

        }
    }
}
.test{
    margin: auto 0;
}