body {
	font-family:'Open Sans', Arial, sans-serif;
	font-size:14px;
	font-weight:300;
	line-height:1.6em;
	color:#333;
	background: #f3f3f3;
	padding: 0;
	margin: 0;
}

*{
	box-sizing: content-box;
}
a:active {
	outline:0;
}

a{
	text-decoration: none;
}
.clear {
	clear:both;
}


h1,h2, h3, h4, h5, h6 {
	font-family:'Open Sans', Arial, sans-serif;
	font-weight:700;
	line-height:1.1em;
	color:#333;
	margin-bottom: 20px;
}
ol,li,ul{ list-style: none; }
.container {
	padding:0 20px 0 20px;
	position:relative;
}

#wrapper{
	width:100%;
	margin:0;	
	padding:0;
}

.row,.row-fluid {
	margin-bottom:30px;
}

.row .row,.row-fluid .row-fluid{
	margin-bottom:30px;
}

.row.nomargin,.row-fluid.nomargin {
	margin-bottom:0;
}

img.img-polaroid {
	margin:0 0 20px 0;
}
.img-box {
	max-width:100%;
}
/*  Header
==================================== */
.flex{display: flex;}
.flex-column{flex-direction: column;}
.flex-center{justify-content: center; align-items: center;}
.flex-right{justify-content: center;align-items: flex-end;}
.flex-1{flex: 1;}
.flex-wrap{flex-wrap: wrap;}
body{background:#167aee !important;}
html,body,#app{width: 100%; height: 100%}
.menuBox{margin:0 auto;padding-top: 80px; width: 840px; overflow:hidden;}
.menuBox .title{text-align:center;}
.menuBox .title a{display: inline-block; padding: 15px 30px;color: rgba(255,255,255,.7);cursor: pointer;font-size: 18px;}
.menuBox .title a.active,.menuBox .title a:hover{color: rgba(255,255,255,1);font-weight: bold; border-bottom: 2px solid #fff;}


.menuBox .content,
.menuBox .contents{padding: 20px 0 0 0;display: none;}
.menuBox .content.active{display: flex;}
.menuBox .content .item{ width: 200px; height: 200px; margin: 5px; background-color: rgba(0,0,0,.1);border-radius: 5px; position: relative;}
.menuBox .content .item:hover{background-color: rgba(0,0,0,.5);box-shadow:0 0 20px rgba(0,0,0,.2)}
.menuBox .content .item .inner{width: 100%; display: block;color: #fff;padding-top: 10px;text-align: center; position: relative;}
.menuBox .content .item .tag{display: inline-block;background: #eee;color: #fff; position: absolute;left:0px; top: 5px;border-radius: 4px;font-size: 14px;padding:1px 10px 2px;transform: scale(.8); width: 70px;text-align: center;}
.menuBox .content .item img{height: 30px;}
.menuBox .content .item .img{padding-bottom: 20px;}
.menuBox .content .item .t{padding-bottom: 15px;font-size: 14px;}
.menuBox .content .item .t{height: 20px; line-height: 20px;}
.copy{display: inline-block;width: 20px;height: 20px;background:url(../img/copy.png) no-repeat center; background-size: 70% auto;cursor: pointer;}
.link{display: inline-block;width: 20px;height: 20px;background:url(../img/link.png) no-repeat center; background-size: 70% auto;cursor: pointer;}
.menuBox .content .item a{color: rgba(255,255,255,1);display: block;}
.menuBox .contents.active{display: flex;}
.menuBox .contentsBox{width: 100%;columns: 3;column-gap: 15px;}
.menuBox .contents .item{width: 100%;break-inside: avoid;margin-bottom: 15px; background-color: rgba(0,0,0,.1);border-radius: 5px; position: relative; text-align: center;padding-bottom: 30px;}
.menuBox .contents .item .box{padding: 20px 10px 0;}
.menuBox .contents .item .img{padding: 50px 0 10px;}
.menuBox .contents .item .t{color: #fff; font-size: 16px;}
.menuBox .contents .item img{height: 30px;}
.menuBox .contents .boxItem .tags{display: inline-block;background: #eee;color: #fff;border-radius: 4px;font-size: 14px;padding:1px 10px 2px;transform: scale(.8);}
.menuBox .contents .boxItem{position: relative; height: 24px;padding-left:100px;margin-bottom: 5px;}
.menuBox .contents .boxItem .tags{position: absolute; left: 0; top:0;width: 70px;}
.menuBox .contents .boxItem .rightTag{color: #fff;text-align: left;} 
.ml5{margin-left: 5px;}
 

.tabList{ position: fixed;bottom:50px;right: 30px; z-index: 9999;}
.tabList a{height: 40px; width: 40px; cursor: pointer;background:url(../img/icon-1.png) no-repeat center; background-size: 70% auto; }
.tabList a.active{background:url(../img/icon-2.png) no-repeat center; background-size: 70% auto; }

@media (max-width: 767px){
	.menuBox{width: 100%;padding-top: 20px;}
	.menuBox .title {text-align: center;}
	.menuBox .title a{padding:10px 0;width: 30%;display: inline-block;}
	.menuBox .content .item{width: 48%;margin: 1%;}
	.menuBox .contentsBox{width: 98%;columns:1;column-gap:2%;margin: 0 1%;}
	/*.menuBox .contents .item .box{padding: 0;}*/
}