.main {
    font-size: 0
}

.first-screen {
    background: url(../images/banner-60222dafa2.jpg) no-repeat center center fixed;
    background-size: cover;
    padding-top: 16.87%;
    overflow: hidden;
    text-align: center
}

.first-screen .main-title {
    font-size: 90px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 9px;
    text-align: center;
    text-shadow: 0 2px 23px rgba(8,19,29,.77)
}

.first-screen .sub-title {
    font-size: 40px;
    color: #fafafa;
    letter-spacing: 2.67px;
    text-align: center;
    line-height: 61px;
    text-shadow: 0 2px 23px rgba(8,19,29,.77);
    margin-bottom: 80px
}

.second-screen {
    width: 100%;
    height: 837px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.second-screen h1 {
    margin: 72px 0 40px;
    font-size: 45px;
    color: #404040;
    text-align: center
}
.third-screen h1 {
    margin:90px 0 25px;
    font-size: 45px;
    color: #404040;
    text-align: center

}

.second-screen p ,.third-screen p{
    margin: 0 auto;
    font-size: 24px;
    color: #5a5a5a;
    text-align: center;
    line-height: 45px;
    margin-bottom: 25px;
}

.second-screen .audios {
    margin-top: 3.75%
}

.second-screen .audios .audio-block {
    display: inline-block;
    width: 25%;
    height: 302px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    cursor: pointer
}

.second-screen .audios .audio-block .content {
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.second-screen .audios .audio-block .wrapper {
    width: 100%;
    top: 80px
}

.second-screen .audios .audio-block .wrapper .title {
    font-size: 40px;
    color: #fff;
    text-align: center
}

.second-screen .audios .audio-block .wrapper .title-2 {
    font-size: 30px;
    color: #fff;
    text-align: center
}

.second-screen .audios .audio-block .wrapper .listen {
    border: 2px solid #fff;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    width: 80px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px
}

.second-screen .audios .audio-block .mask {
    position: absolute;
    top: 0;
    opacity: .3;
    background: #002966;
    padding-top: 86px;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.second-screen .audios .audio-block .hover {
    position: absolute;
    top: 0;
    display: none;
    background: #002966;
    opacity: .5;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 78px;
    text-align: center
}

.second-screen .audios .audio-block .hover img {
    margin: 0 auto
}

.second-screen .audios .audio-block .hover .pause {
    display: none
}

.second-screen .audios .first-block {
    background: url(../images/1hlw.png) no-repeat center center;
    background-size: cover
}

.second-screen .audios .second-block {
    background: url(../images/2zsjm.png) no-repeat center center;
    background-size: cover
}

.second-screen .audios .third-block {
    background: url(../images/3fdc.png) no-repeat center center;
    background-size: cover
}

.second-screen .audios .forth-block {
    background: url(../images/4jy.png) no-repeat center center;
    background-size: cover
}

.second-screen .audios .fifth-block {
    background: url(../images/5bx.png) no-repeat center center;
    background-size: cover
}

.second-screen .audios .sixth-block {
    background: url(../images/6zx.png) no-repeat center center;
    background-size: cover
}

.second-screen .audios .seventh-block {
    background: url(../images/7sp.png) no-repeat center center;
    background-size: cover
}

.second-screen .audios .eighth-block {
    background: url(../images/8pf.png) no-repeat center center;
    background-size: cover
}

.third-screen .third-pic {
    width: 100%
}

.forth-screen {
    padding-top: 4.16%
}

.forth-screen .wrapper {
    width: 73.5%;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 5.73%
}

.forth-screen .wrapper .card {
    display: inline-block;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 33.3%;
    padding-top: 8.2%;
    padding-bottom: 10px
}

.forth-screen .wrapper .card h1 {
    font-size: 28px;
    color: #5a5a5a;
    text-align: center
}

.forth-screen .wrapper .card p {
    width: 70%;
    height: 13.4%;
    font-size: 16px;
    color: #aaa;
    text-align: justify;
    line-height: 26px;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis
}

.forth-screen .wrapper .card:nth-child(4),.forth-screen .wrapper .card:nth-child(5),.forth-screen .wrapper .card:nth-child(6) {
    border-bottom: none
}

.forth-screen .wrapper .card:nth-child(3),.forth-screen .wrapper .card:nth-child(6) {
    border-right: none
}

.forth-screen .wrapper .card:hover {
    -webkit-box-shadow: 5px 10px 29px -5px #cfd7e1;
    box-shadow: 5px 10px 29px -5px #cfd7e1
}
.forth-screen .wrapper .card img {
    width: 80px;
}

.fifth-screen {
    text-align: center
}

.fifth-screen h1 {
    margin: 0 0 52px;
    font-size: 45px;
    color: #404040
}

.fifth-screen .fifth-wrapper {
    width: 100%;
    background: url(../images/bg-fifth-de53f6841c.jpg) no-repeat center center fixed;
    background-size: cover;
    padding: 0
}

.fifth-screen .flex-box {
    width: 20%;
    height: 735px;
    display: inline-block;
    position: relative;
    -webkit-transition: all .3s;
    transition: all .3s;
    list-style: none
}

.fifth-screen .flex-box .common {
    width: 100%;
    height: 100%;
    border-right: 2px solid #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.fifth-screen .flex-box .common:nth-child(4) {
    border-right: none
}

.fifth-screen .flex-box .mask {
    opacity: .7;
    background: #05275a
}

.fifth-screen .flex-box .content {
    position: absolute;
    top: 0;
    padding-top: 255px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s
}

.fifth-screen .flex-box .content h3 {
    margin-top: 80px;
    font-size: 28px;
    color: #fff;
    text-align: center
}

.fifth-screen .flex-box .content p {
    display: none;
    margin: 0 auto;
    width: 50%;
    font-size: 18px;
    color: #fff;
    text-align: justify
}

.fifth-screen .big {
    width: 40%;
    -webkit-transition: all .3s;
    transition: all .3s
}

.fifth-screen .big .mask {
    opacity: .7;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(13%,rgba(191,213,242,.8)),color-stop(85%,#05275a));
    background-image: linear-gradient(-180deg,rgba(191,213,242,.8) 13%,#05275a 85%)
}

.fifth-screen .big .content {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-transition: all .3s;
    transition: all .3s
}

.fifth-screen .big .content p {
    display: block
}
.fifth-screen .flex-box .content img {
    width: 120px;
}

.sixth-screen .wrapper {
    width: 98%;
    margin: 0 auto;
    padding-bottom: 6%
}

.sixth-screen .wrapper h2 {
    margin-top: 96px;
    font-size: 45px;
    color: #404040;
    text-align: center
}

.sixth-screen .wrapper .item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 23%;
    height: 290px
}

.sixth-screen .wrapper .item .mask {
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(2,18,52,0)),to(rgba(0,17,51,.8)));
    background-image: linear-gradient(90deg,rgba(2,18,52,0) 0,rgba(0,17,51,.8) 100%);
    background-size: 100% 100%;
    text-align: right
}

.sixth-screen .wrapper .item h3 {
    margin: 0;
    padding: 56px 35px 24px;
    font-size: 28px;
    color: #fff;
    letter-spacing: 1.18px;
    text-align: right
}

.sixth-screen .wrapper .item p {
    margin: 0 35px 0 auto;
    width: 256px;
    font-size: 18px;
    color: #fff;
    line-height: 40px
}

.sixth-screen .wrapper .item1 {
    background: url(../images/six01.png) no-repeat center center;
    background-size: cover
}

.sixth-screen .wrapper .item2 {
    margin: 0 2%;
    background: url(../images/six02.png) no-repeat center center;
    background-size: cover
}

.sixth-screen .wrapper .item3 {
    background: url(../images/six03.png) no-repeat center center;
    background-size: cover
}
.sixth-screen .wrapper .item4 {
    margin: 0 2%;
    background: url(../images/six04.png) no-repeat center center;
    background-size: cover
}

.seventh-screen {
    position: relative
}

.seventh-screen .wrapper {
    /*padding-bottom: 6%;*/
    border-bottom: 2px solid;
    -o-border-image: linear-gradient(90deg,rgba(255,255,255,.3) 0,rgba(76,76,76,.3) 50%,rgba(255,255,255,.3) 100%) 30 30;
    border-image: -webkit-gradient(linear,left top,right top,from(rgba(255,255,255,.3)),color-stop(50%,rgba(76,76,76,.3)),to(rgba(255,255,255,.3))) 30 30;
    border-image: linear-gradient(90deg,rgba(255,255,255,.3) 0,rgba(76,76,76,.3) 50%,rgba(255,255,255,.3) 100%) 30 30;
    margin: 0 auto;
    /*padding-left: 9.6%*/
}

.seventh-screen .content,.seventh-screen img {
    text-align: center;
    width: 100%;
}

.seventh-screen img {
    /*width: 50%*/
}

.seventh-screen .content {
    /*padding-left: 20px;*/
    /*width: 50%*/
}

.seventh-screen .content h1 {
    font-size: 45px;
    color: #404040
}

.seventh-screen .content p {
    font-size: 20px;
    color: #404040;
    line-height: 33px
}

.eighth-screen {
    /*padding: 100px 0 146px;*/
    /*background: url(../images/bg-eighth-screen-1-e0c8e6730d.jpg) no-repeat center center fixed*/
    position: relative;
}

.eighth-screen h2 {

    position: absolute;
    /* left: 50%; */
    top: 8%;
translateX(-50%): ;
translateY(-50%): ;
    margin-bottom: -96px;
    /* margin: 0 0 120px; */
    font-size: 45px;
    color: #fff;
    z-index: 11111;
    text-align: center;
    width: 100%;
}
.eighth-screen p {

    position: absolute;
    /* left: 50%; */
    /* top: 50%; */
translateX(-50%): ;
translateY(-50%): ;
    margin-bottom: -120px;
    /* margin: 0 0 120px; */
    font-size: 24px;
    color: #fff;
    z-index: 11111;
    text-align: center;
    width: 100%;
}

.eighth-screen img {
    width: 100%;
    display: block;
    margin: 0 auto
}

.ninth-screen {
    padding-top: 3.17%;
    padding-bottom: 3.17%
}

.ninth-screen h1 {
    font-size: 45px;
    color: #404040;
    text-align: center;
    padding-bottom: 2.1%
}

.ninth-screen .wrapper {
    /*margin: 0 auto;*/
    /*width: 80.83%*/
}

.ninth-screen .wrapper .use-item {
    width: 10%;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 18.04%;
    padding-bottom: 17.04%;
    border-right: 3px solid #fff
}

.ninth-screen .wrapper .use-item h3 {
    font-size: 28px;
    color: #fff;
    text-align: center
}

.ninth-screen .wrapper .item1 {
    background: url(../images/ten_01.png);
    background-size: cover
}

.ninth-screen .wrapper .item2 {
    background: url(../images/ten_02.png);
    background-size: cover
}

.ninth-screen .wrapper .item3 {
    background: url(../images/ten_03.png);
    background-size: cover
}

.ninth-screen .wrapper .item4 {
    background: url(../images/ten_04.png);
    background-size: cover
}

.ninth-screen .wrapper .item5 {
    background: url(../images/ten_05.png);
    background-size: cover
}

.ninth-screen .wrapper .item6 {
    background: url(../images/ten_06.png);
    background-size: cover
}

.ninth-screen .wrapper .item7 {
    background: url(../images/ten_07.png);
    background-size: cover
}

.ninth-screen .wrapper .item8 {
    background: url(../images/ten_08.png);
    background-size: cover
}
.ninth-screen .wrapper .item7 {
    background: url(../images/ten_09.png);
    background-size: cover
}

.ninth-screen .wrapper .item8 {
    background: url(../images/ten_10.png);
    background-size: cover
}