@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,600,600i');

html,body{
	margin:0;
	padding:0;
	font-family:'Fira Sans',sans-serif;
	color:#57585a;
}
body{
	background: url('images/bg.png') repeat-x center top #63a67e;
}
a{
	color:#a67dc1;
	text-decoration:none;
}
img{
	max-width:100%;
}
#wrapper{
	width:1100px;
	margin:0 auto;
	max-width:100%;
}

/*header*/
#header{
	display:flex;
}
#headerleft,#headerright{
	padding:15px;
	display:flex;
	align-items:center;
	justify-content:space-around;
	width:100%;
}
#headerleft{
	background:#7d5e91;
}
#headerright{
	flex-grow:0;
	background:#171a21;
}
#topspace, #top-space{
	width:728px;
	height:90px;
	background:#ccc;
}
#logo{
	max-width:400px;
}
@media screen and (max-width:1000px){
	#header{
		flex-wrap:wrap;
	}
	#headerleft,#headerright{
		padding:20px 10px;
	}
}
@media screen and (max-width:770px){
	#headerright{
		display:none;
	}
}

/*middle*/
#middle{
	padding-top:20px;
}
#middleflex{
	display:flex;
}
#menuclick{
	display:none;
}
#menu{
	background:#171a21;
	position:relative;
}
#menu a{
	display:inline-block;
	padding:15px;
	color:#fff;
	text-decoration:none;
	font-size:1.4em;
}
#menu a:hover{
	background:#7d5e91;
}
.leftbars{
	position:absolute;
	left:-30px;
	height:100%;
}
.rightbars{
	position:absolute;
	right:-26px;
	height:100%;
	top:0;
}
.bar{
	background:#7d5e91;
	height:100%;
	position:relative;
	width:9px;
	border-radius:4px;
	float:left;
	margin-left:4px;
}
#middleleft{
	order:0;
	width:100%;
}
#cc-comicbody{
	min-height:915px;
	background:#fff;
	text-align:center;
}
#cc-comicbody img{
	vertical-align:bottom;
}
#navwrap{
	position:relative;
}
.cc-nav{
	display:flex;
	background:#171a21;
}
.cc-nav a{
	color:#fff;
}
.cc-nav a, .cc-nav div{
	height:22px;
	padding:15px;
	width:100%;
	text-decoration:none;
	text-align:center;
	font-size:1.2em;
}
.cc-nav a:hover{
	background:#7d5e91;
}
#middleright{
	width:200px;
	background:#e7e7e7;
	order:1;
	position:relative;
	flex-shrink:0;
	flex-grow:0;
}
#rightwrap{
	padding:20px;
}
#rightspace, #middle-space{
	width:160px;
	height:600px;
	background:#ccc;
}
#social{
	margin-top:10px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#social a{
	display:block;
	width:45%;
}
#social a#hiveworks{
	margin:10px 0;
	display:block;
	width:100%;
}
#hiveworks:hover,#social a:hover{
	opacity:.6;
}
#rightbottom{
	width:100%;
	height:52px;
	background:#171a21;
	position:absolute;
	bottom:0;
}
@media screen and (max-width:1170px){
	.leftbars,.rightbars{
		display:none;
	}
}
@media screen and (max-width:900px){
	#middleflex{
		flex-wrap:wrap;
	}
	#middleright{
		width:100%;
	}
	#cc-comicbody{
		min-height:auto;
	}
	#rightwrap{
		padding:10px;
	}
	#rightspace{
		display:none;
	}
	#social{
		flex-wrap:nowrap;
		justify-content:space-around;
		align-items:center;
	}
	#social a{
		max-width:100px;
		padding:0 10px;
		width:auto;
	}
	#social a#hiveworks{
		margin:0;
		width:auto;
	}
	#rightbottom{
		display:none;
	}
}
@media screen and (max-width:770px){
	#middle{
		padding:0;
	}
	#menuclick{
		display:block;
		background:#171a21;
		padding:20px;
		font-weight:bold;
		font-size:1.7em;
		color:#fff;
		text-align:center;
		cursor:pointer;
	}
	#menu{
		display:none;
	}
	#menu a{
		text-align:center;
		display:block;
	}
}
@media screen and (max-width:550px){
	.cc-nav a{
		font-size:1em;
		padding:15px 10px;
	}
}

#ibar{
	margin-top:20px;
	background:#a67dc1;
	padding:10px 8px;
	height:49px;
}
@media screen and (max-width:900px){
	#ibar{
		margin:0;
	}
}

/*bottom*/
#bottom{
	display:flex;
}
#bottomleft{
	order:0;
	background:#fff;
	width:100%;
	font-size:1.2em;
	line-height:1.6em;
}
.cc-newsarea{
	display:flex;
	flex-wrap:wrap;
}
#bottomright{
	order:1;
	background:#e7e7e7;
	width:300px;
	padding:20px;
	flex-shrink:0;
	flex-grow:0;
	min-height:660px;
	position:relative;
}
#bottomleft div{
	padding:20px;
}
.cc-newsheader{
	width:70%;
	box-sizing:border-box;
	background:#171a21;
	color:#fff;
	font-weight:bold;
	font-size:1.7em;
	flex-shrink:0;
}
.cc-newsheader a{
	color:#fff;
}
.cc-publishtime{
	display:flex;
	align-items:center;
	justify-content:space-around;
	width:30%;
	box-sizing:border-box;
	color:#fff;
	font-style:italic;
	background:#664d76;
}
#bottomspace, #bottom-space{
	width:300px;
	min-height:250px;
	background:#ccc;
}
#xisea{
	width:300px;
	height:250px;
	background:url('images/xisea.png');
	position:absolute;
	bottom:0;
	right:0;
}

@media screen and (max-width:770px){
	#bottom{
		flex-wrap:wrap;
	}
	#bottomleft{
		order:1;
	}
	#bottomright{
		order:0;
		display:flex;
		width:100%;
		box-sizing:border-box;
		justify-content:space-around;
		min-height:none;
		min-height:auto;
	}
	#xisea{
		display:none;
	}
	#bottomspace{
		flex-shrink:0;
		flex-grow:0;
	}
	#portfolio{
		margin:0;
	}
}
@media screen and (max-width:570px){
	#portfolio{
		display:none;
	}
}

@media screen and (min-width: 901px){
#textwrap{
	background:#fff;
	font-size:1.2em;
	line-height:1.6em;
	padding:20px;
	min-height:100%;
	box-sizing:border-box;
	min-height:960px;
}
}
#hw-privacy{
	text-align:center;
	padding:20px;
}
#hw-privacy a{
	color: #000;
}