/* CSS Document */



/*==================
    颜色和背景贴图
  ==================*/

.tabbar{ background:black; }

.tabbar a{ color:white; }
.tabbar a:hover{ color:#FFD500;  }

.tabbar a{ background:url(../img/bg/bg-menu.svg) center no-repeat; }
.tabbar a:hover{ background:url(../img/bg/bg-menu-sel.svg) center no-repeat; }

.tabbar a.icon-home{ background:url(../img/icon/logo-frame.svg) center no-repeat; }
.tabbar a.icon-home:hover{ background:url(../img/icon/logo-frame-unable.svg) center no-repeat; }

/*div.container{ background:url(../img/bg/bg-240x12-2880.gif) center;}
div.container{ background:url(../img/bg/bg-240x11-2640.gif) center;}	*/
/*设置断点为1440，1200，960，720，480，超过1440就6列封顶，低于480就2列封底*/

/*回头每段还有对应的浮动背景需要去添加，这些背景外套一个固定宽度的div，定位问题就基本解决了，小于480采用百分比五五分*/
@media (min-width:1441px) { div.container{ background:url(../img/bg/bg-240x12-2880.gif) center; } }
@media (max-width:1441px) { div.container{ background:url(../img/bg/bg-240x11-2640.gif) center;}}
@media (max-width:1200px) { div.container{ background:url(../img/bg/bg-240x12-2880-inverse.gif) center;} }
@media (max-width:960px) { div.container{ background:url(../img/bg/bg-240x11-2640-inverse.gif) center;}}
@media (max-width:720px) { div.container{ background:url(../img/bg/bg-240x12-2880.gif) center;} }


.update div.title{ background:url(../img/bg/bg-index-title-update.svg) left no-repeat; }
.album div.title{ background:url(../img/bg/bg-index-title-album.svg) right no-repeat; }
.interesting div.title{ background:url(../img/bg/bg-index-title-interesting.svg) left no-repeat; }
.interesting div.content{ background:url(../img/bg/bg-interesting-300@2x.svg) center; }





/*==================
    尺寸和布局
  ==================*/
.tabbar{ font-size:0; padding:0 10% 0 10%; box-sizing:border-box; }
.tabbar div.box-icon{ width:33.33%; text-align:center; height:0.5rem; display:inline-block; }
.tabbar a{ display:inline-block; vertical-align:top; line-height:0.3rem; margin-top:0.1rem;    } 
.tabbar a.icon-home{ display:inline-block; width:0.3rem; height:0.3rem;  }


.miss-id{ display:none;   }

@media (max-width:480px){ 
	
	
	.miss-id{ display:block; margin-top:0.2rem; text-align:center;  }
	
}  

  

.container{ padding-bottom:2rem; }
@media (max-width:720px){
	.container{ padding-bottom:0.5rem; } }

	.banner{ font-size:10%; } /*修正了625%对插件的影响，只要外围字号差不多50%以下就可以了，后面.update也margin-top了些配合了下*/




.update{ font-size:0; position:relative; margin:0 auto; margin-top:0.1rem;/*这句配合插件下面垫些留白*/ }
.update div.title{ position:relative; z-index:2; width:100%; height:0.9rem; padding-top:1.1rem; text-align:left;  }
.update div.title span{ margin-left:0.12rem; }
.update a.thumb{ display:inline-block; position:relative; z-index:1; width:2.4rem;  }
.update a.thumb img{ width:2.4rem; }
.update div.bg{ position:absolute; z-index:0; top:0; left:0;  }
/*以上是update不会变的部分*/
/*以下是update随着media query改变的部分*/

@media (min-width:1441px){
	.update{ width:14.4rem; }
	.update .no-1, .update .no-2, .update .no-3, .update .no-4, .update .no-5, .update .no-6{ margin-left:0; margin-right:0; }
	/*重置下左右，面的自上而下继承了会乱套*/
	.update .no-1, .update .no-2, .update .no-3, .update .no-5, .update .no-6{ margin-left:2.4rem; }
	
}

@media (max-width:1441px){
	.update{ width:12rem; } 
	.update .no-1, .update .no-2, .update .no-3, .update .no-4, .update .no-5, .update .no-6{ margin-left:0; margin-right:0; }
	.update .no-1, .update .no-2, .update .no-4, .update .no-5, .update .no-6{ margin-left:2.4rem;  }
	.update .no-2{ margin-right:2.4rem;   }
	
}

@media (max-width:1200px){
	.update{ width:9.6rem; }
	.update .no-1, .update .no-2, .update .no-3, .update .no-4, .update .no-5, .update .no-6{ margin-left:0; margin-right:0; }
	.update .no-1, .update .no-2, .update .no-4, .update .no-5, .update .no-6{ margin-left:2.4rem;  }
	
}

@media (max-width:960px){
	.update{ width:7.2rem; }
	.update .no-1, .update .no-2, .update .no-3, .update .no-4, .update .no-5, .update .no-6{ margin-left:0; margin-right:0; }
	.update .no-1, .update .no-4{ margin-left:2.4rem;  }
	
}

@media (max-width:720px){
	.update{ width:4.8rem; }
	.update .no-1, .update .no-2, .update .no-3, .update .no-4, .update .no-5, .update .no-6{ margin-left:0; margin-right:0; }
	.update .no-1, .update .no-3{ margin-left:2.4rem; }
	.update .no-2{ margin-right:2.4rem; }
	
}

@media (max-width:480px){
	.update{ width:100%; }
	.update a.thumb{ width:50%; height:auto; }
	.update a.thumb img{ width:100%; }
	.update .no-1, .update .no-2, .update .no-3, .update .no-4, .update .no-5, .update .no-6{ margin-left:0; margin-right:0; }
	.update .no-1, .update .no-3{ margin-left:50%; }
	.update .no-2{ margin-right:50%; }
	
	.update div.bg picture img{ width:100%; }
	
}


.album{ font-size:0; margin:0 auto;  margin-top:0.5rem;   }
.album div.title{ display:block; width:100%; height:0.9rem; padding-top:1.1rem; text-align:right; }
.album div.title span{ margin-right:0.12rem; }
.album a.thumb{ display:inline-block; width:33.33%; position:relative; }
.album a.thumb img{ width:100%; }
.album a.thumb div.name{ position:absolute; z-index:1; bottom:0.1rem; right:0.25rem; }
.album a.thumb div.comment{ 
	position:absolute; z-index:2; top:5%; left:5%; width:90%; height:90%; 
	background:rgb(127,6,183,0.6); 
	padding-top:10%; padding-left:7%;  box-sizing:border-box;
	}
.album a.thumb div.comment span.topic{ display:block; margin-bottom:0.2rem;  }
.album a.thumb div.comment span.keyword{ margin-right:0.05rem; margin-bottom:0.05rem; }
@media (min-width:1441px){ 
	.album{ width:14.4rem; } 
	.album a.thumb{ width:33.33%; }
	}

@media (max-width:1441px){ 
	.album{ width:12rem; } 
	.album a.thumb{ width:33.33%; }
	}

@media (max-width:1200px){ 
	.album{ width:9.6rem; } 
	.album a.thumb{ width:50%; }
	}

@media (max-width:960px){ 
	.album{ width:7.2rem; } 
	.album a.thumb{ width:50%; }
	}

@media (max-width:720px){ 
	.album{ width:4.8rem; } 
	.album a.thumb{ width:100%; }
	}

@media (max-width:480px){ 
	.album{ width:100%; } 
	.album a.thumb{ width:100%; }
	}






.interesting{ font-size:0; width:100%; margin-top:0.5rem; }
.interesting div.title{ margin:0 auto; height:0.9rem; padding-top:1.1rem; text-align:left;  }
.interesting div.title span{ margin-left:0.12rem; }
.interesting div.content{ width:100%; height:4.8rem; text-align:center;  }
/*此块分title和content宽度不同，前者有断点，后者无*/
/*content下用div套区分出id，内部结构a链接，div发光和img选图*/
.interesting div.content div.thumb{ display:inline-block; width:auto; height:auto; margin-left:0.2rem; }
.interesting div.content div.thumb a{ display:inline-block;  position:relative;  }
.interesting div.content div.thumb img.shine{ position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; } 
.interesting div.content div.no-4{ display:none; }
.interesting div.content div.no-1{ margin-left:0; }



@media (min-width:1441px){ .interesting div.title{ width:14.4rem; } }

@media (max-width:1441px){ .interesting div.title{ width:12rem; } }

@media (max-width:1200px){ .interesting div.title{ width:9.6rem; } }

@media (max-width:960px){ 
	.interesting div.title{ width:7.2rem; } 
	.interesting div.content{ background:none; width:7.2rem; margin:0 auto; /*不限制宽度的话就会凑巧挤进下一张牌*/}
	.interesting div.content div.thumb{ margin:0; display:inline-block;   }
	.interesting div.content div.no-2{ margin-left:0.2rem; }
	.interesting div.content div.no-4{ margin-left:0.2rem; margin-top:0.2rem; }
	
	/*四缺一，无背景，垫底*/
	.interesting div.content{ height:auto;   }
	
	}

@media (max-width:720px){ 
	.interesting div.title{ width:4.8rem; } 
	.interesting div.content{ background:none; }
	.interesting div.content div.thumb{ width:100%; margin:0; }
	.interesting div.content div.no-4{ display:none; }
	
	.interesting div.content img.shine{ width:auto; }
	.interesting div.content div.no-2,
	.interesting div.content div.no-3{ margin-top:0.2rem; }
	
	
	}

@media (max-width:480px){ 
	.interesting div.title{ width:100%; } 
	.interesting div.content div.thumb{ width:100%; }
	.interesting div.content div.thumb a{ width:90%; } 
	/*这里两边留空5%共10%*/
	.interesting div.content div.thumb img.shine{ width:100%; }
	.interesting div.content div.thumb img{ width:100%; }
	
	
	}


/*==================
    文本样式（font-size清0归到布局上）
  ==================*/
  

.tabbar a{ font-family:tt-light; font-size:0.12rem; text-transform:uppercase; color:white;  }

.update div.title span, .album div.title span, .interesting div.title span{ font-family:text-light; font-size:0.18rem; }
.album a.thumb div.name{ font-size:0.18rem; color:white; text-align:right; text-transform:uppercase; } 
.album a.thumb div.comment span.topic{ font-family:tt-medium; font-size:0.28rem; color:white;  text-transform:uppercase; }
.album a.thumb div.comment span.keyword{ 
	font-size:0.14rem; color:white;
	border:solid white 0.02rem; border-radius:0.06rem; 
	height:0.24rem; line-height:0.24rem; padding:0 0.05rem; display:inline-block; 
	}
.miss-id{ background:#e4ddd7; height:0.2rem; }
.miss-id p{ font-size:0.12rem; line-height:0.2rem; font-family:text-light; color:white;}
.miss-id p:before{ content:' ~ '; }
.miss-id p:after{ content:' ~ ';  }



/*==================
    动画特效
  ==================*/
  
.update a.thumb{ overflow:hidden; }
.update a.thumb img{ transition:all ease-in-out .5s; transition-delay:.01s; }
.update a.thumb:hover img{ transform:scale(1.3) rotate(20deg);  }

.album a.thumb{ overflow:hidden; }
.album a.thumb div.comment{ transform:translate(0,120%); transition:all ease-in-out .3s; transition-delay:.01s;}/*原来定的位置需要初始化到看不见*/
.album a.thumb:hover div.comment{ transform:translate(0,0);  }/*这里只需复原即可*/

.album a.thumb div.name{ transition:all ease-in-out .3s; transition-delay:.01s; }
.album a.thumb:hover div.name{ transform:translate(0,210%);  }



.interesting div.content div.thumb a{ overflow:hidden; }
/*a包含了shine和img，所以a要设置溢出*/

.interesting div.content div.thumb a img.shine{ 
	transform:translate(-100%,0);
	transition:all ease-in-out .5s; transition-delay:.01s;
	 }
	 
.interesting div.content div.thumb a:hover img.shine{ transform:translate(100%,0);}