.banner {

    position: relative;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    padding: 6vw 0 2.6vw;

}

.banner .wpbanner {

    display: flex;

    justify-content: space-between;

    align-items: center; 

}

@media screen and  (min-width: 1460px){

    .banner .wpbanner {

        /*padding: 0 calc(50vw - 704px);*/

    }

}

.banner .left {

    min-width: 50%;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    margin: 0 auto;

}

.banner .left .logo{

    width: 5rem;

    margin: 0 auto

}

.banner .left .infobox{text-align: center;}

.banner .infobox h3{

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1.6rem;

    font-family: PingFang SC-Semibold, PingFang SC;

    font-weight: 600;

    color: #313336;

    line-height: 2.3rem;

    margin: 1rem 0 0.7rem;

}

.banner .infobox h3 span{

    height: 1.2rem;

    background: linear-gradient(162deg, #FDDAB5 0%, #F0BB78 53%);

    border-radius:0.6rem; 

    font-size: 0.65rem;

    font-family: PingFang SC-Medium, PingFang SC;

    font-weight: 500;

    color: #865C2A;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-left: 1rem;

    padding: 0 0.5rem;

}

.banner .infobox h3 span img{

    width: 0.8rem;

    margin-right: 0.2rem;

}

.banner .infobox .timeflex,

.banner .infobox .timeflex span{

    display: flex;

    justify-content: flex-start;

    align-items:center;

}

.banner .infobox .timeflex span{

    height: 1.3rem;

    border: 1px solid rgba(0,0,0,0.1);

    margin-right: 0.5rem;

    padding: 0 0.7rem;

    font-size: 0.65rem;

    color: #6A6E73;

    white-space: nowrap;

}

.banner .infobox .timeflex span img{

    width: 0.6rem;

    margin-right: 0.3rem;

}

.banner .infobox .desc{

    font-size: 0.7rem;

    color: #6A6E73;

    line-height: 1.3rem;

    margin: 1.2rem 0 0.8rem;

    max-width: 500px;

    text-align: center;

}

.banner .infobox .tipsbox{

    margin: 0.8rem 0 1.2rem;

}

.banner .infobox .tipsbox .line{ 

    display: flex;

    justify-content: flex-start;

    align-items: flex-start; 

    font-size: 0.7rem;

    color: #313336;

    line-height: 1.4rem;

}

.banner .infobox .tipsbox .line>div{ 

    display: flex;

    justify-content: flex-start;

    align-items: center;

    flex-wrap: wrap;

}

.banner .infobox .tipsbox .line p{

    font-size: 0.7rem;

    color: #313336;

    line-height: 1.4rem;

    margin:0 1rem 0.3rem 0;

    max-width: none;

    white-space: nowrap;

}

.banner .infobox .tipsbox .line a{

    height: 1.4rem;

    line-height: 1.4rem;

    background: #FFFFFF;

    border: 1px solid rgba(106,110,114,0.2);

    margin-right: 0.3rem;

    padding: 0 0.7rem;

    margin-bottom: 0.3rem;

    box-sizing: border-box;

}

.banner .infobox .tipsbox .line a:hover {

    background: rgba(0, 0, 0, 0.08);

    border: 1px solid rgba(0, 0, 0, 0);

}

.banner .btnflex {

    display: flex;

    justify-content: flex-start;

    align-items: center;

}

.banner .btnflex a{

    cursor: pointer;

    border: 1px solid #000;

    font-size: 0.8rem;

    font-family: PingFang SC-Medium, PingFang SC;

    font-weight: 500; 

    line-height: 2rem;

    padding: 0 1.4rem;

    line-height: 2rem;

    box-sizing: border-box;

    white-space: nowrap;



}

.banner .btnflex a.fbbtn{

    color: #000;

}

.banner .btnflex a.fbbtn:hover{

    border-color: #fff;

    background: #000;

    color: #fff;

}

.banner .btnflex a.casecall{ 

    background: #000;

    color: #FFFFFF; 

    margin-left: 0.75rem;

}

.banner .btnflex a.casecall:hover {

    background-color: #444;

}

.banner .numbox.pc {  

    width: 45%;

    display: flex;

    justify-content: space-evenly;

    align-items: center;

}

.banner .numbox .box{

    margin: 0 1rem;

}

.banner .numbox .box h3{

    text-align: center;

    font-size: 2.2rem;

    font-family: D-DIN-PRO-Medium, D-DIN-PRO;

    font-weight: 600;

    color: #e8374a;

    line-height: 1.8rem; 

    white-space: nowrap;

}

.banner .numbox .box p{

    white-space: nowrap;

    text-align: center;

    font-size: 0.7rem;

font-family: PingFang SC-Medium, PingFang SC;

font-weight: 500;

color: #A4A9B1;

display: block;

margin: 0.7rem auto 0;

max-width: none;

}

 

 







.main2{

    margin:2.6vw 0 5.2vw;

}





.main2 .tabbar {

    margin: 1.1rem auto 1.5rem;

    display: flex;

    justify-content: center;

    align-items: center; 

}



.main2 .tabbar p {

    font-size: 0.8rem;

    color: #313336;

    line-height: 1.6rem;

    margin: 0 0.5rem;

    padding: 0 0.9rem;

    /* border-radius: 0.2rem; */

    cursor: pointer;

    background: #efefef;

}



.main2 .tabbar p:hover {

    color: #FFFFFF;

    background: #000;

}



.main2 .tabbar p.on {

    color: #FFFFFF;

    background: #000;

}



.main2 .flexlist {

    box-sizing: border-box;

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-start;

    align-items: flex-start;

}



.main2 .flexlist .box.skeleton {

    min-height: 10rem;

}



.main2 .flexlist .box {

    width: 23.92%;

    margin-bottom: 2rem;

    margin-right: 1.42%;

    position: relative;

}



.main2 .flexlist .box:nth-child(4n) {

    margin-right: 0;

}



.main2 .flexlist .box .imgbox {

    overflow: hidden;

    position: relative;

    /* clip-path:circle(0.6rem) */

}



.main2 .flexlist .box .videoicon {

    width: 1.6rem;

    position: absolute;

    bottom: 0.5rem;

    right: 0.6rem;

}



.main2 .flexlist .box .hover {

    width: calc(100%);

    height: 100%;

    transition: all 0.2s ease 0s;

    background-position: center;

    background-size: 100%;

    background-repeat: no-repeat;

    position: absolute;

    top: 0;

    left: 0;

}



.main2 .flexlist .box .imgbox:hover .hover {

    background-size: 110%;

}



.main2 .flexlist .box h4 {

    font-size: 0.9rem;

    font-family: PingFangSC-Medium;

    font-weight: 500;

    color: #313336;

    line-height: 1.25rem;

    margin-top: 1rem;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

}



.main2 .flexlist .box p {

    font-size: 0.7rem;

    color: #6A6E73;

    line-height: 1.3rem;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

}



.main2 .flexlist .box p a:hover {

    color: #e8374a;

}



.main2 .flexlist .box .set {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 0.5rem;

}



.main2 .flexlist .box .set a:hover{

    color: #e8374a;

}

.main2 .flexlist .box .set a ,

.main2 .flexlist .box .set>div {

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 0.7rem;

    color: #A4A9B1;

    line-height: 1rem;

}



.main2 .flexlist .box .set a .icon {

    border-radius: 50%;

}



.main2 .flexlist .box .set .icon {

    width: 1rem;

    margin-right: 0.3rem;

}



.main2 .flexlist .box .set .zan {

    align-items: flex-end;

    cursor: pointer;

}



.main2 .flexlist .box .set .zan .icon {

    width: 1rem;

    height: 1rem;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    background-image: url(../images/icon_zanno.svg);

}



.main2 .flexlist .box .set .zan:hover,

.main2 .flexlist .box .set .zan.on {

    color: #e8374a;

}



.main2 .flexlist .box .set .zan.on .icon,

.main2 .flexlist .box .set .zan:hover .icon {

    background-image: url(../images/icon_zan.svg);

}



.main2 .btn {

    font-size: 0.8rem;

    color: #fff;

    line-height: 2rem;

    padding: 0 1.4rem;

    background: #e8374a;

    border-radius: 0.3rem;

    margin-left: 50%;

    margin-right: 50%;

    white-space: nowrap;

    cursor: pointer;

    display: inline-block;

    transform: translateX(-50%);

}



.main2 .btn:hover {

    background-color: #296AFF;

}



.main2 .pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 4rem;

}



.main2 .pagination p {

    font-size: 14px;

    color: #313336;

    width: 2rem;

    text-align: center;

    display: flex;

    justify-content: center;

    align-items: center;

    line-height: 2rem;

    height: 2rem;

    border-radius: 0.3rem;

    margin: 0 0.2rem;

    cursor: pointer;

}



.main2 .pagination p.pageno:hover {

    color: #e8374a;

}



.main2 .pagination p.pageno.on {

    font-family: PingFangSC-Medium, PingFang SC;

    font-weight: 500;

    color: #FFFFFF;

    background: #e8374a;

}



.main2 .pagination p img {

    width: 1.2rem;

    display: block;

}



.main2 .pagination p img:nth-child(2) {

    display: none;

}



.main2 .pagination p.pagebtn:hover img:nth-child(1) {

    display: none;

}



.main2 .pagination p.pagebtn:hover img:nth-child(2) {

    display: block;

}



.main2 .pagination p.pagebtn.no:hover img:nth-child(1) {

    display: block;

}



.main2 .pagination p.pagebtn.no:hover img:nth-child(2) {

    display: none;

}







.main3{

    padding-top: 5.2vw ;

    padding-bottom: 5.2vw ;

    margin: 0 auto;

    background: url(../images/bg.jpg) center no-repeat;

    background-size: cover;

}

.main3 .maintitle{

    margin-top: 0;

}

.main3 .flexlist{

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

    flex-wrap: wrap;

    margin-top: 0.8rem;

}

.main3 .flexlist .box{

    width: calc(20% - 0.96rem);

    box-sizing: border-box;

    margin-right: 1.2rem;

    padding: 2rem 1.5rem;

    border-radius: 0.3rem;

    background: #FFFFFF;

    margin-top: 1.2rem;

    transition: all 0.3s ease 0s;

}

.main3 .flexlist .box:hover{ 

    box-shadow: 0 0.5rem 1rem 0 #DAE9FF;

}

.main3 .flexlist .box:nth-child(5n){

    margin-right: 0;

}

.main3 .flexlist .box .logo{

    width: 3.5rem;

    display: block;

    margin: 0 auto; 

    border-radius: 50%;

}

.main3 .flexlist .box h4{

    font-size: 1rem; 

    font-weight: 600;

    color: #313336;

    line-height: 1.1rem;

    text-align: center;

    margin: 1.5rem 0 0.5rem;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

}

.main3 .flexlist .box p{

    font-size: 0.7rem;

    font-weight: 400;

    text-align: center;

    color: #6A6E72;

    line-height: 1.3rem;

    height: 2.6rem;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    margin: 0.5rem 0 1.1rem;

}

.main3 .flexlist .box .flex{

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    align-items: center;

    height: 1.7rem;

    overflow: hidden;

}

.main3 .flexlist .box .flex span{

    font-size: 0.7rem;

    color: #6A6E72;

    line-height: 1.1rem;

    height: 1.1rem;

    box-sizing: border-box;

    background: #F3F5FF;

    border-radius:0.2rem;

    padding: 0rem 0.4rem 0;

    margin: 0.4rem 0.2rem 0;

    display: block;

}

.main3 .flexlist .box .flex span:first-child{

    display: flex;

    justify-content: center;

    align-items: center;

    border: 1px solid #ECECEC;

    background: transparent;

    padding:0.1rem 0.3rem 0;

}

.main3 .flexlist .box .flex span:first-child img{

    width: 0.6rem;

    margin-right: 0.3rem;

    margin-bottom: 0.1rem;

}





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

    .main2 .flexlist .box {

        width: 31.3%;

        margin-bottom: 2rem;

        margin-right: 3%;

    }

    

    .main2 .flexlist .box:nth-child(4n) {

        margin-right: 3%;

    }



    .main2 .flexlist .box:nth-child(3n) {

        margin-right: 0;

    } 

    

    .main3 .flexlist .box{

        width: calc(31.3%); 

        margin-right: 3%;

    }

    .main3 .flexlist .box:nth-child(5n) {

        margin-right: 3%;

    } 

    .main3 .flexlist .box:nth-child(3n){

        margin-right: 0;

    }

}





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

    .banner { 

        padding: 21vw 0 3.4rem; 

        box-sizing: border-box;

        width: 100%;

        overflow: hidden;

        background-size: 100% auto;

        background-position: top center;

    }

    .banner .wpbanner { 

    padding: 0 5.33vw;

    }

    .banner .left,

    .banner .left .infobox{

        width: 100%;

    }

    .banner .left .wapflex{

        display: flex;

        justify-content: center;

        padding-bottom: 1.4rem;

        border-bottom: 1px solid #EAEDF3;

        text-align: center;

    }



    .banner .infobox h3{ 

        font-size:2.4rem; 

        line-height: 2.8rem; 

    }

    .banner .infobox h3 span{

        height:2rem; 

        border-radius:1rem; 

        font-size:1rem;  

        margin-left: 1rem;

        padding: 0 1rem;

    }

    .banner .infobox h3 span img{

        width: 1rem;

        margin-right: 0.4rem;

    } 

    .banner .infobox .timeflex span{

        height:2.2rem;

        margin-right: 0.6rem;

        padding: 0 1rem;

        font-size: 1.1rem; 

    }

    .banner .infobox .timeflex span img{

        width:1.2rem;

        margin-right: 0.4rem;

    }

    

    .banner .infobox .desc{

        font-size: 1.2rem;

        line-height: 2rem;

        margin: 1.4rem 0 ;

        max-width: none;

    }

    .banner .infobox .tipsbox{

        margin: 0.8rem 0 0;

    }

    .banner .infobox .tipsbox .line{  

        font-size: 1.2rem; 

        line-height: 2.2rem;

    }

    .banner .infobox .tipsbox .line p{

        font-size: 1.2rem;

        color: #313336;

        line-height: 2.2rem;

        margin:0 1rem 0.6rem 0;

        max-width: none;

    }

    .banner .infobox .tipsbox .line a{

        height: 2.2rem;

        line-height: 2.2rem;

        background: #FFFFFF;

        border: 1px solid rgba(106,110,114,0.2);

        margin-right: 0.6rem;

        padding: 0 1rem;

        margin-bottom: 0.6rem;

        box-sizing: border-box;

    }



        

    .banner .numbox.wap {  

        width: 100%;

        display: flex!important;

        justify-content: space-between;

        align-items: center;

        margin-top: 0.8rem;

    }

    .banner .numbox.wap .box h3{ 

        font-family: D-DIN-PRO-Medium, D-DIN-PRO;

        font-size: 1.6rem;

        font-weight: 500;

        color: #313336;

        line-height: 2rem;

        white-space: nowrap;

        margin: 0 auto; 

        display: block;

    }

    .banner .numbox.wap .box p{ 

        font-size:1rem;  

        line-height: 1.2rem;

    margin: 0 auto ; 

    }

    .main2  {

        margin: 0 ;

        border: 1px solid #EAEDF3;

        padding: 4rem 5.33vw 2rem;;

        box-sizing: border-box;

        width: 100%;

        overflow: hidden;

    }

    .main2 .tabbar {

        margin: 2.8rem 0 1.6rem;

        padding: 0 4vw;

        box-sizing: border-box;

        width: 100vw;

        position: relative;

        left: -5.33vw;

        display: flex;

        justify-content: flex-start;

        align-items: center;

        white-space: nowrap;

        overflow-x: auto;

    }



    .main2 .tabbar::-webkit-scrollbar {

        width: 0;

        height: 0;

        display: none;

    }



    .main2 .tabbar p {

        font-size: 1.3rem;

        color: #313336;

        line-height: 2.6rem;

        /* margin: 0 1.6rem; */

        padding: 0 1.5rem;

        margin: 0 1vw;

        cursor: pointer;

    }



    .main2 .flexlist {

        justify-content: space-between;

    }



    .main2 .flexlist .box {

        width: 42.67vw;

        margin-bottom: 2rem;

        margin-right: 0;

    }



    .main2 .flexlist .box:nth-child(4n) {

        margin-right: 0%;

    }



    .main2 .flexlist .box .imgbox {

        overflow: visible;

    }



    .main2 .flexlist .box .imgbox:hover .hover {

        background-size: 100%;

    }





    .main2 .flexlist .box h4 {

        font-size: 1.4rem;

        line-height: 2.6rem;

        margin-top: 0.8rem;

    }



    .main2 .flexlist .box p {

        font-size: 1.2rem;

        color: #6A6E73;

        line-height: 2.4rem;

    }



    .main2 .flexlist .box .set {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-top: 0.9rem;

    }



    .main2 .flexlist .box .set a ,

    .main2 .flexlist .box .set>div {

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 1rem;

        color: #A4A9B1;

        line-height: 1.4rem;

    }



    .main2 .flexlist .box .set a {

        align-items: flex-end;

    }



    .main2 .flexlist .box .set .zan .icon,

    .main2 .flexlist .box .set .icon {

        width: 1.6rem;

        height: 1.6rem;

        margin-right: 0.6rem;

    }



    .main2 .flexlist .box .set .zan:hover {

        color: #A4A9B1;

    }



    .main2 .flexlist .box .set .zan:hover .icon {

        background-image: url(../images/icon_zanno.svg);

    }



    .main2 .flexlist .box .set .zan.on {

        color: #e8374a;

    }



    .main2 .flexlist .box .set .zan.on .icon {

        background-image: url(../images/icon_zan.svg);

    }

    .main2 .pagination {

        text-align: center;

        display: block;

    }



    .main2 .pagination.none {

        display: none !important;

    }



    .main2 .pagination img {

        width: 1.6rem;

        margin: 0 1rem 0;

        cursor: pointer;

        padding: 1.4rem;

        border-radius: 50%;

        background: #e8374a;

        display: inline-block;

        vertical-align: middle;

    }



    .main2 .pagination img:hover {

        background-color: #296aff;

    }



    .main2 .pagination img.no {

        display: none;

    }



    .main2 .pagination img.prevn,

    .main2 .pagination img.nextn {

        padding: 1.3rem;

        background: transparent;

        border: 1px solid #D6DCE7;

    }

    .main3 {

        background: #fff;

        padding-top:4rem ;;

        box-sizing: border-box;

        width: 100%;

        overflow: hidden;

    }

    .main3 .flexlist {

       display: block;

       margin-top: 2.4rem;

    }

    .main3 .flexlist .box{

        width: 100%;

        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

        margin-top: 0;

        padding: 0;

        margin-right: 0!important;

    } 

    .main3 .flexlist .box:hover{

        box-shadow: none;

    }

    .main3 .flexlist .box .logo{

        margin:1.6rem 2.2rem 0 0;

        width: 5.6rem;

    }

    .main3 .flexlist .box .info{

        width: calc(100% - 7.8rem);

        padding:2rem 0;

        border-bottom: 1px solid rgba(234,237,243,0.5);

    }

    .main3 .flexlist .box:last-child .info{

        border-bottom: 0;

    }

    

.main3 .flexlist .box h4{

    font-size: 1.6rem;  

    line-height: 1.6rem;

    text-align: left;

    margin: 0; 

}

.main3 .flexlist .box p{

    font-size: 1.2rem; 

    color: #6A6E72;

    line-height: 1.8rem;

    height: auto;

    margin: 0.6rem 0 0.4rem;

    text-align: left;

}

.main3 .flexlist .box .flex{ 

    justify-content: flex-start; 

    height: auto;

    overflow: hidden;

}

.main3 .flexlist .box .flex span{

    font-size: 1.2rem; 

    line-height: 2.2rem;

    height: 2.2rem; 

    border-radius:0.4rem;

    padding: 0rem 1rem 0;

    margin: 0.6rem 0.3rem 0;

    display: block;

}

.main3 .flexlist .box .flex span:first-child{ 

    padding:0.1rem 1rem 0;

}

.main3 .flexlist .box .flex span:first-child img{

    width: 1.2rem;

    margin-right: 0.4rem;

    margin-bottom: 0.2rem;

}

}



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

  .main2 .tabbar {display: flex;flex-wrap: wrap;}

  .main2 .tabbar p{padding: 0 1rem;margin: 1vw 1vw;} 

}