/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block;
}
div,
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main,
.boke8 {
  margin: 0;
  padding: 0;
}
body {
  background:#000000 url(images/img01.jpg) repeat left top;
  font: 16px/1.875em 'Arial', 'Microsoft Yahei', 'Verdana', 'Tahoma', 'sans-serif';
  color:#4D4D4D;
  word-break: break-all;
  text-align: justify;
}
a {
  text-decoration: none;
  outline: none;
  color: #333;
}
a:hover {
  color: #A0A0A0;
}
input,
textarea {
  -webkit-appearance: none;
  border: none;
}
input:focus,
textarea:focus {
  outline: none;
}
li {
  list-style: none;
}
a img {
  border: none;
}
img {
  max-width: 100%;
}
table {
  background-color: transparent;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 16px;
  width: 100%;
  border-top: solid 1px #e4e4e4;
  border-left: solid 1px #e4e4e4;
  box-sizing: border-box;
}
table th {
  background-color: #f9f9f9;
  text-align: center;
  box-sizing: border-box;
}
table td,
table th {
  padding: 10px 1%;
  border: 1px solid #e4e4e4;
  box-sizing: border-box;
}
pre,
textarea,
input {
  font-family: 'Microsoft Yahei';
}
.inner {width:90%; max-width:1280px; margin:0 auto;}
.submit {
  cursor: pointer;
}
.clear {
  clear: both;
  overflow: hidden;
}
/* Header */
#header{padding:20px 0px;}
#header .inner {display:flex; flex-wrap:wrap; justify-content: space-between; align-items: center;}

/* Logo */
#logo{color:#fff;font-size:36px; width: 6em; text-transform: uppercase;}
#logo h1{text-transform:lowercase; font-size: 1em; font-weight: normal; line-height: 1.25em}
#logo p{font-size:14px;line-height:1.5em; font-style:italic;}
#logo a{color:#fff;}

#nav {font-size: 16px; line-height: 2em;}
#nav > ul {display:flex;justify-content: flex-end; flex-wrap: wrap; }
#nav > ul > li {margin-left:2em; position: relative;}
#nav li ul {position: absolute; left:0; top:100%; min-width: 100%; display: none; z-index: 5;}
#nav li li {font-size: 14px; white-space: nowrap;}
#nav li li a {padding:0 10px;}
#nav a {color:#fff; display: block;}
/* Search */
#search{float:left;width:350px;height:30px;padding:20px 0px 0px 0px;}
#search form{height:41px;margin:0;padding:10px 0 0 50px;}
#search fieldset{margin:0;padding:0;border:none;}
#edtSearch{width:170px;padding:6px 5px 2px 5px;border:1px solid #DEDEDE;background:#FFFFFF;text-transform:lowercase;font:normal 11px Arial,Helvetica,sans-serif;color:#5D781D;}
#btnPost{width:50px;height:22px;border:none;background:#B9B9B9;color:#000000;cursor:pointer;}

/* Menu */
#menu{width:980px;height:90px;margin:0 auto;padding:0;}
#menu ul{margin:0;padding:50px 0px 0px 0px;list-style:none;line-height:normal;}
#menu li{float:left;}
#menu a{display:block;width:130px;height:30px;margin-right:1px;padding:9px 0px 0px 0px;text-decoration:none;text-align:center;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:bold;color:#FFFFFF;border:none;}
#menu a:hover,#menu .current_page_item a{text-decoration:none;}
#menu .current_page_item a{padding-left:0;}



#wrapper .inner {background-color: #eaeaea; display:flex; justify-content: space-between; flex-direction: row-reverse;}
/* Content */
#main{overflow: hidden; width:74%; padding:10px 10px 10px 0;}

.content {background-color: #fff; border:1px solid #d4d4d4; padding:3.125%; height: 100%;}



.mza-post {margin-bottom: 3.5%; border-bottom:1px dashed #e4e4e4; padding-bottom: 3.5%;}
.mza-post .title {font-size: 22px; line-height: 1.5em; margin-bottom: 3%;}
.mza-post .figure {margin-bottom: 2%; border-radius:15px; overflow: hidden;}
.mza-post .figure a {display:block; overflow:hidden; position: relative;}

.mza-post .image:after {position: absolute; left:0; bottom:0; width: 100%; height: 100%; content:''; display: block;background-image:linear-gradient(180deg, rgba(0,0,0,.2) 50%, rgba(0,0,0,.85)); z-index: 2;}
.mza-post .image {padding-bottom: 35%; background:no-repeat center center; background-size: cover; position: relative;}
.mza-post .meta {position:absolute; left:3%; width: 94%; bottom:3%; font-size: 13px; color:rgba(255,255,255,.85); line-height: 2em; display:flex; justify-content: space-between;  z-index: 3; font-style: italic; text-shadow: 0px 0px 2px #000;}
.mza-post .meta a {color:rgba(255,255,255,.65);}
.mza-post .excerpt {font-size: 15px; line-height: 2em; display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; text-overflow: ellipsis; max-height: 6em; color:#555;}
.mza-post .tags { margin-top: 2%; margin-bottom: 0;}
/*mza-title*/
#mza-title{font-size:26px; line-height: 1.35em; margin-bottom: 2.5%; color:#222;}

/*postmeta*/
#postmeta{margin-bottom:3.5%;font-size:13px; line-height: 1.5em; border-bottom:1px solid #e4e4e4; padding-bottom:2%; overflow: hidden;}
#postmeta span {display:block; padding-right: 2%; float:left;}

/*entry*/
.entry{font-size:16px;line-height:1.875em;overflow:hidden;color:#333;margin-bottom:20px;}
.entry img{max-width:100%; height: auto;}
.entry code {background-color:#F9F2F4; color:#c7254e; margin:0 3px; padding:0 2px; font-weight:normal;}
.entry blockquote{margin:0 2em 1em;overflow:hidden;padding:1em 1em 0;color:#555;background-color:#f9f9f9;font-style:italic;}
.entry ul,.entry ol{margin-bottom:1em;margin-left:2em;padding-left:1em;}
.entry ul li{list-style:outside disc none; padding: 3px 0;}
.entry ol li{list-style:outside decimal none; padding: 3px 0;}
.entry li p{margin-bottom:0;}
.entry p,
.entry pre,
.entry .prism-highlight {margin-bottom:1em;}
.entry h1,
.entry h2,
.entry h3,
.entry h4,
.entry h5,
.entry h6{margin-bottom:1em;line-height:1.875em;position: relative;}
.entry a{color:#d83d30;text-decoration:underline;}
.entry hr{border:none;margin-bottom:1.5em;border-bottom:6px solid #e4e4e4;overflow:hidden;clear:both; height:2px; background-color:#7e8299;}
.entry h2 {font-size: 1.5em;}
.entry h3 {font-size: 1.375em;}
.entry h4 {font-size: 1.25em; position: relative; padding-left: 15px; font-weight: normal; background-color: #e9e9e9; border-left: 3px solid #413c40;}
.entry h5 {font-size: 1.125em;}
.entry h6 {font-size: 1em;}


#pagenavi{font-size:0;line-height:normal;text-align:center;clear:both;}
#pagenavi a,#pagenavi span.now-page{display:inline-block;font-size:13px;height:32px;line-height:32px;min-width:32px;text-align:center;padding:0 2px;color:#7e8299;margin:2px;border-radius:2px;background-color:#f8f8f8;}
#pagenavi span.now-page,#pagenavi a:hover{background-color:#d83d30;color:#fff;}

#post .entry {margin-bottom: 5%;}
/*tags*/
.tags {font-size: 13px; line-height: 1.5em; font-weight: bold; margin-bottom: 5%;}
.tags a {text-decoration: underline; color:#d83d30; position: relative; margin-right: 20px;}
.tags a:after {width: 1px; height: 13px; background-color: #333; content: ''; display: block; position:absolute; top: 50%; transform: translateY(-50%); left: 100%; margin-left: 9.5px;}
.tags a:last-child {margin-right: 0;}
.tags a:last-child:after {display: none;}

/*commentslist*/
#commentslist {overflow: hidden; margin-bottom: 3.5%}
#commentslist li {margin-bottom: 3.5%;}
#commentslist .wrap{overflow: hidden;}
#commentslist .gravatar{float:left;}
#commentslist .gravatar img {display: block; width: 80px; height: 80px;}
#commentslist .text {margin-left:100px; overflow: hidden; background-color: #f9f9f9; border:1px solid #e4e4e4; padding:3.125%;}
#commentslist .name {font-size: 18px; line-height: 1.35em; font-weight: bold; text-transform: uppercase; margin-bottom: 1%; }
#commentslist .meta {font-size: 13px; line-height: 1.5em; color:#999; margin-bottom: 2%;}
#commentslist .cmt {font-size: 15px; line-height: 2em;}

#commentslist li li{margin-left:100px;margin-top:2.5%;margin-bottom:0;}


.boxTitle {font-size: 20px; color:#333; line-height: 1.5em; margin-bottom: 3.5%;}

/*comment*/
#comment .item {overflow: hidden; margin-bottom: 2%;}
#comment label {display: block; float:left; font-size: 16px; width: 4em; text-align: right;}
#comment label i {font-style: normal; color:#f00;}
#comment .input {margin-left: 64px; overflow: hidden;}
#comment .verify {padding-right:95px; position: relative;}
#comment .verify img {position: absolute; right:0; top:50%; transform:translateY(-50%); width: 90px; height: 30px;}
#comment .text{border:1px solid #ddd;height:36px;line-height:36px;width:100%;padding:5px 15px;}
#comment textarea.text{height:120px;}
#comment .submit{background-color:#3a3d3b;color:#fff;cursor:pointer; width: 90px; height: 32px; float:right;}
.postbottom {font-size: 12px; line-height: 2em; text-align: right; margin-left:64px; color:#999;}


#boke8-slide {margin-bottom: 5%; border-radius: 15px; overflow:hidden;}
#boke8-slide .swiper-pagination-bullet-active {background-color: #fff;}
/* Sidebar */
#sidebar{width:26%; padding: 30px 0;}





.widget {margin-bottom: 20px;}
.widget-title {background-color: #fff; border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; font-size: 16px; line-height: 30px; padding: 10px 40px; margin-right: -1px; margin-left: -20px; position: relative; color: #000;}
.widget-title:before {display: block; content: ''; position: absolute; left: -18px; width: 35px; height: 35px; background-color: #fff; border-top: 1px solid #d4d4d4; border-left:1px solid #d4d4d4; transform:rotate(-45deg); top: 7px; }
.widget ul,
.widget .textwidget {padding: 20px;overflow: hidden;}
.widget li {font-size: 15px; line-height: 2em; list-style: outside disc none; margin-left: 1em; padding: 1% 0;}
.widget li ul {padding: 0 0 0 20px;}

#divTags ul {text-align: left;}
#divTags li {list-style: none; display: inline-block; font-size: 13px; margin: 0 5px 5px 0;}
#divTags li a {display: block; padding: 0 10px; border: 1px solid #e4e5e5; border-radius: 5px; background-color: #fff;}
#divTags li a:hover {text-decoration: none; background-color: #222; color: #fff; border-color: #222;}

#divSearchPanel form {position: relative; padding-right: 42px;}
#divSearchPanel input[type="text"] {background-color: #fff; border: 1px solid #e4e5e5; display: block; width: 100%; padding: 5px 5%; line-height: 30px;}
#divSearchPanel input[type="submit"] {display: block; position: absolute; right: 0; top: 0; width: 42px; height: 100%; background-color: #222; color: #fff; cursor: pointer;}

#divCalendar table {background-color: #fff; text-align: center; font-size: 14px;}
#divCalendar caption {font-size: 16px; font-weight: bold; background-color: #fff; padding: 8px;}

#divMisc li {list-style: none; margin-left: 0;}
/* Calendar */
#calendar{}
#calendar_wrap{padding:20px;}
#calendar table{width:100%;}
#calendar tbody td{text-align:center;}
#calendar #next{text-align:right;}

/* Footer */
#footer{padding:20px; text-align: center; font-size: 14px; line-height: 1.75em; text-transform: uppercase;color:#A0A0A0;}
#footer a{color:#A0A0A0; display: inline-block;}
#footer a:hover {color:#8A8A8A; text-decoration: underline;}

@media only screen and (max-width:1280px){
    #logo {font-size: 2.8125vw;}
    #logo p {font-size: 12px;}
    #nav {font-size: 14px;}
    .widget-title {margin-left: -5px; padding-left: 25px; padding-right: 25px;}
    .widget li,
    .mza-post .excerpt {font-size: 14px;}
    .mza-post .title {font-size: 20px;}
    .mza-post .figure,
    #boke8-slide {border-radius: 10px;}

    #mza-title {font-size: 24px;}
    .entry,
    #comment label {font-size: 14px;}

    #commentslist .gravatar img {width: 60px; height: 60px;}
    #commentslist .text {margin-left: 80px;}
    #commentslist .name {font-size: 16px;}
    #commentslist .cmt {font-size: 14px;}
    .boxTitle {font-size:18px;}
}
@media only screen and (max-width:1024px){
    .inner {width: 93.75%;}
    #logo {font-size: 28px;}
    #sidebar {display: none;}
    #main {width: auto; padding-left:10px;}
    .mza-post .title {font-size: 18px;}
    .mza-post .figure,
    #boke8-slide {border-radius: 5px;}
    #pagenavi a, #pagenavi span.now-page {font-size: 12px; height: 28px; min-width: 28px; line-height: 28px;}
    #mza-title {font-size: 22px;}
    .boxTitle {font-size:16px;}
}
@media only screen and (max-width:768px){
    #header {padding:15px 0 10px;}
    #header .inner {display: block;}
    #logo {text-align: center; margin-bottom: 10px; font-size: 24px; width: auto;}
    #nav {overflow: hidden;}
    #nav > ul {justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling:touch; flex-wrap: nowrap; padding-bottom: 5px;}
    #nav > ul > li {margin-left: 0; margin-right: 5vw; white-space: nowrap;}
    #nav > ul > li:last-child {margin-right: 0;}
    #main {padding:5px;}
    .content {padding:5%;}
    .mza-post {margin-bottom: 5%; padding-bottom:5%;}
    .mza-post .title {font-size: 16px; margin-bottom: 3.5%;}
    .mza-post .figure {border-radius: 0; margin-bottom: 3.5%;}
    .mza-post .excerpt {line-height: 1.75em; max-height: 5.25em;}
    .mza-post .tags {margin-top: 3.5%;}
    #pagenavi a, #pagenavi span.now-page {margin:1px;}
    #footer {font-size: 13px;}
    #mza-title {font-size: 18px;}
    #postmeta span {padding-right: 5%;}

    #comment label {float:none; line-height: 1.75em; width: auto; text-align: left;}
    #comment .input {margin-left: 0;}
    .postbottom {margin-left: 0; text-align: left;}

    #commentslist .gravatar img {width: 30px; height: 30px;}
    #commentslist .text {margin-left: 40px;}
    #commentslist .name {font-size: 15px;}
    #commentslist .meta {font-size: 12px;}
    #commentslist .cmt {font-size: 13px;}
    .tags {margin-bottom: 7%;}
    #boke8-slide {border-radius: 0;}

}