body{color: #666;width:100%;background: #f5f5f5;font-size: 14px;font-family: Arial,sans-serif;}
body,ul,li,u,i,h1,h2,h3,tr,td,form,p,hr,em {margin:0px;padding:0px;list-style-type: none;font-style: normal;text-decoration: none;}
a {color: #666;text-decoration: none;}
a:hover {color: #ff6600}
*:focus {outline: none;}
textarea,input,select{padding:10px;border:1px solid #ccc;width:100%;box-sizing:border-box;margin-bottom:10px;border-radius: 4px;vertical-align:middle}
.blue {color:#1e9fff;}
.red {color:#ff6600;}
.blue:hover {color:#ff6600}
.red:hover {color:#1e9fff}

.container {margin:0 auto;position: relative;}
.box_width,.user_width {margin:0 auto;width:100%;position: relative;}

.box textarea {height: 100px;}
.bar {position: relative;box-shadow: 0 0 5px 0 rgba(64,60,67,.16);background: #fff;}
.bar .logo {display:block;text-align:center;padding:10px 0px 0px 0px}
.bar .logo img {height:60px;width:200px;}
.bar .home {position: absolute;width:130px;right:15px;top:18px;}
.bar .face {width: 36px;height: 36px;border-radius: 100%;box-shadow: 0 0 3px #fff; }
.bar .name {color:#e9aa1e}

.bar .menu {position: absolute;top:20px;left:15px;width:260px;height:30px;}
.bar .menu i{font-size:30px;color:#666}

.bar .hot {display:inline-block;padding:0px 10px;text-align:center;vertical-align: middle;}
.bar .hot i{display:block;font-size:20px;}
.bar .hot a{display:inline-block;font-size:14px;margin:0px 8px;}

em {color: #ff6600;font-weight: bold;}

.banner {position: relative;text-align: justify;}
.banner:after {content: "";display:inline-block;width:100%;}

.search {display:block;position: relative;font-size:0;vertical-align: top;margin:10px 15px;}
.search .key {height:45px;padding-left:40px;width:100%;border-radius: 4px 0px 0px 4px ;}
.search .but {position: absolute;height:45px;width:60px;right:0px;padding:14px;border-radius: 0px 4px 4px 0px ;}
.search i {position: absolute;cursor: pointer;font-size:20px;margin:12px 0px 0px 10px;}

.dropdown {}
.dropdown h2 {text-align:right;}
.dropdown-content {display: none;position: absolute;right:0px;padding:10px 0px;z-index:99999;background: #fff;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
.dropdown-content a {color: f7d0bf;font-size:16px;display:inline-block;padding:15px 10px;}
.dropdown-content a:hover {background: #f5f5f5}
.dropdown-content a i.icon {display:inline-block;width:24px;font-size:20px;color:#009688;text-align:center;}
.dropdown:hover .dropdown-content {display: block;}

.top {position: fixed;right: 10px;bottom: 80px;z-index: 99999;display: none;}
.top li {width: 50px; padding: 8px 0px; margin-bottom: 1px; text-align: center; cursor: pointer;font-size: 12px;background: #323436;color: #fff; border-radius: 2px;opacity: .8;}
.top li i {display: block;width: 50px;height: 22px;font-size: 20px;}

.bottom {position:fixed;bottom:0;z-index:999;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;text-align:center;font-size:14px;width:20%;}
.bottom ul li i.icon{display: block;font-size:20px;}


#class {display: none;}

h1 {font-size:24px;text-align:center;color:#1E9FFF;margin:20px 0px;}
h2 span{position:absolute;color:#666;font-size:14px;font-weight: normal;right:10px;}

.list_box {text-align: justify;margin:10px auto;background: #fff;padding:5px;font-size:0;}
.list_box:after {content: "";display:inline-block;width:100%;}
.list_box h1 {position: relative;text-transform: capitalize;font-size:24px;margin:10px 10px 0px 10px;padding-bottom:10px;}
.list_box h2,.box h2 {position: relative;text-transform: capitalize;color:#1E9FFF;font-size:20px;padding:10px;border-bottom:1px solid #eee}
.list_box h3 {font-size: 20px; margin-top:50px;line-height: 1.3;}
.list_box ul {display: inline-block;width:50%;vertical-align: top;overflow: hidden;}
.list_box li {position: relative;margin:10px 5px;}
.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.image {height:0;padding-bottom: 138%;overflow: hidden;}
.list_box li.image img{position: absolute;width:100%;height:100%;border-radius: 3px;transition:transform 0.5s ease 0s;}
.list_box li.image span{position:absolute;background: rgba(0,0,0,.54);color:#fff;font-size:12px;border-radius: 2px;padding: 2px 5px;right:5px;bottom:10px}
.list_box li.image img:hover{transform: scale(1.2);}
.list_box ul.t2 {width:50%;}

.word {position: relative;text-align: justify;padding:0px;}
.word:after {content: "";display:inline-block;width:100%;}
.word a{display:inline-block;text-transform: capitalize;padding:5px 10px;margin:5px 2px;border:1px solid #eee;background: #fff;border-radius:5px;}
.word a i{display: block;font-size:10px;text-align:center;margin-top:5px;padding-top:5px;color:#ccc;}
.word a i.icon {font-size:18px;color:#009688;margin:0px;}

.intro span {display: inline-block;font-size:12px;color:#999}
.intro span.icon img {width:24px;height:24px;vertical-align: middle;border-radius: 100%;}
.intro span.name{padding-left:10px;}
.intro span.time {float: right;margin-top:5px;}

.warning {position: fixed;width:100%;z-index:999;background-color: rgba(255,255,255,.9);}
.warning div {width:500px;padding:30px;margin:50% auto;margin-top:300px;background: #fff;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);border-radius: 5px;}
.warning div p{line-height:20px;}
.warning div h3 {font-size:24px;margin-bottom:10px;}

.warning button {display: block;width:100%;background-color:rgb(0, 143, 204);border:0px;color:#fff;margin:10px 0px;border-radius: 4px;padding:15px 20px;}

.player {width:100%;height:280px;background: #000;}

.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:#FFB400}

.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;}

#image {text-align: justify;padding-top:10px;font-size:0px;}
#image:after {content: "";display: inline-block;width: 100%;}
#image p {display: inline-block;width:100%;text-align:center;overflow: hidden;vertical-align: top;margin-bottom:10px;}
#image p img {width:100%;border:1px solid #fff}

	
#topic {position: relative;}

.b300 {
	text-align: center;
	padding: 5px;
	margin-bottom:10px;
}

.h100 {
	display: inline-block;
	height: 100px;
	overflow: hidden;
	text-align: center;
	margin: 5px;
	position: relative;
}
.h100 img{
	width:300px;
	height:100px;
}
.h100 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;
}

form .tips{display:none;border-left: 5px solid #1e9fff;padding:5px 10px;margin:10px 0px;color:#BB5E00}

.button {padding: 10px 30px; font-size:16px;position: relative;cursor: pointer;color: #fff;background: #1e9fff;border: none;border-radius: 4px;overflow: hidden;display: inline-block;}
.button input {position:absolute;left:0;top:0}

.box {position: relative;background: #fff;height:auto;margin:10px 0px;margin-bottom:20px;padding:10px;border-radius: 4px;}
.box .users {position: absolute;top:10px;right:10px;width:290px;text-align:center;display:none;}
.box .users div {margin-bottom:20px;}
.box .users .sign {border-radius: 10px;padding:10px 20px;height:200px;text-align:center;}
.box .users .sign img {width:80%;border-radius: 100%;}
.box .users .name {font-size:18px;font-weight: bold;margin:20px 0px 20px 0px;}
.box .users .promotion {background:#eee;border-radius: 10px;}
.box .users .promotion img {height:157px;}


.box .box {border-radius: 5px;margin:0px 0px 20px 0px;box-shadow: 0 0px 0px 0 rgba(68,74,102,.1)!important;}

.box .image {text-align: justify;margin:10px 0;overflow: hidden;}
.box .image:after {content: "";display: inline-block;width: 100%;}


.box .files p {}
.box .image img {display: inline-block;border-radius: 3px;max-width:100%;max-height:300px;cursor: pointer;}
.box img.i {margin-bottom:10px;}

.box .video {text-align:center;}
.box .video li{position: relative;background: #000;margin-bottom:20px;}
.box .video li img{max-height:350px;max-width:100%;}
.box .video p{margin-bottom:20px;}
.box .video p img{max-width:100%;max-height:100%;}
.box .video p.title {font-size:16px;}

.box .video li .play{position:absolute;cursor: pointer;left:50%;top:50%;bottom:30px;width:96px;margin-left:-48px;margin-top:-48px;opacity:0.3;}
.box .video li .play:hover{opacity:0.5;}


.box video.v {max-width:100%;}
.box video.v1 {max-width:100%;}
.box video.v2 {width:49.3%;}
.box video.v3 {width:32.2%;margin-bottom:3px;}
.box video.v {max-width:100%;}
.box .desc {width:100%;color:#333;padding:0px 10px 0px 10px;font-size:18px;line-height:1.5;font-family: Arial,sans-serif;white-space:pre-wrap;word-wrap:break-word;}
.box .user {font-size:14px;}
.box .user .name {color: #111;}
.box .user .date {}
.box .user .follow {cursor: pointer;position: absolute;top:0px;right:0px;}
.box .tool {user-select: none;}
.box .tool li {display: inline-block;cursor: pointer;color:#009688;padding:5px;margin:5px;opacity: 0.8;}
.box .tool li:hover {background: #f5f5f5;border-radius: 10px;}
.box .tool span {position: relative;display: inline-block;height:15px;}
li.reply,li.link {float:right}
.box .date {font-size:14px;}
.box .files span {color:#666}

.box_reply {position: relative;margin:0px 5px;border-bottom:none;}
.box_reply .box {box-shadow: none;margin:0px;border:none;border-bottom:1px solid #ddd;border-top:0px;border-radius: 0px;box-shadow: 0 0px 0px 0 rgba(68,74,102,.1)!important;}


#site {position: relative;color:#666;text-align:center;vertical-align: top;display: inline-block;height:270px;width:100%;padding:10px;padding-bottom:0px;}
#site p.name {font-size:24px;margin-top:20px;line-height:1.5;}
#site p.logo {background:#ccc;height:150px;width:150px;border-radius: 100%;margin:0 auto;display: flex;align-items: center}
#site p.logo img{width:100%;height:auto;border-radius: 100%;margin:0 auto;align-items: center;}

.picture {position: fixed; left:0; top:0; background: rgba(0,0,0,0.8); width: 100%; height:100%;z-index: 99999;	text-align: center;}
.picture img{box-shadow: -2px 0px 20px #000;border:5px solid #fff;max-width:90%;max-height:90%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.picture {animation: 0.5s picture1 0s infinite; animation-iteration-count:1;animation-fill-mode: forwards;}

@keyframes picture1{
	0%{opacity:0;}
	100%{opacity:1;}
}

.reply {position: relative;}
.quote {position: absolute;top: -45px;right: 0;width:60px;height:60px;z-index:99;color:#ccc}
.quote svg{fill: #00E3E3}

.user {position: relative;height:40px;color:#666;margin-bottom:10px;}
.user .face {position: absolute;}
.user .face img{width: 36px;height: 36px;border-radius: 100%;}
.user .intro {padding-left:40px;padding-top:5px;line-height:1.5}
.user .intro span{display: inline-block;}
.user .name {margin-right:10px;}
.user .date {color:#666}
.user .city {font-size:14px;margin-right:10px;}
.user .del {position: absolute;right:0px;top:10px;cursor: pointer;z-index:999}

.vote {border:1px solid #ddd;border-radius: 5px;padding:10px;}
.vote li {padding:10px 0;border-bottom:1px solid #eee;font-weight: bold;}
.vote input {width:20px;margin-bottom:7px;}
.vote .button {margin-top:10px;}
.vote li i {display:block;height:12px;background: #FFA042;color:#fff;font-size:10px;border-radius: 3px;margin-top:5px;text-align:right;}

#edit {cursor: pointer;user-select: none;}
.edit_user {width:100%;z-index:999;background: #fff;}
.edit_user .checkbox {width:18px;height:18px;}
.edit_user label{margin:10px 3px;}
.edit_user input {margin:10px 0px;}

.user_home {margin:20px 0px;text-align:center;position: relative;padding: 20px;background: #fff;border: 1px solid #eee;border-radius: 10px;}
.user_home .face {margin:0px auto;display: block;width: 256px;height: 256px;border-radius: 100%;}
.user_home .name {margin:10px;font-size:24px;color:#e9aa1e}
.user_home .intro {margin:10px;font-size:16px;color:#666}
.user_home span {display: inline-block;}
.user_home .division {margin:0px 10px}
.user_home .time {color:#333}
.user_home .fans span{margin:5px;padding:10px 15px;background:#f5f5f5;color:#333;border-radius: 10px;}
.user_home .fans span i{display: block;text-align:center;margin-top:5px;}
.user_home .follow {color:#e9aa1e;cursor: pointer;}

#form_post.hide {display:none;}

hr {display:block;border:none;border-top:1px solid #f5f5f5;margin:10px 0px;height:1px;}

#form_tool {text-align: justify;position: relative;}
#form_tool span{cursor: pointer;}



.upload {position: absolute; width: 100%; height: 100%; right: 0;top: 0;opacity: 0; filter: alpha(opacity=0);cursor: pointer;}
#form_post td {font-size:16px;cursor: pointer;border-radius: 5px;}
#form_post td:hover {background: #f5f5f5;}
#editor_file {position: relative;font-size: 0;}
#editor_file li {position: relative;display: inline-block;width:30%;height:120px;margin:5px;}
#editor_file li img {width:100%;height:120px;}
#editor_file li video {width:100%;height:120px;background:#000}
#editor_file li strong {background:#000;display: inline-block;font-size:100%;height:120px;width:100%;}
#editor_file li span {position: absolute;background-color: rgba(0,0,0,0.6);width: 100%;height: 100%;right: 0;top: 0;font-size: 18px;text-align:center;color:#fff;line-height:100px;text-shadow: 0 1px 0 #000;}
#editor_file li i,#editor_vote li i {position: absolute;top: 0;right: 0;font-size:18px;font-style: normal;cursor: pointer;}
.editor {font-size:14px;}
#editor_vote {display:none}
#editor_vote li {position: relative;}
#editor_vote li i {top: 5px;right:5px;}
#editor_vote.show{display:block;}

#editor_emoji {display:none;user-select: none;text-align: justify;margin-bottom:20px;}
#editor_emoji span{display: inline-block;user-select: none;width:27px;height:27px;font-size:20px;border:1px solid #fff}
#editor_emoji span:hover{border:1px solid #666}
#editor_emoji.show{display:block;}

.post_button {text-align: justify;}
.post_button:after {content: "";display: inline-block;width: 100%;}
.post_button span{position: relative;background:#009688;display: inline-block;user-select: none;padding:10px 10px;color: #fff;border: 1px solid #f5f5f5;border-radius: 5px;}
.post_button span:hover{border:1px solid #ccc}


.footer {background:#fff;color:#999;padding:30px 10px;font-size:12px;line-height:2;box-shadow: 0 10px 30px 0 rgba(68,74,102,.1)!important;text-align:center}

.pages {margin:20px 0px;text-align:center}
.pages a {background: #fff;color:#666;height:30px;line-height:30px;border-radius: 10px;display: inline-block;border:1px solid #e5e5e7;padding:0px 10px;margin:2px;}
.pages a.active{background: #ededef;}
.pages a:hover {border:1px solid #1e9fff;background: #ededef;}
.pages a.active:hover {border:1px solid #e5e5e7}
#loading {display:none;position:absolute;width:100%;height:100%;border-radius: 10px;line-height:30px;padding-top:20px;left:0px;top:0px;z-index:99999;text-shadow: 0 1px 0 #fff;background-color:rgba(0,0,0,0.1);text-align:center;box-sizing:border-box;}
#loading.pull {display:block;}
.loading {
  margin: 0 auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  animation: load 1.1s infinite linear;
}
.loading,.loading:after {border-radius: 50%;width: 10px;height: 10px;}

.miniload {
  font-size: 10px;
  text-indent: -9999em;
  border: 5px solid rgba(187,187,187, 0.5);
  border-left: 5px solid #bbb;
  animation: load 1.1s infinite linear;
}

.loading,.loading:after  {border-radius: 50%;width: 100px;height: 100px;}
.miniload,.miniload:after {border-radius: 50%;width: 10px;height: 10px;}

@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.msg_tips {
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-124px;
	z-index: 19891045;
	text-align: center;
	background-color: #666;
	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);}
}

.left , .right {display:inline-block;width:100%;vertical-align: top;}
.right {text-align:right;}

@media (max-width: 768px){
	.list_box iframe{
		display: block;
		margin: 10px auto;
	}
}

@media (min-width:768px) {
	.list_box ul {width:33%;}
	.player {height:450px;}
	.search {display:inline-block;width:450px;margin-left:50px;vertical-align: middle;}
	.bar .home {right:35px;top:15px;}
	.bar .logo {display:inline-block;padding:0px 0px 0px 20px; text-align:left;vertical-align: middle;}
	.container {padding:10px;}
	.bar .menu {display:none}
	#class {display: block;}
	.user_width  {width:720px;}
	#image p {width:25%}
}


@media (min-width:1025px) {

	.container {padding:10px 18px;}
	
	.list_box ul {width:20%;}
	
	.box .users {display:block;}

	.box_reply {margin:0px;}

	.player {height:560px;}
	
	.left {width:980px;}
	.right {width:380px;}

	.post_button {text-align: left;}
	.post_button span{margin-right:20px;}

	.logs li span{display:inline-block;}
}