@charset "utf-8";

* {
	margin: 0;
	padding: 0
}

a {
	text-decoration: none;
	color: #666;
	font-size: 14px;
	cursor: pointer;
	font-family: "arial","microsoft yahei"
}

html {
	width: 100%;
	height: 100%;
}

body {
	color: #535353;
	background: #323436;
	font-size: 14px;
	font-family: "arial","microsoft yahei";
	width: 100%;
	height: 100%;
	margin:0 auto;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative
}

#body.push , #body.pull {
	overflow-y: hidden;
}

em button {
	cursor: pointer;
	border: none;
	font-size: 12px;
	background: #009688;
	color: #fff;
	padding: 2px 10px;
	border-radius: 2px;
	cursor: pointer;
}


a,body {
	font-family: "microsoft yahei"/9;
}

img {
	border: 0
}

ol,ul,li {
	list-style: none
}

dl,dt,dd,ul,li {
	margin: 0;
	padding: 0
}

input,textarea {
	outline: none
}

i {
	font-style: normal
}

.fl {
	float: left
}

.fr {
	float: right
}

.clear {
	clear: both
}

.wrap {
	position: relative;
	padding: 0px 10px;
	margin: 0 auto
}

.face {width:128px;height:128px;margin:10px;border-radius:10px;box-shadow: 0 0 2px #fff;}


.pd5 {
	padding: 5px
}

.pd10 {
	padding: 10px
}

.pd20 {
	padding: 20px
}

.video {
	height: 280px;
	width: 100%;
	background: #000000;
}

.logo_face {
	width: 36px;
	height: 36px;
	border-radius: 100%;
}

.newmsg {
	position: absolute;
	font-size: 14px;
	text-align: center;
	background: #FFD700;
	color: #008000;
	border-radius: 2px;
	top: 18px;
	margin-top: -10px;
	right: 40px;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	animation: msga 1s infinite
}

@keyframes msga {
	0% {
		opacity: 0.5;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0.5;
	}
}

#header {
	background: #64c400;
	height: 60px;
	overflow: hidden;
	position: relative;
	z-index: 9999;
	width: 100%;
	box-shadow: -2px 0px 2px rgba(0,0,0,0.8);
}

#header .wrap,#bar .wrap {
	position: relative;
	overflow: hidden
}

.logo {
	position: relative;
	width: 137px;
	height: 42px;
	margin: 9px auto
}

.logo a {
	display: block
}

.logo img {
	display: block;
	width: 137px;
	height: 42px;
}

#header .menu_open {
	position: absolute;
	cursor: pointer;
	left: 20px;
	top: 16px;
	
}

#header .menu_open i{
	font-size:28px;
	color:#fff;
}

hr {
	margin: 20px;
	border: none;
	border-top: 1px solid #ccc;
}

#header .user_open {
	position: absolute;
	cursor: pointer;
	top: 12px;
	right: 20px;
}

#header .user_open i{
	display:inline-block;
	font-size:28px;
	color:#fff;
	margin-top:5px;
}

#header .tool {
	position: absolute;
	top:10px;
	right:80px;
	display:none;
}

#header .tool a {
	display: inline-block;
	color:hsla(0,0%,100%,.8);
	height:30px;
	width:30px;
	text-align: center;
	font-size: 12px;
	margin-right:15px;
}

#header .tool a i{
	display: block;
	font-size:24px;
}


.bottom {position:fixed;bottom:0;z-index:99999;width:100%;background: #fff;box-shadow: 0 0 5px 0 rgb(64 60 67 / 16%);}
.bottom ul{padding:10px;font-size:0;}
.bottom ul li{display: inline-block;color:#009688;text-align:center;font-size:14px;width:20%;}
.bottom ul li i.icon{display: block;color:#009688;font-size:20px;}


.qrcode {
	position: fixed; 
	left:0; top:0; 
	background: rgba(0,0,0,0.8); 
	width: 100%; 
	height:100%;
	z-index: 99999;
	text-align: center;
}

.qrcode img{
	box-shadow: -2px 0px 20px #000;
	margin-top:250px;
}

#menu {
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	width: 0px;
	overflow-x: hidden;
	overflow-y: auto;
	background: #323436;
	visibility: hidden;
	transition-delay: 0.3s
}

#menu.push {
	z-index: 1;
	visibility: visible;
	transition-delay: 0s
}

.return {
	position: fixed;
	right:10px;
	bottom:50px;
	z-index: 99999;
	display: none;
}

.return li {
	width: 50px;
	padding:8px 0px;
	margin-bottom: 1px;
	text-align: center;
	cursor: pointer;
	font-size: 11px;
	background: #323436;
	color: #fff;
	border-radius: 2px;
	opacity: .8;
}
.return i {
	display: block;
	width: 50px;
	height:22px;
	font-size:20px;
}


#container {
	position: relative;
	top: 0;
	left: 0px;
	width: 100%;
	height:auto;
	min-height: 100vh;
	background: #f0f1f1;
	box-shadow: -2px 0px 2px rgba(0,0,0,0.8);
}
#shade {
    position: absolute;
	display:none;
    width: 100%;
    height: 100%;
	z-index:9999;
    background: rgba(0,0,0,0.5);
}
#shade.pull {display:block;}


#content {
	position: relative;
	background: #ffffff;
	min-height: 100vh;
	padding-bottom: 10px;
    word-break: break-all;
    word-wrap: break-word;
}

#content h1 {
	font-size: 16px;
	padding-left: 5px;
	color: #666;
	margin: 5px;
	max-height:50px;
	line-height:25px;
	overflow: hidden;
}

#content .text {
	padding: 10px;
	font-size: 20px;
	line-height: 2;
	background: #faeed7;
	color:#333;
	word-break:break-all;  
	word-wrap:break-word; 
}

#content .images img {
	min-width: 320px;
	min-height: 220px;
	max-width: 96%;
	margin: 5px 0px;
}

#content .more {
	padding:15px 10px;
}

#content .more a{
	display: inline-block;
	height:30px;
	color:#1E9FFF;
	font-size:14px;
	line-height: 25px;
}

#content .more i{
	margin:10px;
}

.list_box {text-align: justify;height:auto;font-size:0;padding-top:5px;border-radius: 10px;}
.list_box:after {content: "";display:inline-block;width:100%;}
.list_box h1 {position: relative;text-transform: capitalize;color:#bcba01;font-size:24px;margin:10px;padding-bottom:10px;}
.list_box h1 .icon{font-size:30px;}
.list_box h2,.box h2 {position: relative;color:#64C400;border-bottom:1px solid #eee;text-transform: capitalize;font-size:16px;margin:10px;padding-bottom:10px;}
.list_box h2 i {position:absolute;right:5px;top:5px;}
.list_box ul {position: relative;display: inline-block;width:50%;vertical-align: top;overflow: hidden;margin-bottom:20px;}
.list_box li {position: relative;margin:0px 5px 5px 5px;}
.list_box li.view {height:20px;color:#D1D1D1;font-size:12px;line-height:20px;}
.list_box li.view u{margin-right:20px;vertical-align: middle;font-style: normal;	text-decoration: none;}
.list_box li.view i{vertical-align: middle;font-style: normal;	text-decoration: none;}
.list_box li.view span{position:absolute;right:0px}
.list_box li.view span.del{cursor: pointer;}
.list_box li.view .icon-eye {font-size:20px;}
.list_box li.title {font-size:15px;text-align: left;line-height:1.3;max-height:40px;overflow: hidden;}
.list_box li.title:hover {color:#ff5b82;transition: all 0.5s;}
.list_box li.iframe {height:0;padding-bottom: 66%;}
.list_box li.iframe iframe{position: absolute;width:100%;height:100%;}
.list_box li.image {height:0;padding-bottom: 56%;}
.list_box li.image img{position: absolute;width:100%;height:100%;}
.list_box li.image span.note{position:absolute;background: rgba(0,0,0,.54);color:#fff;font-size:12px;border-radius: 2px;padding: 2px 5px;right:5px;bottom:5px}
.list_box li.image span.time{position:absolute;color:#fff;font-size:12px;border-radius: 2px;padding: 2px 5px;left:5px;bottom:5px}
.list_box li.image:hover::before {content:"";	position:absolute;	top:0;	right:0;	bottom:0;	left:0;	z-index:2;	background:rgba(0,0,0,.4) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAANlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAABHcEwAAAAAAAA5OTkAAAB/f3/19fXOzs6ysrLk5OT///8P0uRtAAAAEXRSTlOAEgE0SXhnAB5VkECq9dfF52B47JgAAAE+SURBVEjHpZbhkoMgDITXEGiitcr7v+wpc9eRQihy+0/bb2JISBaPT5E41uABH5SdUPEHfDzLEpApLNJERD0Kec1DXRFhGGKpIuQCTAVHJTIxmuLpE5kUX6QTXRH6TpzMFekh3kxCiNElpjfi0Cn3h0joRYL8IoxucUJIfD8CSVH0BgE9kVtB4OVAluL1a24wy4GUxxXj1jg0gqCCxPVpHwBcFYlxtyAHNpAYjZQYaiJxraakCDZSTynAt5AjpeLrqmWMmV49Fc6RHR1xrsD6nAugmX7c5kr6jUOuV0YbpdytUloNs9oNY7Tl1mhLqja/fWPC2BUbuMgD4+JWGH8stGOO0Z3RRykK3RmwNDzGR5bFwErqY/LFR9SzXv+/xEesQjIkRh94w5AkX2XYHtspEdXNFVHLj53fl1m48vcfDEsZ4mf/bygAAAAASUVORK5CYII=) no-repeat 50% 50%}


.actor {text-align: justify;height:auto;font-size:0;padding-top:5px;border-radius: 10px;}
.actor ul {display: inline-block;width:33.3%;vertical-align: top;overflow: hidden;margin-bottom:20px;}
.actor li {position: relative;margin:0px 5px 5px 5px;}
.actor li.title {font-size:16px;margin:10px 5px;text-align:center;}
.actor li.view {font-size:12px;color:#ccc;text-align:center;}
.actor li.image {height:0;padding-bottom: 130%;overflow: hidden;}
.actor li.image img{position: absolute;width:100%;height:100%;transition: transform 0.5s ease 0s;}
.actor li.image img:hover{transform: scale(1.2);}
.actor span.rank {position: absolute;
    background: rgba(0,0,0,.54);
    text-align: center;
    color: #fff;
    font-size: 24px;
    line-height: 24px;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    padding: 5px;
    right: 5px;
    bottom: 5px;}
	
.actor span.s {
    font-size: 14px;}
	
.list_info {
	height:auto;
	margin-left: 155px;
	padding-top: 5px
}

.list_info h4 {
	font-size: 14px;
	font-weight: 500;
	max-height: 40px;
	min-height: 30px;
	line-height: 20px;
	margin-bottom: 2px;
	color: #646464;
	display: block;
	overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
}

.list_info h5 {
	height: 20px;
	line-height: 18px;
	font-weight: 500;
	font-size: 12px;
	color: #a2a2a2
}

.list_info h5 span a{
	font-size: 12px;
	color: #5FB878;
}

.list_info h5 em {
	font-style: normal;
	margin-left: 8px
}

.reply .list_info h5 {
	padding-top:5px;
}

.list_info_i {
	margin: 10px 0px;
	height: 20px;
	overflow: hidden
}

.list_info_i span {
	display: inline-block;
	line-height: 20px;
	font-size: 10px;
	color: #a7a7a7;
	margin-right: 5px;
}

.list_info_i span a {
	font-size: 12px;
	color: #0088cc;
}

.list_info_i span.right {
	float: right;
	margin-right: 0px;
}

.list_info_i i {
	color:#ccc;
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
}

.layer {
	position:absolute;
	z-index:99999;
	left:0;
	top:0;
	background: rgba(0, 0, 0, 0.8);
	display:none;
	padding:10px 0px;
	border-radius: 5px;
	min-width: 85px;
	box-shadow: 0px 0px 6px rgba(0,0,0,0.8);
}

.layer.show {
	display:block;
}

.layer li.yellow{
	color:#ff0;
}

.layer li {
	color:#fff;
	padding:10px 20px;;
	cursor: pointer;
}

#bar {
	position: relative;
	height: 46px;
	background: #323436;
	box-shadow: -2px 0px 2px rgba(0,0,0,0.8);
}

#bar form{
	margin-top:5px;
}

#bar span.right ,.location span.right{
	position: absolute;
	top: 15px;
	right: 10px;
	color:#1E9FFF;
}

#bar span.right a ,.location span.right a {
	font-size: 12px;
	padding: 8px 10px;
	background: rgba(255,255,255,0.2);
	border-radius: 2px;
	color: #fff;
	text-shadow:none;
	margin-left:10px;
}

#bar span.right a.yellow ,.location span.right a.yellow{
	background: #1E9FFF;
}

.location span.right a {
	background: #009688;
}


#sort {
	position: relative;
	height: 46px;
	background: #444446;
	box-shadow: -2px 0px 2px rgba(0,0,0,0.8);
}

#sort td a{
	color: #dfdfdf;
}

#sort td {
	height: 46px;
	text-align: center
}

.sort_b {
	height: 46px;
	line-height: 46px;
	width: 100%
}

.sort_b i {
	width: 0px;
	height: 16px;
	display: block;
	float: left;
	margin-top: 17px;
	margin-right: 5px;
}

.wrap a {
	color: #535353;
	display: block;
	height: 100%;
}

.sort_b span {
	height: 46px;
	display: block;
	float: left;
	margin-right:10px;
	overflow: hidden
}

.sort_cate a {
	padding-right: 5px
}

.sort_tag .sort_b span {
	max-width: 56px
}

.sort_b a {
	display: block;
	height: 46px;
	width: 100%
}

.sort_b.ton {
	background: #343435;
	box-shadow: 0px 2px 6px #1f1f1f inset
}

.sort_b .sort_b_inner {
	height: 46px;
	display: inline-block
}

.pages {
	text-align: center;
	margin-bottom:20px;
}

.pages a {
	display: inline-block;
	height: 38px;
	line-height: 38px;
	padding: 0 18px;
	color: #fff;
	white-space: nowrap;
	text-align: center;
	font-size: 14px;
	border: none;
	border-radius: 2px;
	background: #009688;
	margin: 1px;
}
.pages .active{
	background: #FFB800;
}

.pages .disabled{
	border: 1px solid #e6e6e6;
	background: #FBFBFB;
	color: #C9C9C9;
	cursor: not-allowed;
	opacity: 1;
	height: 36px;
	line-height: 36px;
}

#container.push {
	z-index: 2;
	transform: translateX(250px);
	box-shadow: -3px 0px 6px rgba(0,0,0,0.8)
}

#container.pull {
	transform: translate3d(-250px,0px,0px);
	box-shadow: 3px -3px 6px rgba(0,0,0,0.8)
}

#menu {
	width: 250px;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0
}

#menu ul li {
	display: inline-block;
	width: 100%;
	height: 45px;
	line-height: 45px;
	border-bottom: 1px solid #44474a;
	overflow: hidden;
	background: #323436;
	transition: background 0.3s ease-out
}

#menu ul li.sl {
	width: 49%;
}

#menu ul li a {
	display: block;
	padding-left:20px;
	width: 100%;
	line-height: 45px;
	color: #fff;
	overflow: hidden;
	border-left: 1px solid #1d1d1d
}

#menu ul li a i{
	margin-right:5px;
	color:#ADAEAF;
}

#menu ul .menu_cur a {
	border-left: 5px solid #64c400;
	padding-left:16px;
}

#menu ul li a span {
}

#menu ul li:hover,#menu ul .menu_cur {
	background: #1d1d1d
}

#user {
	width: 250px;
	height: 100%;
	position: fixed;
	top: 0px;
	right: 0px;
	overflow: hidden;
	overflow-y: auto;
	background: #323436;
	transition-delay: 0.3s;
}

.font {display:none;position: fixed;background:rgba(0,0,0,0.2);width:300px;padding:30px 0px;    box-shadow: 0 0 5px 0 rgb(64 60 67 / 16%);;text-align: center;;left:50%;top:50%;transform:translate(-50%,-50%)}
.font button {width:100px;height:40px;margin:10px;}
.font.show {display:block;}

#header,#bar,#container,#sort {
	transition: all 0.3s cubic-bezier(0.165,0.84,0.44,1)
}


.search {
	position: absolute;
	top: 8px;
	right: 10px;
}

.search input {
	width: 150px;
	height: 15px;
	line-height: 16px;
	margin-top: 3px;
	border: none;
	color: #6c6c6c;
	padding: 5px 15px;
	background: #fff;
	border-radius: 5px;
}

.search button {
	width: 30px;
	height: 31px;
	position: absolute;
	right: 0;
	top: 2px;
	border-radius: 0px 5px 5px 0px;
	color: #fff;
	border: none;
	background: url('icon.png') no-repeat -40px -72px;
	background-size: auto;
	background-size: 700px 700px;
	cursor: pointer;
}

.search_wrap {
	overflow: hidden;
	position: relative;
	height: 60px;
	width: 100%;
	background: #2a2c2e
}

.search_input {
	text-indent: 10px;
	height: 15px;
	line-height: 16px;
	display: block;
	margin: 12px 12px;
	width: 200px;
	border: none;
	color: #6c6c6c;
	padding: 10px 10px;
	background: #fff;
	border-radius: 17px
}

.reset_input {
	width: 20px;
	height: 35px;
	position: absolute;
	display: block;
	top: 17px;
	right: 28px;
}
.reset_input i{
	
	font-size:20px;
}

.reset_input.ton {
	opacity: 1
}

.main_content {
	width: 100%;
	min-height: 100%;
	background: #f0f1f1;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	overflow-x: hidden;
	overflow-y: auto;
	padding-bottom: 20px;
	transform: translate3d(0px,100%,0px);
	transition: transform 0.3s cubic-bezier(0.55,0.055,0.675,0.19);
	
}

.main_content.show {
	z-index: 99999;
	transform: translate3d(0px,0%,0px);
	transition: transform 0.3s cubic-bezier(0.165,0.840,0.440,1.000)
}

.asort {
	display: none
}

.asort.show {
	display: block
}

.hd {
	height: 50px;
	background: #323436
}

.hd .fl {
	height: 50px
}

.sort_tag .hd .fl i {
	background-position: 1.5px -34px
}

.sort_color .hd .fl i {
	background-position: 1.5px -94.5px
}

.hd .fl span {
	height: 50px;
	line-height: 50px;
	color: #fff;
	font-size:16px;
	display: block;
	float: left;
	padding-left: 16px
}

.hd .fr {
	cursor: pointer;
	width: 33px;
	height: 32px;
	margin-top: 10px;
	position: relative;
	text-align: center;
	vertical-align: middle;
	transition: all 0.3s ease-out
}

.hd .fr i{
	font-size:24px;
	color:#fff;
}

.hd .fr.ton {
	background: #6bc30d
}

.ct {
	height: calc(100vh - 60px);
	overflow-x: hidden;
	overflow-y: auto
}

.ct ul {
	margin-top: 10px;
	display: block;
	border-top: 1px solid #e5e5e5
}

.ct li {
	display: block;
	height: 50px;
	border-bottom: 1px solid #e5e5e5;
	background: #fff
}

.ct li i {
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	margin-top: 17px
}

.ct li span {
	display: inline-block;
	height: 16px;
	vertical-align: middle;
	margin-top: 8px;
	font-size: 16px
}

.ct li .s {
	margin-right: 12px;
	margin-left: 15px
}

.ct h4 {
	display: block;
	height: 40px;
	overflow: hidden;
	font-weight: 500
}

.ct h4 i {
	display: inline-block;
	height: 16px;
	width: 16px;
	vertical-align: middle;
	margin-left: 14px;
	margin-right: 10px;
	margin-top: 17px
}

.ct .cate_trade i {
	background-position: -16px 0
}

.ct .cate_tag i {
	background-position: -16px -16px
}

.ct .cate_color i {
	background-position: -16px -32px
}

.ct h4 span {
	display: inline-block;
	height: 16px;
	line-height: 16px;
	vertical-align: middle;
	margin-top: 17px
}

.ct li i.e {
	background: #ffffff;
	width: 10px;
	height: 10px;
	border: 3px solid #d1d1d1;
	float: right;
	margin-right: 25px;
	border-radius: 50%
}

.ct li.a_selected .e {
	border: 3px solid #6bc30d
}

.ct .wrap {
	position: relative
}

.login_input {
	height: 40px;
	line-height: 40px;
	display: block;
	padding: 0px 40px 0 10px;
	position: relative;
	border-radius: 0px;
	background: none;
	border-bottom: 1px solid #f7f7f7;
}

.login_input i{
	position: absolute;
	right: 10px;top:10px;
	color:#ADAEAF;
	font-size:20px;
}

.login_box input {
	border: none;
	display: block;
	height: 100%;
	width: 100%
}

.button {
	height: 40px;
	display: block;
	line-height: 40px;
	background: #70CA10;
	color: #fff;
	text-align: center;
	border: none;
	width: 100%;
	border-radius: 3px;
	position: relative;
	cursor: pointer;
}

a.button {
	color: #fff;
}

.list_loading {
	height: 16px;
	padding: 20px 0 30px;
	text-align: center
}

.list_loading i {
	height: 16px;
	width: 16px;
	display: inline-block;
	background: url('icon.png') no-repeat -288px -16px;
	background-size: 500px 500px;
	margin-right: 10px;
	vertical-align: middle;
	animation: loading 1s infinite linear
}

.list_loading span {
	height: 16px;
	display: inline-block;
	line-height: 16px;
	vertical-align: middle;
	color: #A0A0A0
}

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

	100% {
		transform: rotate(360deg)
	}
}

.login_box input {
	background: none
}

.login_box {
	margin-bottom: 10px;
	background: #fff
}


#works {
	display:block;
	color: #696969;
	background: #fff;
	position: relative;
	margin-bottom: 5px;
	border-bottom: 1px solid #e5e5e5;
	vertical-align: top;
}

#works .list_info_i{
	padding:3px 10px ;
}

.works {
	text-align: center
}

.works a {
	display: block;
	width: 100%;
	text-align: center
}

#comment {
	background: #fff;
	padding:10px;
}

#comment h4 {
	position: relative;
	margin-top:20px;
	padding: 20px 10px 20px 0px;
	border-top: 1px solid #eee;
	font-size: 16px;
}


@keyframes animaLike {
	0% {
		opacity: .3;
		transform: scale(.5)
	}

	50% {
		opacity: 1;
		transform: scale(1)
	}

	100% {
		opacity: .3;
		transform: scale(.5)
	}
}

@keyframes bouncedelay {
	0%,80%,100% {
		transform: scale(0.0);
		background: #e5e5e5
	}

	40% {
		transform: scale(1.0);
		background: #6bc30d
	}
}

.us_panel_menu {
	width: 85px;
	position: relative
}


.tips {
	margin: 10px;
	padding: 15px;
	line-height: 22px;
	border-left: 5px solid #1D72F3;
	border-radius: 0 2px 2px 0;
	background: #fff;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
	border-radius: 3px;
	color: #878787;
}

.tips_s {
	font-size:12px;
	text-align: right;
	padding:5px;
}

.msg_tips {
	position:absolute;
	pointer-events:none;
	left:50%;
	top:50%;
	margin-left:-124px;
	z-index: 19891045;
	text-align: center;
	background: #333;
	box-shadow: 0 10px 30px 0 rgba(68,74,102,.5)!important;
	text-align:center;
	color: #fff;
	border-radius: 5px;
	padding: 12px 24px;
	text-align: center;
	line-height: 24px;
	font-size: 14px;
	min-width: 200px;
	transition: all .1s ease-in;
}

.msg_tips{animation: 3s opacity 0s infinite; animation-iteration-count:1;animation-fill-mode: forwards;}

@keyframes opacity{
	0%{opacity:0;transform: translateY(0);}
	50%{opacity:1;transform: translateY(-30px);}
	75%{opacity:1;transform: translateY(-30px);}
	100%{opacity:0;transform: translateY(-60px);}
}

#add_newpost {
	z-index: 9999;
	background: #fff;
	margin-bottom:20px;
}

#add_newpost td {
	background: #FFB800;
	text-align: center;
	color: #fff;
	height: 40px;
	border:1px solid #fff;
	border-radius: 5px;
}

#post_loading ,#user_loading {display:none;position:absolute;width:100%;height:213px;padding-top:10px;background:rgba(150,150,150,0.2);text-align:center}
#user_loading {height:100vh;padding-top:40%}
#user_loading.pull {display:block;}

.loader {
  margin: 6em auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.newpost_t {
	padding:10px;
	border: 1px solid #e6e6e6;
	margin-bottom:10px;
}

.newpost_t textarea {
	width: 100%;
	height: 50px;
	font-size: 14px;
	border:none;
	color: #333;
	line-height: 1.5em;
	font-family: "arial","microsoft yahei";
}

.replyn {
	display: inline-block;
	color: #0099FF;
	font-size: 12px;
	cursor: pointer;
}

.post_code {margin-top:10px;text-align:center;display:none}
.post_code input {vertical-align:middle;padding:5px;border:1px solid #ccc;width:120px;height:25px;}
.post_code img {vertical-align:middle;cursor:pointer;border-radius:3px;}


.menu_back ,#add_newpost td {
	cursor: pointer;
}

#add_newpost .add_newpost_post {
	background: #6bc30d;
}

#add_newpost .add_newpost_cancel {
	background: #009688;
}

#add_newpost .add_newpost_file {
	position: relative;
	width:40px;
	border-radius: 100%;
	font-size:30px;
	overflow: hidden;
}

#add_newpost .add_newpost_more {
	width:50px;
}

#add_newpost .add_newpost_file input {
    position: absolute;
	width:100%;
	height:100%;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
}

#loading li{
	font-size:12px;
	margin-bottom:10px;
}

#loading span , #loading span i{
	color:#fff;
	display: block;
	background: #eee;
	border:1px solid #ccc;
	height:10px;
	border-radius: 8px;
}
#loading span i{
	border:1px solid #fff;
	background: #1E9FFF;
	height:8px;
	width:0%;
}

.b300,.b3001 {
	text-align: center;
	padding: 5px;
	min-height:100px;
}


.h100 {
	display: inline-block;
	height: 100px;
	overflow: hidden;
	text-align: center;
	margin: 5px;
	position: relative;
}
.h100 img{
	width:300px;
	height:100px;
}
.h100 span , li.iframe span{
    position: absolute;
    background: rgba(0,0,0,.54);
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
    padding: 2px 5px;
    right: 5px;
    bottom: 5px;
	z-index:99999;
}
.loading {
	background: #CCCCCC;
	position: absolute;
	width: 100%;
	height: 3px;
	z-index: 9999;
	top: 0px;
	display: none;
}

.loading div {
	background: #0099FF;
	position: relative;
	width: 100%;
	height: 3px;
	z-index: 9999;
	top: 0px;
	animation: lmove 5s 1;
}

@keyframes lmove {
	from {
		width: 0px;
	}

	to {
		width: 100%;
	}
}

.nopage {
	padding: 20px;
	font-size: 14px;
	font-weight: bold;
	color: #333;
	text-align: center;
	background: #fff;
}

.nopage h2 {
	font-size: 72px;
	color: #64c400;
}

.tabs,.sort {
	text-align: justify;
	padding: 10px;
}

.tabs a ,.sort a {
	color: #666;
	font-size: 14px;
	display: inline-block;
	margin: 10px 5px;
	padding: 5px;
	text-align: center;
}

.sort a {
	font-size: 14px;
	margin: 5px;
	width: 60px;
}

.sort b {
	display: inline-block;
	width: 100%;
	padding-left: 10px;
	margin-bottom: 10px;
	text-align: center;
}

.sort p {
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

span.del {
    color: #ff0000;
    font-size: 12px;
    position: absolute;
    display: block;
    top: 0px;
    right: 20px;
}

.topic_face {
	width: 48px;
	height: 65px;
}

.topic_face  img {
	width: 48px;
	height: 48px;
	margin-top: 3px;
	border-radius: 5px;
}

.topic {
	margin-top: 10px;
}

.topic .list_info {
	margin-left: 60px;
	padding-top: 0px;
}

.topic li {
	height: 65px;
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
	padding-right:10px;
	position: relative;
}


.topic .list_info span {
	margin-left: 0px;
}

.list_info em {
	margin-left: 0px;
	float: right;
}

.topic h3 {
	font-size: 14px;
	padding: 10px 10px;
	margin: 10px 0px;
	background: #eee;
	color: #666
}

.topic h4 i {
	color: #FFFFFF;
	background: #999900;
	font-style: normal;
	font-size: 12px;
	padding: 3px;
	border-radius: 2px;
}

.topic .list_info span {
	color: #a2a2a2;
}
.topic .msg {
	height:80px;
	text-align: center;;
}
.topic .msg a{
	display: inline-block;
	font-size: 12px;
	padding: 10px 20px;
	background: #FFB800;
	border-radius: 2px;
	color: #fff;
	margin-top:10px;
}


.reply {
	margin-top: 10px;
}

.reply li {
	margin-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.reply .list_info {
	margin-left: 60px;
	padding-top: 0px;
	padding-bottom: 10px;
	padding-right: 10px;
	height: auto;
	min-height: 50px;
}

.reply h1 {
	font-size: 14px;
}

.reply .content {
	font-size: 15px;
	line-height: 1.5em;
	white-space: pre-wrap;
	word-wrap: break-word;
	margin-top:5px;
}

.reply .content span img {
	margin-bottom:20px;
}

.forum .list_info h4 {
	height: 25px;
	font-size: 14px;
	padding-top: 5px;
}

.replyid {
	margin-left: 3px;
	color: #999;
	cursor: pointer;
}

.content a {
	color: #0099FF;
}

.content pre.code{
	font-size: 12px;
	margin:15px 0px;
	padding: 10px;
	line-height: 22px;
	border-left: 5px solid #009688;
	border-radius: 0 2px 2px 0;
	background: #f2f2f2;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.content img,.content video {
	max-width: 100%;
	vertical-align: middle;
}

.content img.lazy {
	margin-bottom:10px;
}



.location {
	font-size: 14px;
	position: relative;
	background: #f5f5f5;
	padding: 15px 10px;
	border-bottom: 1px solid #eee;
	text-shadow: 0 1px 0 #fff;
}

.location a {
	font-size: 14px;
	color: #535353
}

.location i {
	margin:0px 5px;
}

.footer {
	width: 100%;
}

.footer	div {
	padding: 30px 10px;
	padding-bottom: 60px;
	background: #EAEAEA;
	box-shadow: inset 0 2px 3px rgba(0,0,0,.05);

}

.footer p,.footer a {
	text-align: center;
	font-size: 12px;
	text-shadow: 0 1px 0 #fff;
	padding: 5px 0px;
	color: #888;
}


.logs , .share {font-size:0px;padding:10px 0px;background: #F5F5F5;}
.logs li,.share li {display:inline-block;width:16.6%;cursor: pointer;text-align:center;vertical-align: top;}
.logs li i{font-size:24px;color:#009688}
.logs li span{display:block;padding:5px;font-size:12px;vertical-align: middle;}
.logs li span i{font-size:12px;}
.logs .download {display:none;}

.share {display:none;margin:10px 0px;text-align:center}
.share h2 {font-size:16px;margin-bottom:10px;}
.share li {width:45px;}
.share li i{font-size:28px;color:#70CA10}


@media (min-width:850px) {
	
	#header .tool {
		display:block;
	}

	#container {
		left: 250px;
		width: calc(100% - 250px);
	}

	#menu {
		visibility: visible;
	}

	#header .menu_open {
		visibility: hidden;
	}


	.logo {
		margin-left: 0px;
	}

	#comment {
		margin-bottom: 100px;
	}

	.list_info_i span {
		margin-right: 10px;
	}

	.r_menu {
		display:none;
	}
	
	#content .text {
		font-size: 16px;
	}
	
	
	.h100 {
		display: inline-block;
	}
}


@media (min-width:1500px) {
	body {
		width: 1400px;
	}

	#menu {
		left: calc(50vw - 700px);
	}

	#user {
		right: calc(50vw - 700px);
	}
}

@media (min-width:768px) {
.list_box ul {width:33%;}
.video {height: 500px;}
.logs li span{display:inline-block;}

}


@media (min-width:1281px) {
.list_box ul {width:25%;}
.actor ul {width:16.6%;}
.video {height: 550px;}
.logs li span{display:inline-block;}
}

@media (max-width:1210px) {
.b300 {min-height:220px;}
}

@media (max-width:1000px) {
.b300 {min-height:330px;}
}

@media (max-width:630px) {
.b300 {min-height:330px;}
}

.a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}