/* CSS Document */
body {background:#1a143c;font-size: 14px;}
*{ margin:0; padding:0;}
li{ list-style:none;}
img{ border:none;}
a {text-decoration:none;}
.clear {clear:both;}
.main{width:100%;max-width:640px;background-color:#1a143c; margin:0 auto;}

@keyframes seconddiv{
0% {transform: scale(1,1);}
10% {transform: scale(1,1);}
55% {transform: scale(1.2,1.2);}
100% {transform: scale(0.8,0.8);}
}

 @keyframes mjn{
 0% {transform: scale(1,1);}
 50% {transform: scale(1.2,1.2);}
 100% {transform: scale(1,1);}
 }
 
 @keyframes fade-in {  
     0% {opacity: 0;}/*初始状态 透明度为0*/  
     40% {opacity: 0;}/*过渡状态 透明度为0*/  
     100% {opacity: 1;}/*结束状态 透明度为1*/  
 }  
 @-webkit-keyframes fade-in {/*针对webkit内核*/  
     0% {opacity: 0;}  
     40% {opacity: 0;}  
     100% {opacity: 1;}  
 }
 .s1{background: url(../img/bg.jpg) no-repeat; background-size:cover; background-position: center center;}
 .s2{background: url(../img/bg1.jpg) no-repeat; background-size:cover; background-position: center center;}
 .s3{background: url(../img/bg2.jpg) no-repeat; background-size:cover; background-position: center center;}
 .s4{background: url(../img/bg3.jpg) no-repeat; background-size:cover; background-position: center center;}
 .s5{background: url(../img/bg4.jpg) no-repeat; background-size:cover; background-position: center center;}
 .s6{background: url(../img/bg5.jpg) no-repeat; background-size:cover; background-position: center center;}
 .s7{background: url(../img/bg6.jpg) no-repeat; background-size:cover; background-position: center center;}
 .s8,.s9{background:#1a143c;}
 .s10{background: url(../img/bg7.jpg) no-repeat; background-size:cover; background-position: center center;}
 
 
 @-webkit-keyframes moveIconUp {
   0% {
     -webkit-transform: translateY(100%) scale(1.2, 1.2);
     opacity: 0
   }
   50% {
     -webkit-transform: translateY(0%) scale(0.6, 0.6);
     opacity: 1
   }
   100% {
     -webkit-transform: translateY(-100%) scale(0.2, 0.2);
     opacity: 0
   }
 }
 .swiper-arrow {
   position: fixed;
   width: 46px;
   height: 25px;
   z-index: 1;
   left: 50%;
   margin-left: -23px;
   bottom: 15px;
 }
 
 .swiper-arrow span {
   background:url(../img/arrow.png) no-repeat center bottom;
   background-size: contain;
   width: 46px;
   height: 25px;
   display: block;
   /* opacity: 0.3; */
   -webkit-animation: moveIconUp 1.5s ease infinite;
   animation: moveIconUp 1.5s ease infinite
 }
 
 .conSkewA{transform:skew(8deg,-8deg);-webkit-transform:skew(8deg,-8deg);-moz-transform:skew(8deg,-8deg);}
  .conSkewB{transform:skew(-12deg,11deg);-webkit-transform:skew(-12deg,11deg);-moz-transform:skew(-12deg,11deg);}

/* 新添加的样式 */
.head{ overflow: hidden;width: 100%;}
.head .logo{margin-top: 5%;text-align: center;position: relative;top: -5%;}
.head .logo .top img{ width:60%;}
.head .logo .year {margin-top: 10px;}
.head .logo .year img{ width: 45%;}
.head .bottom{text-align: center; margin-top: 34%;}
.head .bottom .bot3{ margin-top: 2%; animation:1s seconddiv  infinite alternate;-webkit-animation:1s seconddiv infinite alternate;-moz-animation:1s seconddiv infinite alternate;-o-animation:1s seconddiv infinite alternate; cursor: pointer;    padding-bottom: 1%; }
.head .bottom .box img{ width: 60%;}
.head .bottom .bot1{ margin-top: 4%;}
.head .bottom .bot1 img{width: 45%;}
.head .bottom .bot2{margin-bottom: 1%;margin-top: 2%;}
.head .bottom .bot2 img{width: 30%;}
.head .bottom .bot3 img{width: 8%;}

.conA{}
.conBbox1{text-align: center; font-size: 18px; line-height: 32px;}
.conA .conBbox1 img{width: 90%;text-align: center;}
.conB{margin-top: 5%;}
.conBbox2{font-size: 26px;margin-top: 5%;}
.conC { margin-top: 20%;}
.conC .conCbox1{margin-left: 10%;}
.conC .conCbox1 img{width: 50%;  animation: fade-in 2s;/*动画名称*/  
    animation-duration: 1s;/*动画持续时间*/  
    -webkit-animation:fade-in 2s;/*针对webkit内核*/  }

.conC .conCbox2 {}
.conC .conCbox2 img{width: 95%; position: relative;}
.conC .conCbox2 .conMain{margin-left:10%;font-size:16px; color: #fff; line-height: 30px;padding-top: 5%;animation: fade-in 2s;/*动画名称*/  
    animation-duration: 1s;/*动画持续时间*/  
    -webkit-animation:fade-in 2s;/*针对webkit内核*/ }
.conC .conCbox2 .conMain .day{color: #e706cc; }


.conD{ margin-top: 25%; position: relative;}
.conD .conDbox1{position: relative;  top: -30px;}
.conD .conDbox1 .bg{ width: 95%; }

.conD .conDbox1 .conMain{position: absolute;  padding-left: 10%; margin-top: -50%;}
.conMain .MainA,.conMain .MainB,.conMain .MainC{ font-size:18px; color: #323232; line-height: 30px;}
#thread{color:#e706cc;margin: 0 5px;}
#comment{color:#e706cc;margin: 0 5px;}
#zan{color:#e706cc;margin: 0 5px;}
#sign{color:#e706cc;margin: 0 5px;}
#addMoneyNum{color:#e706cc;margin: 0 5px;}
#lyb{color:#e706cc; margin: 0 5px;}
#partIn{color:#e706cc; margin: 0 5px;}
#threadView{color:#e706cc; margin: 0 5px;}
.conMain span{display: inline-block;}



.conY{ margin-top: 25%; position: relative;}
.conY .conYbox1{position: relative;  top: -30px;}
.conY .conYbox1 .bg{ width: 95%; }

.conY .conYbox1 .conMain{position: absolute;  padding-left: 10%; margin-top: -50%;}
.conZ{ margin-top: 25%; position: relative; text-align: right;}
.conZ .conZbox1{position: relative;  top: -30px;}
.conZ .conZbox1 .bg{ width: 95%; }

.conZ .conZbox1 .conMain{position: absolute;  padding-left: 20%; margin-top: -55%;text-align: left;}


.conV{ margin-top: 25%; position: relative;}
.conV .conVbox1{position: relative;  top: -30px;}
.conV .conVbox1 .bg{ width: 95%; }

.conV .conVbox1 .conMain{position: absolute;  padding-left: 10%; margin-top: -50%;}
.conV .conVbox1 .conMain #followNum,.conV .conVbox1 .conMain #fansNum{ color: #e706cc; margin:  0 5px;}


.conE{ margin-top: 25%; position: relative; text-align: right;}
.conE .conDbox1{position: relative;  top: -30px;}
.conE .conDbox1 .bg{ width: 95%; }
.conE .conDbox1 .conMain .threadTitle{ color: #323232;font-size: 18px;    line-height: 26px;}
.conE .conDbox1 .conMain{position: absolute;  padding-left: 18%; margin-top: -65%;text-align: left;}
.conE .conDbox1 .conMain .subject{color: #e706cc;display: -webkit-box;
    -webkit-box-orient: vertical;   text-overflow:ellipsis;   -webkit-line-clamp: 2;overflow: hidden; line-height: 26px; width: 200px; font-size: 18px;}
	
.conF .img img{width: 50%;display: block;margin: 0 auto; margin-bottom: 2%;}

/* 年度榜单 */
 .conG{margin: 0 10px; box-sizing: border-box;border: 1px solid #6d59d2; background-color: #1c177b; border-radius: 10px;font-size:18px;color: #827ce8; }

.conG  .tab{ height:50px; line-height: 50px;   padding: 0 2%; box-sizing: border-box;overflow-x: auto;display:flex;width: 100%;white-space:nowrap;width: auto;}

.tabBox ul li {display: inline-block;list-style-type: none;padding: 0px 5px;box-sizing: border-box;color: #817ee5;font-size: 18px;}
 /*
.tabBox ul li.active{color: #cedcff;}

.conG .conGContent{overflow: hidden; width: 100%;display: none;}
.conG .conGContent.active{display: block;}

.conG .center{ padding: 2% 0; box-sizing: border-box;color: #cedcff;font-size:16px; margin: 0 2%;}
.conG .center .self{background-color: #2a2291; margin-bottom:10%;} 
.conG .center .self .line {display: inline-flex;line-height: 52px;width: 100%; padding: 1%; box-sizing: border-box;}

.conG .center .self .line .name{flex: 1;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.conG .center .self .line .score{ color: #ffc000;font-size: 14px;}
.conG .center .self .line .img{ margin-right: 2%;}
.conG .center .self .line .img img{width: 50px; height: 50px; border-radius: 50%; border:2px solid #fd7a36;}
 */
/* 前三名 */
/* .conG .center .Top3{width: 100%; display: inline-flex; justify-content: space-between; flex-wrap: wrap;flex-direction:row; margin-bottom: 10%; padding-top: 20%; overflow: hidden;}
.conG .center .Top3 .topThree{padding:0 1%;box-sizing: border-box; border-top-left-radius: 10px; border-top-right-radius: 10px;background:linear-gradient(top, #2a2291 0%, #1d187e 100%);background:-moz-linear-gradient(top, #2a2291 0%, #1d187e 100%);background:-webkit-linear-gradient(top, #2a2291 0%, #1d187e 100%); width: calc(33% - 1%);text-align: center;}
.conG .center .Top3  .user{ margin-top: -20%; margin-bottom: 10%;position: relative; left: 22%;}
.conG .center .Top3  .user img{ width: 60px; height: 60px; border-radius: 50%;} 
.conG .center .Top3 .first{ margin-top: -10%;}
.conG .center .Top3 .first .user .avthor{ border:2px solid #f3cc95;width: 70px; height: 70px;}
.conG .center .Top3 .second .user .avthor{border:2px solid #c8c6ed;}
.conG .center .Top3 .third .user .avthor{border:2px solid #f99f87;}

.conG .center .Top3  .user em{ position: absolute; top: -17px; left: -18px;}
.conG .center .Top3  .user em img{ width: 40px; height: 41px;}
.conG .center .Top3  .username{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.conG .center .Top3 .topThree .score{ font-size: 14px;}
.conG .center .Top3 .topThree .user  .avthor{position: relative; display: block;}
.conG .center .Top3 .topThree .user em img{ position: absolute; } */
/* 列表 */
/* .conG .list{ padding: 0 2%; box-sizing: border-box;}
.conG .list .listLine{overflow: hidden; display: inline-flex;line-height: 52px;width: 100%; color: #cedcff;    margin-bottom: 5%;}
.conG .list .listLine .img{margin-right: 2%;}
.conG .list .listLine  .avthor{ width: 50px; height: 50px; border-radius: 50%; vertical-align: middle;     border: 2px solid #fd7a36;}
.conG .list .listLine .sort{ display: inline-block; width: 25px;text-align: center;font-style: normal;margin-right: 2%;}
.conG .list .listLine .username{flex: 1;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.conG .list .listLine  .score{color: #ffc000;font-size: 14px;max-width: 160px;
    text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.conG .listbot{ margin:6% 0 5% 0; color: #cedcff; text-align: center;font-size: 14px;} */


/* 自己的部分 */
.self{width: 100%;overflow: hidden;}
.self .line{display: inline-flex;line-height: 34px;width: 100%; padding: 2% 4%; box-sizing: border-box;}
.self .line .name{flex: 1;text-overflow:ellipsis; overflow:hidden; white-space:nowrap; color: #cdddff;}
.self .line .score{ color: #ffc000;font-size: 14px;}
.self .line .img{ margin-right: 2%;}
.self .line .img img{width: 50px; height: 50px; border-radius: 50%; border:2px solid #fd7a36;}





/* tab切换  和 内容 */
.tab {display: flex;white-space: nowrap;overflow-x: auto;}
.tab .li-item {font-size: 17px;text-align: center;;}
.li-item.active {color: #cdddff;}

.tab-content .before-three {width: 100%; display:inline-block; justify-content: space-between; flex-wrap: wrap;flex-direction:row; margin-bottom: 5%; padding-top: 10%; padding-left: 1%;}

.before-three .item {flex: 1;color: #cedcff;
padding:0 2%;box-sizing: border-box; border-top-left-radius: 5%; border-top-right-radius: 5%;background:linear-gradient(top, #2a2291 0%, #1d187e 100%);background:-moz-linear-gradient(top, #2a2291 0%, #1d187e 100%);background:-webkit-linear-gradient(top, #2a2291 0%, #1d187e 100%); width: calc(33% - 2%);text-align: center;margin-right: 2%; }
.item .avatar {border-radius: 50%; display: inline-block; margin-bottom: 10%;}

.item .name {font-size: 16px;font-weight: 600;margin-bottom: 5px;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

.item .num {font-size: 14px;    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}
.two {flex: 1;}



.one .avatar{  border:2px solid #f3cc95;}
.two .avatar{border:2px solid #c8c6ed;}
.three .avatar{border:2px solid #f99f87;}


.item .user{margin-top: -20%;margin-bottom: 10%;position: relative;left: 30%;}
.user em{position: absolute;top: -20px;left: -22px;}
.user em img{ position: absolute; width: 40px; height: 41px;}
.user .avatar{position: relative; display: block;}


.tab-content .after-three {}

.after-three .after-three__item {width: 100%;display: flex;align-items: center;padding: 5px 10px;}

.after-three__item .order {display: inline-block;color: #ccc;width: 30px;text-align: left;}

.after-three__item .user-avatar {width: 30px;height: 30px;border-radius: 50%;border: 2px solid #fd7a36;}

.after-three__item .user-name {flex: 1;min-width: 0;color: #cedcff;font-size: 14px;white-space: nowrap;padding: 0 10px;text-overflow: ellipsis;overflow: hidden;}

.after-three__item .user-num {color:#ffc000;font-size: 12px;}





/* 底部开始 */
.conH {text-align: center;margin-top: 10%;}
.conH img{width: 70%;}
.conH .title{padding: 0 10%; box-sizing: border-box;font-size: 20px; line-height: 38px; margin-top: 8%; padding-bottom:40% ; background-image: url(../img/jiangnang.png);background-repeat: no-repeat;background-size: 50%; background-position: right bottom;}
.conH .title div{margin-bottom: 5%;}

/* 时间胶囊 */
.conI{text-align: center; margin-bottom: 20%; padding: 0 2%; box-sizing: border-box; overflow: hidden; padding-bottom: 10%;}
.conI .img{margin-top: 10%;}
.conI .img a{display: block;}
.conI .img img{width: 50%; animation:1s mjn  infinite alternate;-webkit-animation:1s mjn infinite alternate;-moz-animation:1s mjn infinite alternate;-o-animation:1s mjn infinite alternate; cursor: pointer;}




/* 背景音乐 */
.music_icon { position: fixed; width: 6%; top: 3%; right: 3%; z-index: 999999; padding: 2%;}
.music_animate {
    -webkit-animation: music_animate 2s .5s linear infinite both;
}
@-webkit-keyframes music_animate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}

/* 新加的样式结束 */