/* Ã¨ÂµÂ°Ã¨Â¿â€ºÃ¦Â­Â£Ã§Â¡Â® Ã¨ÂµÂ°Ã¨Â¿â€˜Ã¦Â­Â£Ã§Â¡Â® */
.numbers{display: flex; width: 940px; justify-content: space-around; margin: 0 auto; font-size: 16px;}
.numbers .numb{font-weight: 800;font-size: 42px;color: #43A591;line-height: 42px;text-align: center;font-style: normal;text-transform: none; margin-bottom: 10px;}
.numbers .numb sup{font-size: 30px;}
.change{display: flex; margin-top: 60px;}
.change .items{width: 893px;min-width: 893px; height: 405px; overflow: hidden; position: relative;}
.change .items .item{width: 893px;min-width: 893px; height: 405px; display: none;}
.change .items .learn.learn0{background: url(/images/new/zqcompany.png) center top no-repeat; position: relative;}
.change .items .learn.learn1{background: url(/images/new/lf.jpg) -377px -471px no-repeat !important; position: relative;}
.change .items .learn.learn2{background: url(/images/new/guan.jpg) center -364px no-repeat !important; position: relative;}
.change .items .learn.learn3{background: url(/images/new/tianjin.jpg) center -274px no-repeat !important;position: relative;}
.learn1 .mask,.learn2 .mask,.learn3 .mask{background:none !important;}
.learn1 .area,.learn2 .area,.learn3 .area{display: none;}
.change .items .learn .mask{position: absolute; width: 100%; height: 100%; background: #001016; opacity: .7; z-index: 10; top: 0; left: 0;}
.change .items .cartoon{ background: url(/images/new/bird.png) top left no-repeat;}
.change .items .songs .cd{position: absolute;left: 50px;top: 59px;}
.change .items .songs .cd .card1{position: absolute; z-index: 10; left: 135px; top: 15px; width: 270px; height: 270px;}
.change .items .songs .cd .card1.active{animation: rotate 25s infinite;}
.change .items .songs .cd .card1{ transform-origin: 50% 50%;}

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

    100% {
        transform: rotate(360deg);
    }
}
.change .items .songs .cd .card2{position: absolute;z-index: 18;left: 264px;top: 130px;}
.change .items .songs .cd .card3{position: absolute; z-index: 15;}
.change ul li{height: 81px; line-height: 81px; width: 307px; text-align: center; font-size: 20px;font-family: PingFang SC, PingFang SC;}
.change ul li.active{background: #43A591; color: #fff;}

/* aboutCorrect */
.learn .area{box-sizing: border-box; padding: 60px 73px 0 70px; position: relative; z-index: 10;}
.learn .area article{font-weight: 400;font-size: 14px;color: #FFFFFF;line-height: 24px; opacity: .8; margin-top: 30px;}
.learn .areaChange{display: flex;gap: 0 30px;justify-content: center;z-index: 10;position: absolute;width: 100%;bottom: 0;height: 70px;line-height: 88px;padding-top: 30px;box-sizing: border-box;}
.learn .areaChange{background: url(/images/new/mask2.png) center 25px repeat-x;}
.learn .areaChange a{font-weight: 500;font-size: 14px;color: #43A591;line-height: 30px; position: relative;}
.learn .areaChange a.active{font-weight: bold;font-size: 20px;}
.learn .areaChange a.active:before{content:""; width: 14px;height:2px;background: #43A591;border-radius: 0px 0px 0px 0px; position: absolute; top: 30px; left: 13px;}
/* aboutCulture */
.change .items .culture{ background: url(/images/new/culture.png) center top no-repeat; position: relative;}
.change .items .culture .mask{position: absolute; width: 100%; height: 100%; background: linear-gradient( 89deg, #0CA082 0%, #646464 100%); opacity: .7; z-index: 10; top: 0; left: 0;}
.culture{ box-sizing: border-box; padding: 50px 54px 0 74px; color: #fff; line-height: 24px; font-size: 14px;font-family: PingFang SC;}
.culture .dot{width: 6px;height: 6px;background: #FFFFFF; border-radius: 10px; position: relative; top: 8px; margin-right: 9px;}
.culture article{ z-index: 12; position: relative;}
/* cartoon */
.cartoon{color: #fff;line-height: 30px; font-weight: bold; padding: 112px 0 0 74px;font-family: PingFang SC;}
.cartoon h3{font-size: 20px; margin-bottom: 12px;}

/* songs */
.change .items .songs{ background: url(/images/new/song1.png) center top no-repeat;opacity: 0.78; position: relative;}
.change .items .songs .mask1{position: absolute;background: url(/images/new/mask1.png) center top no-repeat;width: 380px;height: 184px;z-index: 10;top: 0;right: 0;}
.change .items .songs .mask2{position: absolute; background: url(/images/new/mask2.png) center no-repeat; width: 380px; height: 184px; z-index: 10; bottom: 0; right: 0;}
.songs{color: #fff; box-sizing: border-box; padding: 38px 85px 0 585px;}
.songs h3{font-size: 20px; margin-left: -10px; margin-bottom: 6px; position: relative; z-index: 20;}
.songs h5{ position: relative; z-index: 20;}
.songs p{font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 14px;color: #fff;line-height: 38px;}

/* news */
.news .newChange{font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 20px;line-height: 30px; text-align: center; margin-bottom: 48px;}
.news .newChange a:last-child{margin-left: 100px;}
.news .newChange a{ position: relative;color: #262626;}
.news .newChange a.active:before{content: "";width: 40px;height: 2px;background: #43A591; position: absolute; top: 32px; left: 19px;}
.news .boxes{height: 542px; overflow: hidden;}
.news .box{display: flex;gap: 30px;}
.news .box .box1{width: 380px;height: 259px;background: #FAFAFA; margin-bottom: 12px;}
.news .box .box1:hover,.news .box .box2:hover{background: rgba(67,165,145,0.1);}
.news .box .box2{width: 380px;height: 123px;background: #FAFAFA; margin-bottom: 12px; padding: 20px; box-sizing: border-box;}
.news .box .box2 a{width: 320px;}

.date{font-size: 30px; line-height: 30px; margin-bottom: 5px; color: var(--primary); font-weight: 600;font-family: PingFang SC, PingFang SC;}
.month{margin-bottom: 20px; color: #7A7A7A;}
.news .box h3{ font-weight: 500;font-size: 16px;color: #2A3341;line-height: 22px;}
.news .box1 article{font-weight: 400;font-size: 14px;color: #7A7A7A;line-height: 28px; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;}
.news .box2 article{font-weight: 400;font-size: 14px;color: #7A7A7A;line-height: 28px; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; margin-top: 6px;}
.news .box1.padding{padding: 20px 16px 20px; box-sizing: border-box;}
.news .box2 .flex-1{margin-left: 36px;max-width: 252px;}
.news .box2 .date{text-align: right;}
.news .box2 .month{font-weight: 400;font-size: 11px;min-width: 44px;}
.news .box a i{font-size: 20px; color: var(--primary);}


/* advantage */
.advantage{background: #F7F7F7; padding-top: 100px; padding-bottom: 100px; margin-bottom: 20px;}
.grid{display: grid; grid-template-columns: repeat(4,279px); gap: 28px;}
.grid>div{height: 200px;}
.grid>div h2{font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 20px;color: #2A3341;line-height: 22px; margin-bottom: 6px;}
.grid>div h4{font-weight: 400;font-size: 11px;color: #7A7A7A;line-height: 20px; margin-bottom: 10px;}
.grid article{font-weight: 400;font-size: 14px;color: #7A7A7A;line-height: 28px;}

/* moment */
.moment h3{font-weight: 500;font-size: 16px;line-height: 22px;}
.moment .boxes p{font-weight: 400;font-size: 14px;color: #7A7A7A;line-height: 28px;}
.moment .box1{width: 585px;height: 370px;background: #FAFAFA;}
.moment .box1:hover .imgShow img,.moment .box2:hover .imgShow img{transform: scale(1.2);}
.moment .box2{width: 278px; height: 285px;background: #FAFAFA;}
.moment .boxes{margin-bottom: 116px;}
.moment a i{font-size: 20px; color: var(--primary);}
.moment .date{font-size: 32px;}
.moment .point,.moment .month{font-weight: 400;font-size: 11px;color: #7A7A7A;margin: 0;line-height: 44px;margin-left: 11px;}
.moment .box1 .imgShow{width: 585px; height: 195px; overflow: hidden;}
.moment .box1 .imgShow img{width: 585px; height: 195px;}
.moment .box2 .imgShow{width: 278; height: 208; overflow: hidden;}
.moment .box2 .imgShow img{width: 278; height: 208px;}

#lyric{
    height: 258px;
    overflow: hidden;
    margin-top: 18px;
}
#lyric p.active{color: #fff;font-size: 16px; }
#lyric div{overflow: scroll;}
#lyric div::-webkit-scrollbar{width:0px;height:11px; background-color:#ededed;}
#lyric div::-webkit-scrollbar:hover{ background-color:#eee; }
#lyric div::-webkit-scrollbar-thumb{ background-color:#ccc; height:11px;}
#lyric div::-webkit-scrollbar-thumb:hover{ background-color: #aaa;}
#lyric div::-webkit-scrollbar-thumb:active{background-color:#999;}