@charset "UTF-8";
/*================================
 SYSTEM
=================================*/

/*================================
 o/w
=================================*/

header{
background:url(../img/system/header_bg.jpg) no-repeat center top;
overflow: hidden;
width:100%;
position: relative;
margin:0 auto 0;
}

main{
background-color:#f7f7f7;
}


/* for blog list #post(main block)
-------------------------------- */

.blog2list{
position:relative;
overflow:hidden;
width:1206px;
}

.blog2list #posts{
float: left;
display: block;
width: 860px;
}


.blog2list .blog2ul{
position:relative;
overflow:hidden;
display: block;
width:100%;
}


/*
---------------------*/

.blog2list  .blog2li{
position: relative;
display:block;
width:100%;
overflow:hidden;
padding:10px 10px;
background-color: #Ffff;
border-bottom:1px solid #eee;
margin-bottom:25px;
}

.blog2list .blog2li a{
display: block;
padding:0;
}

.blog2list .blog2li a:hover{
opacity: 0.8;
transition: 0.3s;
}


/* ---// for rect and cut img-- */

.blog2list .blog2li .rectimg {
position: relative;
}

.blog2list .blog2li a:hover img{
opacity:0.74;
transition:0.3s;
text-decoration: none;
}

.blog2list .blog2li img.fitimg{
display: block;
position: absolute;
width: 270px;
height:180px;
}

.blog2list .blog2li .rectimg .cattag{
position: absolute;
top:0;
left:0;
}

/* ---for rect and cut img //-- */

.blog2list .blog2li .desc{
overflow: hidden;
position: relative;
float: right;
width:560px;
height:180px;
padding:10px 20px 10px 20px;
margin:0;
text-align: left;
}

.blog2list .blog2li .desc h3{
overflow: hidden;
display:block;
height:55px;
font-size:18px;
font-weight: bold!important;
line-height:1.6em;
font-weight:normal;
text-align: left;
padding:0;
margin:0;
margin-bottom: 15px;
}

.blog2list .blog2li .desc span.cont{
overflow: hidden;
position: relative;
display: block;
height:54px;
font-size:14px;
color:#666;
line-height:1.8em;
text-align: left;
padding:0;
margin-bottom:10px;
}

.blog2list .blog2li .desc span.date{
font-size:13px;
font-weight: normal;
color:#555;
line-height:1.8em;
letter-spacing: 0.02em;
text-align: left;
display: block;
padding:0;
margin-bottom: 10px;
}
/*
.blog2list .blog2li .desc::after{
background:url(./img/element/list_readmore.png) no-repeat center center;
width:126px;
height:20px;
content:"";
position: absolute;
bottom:10px;
right:25px;
}
*/

/* for blog single
----------------- */

.blogsingle{
position: relative;
overflow: hidden;
}

.blogsingle #posts{
overflow: hidden;
float: left;
width:890px;
margin-left:20px;
}

.blogsingle #posts .post{
padding:40px 40px;
margin-bottom:50px;
background-color: #fff;

}

.blogsingle .post .post_header{
position: relative;
display: block;
min-height:120px;
margin-bottom:50px;
text-align: center;
}

.blogsingle .post .post_header h2{
display: block;
overflow: hidden;
font-size:24px;
font-weight: bold;
line-height:1.5em;
color:#000000;
text-align: left;
padding:20px 0 20px;
margin:0;
}

.blogsingle .post .post_header .desc{
display:block;
line-height:1.5;
text-align: left;
font-size:15px;
line-height:1.8;
padding:10px 0;
margin-bottom: 30px;
border-radius: 5px;
}

.blogsingle .post .post_header .desc span.date{
display: inline-block;
font-size:14px;
color:#555;
letter-spacing: 0.04em;
margin-left:20px;
}

.blogsingle .post .post_header .desc span.tit{
display: inline-block;
font-size:11px;
color:#624C3E;
}

.blogsingle .post .post_header .desc ul.terms{
position: relative;
display:inline-block;
}
.blogsingle .post .post_header .desc ul.terms li{
position: relative;
display:inline-block;
margin-right:20px;
}
.blogsingle .post .post_header .desc ul.terms li::after{
display:block;
position: absolute;
content:" | ";
top:0;
right:-13px;
}
.blogsingle .post .post_header .desc ul.terms li:last-child::after{
content:"";
}


/* ===========================
with visual editor stylesheet
============================ */

.blogsingle .post .post_content {
padding:0;
line-height:1.8em!important;
margin:20px 0 60px;
}

/* overwrite on initial style */
.blogsingle .post .post_content strong{
font-weight: bold;
}

.blogsingle .post .post_content em{
font-style: italic;
}

.blogsingle .post .post_content a{
text-decoration: underline;
}

.blogsingle .post .post_content p{
line-height: 1.8em;
}

/* require for using classic-editor */
.blogsingle .post .post_content img{
max-width: 100%;
height:auto;
}
img.alignright{
display: block;
margin: 0 0 0 auto;
}
img.alignleft{
display: block;
margin: 0 auto 0 0;
}
img.aligncenter{
display: block;
margin: 0 auto;
}

/* with extra visual editor stylesheet */
.blogsingle .post .post_content h1 {
font-size: 32px;
line-height: 1.8em;
}

/* with extra visual editor stylesheet */
.blogsingle .post .post_content h2 {
/*
font-size: 28px;
line-height: 1.8em;
*/
display: block;
font-size: 24px;
font-weight: normal;
line-height: 1.5em;
color:#fff;
background-color:#219185;
padding:0.5em 1em;
margin:0.3em 0;

}

/* with extra visual editor stylesheet */
.blogsingle .post .post_content h3 {
display: block;
font-weight: normal;
font-size: 24px;
line-height: 1.5em;
padding:0.2em 0.5em;
margin:0.3em 0;
border-bottom:8px solid #D0CDD4;
}

/* with extra visual editor stylesheet */
.blogsingle .post .post_content h4 {
font-size: 20px;
line-height: 1.8em;
}
.blogsingle .post .post_content h5 {
font-size: 18px;
line-height: 1.8em;
}
.blogsingle .post .post_content h6 {
font-size: 16px;
line-height: 1.8em;
}

/* SOC
-------------------------------- */

.blogsingle .soc{
display:block;
padding:10px 20px;
margin:20px 0;
line-height:30px;
background-color: #E8F2F1;
}

.blogsingle .soc span{
font-size:1em;
font-weight: normal;
line-height:30px;
color:#111;
margin-right:20px;
}

.blogsingle .soc .socbtns{
display:inline-block;
padding:0;
margin:0;
}

.blogsingle .soc .socbtns a.socbtn{
display:inline-block;
vertical-align:middle;
margin-right:10px;
transition: 0.2s;
}

.blogsingle .soc .socbtns a.socbtn:hover{
opacity:0.7;
}

.blogsingle .soc .socbtns a.socbtn.btn_fb{
background:url(../img/element/blog_btn_fb.png) no-repeat center center #eee;
width:100px;
height:31px;
}

.blogsingle .soc .socbtns a.socbtn.btn_tw{
background:url(../img/element/blog_btn_tw.png) no-repeat center center #eee;
width:100px;
height:31px;
}

.blogsingle .soc ul.soc_terms{
position: relative;
display:inline-block;
}
.blogsingle .soc ul.soc_terms li{
position: relative;
display:inline-block;
margin-right:20px;
}
.blogsingle .soc ul.soc_terms li::after{
display:block;
position: absolute;
content:" | ";
top:0;
right:-13px;
}
.blogsingle .soc ul.soc_terms li:last-child::after{
content:"";
}


/* PageNavi
-------------------------------- */

#system .navigation{
width:100%;
display:block;
overflow:hidden;
padding:60px 10px 60px;
text-align:center;
font-size:1.4em;
}

#system .wp-pagenavi{
display:block;
overflow:hidden;
width:900px;
margin:0 auto;
}

#system .wp-pagenavi a{
display:inline-block;
width:40px;
height:40px;
vertical-align: top;
font-size:18px;
font-weight: normal;
color:#111;
line-height:40px;
text-align: center;
padding:0;
margin:4px!important;
background-color:#fff;
border:1px solid #ccc;
}

#system .wp-pagenavi a:hover{
color:#fff;
background-color:#219185;
text-decoration: none;
}

#system .wp-pagenavi span.current{
display:inline-block;
width:40px;
height:40px;
vertical-align: top;
font-size:18px;
font-weight: normal;
color:#fff;
line-height:40px;
text-align: center;
background-color:#219185;
border:1px solid #ccc;
padding:0;
margin:4px;
}

#system .single_navigation{
position:relative;
width:auto;
height:50px;
display:block;
padding:0;
text-align:center;
margin:0 auto;
}

#system .single_navigation ul{
display:block;
position:relative;
}

#system .single_navigation ul li{
display:block;
width:250px;
height:50px;
position: absolute;
top:0;
}

#system .single_navigation ul li a{
overflow: hidden;
display:block;
padding:0 25px;
font-size:15px;
font-weight:normal;
text-decoration-line: none!important;
color:#111;
background-color:#fff;
border:1px solid #ccc;
text-align: center;
line-height:50px;
}

#system .single_navigation ul li a:hover{
text-decoration: none;
background-color:#f1f1f1;
opacity:0.77;
transition:0.2s;
}

#system .single_navigation ul li.prev  { left:0; }
#system .single_navigation ul li.back  { left:280px; }
#system .single_navigation ul li.next  { left:560px; }
#system .single_navigation ul li.prev a  { text-align: left; }
#system .single_navigation ul li.back a  { text-align: center; }
#system .single_navigation ul li.next a  { text-align: right; }
#system .single_navigation ul li.back a {
text-align: center;
background-color:#219183; color:#fff;
}


/* subnav
-------------------------------- */

.subnav{
background:url(../img/system/subnav_bg.jpg) no-repeat center top;
display: block;
height:260px;
position: relative;
background-color:#f7f7f7;
margin-bottom: 50px;
overflow: hidden;
}

.subnav ul{
display: block;
width:1206px;
text-align: justify;
overflow: hidden;
padding:0;
margin:20px auto 0;
}

.subnav ul li {
display:inline-block;
}
.subnav ul li:first-child {
display:inline-block;
margin-right:20px;
}

.subnav ul li a{
position: relative;
display:block;
width:592px;
height:180px;
}

.subnav ul li.news a{background:url(../img/system/subnav_li_news.png) no-repeat center top;}
.subnav ul li.blog a{background:url(../img/system/subnav_li_blog.png) no-repeat center top;}


/* for blog single and list
   #rowcats(bottom block)
-------------------------------- */

#rowcats{
overflow: hidden;
}

#rowcats .row_inner{
float: right;
width:300px;
margin:0 auto 100px;
border-radius: 25px;
text-align: center;
}

#rowcats .onebox{
display: inline-block;
vertical-align: top;
width:100%;
margin-bottom:30px;
}

#rowcats .row_inner .onebox{
position: relative;
padding:0;
text-align: left;
}

#rowcats .onebox h3 a{
display: block;
overflow: hidden;
position: relative;
font-size: 16px;
text-align: left;
color:#fff;
line-height:60px;
text-indent:20px;
padding: 0;
white-space: nowrap;
background-color: #555;
}

#rowcats .onebox ul{
display:block;
}

#rowcats .onebox ul li{
position: relative;
}

#rowcats .onebox ul li a{
display: block;
overflow: hidden;
position: relative;
font-size: 16px;
text-align: left;
line-height:56px;
text-indent:20px;
padding: 0;
white-space: nowrap;
background-color:#fff;
border-bottom:1px dotted #E7E4DF;
}

#rowcats .onebox a:hover{
opacity: 0.77;
transition:0.2s;
}