/*屏幕宽度大于1200px &&  pc端基础*/ 
@media screen and (min-width: 1px){ 
    .banner{
        height: 100vh;
        width: 100%;
        transition: margin-top 0.5s;
        overflow: hidden;}
    .banner .swiper-container{
        height: 100%;
        width: 100%;}
    .banner .swiper-container .swiper-slide{
        height: 100%;
        width: 100%;
        transition-duration: 1500ms !important;}
    .banner .swiper-container .swiper-slide a{
        width: 100%;
        height: 100%;
        display: block;}
    .banner .swiper-container .swiper-slide img{
        height: 100%;
        width: 100%;
        object-fit: cover;}
    .banner .swiper-container .swiper-slide h4{
        position: absolute;
        z-index: 5;
        background-color: rgba(0, 0, 0, 0.4);
        font-family: "PingFang SC", "Hiragino Sans GB", Arial, "Microsoft Yahei";
        visibility: visible;
        text-align: left;
        letter-spacing: 0px;
        font-weight: 400;
        font-size: 4.5vw;
        border-color: rgb(51, 51, 51);
        border-style: none;
        margin: 0px;
        border-radius: 0px;
        padding: 5px;
        color: rgb(255, 255, 255);
        text-decoration: none;
        white-space: nowrap;
        width: auto;
        height: auto;
        min-height: 0px;
        min-width: 0px;
        max-height: none;
        max-width: none;
        opacity: 1;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);}
    .banner .swiper-container .swiper-slide h5{
        position: absolute;
        z-index: 6;
        background-color: rgba(0, 0, 0, 0.4);
        font-family: "PingFang SC", "Hiragino Sans GB", Arial, "Microsoft Yahei";
        visibility: visible;
        text-align: left;
        letter-spacing: 0px;
        font-weight: 400;
        font-size: 3vw;
        border-color: rgb(51, 51, 51);
        border-style: none;
        margin: 0px;
        border-radius: 0px;
        padding: 5px;
        color: rgb(255, 255, 255);
        text-decoration: none;
        white-space: nowrap;
        width: auto;
        height: auto;
        min-height: 0px;
        min-width: 0px;
        max-height: none;
        max-width: none;
        opacity: 1;
        left: 50%;
        top: calc(50% + 20px + 3vw);
        transform: translateX(-50%);}

    .banner .swiper-button-prev:after, 
    .banner .swiper-button-next:after{
        font-size: 50px;
        color: #fff;
        opacity: 1;}
    .banner .swiper-button-prev:hover, 
    .banner .swiper-button-next:hover{
        opacity: 0.8;}

    .section01{
        /* background: url(http://akwl-website-oss.5icon.com/web-fiberart.yixiaobang.com/image/uploads/allimg/210731/1_1541428331.jpg) no-repeat center; */
        background-attachment: fixed;
        background-size: cover;
        float: left;
        clear: both;
        width: 100%;
        padding-top: 14%;}
    .section01 a{
        float: left;
        /*width: 47%;
        margin-left: 2%;*/
        width: 80%;
        margin-left: 10%;
        margin-bottom:14%;}
    .section01 a .a_box{
        width: 100%;
        height: 0;
        padding-top: calc(100% * 9 / 16);
        position: relative;
        float: left;
        overflow: hidden;}
    .section01 a .a_box img{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        object-fit: cover;}
    .section01 a .a_box h4{
        position: absolute;
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
        width: 80%;
        font-size: 24px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
        color: #fff;
        text-align: center;}
    .section01 a .a_box span{
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translateY(-50%);
        width: 80%;
        margin-top: 30px;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
        color: #fff;
        text-align: center;}



    .section02{
        /* background: url(http://akwl-website-oss.5icon.com/web-fiberart.yixiaobang.com/image/uploads/allimg/210731/1_1650309491.jpg) no-repeat center; */
        background-attachment: fixed;
        background-size: cover;
        float: left;
        clear: both;
        width: 100%;
        padding: 14% 0;}   
    .section02 a{
        float: left;
        width: 47%;
        margin-left: 2%;}
    .section02 a .a_box{
        width: 100%;
        height: 0;
        padding-top: calc(100% * 9 / 16);
        position: relative;
        float: left;
        overflow: hidden;}
    .section02 a .a_box img{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        object-fit: cover;}
    .section02 a .a_box h4{
        position: absolute;
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
        width: 80%;
        font-size: 24px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
        color: #fff;
        text-align: center;}
    .section02 a .a_box span{
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translateY(-50%);
        width: 80%;
        margin-top: 30px;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
        color: #fff;
        text-align: center;}

    .section03{
        /* background: url(http://akwl-website-oss.5icon.com/web-fiberart.yixiaobang.com/image/uploads/allimg/210731/1_1541428331.jpg) no-repeat center; */
        background-attachment: fixed;
        background-size: cover;
        float: left;
        clear: both;
        width: 100%;
        padding: 14% 0;}   
    .section03 a{
        float: left;
        /*width: 32%;
        margin-left: 1%;*/
        float: left;
        width: 47%;
        margin-left: 2%;}
    .section03 a .a_box{
        width: 100%;
        height: 0;
        /*padding-top: calc(100% * 720 / 875);*/
        padding-top: calc(100% * 9 / 16);
        position: relative;
        float: left;
        overflow: hidden;}
    .section03 a .a_box img{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        object-fit: cover;}
    .section03 a .a_box h4{
        position: absolute;
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
        width: 80%;
        font-size: 24px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
        color: #fff;
        text-align: center;}
    .section03 a .a_box span{
        position: absolute;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        width: 90%;
        margin-top: 30px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
        color: #fff;
        text-align: center;}

    .section04{
        float: left;
        clear: both;
        width: 100%;
        background: #000;
        padding-top: 2%;
        overflow: hidden;}


    .section04 .article {
        display: block;}
    .section04 .article:hover {}
    .section04 .wall {
        display: block;
        position: relative;}
    .section04 .wall-column {
        display: block;
        position: relative;
        width: 22.5%;
        float: left;
        margin-left: 2%;
        box-sizing: border-box;}
    .section04 .news-item{
        margin-top: 9%;}
    .section04 .news-item img{
        width: 100%;
        height: 100%;
        object-fit: cover;}
    .section04 .news-item .titlebox{}
    .section04 .news-item .titlebox h2{
        width: 98%;
        color: #fff;
        padding: 1%;
        text-align: justify;
        font-size: 22px;}
    .section04 .news-item .titlebox h4{
        width: 100%;
        color: #fff;
        font-size: 18px;}
    .section04 .news-item .titlebox h5{
        width: 100%;
        color: #fff;}
    .section04 .more{
        width: 100%;
        float: left;
        clear: both;
        text-align: center;}
    .section04 .more a{
        color: #fff;
        font-size: 16px;
        padding: 2% 30px;
        display: inline-block;}

}

@media screen and (max-width: 1200px){
    .section04{
        padding-top: 1.375%;}
    .section04 .wall-column{
        width: 31.5%;
        margin-left: 1.375%;}
    .section04 .news-item{
        margin-top: 4.125%;}
    .section04 .news-item .titlebox h2{
        font-size: 20px;}
    .section04 .news-item .titlebox h4{
        font-size: 16px;}
}

@media screen and (max-width: 1000px){

    .section01 a{
        float: left;
        width: 96%;
        margin-left: 2%;
        margin-bottom: 2%;}

    .section02 a{
        float: left;
        width: 96%;
        margin-left: 2%;
        margin-bottom: 2%;}
    .section02 a:last-child(){
        margin-bottom: 0%;}

    .section03 a{
        float: left;
        width: 96%;
        margin-left: 2%;
        margin-bottom: 2%;}
    .section03 a:last-child(){
        margin-bottom: 0%;}

    .section04{
        padding-top: 1.375%;}
    .section04 .wall-column{
        width: 31.5%;
        margin-left: 1.375%;}
    .section04 .news-item{
        margin-top: 4.125%;}
    .section04 .news-item .titlebox h2{
        font-size: 18px;}
    .section04 .news-item .titlebox h4{
        font-size: 14px;}

}

@media screen and (max-width:768px){

    .section04{
        padding-top: 1.5%;}
    .section04 .wall-column{
        width: 47.75%;
        margin-left: 1.5%;}
    .section04 .news-item{
        margin-top: 4.5%;}
    .section04 .news-item .titlebox h2{
        font-size: 20px;}
    .section04 .news-item .titlebox h4{
        font-size: 16px;}
}

@media screen and (max-width:600px) {

    .section04{
        padding-top: 2%;}
    .section04 .wall-column{
        width: 96%;
        margin-left: 2%;}
    .section04 .news-item{
        margin-top: 5%;}

}

@media screen and (max-width:450px) {

    .section02 a{
        width: 90%;
        margin-left: 5%;
        margin-bottom: 5%;}
    .section03 a{
        width: 90%;
        margin-left: 5%;
        margin-bottom: 5%;}
    .section04 .wall-column{
        width: 90%;
        margin-left: 5%;
        margin-bottom: 5%;}
    .section04 .more a{
        margin-bottom: 5%;}

}