@font-face {
    font-family: 'KronaOne';
    src: url('../css/KronaOne.ttf');
}

@font-face {
    font-family: 'MiSans-Normal';
    src: url('../css/MiSans-Normal.ttf');
}

@font-face {
    font-family: 'MiSans-Medium';
    src: url('../css/MiSans-Medium.ttf');
}

.opacitySwiper {
    opacity: 0;
    position: absolute;
    transform: scale(0, 0);
}

body {
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    font-family: "PingFang SC";
}

img {
    display: inline-block;
    vertical-align: bottom;
}

#body {
    width: 100%;
    overflow: hidden;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.after:after {
    content: "";
    display: block;
    clear: both;
}

.contentbg {
    background:#fff;
}

.contentbg {
    width: 100%;
    position: relative;
}

.headerWrapper {
    width: 100%;
    overflow: hidden;
}

.headerBanner {
    width: 2560px;
    height: 1366px;
    /* background: url(../img/banner.jpg?v=2234) no-repeat center center; */
    position: relative;
    transform-origin: left top;margin-top: -44px;
}

/* .headerBanner a {
    position: absolute;
    width: 270px;
    height: 100px;
    z-index: 2;
    display: block;
    right: 40px;
    bottom: 70px;
} */

.navbox {
    width: 1144px;
    margin: 0 auto;
}

.navb {
    margin-left: -58px;
}

.navb li {
    float: left;
    position: relative;
    cursor: pointer;
}

.topcbg {
    height: 8vw;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

.cats {
    height: 78px;
    background: url('../img/sp.png?v=34') repeat-x center center;
    width: 100%;
    left: 0;
    right: 0;
    position: absolute;
}

.topcat {
    top: 26px;
    animation: runleft 5s linear infinite;
}

.downcat {
    bottom: 26px;
    animation: runright 5s linear infinite;
}

/*.topc{background: url(../img/topc.png) no-repeat center center;width: 14vw;height: 4vw;position: absolute;right: 0;top: 0;background-size: 100% 100%;}
*/

.fcont p {
    color: #fff;
    font-size: 2vh;
    line-height: 4vh;
    margin: 3vh 0;
}

.bottomcbg {
    height: 80px;
    background: #000;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

.pop {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.popCont {
    width: 360px;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    padding: 36px 0;
    position: relative;
    z-index: 200;
}

.poptitle {
    font-size: 30px;
    font-weight: bold;
}

.popCont p {
    font-size: 18px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.closePop {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 20;
}



@keyframes runleft {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -110.97222222vh 0;
    }
}

@keyframes runright {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 96.97222222vh 0;
    }
}

.b_navUl {
    display: flex;font-family: 'KronaOne';
}

.b_navbox {
    padding: 170px 0 0 1210px;
}

.mouthCont {
    margin-top: 44px;

}

.b_navUl li {
    width: 70px;
    height: 70px;
    color: #fff;
    font-size: 37px;
    background: #000;
    line-height: 70px;
    text-align: center;
    border-radius: 70px;
    font-weight: bold;
    margin-right: 27px;
    cursor: pointer;
}
.b_navbox{position: absolute;padding-top: 130px;}
.b_navUl li.active,
.b_navUl li:hover {
    background: #FFFF1C;transition: ease all 0.3s;color: #000;position: relative;box-shadow: inset -2px 2px 4px #888;
}
.b_navUl li.active:before{content: '';background: url('../img/reactive.png') no-repeat center center;width: 34px;height: 37px;position: absolute;right: -20px;top: -20px;}

.b_tle {
    background: url('../img/b_tle.png') no-repeat center center;
    height: 112px;
    width: 495px;
    color: #fff;
    font-size: 46px;
    font-weight: bold;
    line-height: 112px;

}

.b_tle span {
    padding-left: 10px;
    display: block;
}

.keyBox {
    position: absolute;
    left: 182px;
    top: 750px;
    height: 267px;
    
}

.keyUl {
    display: flex;
    margin-left: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    width: 600px;
}

.keyUl li {
    
    height: 45px;
    line-height: 45px;
    border-radius: 50px;
    margin-right: 13px;
    margin-bottom: 13px;
    position: relative;
font-family: 'MiSans-Medium';
}



.keyUl li a {
    display: inline-block;
    background: url('../img/nav.png') no-repeat center center;color: #000;
    font-size: 28px;
    height: 43px;
    line-height: 43px;text-align: center;
    padding: 0 10px;min-width: 87px;background-size: 100% 100%;font-family: 'MiSans-Medium';
}

.keyUl li a:hover {
    background: url('../img/nav_ac.png') no-repeat center center;text-decoration: none;color: #F1FFD2;background-size: 100% 100%;
}






.lns {
    position: absolute;
    width: 30px;
    height: 4px;
    background: #eb4d43;
    display: none;
    border-radius: 50px;
}

.navb li:hover .lns,
.navb li.active .lns {
    display: block;
}

.lns-1 {
    left: 167px;
    bottom: -5px;
}

.lns-2 {
    left: 109px;
    bottom: -9px;
}

.lns-3 {
    left: 111px;
    bottom: 3px;
}

.lns-4 {
    left: 123px;
    bottom: -10px;
}

.navFix {
    width: 100%;
    position: fixed;
    display: none;
    right: -30px;
    top: 50%;
    background: url('../img/navbg.png?v=230') no-repeat center center;
    height: 353px;
    overflow: hidden;
    transition: all 0.3s linear;
    z-index: 1000;
    width: 213px;
    margin-top: -186px;
    transform: scale(0.8);
}

.navFix.show {
    display: block;
}

.navf {
    width: 143px;
    margin-left: 25px;
    padding: 90px 0 0 0;
}

.navf li {
    position: relative;
    cursor: pointer;
    height: 56px;
    width: 143px;
    transition: aese all 0.8s;
    margin-bottom: 5px;

}

.nav1 {
    background: url('../img/nav1.png') no-repeat center center;
    height: 56px;
    width: 143px;
}

.nav2 {
    background: url('../img/nav2.png') no-repeat center center;
    height: 56px;
    width: 143px;

}

.nav3 {
    background: url('../img/nav3.png') no-repeat center center;
    height: 56px;
    width: 143px;
}

.nav4 {
    background: url('../img/nav4.png') no-repeat center center;
    height: 56px;
    width: 143px;
}

.nav1:hover,
.nav1.active {
    background: url('../img/nav1_h.png') no-repeat center center;
    height: 56px;
    width: 143px;
}

.nav2:hover,
.nav2.active {
    background: url('../img/nav2_h.png') no-repeat center center;
    height: 56px;
    width: 143px;

}

.nav3:hover,
.nav3.active {
    background: url('../img/nav3_h.png') no-repeat center center;
    height: 56px;
    width: 143px;
}

.nav4:hover,
.nav4.active {
    background: url('../img/nav4_h.png') no-repeat center center;
    height: 56px;
    width: 143px;
}

.conmain {
    padding: 90px 0 0px;
    width: 100%;
    min-width: 1400px;
    position: relative;background: url('../img/bg.png') repeat top center;
}

.pt10 {
    padding-top: 10px;
}

.mt5 {
    margin-top: 5px;
}

.navf li.active,
.navf li:hover {
    transition: aese all 0.8s;
}

.pt90 {
    padding-top: 90px;
}


.opusbox {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
}

.liopcy {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.84);
    left: 0;
    top: 0;
    text-align: center;
    opacity: 0;
    transition: all 0.3s linear;
}

.liopcy a {
    display: inline-block;
    width: 118px;
    height: 40px;
    color: #fff;
    box-sizing: border-box;
    border: 1px solid #fff;
    line-height: 38px;
    text-align: center;
    border-radius: 12px;
    font-size: 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.liopcy a:hover {
    background: #ff0000;
    border: 1px solid #ff0000;
}

.opusbox .brickItem:hover .liopcy {
    opacity: 1;
}

.brickItem {
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    cursor: pointer;
    float: left;
}

.backTop {
    position: fixed;
    bottom: 40px;
    left: 50%;
    margin-left: 590px;
    z-index: 300;
    cursor: pointer;
    display: none;
}

.backTop img {
    width: 90px;
}

.brickItem img {
    width: 100%;
}

.backTop.visble {
    display: block;
}

.waterfall {
    width: 1085px;
    margin: 0 auto;
}

.center {
    text-align: center;
}

.mt20 {
    margin-top: 20px;
}

.topwp p {
    font-size: 13px;
    line-height: 16px;
}

.swiperBw.swiper-container {
    height: 1010px;
}

.More {
    width: 165px;
    height: 82px;
    display: block;
    margin: 0px auto 0;
    overflow: hidden;
    position: relative;
    z-index: 1000;
    line-height: 82px;
    background: url(../img/more.png) no-repeat center center;
    text-align: center;
    transition: ease all 0.3s;
    transform: translate(200px, 150px);
}

.More:hover {
    background: url(../img/more_h.png) no-repeat center center;
    transition: ease all 0.3s;
}
.scUl a{position: relative;display: block;}
.scUl a p {
    color: #fff;
    font-size: 18px;text-align: center;background: rgba(0, 0, 0, 0.5);position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 310px;display: block;height: 185px;display: none;align-items: center;justify-content: center;
}

.scUl a:hover {
    text-decoration: none;
}
.scUl a:hover p{display: flex;}
.More a {
    width: 165px;
    height: 82px;
    transition: ease all 0.3s;
    display: inline-block;
}


.More:hover a {
    color: #fff;
}

.pb60 {
    padding-bottom: 60px;
}

/* .More {
    position: absolute;
} */


.ftitle {
    padding: 0px 0 20px;
}

.mb30 {
    margin-bottom: 30px;
}

/* .masonrys { 
    -moz-column-count:3; 
    -webkit-column-count:3; 
    column-count:3;
   
}
.items { 
    margin-bottom: 10px;
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
} */
.ftitle {
    position: relative;
}

/* .More {
    margin-top: 40px;
} */

.mt60 {
    margin-top: 60px;
}

.mt70 {
    margin-top: 70px;
}

.pb100 {
    padding-bottom: 100px;
}

.videoBox {
    width: 965px;
    /*height: 513px;*/
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-bottom: 20px;margin-top: 40px;
}

.videoBox video {
    width: 965px;
    height: 543px;
    margin-left: auto;
    box-sizing: border-box;
    margin-top: 20px;
}

.p4video {}

.videoPlay {
    width: 90px;
    height: 90px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -45px;
    z-index: 2;
    display: flex;
    background: url('../img/play.png') no-repeat center center;
    transition: ease all 0.3s;
    margin-top: -45px;
}

.videoPlay:hover {
    background-size: 9vh 9vh;
}

.videoPlay.hide {
    display: none;
}

.mt90 {
    margin-top: 90px;
}

.fontBox {
    display: flex;
    justify-content: space-between;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
    margin-top: 40px;
}

.fontBox li {
    width: 300px;
    height: 471px;
    position: relative;
    margin-bottom: 35px;
}

a.buyBox {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 71px;
    background: rgba(0, 0, 0, 0.5);
    display: block;
    width: 300px;
    height: 400px;
    ;
    text-align: center;
    text-decoration: none;
    display: none;
}

.fontBox li a div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300px;
    height: 400px;
    text-align: center;
}

.fontBox li a div p {
    display: inline-block;
    width: 118px;
    height: 40px;
    color: #fff;
    box-sizing: border-box;
    border: 1px solid #fff;
    line-height: 38px;
    text-align: center;
    border-radius: 12px;
    font-size: 20px;
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.fontBox li:hover .buyBox {
    display: block;
}

.fontBox li a div p:hover {
    background: #ff0000;
    border: 1px solid #ff0000;
}



.mBox {}

.mBox li {
    background: #f0f0ff;
    height: 48px;
    line-height: 48px;
    color: #000;
    font-size: 18px;
    border-radius: 5px;
    margin-top: 8px;
    width: 518px;
}



/**/
.musicBox {
width: 960px;margin-left: auto;margin-right: auto;height:320px;margin-top:60px ;
}
.musicBox ul{display: flex;justify-content: space-between;width: 960px;height:320px;margin-left: auto;margin-right: auto;}
.musicImg {
    margin-right: 40px;
    position: absolute;
    left: 50%;
    margin-left: 60px;
}
.musicBox ul li{width: 480px;position: relative;}
.l1{position: absolute;left: 0px;top: 0;z-index: 3;box-shadow: 0 0 15px #333;}
.l2{position: absolute;left: 100px;top: 10px;z-index: 2;transition: ease all 0.6s;}
.musicBox ul li:hover .l2{transform: translateX(50px);transition: ease all 0.6s;}
.musicBox ul li:hover .pTitle{transform: translateY(-5px);transition: ease all 0.3s;}
.musicBox ul li a{display: inline-block;}



.name {
    font-size: 18px;
    cursor: pointer;
}
.pTitle{font-size: 28px;color: #fff;text-align: center;position: absolute;left: 60px;z-index: 4;top: 130px;transition: ease all 0.3s;width: 213px;}
.pTitle p{font-size: 20px;line-height: 20px;}


.pt80 {
    padding-top: 80px;
}

.pt50 {
    padding-top: 50px;
}

.mt50 {
    margin-top: 50px;
}



.gotop {
    background: url(../img/gotop.png) no-repeat center center;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 38px;
    bottom: 40px;
    z-index: 2200;
    transform: scale(1);
    transition: ease all 0.3s;cursor: pointer;
}

.gotop:hover {
    transform: scale(1.05);
    transition: ease all 0.3s
}

.mt120 {
    margin-top: 120px;
}

.s_tle {
    text-align: center;
    color: #fff;
    font-size: 29px;
    padding-bottom: 30px;
}

.s_tle p {
    font-size: 22px;
}

.navUl {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    margin-bottom: 16px;
    margin-top: 60px;
    flex-wrap: wrap;
    justify-content: center;
}

.navUl li {
    position: relative;
    cursor: pointer;
    border-radius: 164px;
    min-width: 80px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-weight: bold;
    background: url('../img/nav1.png') no-repeat center center;
    padding: 0 12px;
    color: #F1FFD2;
    font-size: 17px;
    margin-right: 10px;
    margin-bottom: 24px;background-size: 100% 100%;
}

.navUl li.active,
.navUl li:hover {
    background: url('../img/nav1_ac.png') no-repeat center center;
    color: #F1FFD2;
    font-weight: bold;background-size: 100% 100%;
}

.pageUl {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    height: 79px;
    justify-content: center;
    align-items: center;margin-bottom: 40px;
}

.pageUl ul {
    display: flex;
    height: 79px;
}

.pageUl li {
    color: #F1FFD2;
    font-size: 26px;
    font-weight: bold;
    padding: 0 5px;
    line-height: 79px;
    cursor: pointer;
}

.pageUl li:hover,
.pageUl li.active {
    color: #c90d0d;
}

.mnwp {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.page_prev {
    width: 156px;
    height: 79px;
    cursor: pointer;
    margin-right: 25px;
}

.page_prev:hover {
    opacity: 0.9;
}

.pagebtn {
    background: url('../img/next_ac.png') no-repeat center center;
    width: 144px;
    height: 42px;
    cursor: pointer;
    margin:0 10px;font-size: 25px;text-align: center;color: #F1FFD2;line-height: 42px;font-family: 'MiSans-Medium';
}

.pagebtn:hover {
    background: url('../img/next.png') no-repeat center center;color: #F1FFD2;
}

.preview_urlUl {
    display: flex;
    flex-wrap: wrap;
}

.preview_urlUl li {
    position: relative;
    width: 240px;
    height: 177px;
    margin-right: 12px;
    margin-bottom: 12px;
}

.preview_urlUl li:hover {
    opacity: 0.8;
}


.preview_urlUl li:nth-child(4n) {
    margin-right: 0;
}

.preview_urlUl img {
    width: 240px;
    height: 177px;
}

.sectionBox {
    width: 440px;
}

.bg2 {
    /* margin-top: 80px; */
}

/* .preview_urlUl li:hover .bbrDmz {
    display: flex;
} */

.bbrDmz {
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

.sectionTop {
    width: 440px;
    height: 380px;
    padding: 8px 8px 0 8px;
    box-sizing: border-box;
    background: url('../img/kvbg.jpg') no-repeat center center;
}

.sectionSlide {
    width: 458px;
}

.gallery-thumbs {
    margin-top: 10px;
}

.gallery-thumbs img {
    width: 102px;
    height: 93px;
}


.swiper-slide-thumb-active img {
    box-sizing: border-box;
    border: 1px solid #000;
}


.swiper-button-prev {
    background: url('../img/p_left.png') no-repeat center center;
    width: 45px !important;
    height: 69px !important;
    margin-top: 18px !important;
}

.swiper-button-next {
    background: url('../img/p_right.png') no-repeat center center;
    width: 45px !important;
    height: 69px !important;
    margin-top: 18px !important;
}


.videoBBox .swiper-button-prev {
    background: url('../img/p_left.png') no-repeat center center;
    width: 45px !important;
    height: 69px !important;
    margin-top: 18px !important;
}

.videoBBox .swiper-button-next {
    background: url('../img/p_right.png') no-repeat center center;
    width: 45px !important;
    height: 69px !important;
    margin-top: 18px !important;
}

.swiper-button-prev:hover {
    opacity: 0.8;
}

.swiper-button-next:hover {
    opacity: 0.8;
}


.videoBBox {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: 30px;


}

.videoBBox .swiper-slide img {
    height: 298px;
    width: 1037px;
}

.v1 {
    position: absolute;
    left: 50%;
    margin-left: -620px;
    top: 50%;
    margin-top: 220px;

}

.v2 {
    position: absolute;
    left: 50%;
    margin-left: 353px;
    top: 50%;
    margin-top: -390px;
    z-index: 300;

}

.videoBBox .swiper-container {
    width: 1038px;
    margin-left: auto;
    margin-right: auto;
    height: 438px;
    z-index: 300;
}

.videoBBox .swiper-pagination {
    bottom: 0px !important;
}

.videoBBox .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 1);
    width: 10px;
    height: 10px;

}

.musicBox .swiper-pagination {
    bottom: 0px !important;
    left: 50%;
    margin: 0 5px;
}

.musicBox .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 1);
    width: 10px;
    height: 10px;
    margin: 0 5px;
}


.videoBox {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scUl ul {
    display: flex;
    justify-content: space-between;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 30px;
}

.scUl ul li {
    width: 310px;

}

.scUl ul li img {
    transition: ease all 0.3s;
    width: 310px;
    height: 185px;
}

/* .scUl ul li:hover img {
    transform: scale(1.02);
} */

.boxVideoList ul li {
    /* border: 1px solid #000; */
}


.swiper-button-prev:after,
.swiper-button-next:after {
    display: none;
}

.section {
    display: flex;
    justify-content: space-between;
    padding: 0 0 50px;
    width: 910px;
    margin-left: auto;
    margin-right: auto;
}

.sectionTxt {
    font-size: 14px;
    line-height: 25px;
    color: #fff;
    text-align: left;
}

.red {
    color: #ea4335;
}

.txt_tle {
    font-size: 20px;
    font-weight: bold;
}

.txt_cont {
    font-size: 14px;
    line-height: 18px;
    margin-top: 5px;
}

.section_cox {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 15px;
}




@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg)
    }
}

.nowMusicUl li .turn.active {
    animation: rotate 5s linear infinite;
}



.videoIcon {
    background: url(../img/play.png) no-repeat center center;
    width: 91px;
    height: 91px;
    position: absolute;
    display: inline-block;
    left: 50%;
    margin-left: -51px;
    top: 50%;
    margin-top: -51px;
    z-index: 200;
}


.videoIcon.active {
    display: none;
}

.fontList {
    display: flex;
    width: 920px;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    position: relative;
    z-index: 200;
}

.fontList p {
    margin-top: 12px;
}

.navUlBox.fixed {
    position: fixed;
    top: 0;
    z-index: 2900;
    width: 100%;
    left: 0;
    right: 0;
}



.relative {
    position: relative;
}

.sectionSlide .swiper-slide img {
    height: 483px;
    width: 458px;
}

.titles{font-size: 32px;font-family: 'YSourceHanSerifCN1';margin-top: 60px;}

/* .musicBox{display: none;} */
/* .bg2{display: none;} */




.MoreBtn a{display: inline-block;height: 41px;line-height: 41px;text-align: center;background: url('../img/mMusic.png') no-repeat center center;font-size: 25px;color: #F1FFD2;text-decoration: none;width: 195px;margin-right: 30px;font-family: 'MiSans-Medium';}
.MoreBtn a:hover{background: url('../img/mMusic_ac.png') no-repeat center center;}

.wps{text-align: left;width: 960px;margin-left: auto;margin-right: auto;margin-top: 80px;font-family: 'YSourceHanSerifCN1';font-size: 24px;}
/* .dbottom{background: url('../img/dbottom.png') no-repeat center center;background-size: 100% 100%;height: 5vw;} */