.indexMainList,

.listBox,

.newsItem,

.indexAbout,

.figureSon,

.threeBox,

.ass .swiper-slide,

.musicCreateNav,

.musicList .item 

{ display: -webkit-flex; display: flex;}



#indexMainList {overflow: hidden; position: relative; background: url('../images/news-bg.jpg') center center no-repeat; background-size: cover;}

#indexMainList::before,#indexMainList::after {z-index: 1; position: absolute; width: 400px; height: 400px; content: '';background-image: radial-gradient( #f28e4a, #de3b4c); border-radius: 50%;  }

#indexMainList::before {left: -200px; top: -200px;}

#indexMainList::after {bottom: -200px; right: -200px;}

.indexMainList {z-index: 2;position: relative; margin: 40px auto;}



.indexNews {padding:0 20px 20px; flex:0 0 780px; box-sizing: border-box; background-color: #fff;}

.newsTop {padding: 25px 0; border-bottom: solid 1px #dedede; font-size: 0;}

.newsTop .Img{ float: left; margin-right: 20px; }

.newsTop .Img img{width:374px; height:210px; transition: all .3s;}

.newsTop .Info a{ font-size: 18px; line-height: 30px;}

.newsTop .Info p {font-size: 14px; line-height: 24px; color: #666;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}

.newsTop .Info p:first-of-type { margin: 20px auto;}

.newsTop .Info p:last-of-type { color: #bdc3c7; }

.newsTop .Info p span,.newsItem .Info p span { margin: 0 10px 0 20px;}



.indexNotice {padding:0 20px 20px; margin-left: 20px; box-sizing: border-box; background-color: #fff;}



.newsItem { padding: 20px 0; border-bottom: solid 1px #dedede;}

.newsItem .Img { flex: 0 0 154px; height: 93px;}

.newsItem .Info { line-height: 24px;}

.newsItem .Info h2 { height: 25px; overflow: hidden;}

.newsItem .Info h2 a { font-size: 16px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}

.newsItem .Info p { color: #bdc3c7;}

 



.listBox.news { flex-flow: wrap;}

.listBox.news .newsItem { flex: 0 0 50%; }

.listBox.news .newsItem .Img { margin-right: 20px;}

.listBox.news .newsItem .Img img{width:154px; height:93px; transition: all .3s;}

.listBox.news .newsItem:nth-of-type(1),.listBox.news .newsItem:nth-of-type(3) {}





.listBox.notice { flex-direction: column;}

.listBox.notice .newsItem { flex: 1; padding: 19px 0; }

.listBox.notice .newsItem .Img { margin-left: 20px;}

.listBox.notice .newsItem .Img img{width:154px; height:93px; transition: all .3s;}

.indexAd { justify-content: space-between; padding: 40px 0;}



.indexAbout { padding-top: 120px; padding-bottom: 40px; background: url('../images/about-title.jpg') center 50px no-repeat, url('../images/about-title-bg.jpg') center 50px repeat-x; }

.indexAbout .Img {flex: 0 0 600px; height: 380px;}

.indexAbout .Info { flex: 1; padding-left: 40px; line-height: 26px; background: url('../images/about-bg.jpg') center center no-repeat;}

.indexAbout .Info p { margin-bottom: 20px;}

.indexAbout .Info a { display: inline-block; width: 140px; height: 38px; line-height: 38px;color: #fff; text-align: center; border-radius: 3px;}

.indexAbout .Info a:hover {background-image: radial-gradient(farthest-corner at 50% 50%, #f28e4a, #de3b4c);}



.figureSwiperBox { padding: 40px 0 20px;}

.figureNav,.assNav { position: static; text-align: left; background-color: #f2f2f2;}

.figureNav > .item,.assNav > .item,.musicCreateNav .item{margin: 0 !important;padding: 0 20px; width: auto; height: 50px; line-height: 50px; font-size: 18px; color: #333; opacity: 1; border-radius: 0; background:none;}

.figureNav > .item.swiper-pagination-bullet-active,.assNav > .item.swiper-pagination-bullet-active,.musicCreateNav > .item.swiper-pagination-bullet-active { color: #fff;background-image: radial-gradient(farthest-corner at 50% 50%, #f28e4a, #de3b4c);}

.figureSon { margin-top: 30px;}

.figureSon .item  { flex: 0 0 144px; margin-right: 30px; text-align: center;line-height: 28px;}

.figureSon .item img { width:144px; height: 180px; transition: all .3s;}

.figureSon .item h2 { font-size: 16px; font-weight: bold;}

.figureSon .item h3 { font-size: 14px;}



.threeBox { justify-content: space-between; padding: 40px 0; font-size: 0;}

.threeBox .box { flex: 0 0 380px; }

.threeBox .box > img { width: 100%;}

.threeBox .box img { transition: all .3s;}

.threeList {padding: 14px 0; line-height: 24px; color: #999; font-size: 14px;}

.threeList:last-of-type { border-top: solid 1px #dedede;}

.threeList h2 { font-size: 20px; line-height: 40px;}

.threeForm { padding: 20px 30px; height: 280px; font-size: 14px; background-color: #fff; box-sizing: border-box;}

.threeForm input {margin-bottom: 10px; padding: 0 18px; width: 100%; height: 38px; line-height: 38px; border-radius: 5px; border: solid 1px #dedede; box-sizing: border-box; outline: none;}

.threeForm input.gradualBg { margin: 10px 0; border: 0; color: #fff; font-size: 16px; cursor: pointer;}

.threeForm .forget { display: block; text-align: right; margin: 10px 0;}

.threeForm .apply { display: block; width: 100%; height: 38px; line-height: 38px; font-size: 16px; text-align: center; border-radius: 5px; border: solid 1px #dedede;}

.threeForm .apply:hover { border: 0;background-image: radial-gradient(farthest-corner at 50% 50%, #f28e4a, #de3b4c); color: #fff;}





.association { margin: 30px auto;}

.assBox { float: left; width: 780px;}

.xhMore{position:absolute; right:5px; top:-32px}

.ass .swiper-slide { justify-content: space-between; flex-flow: wrap;}

.assList { flex: 0 0 48%;padding: 19px 0; line-height: 29px; border-bottom: solid 1px #dedede; color: #999;  }

.assList h2 { font-size: 16px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}

.assList a.Name {margin-left: 10px; color: #999; }



.musicCreation { float: right; width: 380px;}

.musicCreateNav { position: static;margin-top: 15px; margin-bottom: 4px; text-align: center; background-color: #f2f2f2;}

.musicCreateNav > .item { flex: 1; padding: 0; font-size: 16px; height: 40px; line-height: 40px;}

.musicianItem { padding: 15px 0; border-bottom: solid 1px #dedede;}

.musicianItem::after { display: block; content: ''; width: 100%; height: 0; clear: both;}

.musicianItem .Img { float: left; margin-right: 20px; width: 106px; height: 75px;}

.musicianItem .Img img{width:106px; height:74px; transition: all .3s;}

.musicianItem .Info h2{ font-size: 17px;}

.musicianItem .Info p { line-height: 24px;color: #777777;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}





#musicList { padding: 30px 0 20px;}

.musicList { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 30px;}

.musicList .item { padding: 20px 0; border-bottom: solid 1px #dedede; font-size: 0;}

.musicList .item .number { flex: 0 0 52px; text-align: center; font-size: 24px;}

.musicList .item .Img { flex: 0 0 70px; margin-right: 15px; border-radius: 5px;}

.musicList .item .Img img { height: 70px; width:70px; transition: all .3s;}

.musicList .item .Info { flex: 1; align-self: center; font-size: 14px; line-height: 28px;}

.musicList .item .Info h2 { font-size: 18px;}

.musicList .item .Info p,.musicList .item .Info p a { color: #999;}





.newsTop:hover .Img img,

.listBox.news .newsItem:hover .Img img,

.listBox.notice .newsItem:hover .Img img,

.figureSon .item:hover img,

.threeBox .box img:hover,

.musicianItem:hover .Img img,

.musicList .item:hover .Img img

{ transform: scale(1.03);}







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

     .figureNav { display: flex;}

     .figureNav > .item { flex: 1; padding: 0; text-align: center; overflow: hidden;}



     .indexMainList { margin: 20px auto; flex-wrap: wrap;}

     .indexNews {flex: 1; padding: 0;}

     .newsTop { display: none;}

     .listBox.news,.listBox.notice { flex-direction: column; padding: 0 2%;}

     .listBox.news .newsItem { flex: 1;}

     .indexNotice { margin-left: 0; padding: 0;}

     .indexAd { display: none;}

     .indexAbout { flex-direction: column;}

     .indexAbout .Img { flex: 1; height: auto;}

     .indexAbout .Info { padding: 10px 2%;}

     .indexAbout .Info a { display: block; margin: 0 auto;}

     

     .threeBox { flex-direction: column;}

     .threeBox .box { flex: 1;}

     .threeList { padding: 10px 2%;}



     .assBox { float: none;width: 100%; }

     .ass .swiper-slide { flex-direction: column; padding: 0 2%;}

     .assList { flex: 1;}

     .assList:nth-child(even) { display: none;}



     .musicCreation { float: none; margin: 10px 0; width: 100%;}

     .musicCreation .swiper-slide { padding: 0 2%; }

     

     .musicList {grid-template-columns:1fr;}

 }