/*
Theme Name: JVW
Theme URI: https://www.jane-vision.com/
Author: TC @ Janevision
Author URI: http://www.jane-vision.com/
Description: JVW means Janevision Webpage Theme that for janevision official website.
Version: 1.0
Tags: green, Janevision
Text Domain: jvw
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft Yahei", "Wenquanyi Micro Hei", sans-serif;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow-y: scroll;
	font-size: 20px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	transition: all .2s ease;
}
body {
	background: #FFFFFF;
	color: #282624;
}


h1 {
	font-size: 2.2rem;
	font-weight: bold;
}
h2 {
	font-size: 1.9rem;
	font-weight: bold;
}
h3 {
	font-size: 1.2rem;
	font-weight: bold;
}
h4 {
	font-size: 1rem;
	font-weight: bold;
}
p {
	font-size: 0.8rem;
	font-weight: 300;
	line-height: 1.4rem;
}
*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

strong {
	font-weight: bold;
}


article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}

ol,
ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

fieldset {
	min-width: inherit;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	quotes: none;
}

a {
	color: #1A7EE0;
	text-decoration: none;
}
a:focus {
	outline: 0;
}

a:hover,
a:active {
	outline: 0;
	color: #1CAD5A;
}

a img {
	border: 0;
}

input, textarea {
	background-color: #FFFFFF;
	border: 1px solid #E5E5E5;
	appearance: none;
	-moz-appearance: none; /* Firefox */
	-webkit-appearance: none; /* Safari 鍜� Chrome */
}
::-webkit-input-placeholder { /* Chrome */
	color: #9B9B9B;
	font-weight: 300;
}
:-ms-input-placeholder { /* IE 10+ */
	color: #9B9B9B;
	font-weight: 300;
}
::-moz-placeholder { /* Firefox 19+ */
	color: #9B9B9B;
	font-weight: 300;
	opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
	color: #9B9B9B;
	font-weight: 300;
	opacity: 1;
}

.button {
	border: 0;
	outline: 0;
	cursor: pointer;
	background-color: #2D89E3;
	color: #FFFFFF;
	font-size: 0.7rem;
	font-weight: 300;
	line-height: 0.7rem;
	padding: 0.5rem 1.2rem;
	border-radius: 1rem;
}
.button:hover {
	background-color: #3591EC;
	color: #FFFFFF;
}
.button:active {
	background-color: #2479CC;
	color: #FFFFFF;
}
.btn_ic {
	height: 2.8rem;
	min-width: 2.8rem;
	border-radius: 1.4rem;
	background: #282624 no-repeat;
	padding: 0;
	vertical-align: middle;
}
.btn_ic * {
	vertical-align: middle;
}
.btn_ic i {
	width: 1.2rem;
	height: 1.2rem;
	-webkit-mask-size: 1.2rem 1.2rem;
			mask-size: 1.2rem 1.2rem;
	display: inline-block;
	background-color: #FFFFFF;
	text-indent: -99rem;
}
.btn_ict {
	padding: 0 1rem;
	font-size: 1.2rem;
}
.btn_ict i {
	margin-right: 0.6rem;
}

.ic_send i {
	margin-left: -0.2rem;
	-webkit-mask-image: url(./img/ic_send.svg);
	mask-image: url(./img/ic_send.svg);
}
.ic_like i {
	margin-top: -0.1rem;
	-webkit-mask-image: url(./img/ic_like.svg);
	mask-image: url(./img/ic_like.svg);
}
.ic_share i {
	margin-left: 0.1rem;
	-webkit-mask-image: url(./img/ic_share.svg);
	mask-image: url(./img/ic_share.svg);

}


.clearfix:before, .clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	zoom:1;
}
.inlinebox {
	font-size: 0;
}

/*
* Layout
*/
.wrapper {
	margin: 0 auto;
	width: 100%;
	max-width: 1372px;
	padding:0 1.2rem;
    margin-top:100px;
}
.wrapper.wrflex {
	padding: 0 0.7rem;
}

header {
	width: 100%;
	height: 4.8rem;
	padding: 0;
	line-height: 4.8rem;
	position: fixed;
	top: 0;
	z-index: 999;
	font-size: 0.8rem;
	transition: all .2s ease;
}
header .wrapper * {
	vertical-align: middle;
}
header.dark {
	color: #ffffff;
}
header .btn_menu {
	display: none;
}
header.offset, header.offset.dark {
	background-color: rgba(255,255,255,0.98);
	color: inherit;
}
	header a.logo, header.offset a.logo {
		display: inline-block;
		margin: -0.2rem 0 0 0;
		padding: 0;
		vertical-align: middle;
		width: 6.4rem;
		height: 2.4rem;
		background: url("../AppSkin/svg/logo.svg") center center no-repeat;
		background-size: 6.4rem 2.4rem;
		text-indent: -99rem;
	}
	header.dark .logo {
		background-image: url(./img/logo_white.svg);
	}
	header .menu {
		display: inline-block;
		margin-left: 2rem;
	}
	header .menu li {
		display: inline-block;
	}
	header a {
		color: inherit;
		padding: 1rem;
		margin: 0 0.7rem;
	}
	
	header .current-menu-item, 
	header .current-work-ancestor, 
	header .current-works-ancestor, 
	header .current-post-ancestor, 
	header .current-page-ancestor, 
	header .current-category-ancestor {
		font-weight: bold;
		background: url("../AppSkin/svg/menu_current_bg.svg") center center no-repeat;
	}
	/*header .current-menu-item a:hover, 
	header .current-work-ancestor a:hover, 
	header .current-works-ancestor a:hover, 
	header .current-post-ancestor a:hover, 
	header .current-page-ancestor a:hover, 
	header .current-category-ancestor a:hover {
		color: inherit;
	}*/

section.panel {
	/*margin-top: 9rem;*/
}
	section.panel h3 {
		line-height: 2rem;
		font-weight: normal;
		background: url("../AppSkin/svg/section_title.svg") left top no-repeat;
		padding-top: 2rem;
		margin-bottom: 2.4rem;
	}

section#sectionService {
	margin-top: 6rem;
}
section#sectionPageTitle {
	/*margin-top:11rem;*/
}

section#sectionPageTitle, section#sectionPageTitle p {
	font-size: 2.2rem;
	line-height: 3.2rem;
	font-weight: normal;
}
section#sectionPageTitle strong, section#sectionPageTitle b {
	font-weight: bold;
	color: #04d4b7;
}
section#sectionListCon {
	margin-top: 4rem;
}
section#sectionPageInfo {
	color: #75726D;
}
section#sectionPageInfo ul {
	font-weight: 300;
	margin-top: 2rem;
}
section#sectionPageInfo ul li {
	display: inline-block;
	font-size: 0.7rem;
	padding: 0 10rem 2rem 0.7rem;
	border-left: 1px solid #E5E5E5;
}
section#sectionPageInfo li span {
	font-size: 2.8rem;
	display: block;
	color: #282624;
	font-weight: 100;
}

section#sectionInfo {
	margin: 2rem 0;
	font-size: 0.7rem;
	font-weight: 300;
	color: #75726D;
	height: 2rem;
	line-height: 2rem;
}
section#sectionInfo .avatar {
	width: 1.6rem;
	height: 1.6rem;
}

section#sectionInfo * {
	vertical-align: middle;
}

.single section#sectionCon {
	margin-top: 4rem;
}


section.posttitle {
	margin-top: 11rem;
}
section#sectionCon p,
section#sectionCon ul,
section#sectionCon ol {
	max-width: 70rem;
	color: #75726D;
	margin: 0 0 2rem 0;
}

.page section#sectionCon p {
	max-width: 100%;
}

section#sectionCon h3 {
	background: none;
	padding: 0;
}
section#sectionCon h2,
section#sectionCon h3,
section#sectionCon h4 {
	margin: 2rem 0 1rem 0;
}
section#sectionCon h2 {
	font-size: 1.4rem;
}
section#sectionCon ul,
section#sectionCon ol {
	font-size: 0.8rem;
	line-height: 1.4rem;
	margin-left: 1rem;
	font-weight: 300;
}
section#sectionCon ul {
	list-style-type: disc;
}
section#sectionCon ol {
	list-style-type: decimal;
}

.tagbox {
	font-size: 0.7rem;
	color: #75726D;
	margin-top: 2rem;
}
.action {
	text-align: center;
	margin: 4rem 0;
}
.action button {
	margin: 0 0.2rem;
}

button.favorite {
	background-color: #2D89E3;
	font-weight: 100;
}
button.favorite .thanks {
	display: none;
}
button.favorite.done {
	background-color: #282624;
	cursor: default;
}
button.favorite.done .thanks {
	display: inherit;
}
button.share {
	background-color: #F1F8FB;
	position: relative;
}
button.share i {
	background-color: #1A7EE0;
}
/*button.share:hover i {
	background-color: #FFFFFF;
}*/
button.submit {
	background-color: #1A7EE0;
}
.share .qrcode {
	position: absolute;
	padding: 0.8rem;
	top: -0.8rem;
	background-color: #2D89E3;
	border-radius: 1rem;
	display: none;	
}
 
.boxflex {
	display: inline-block;
	vertical-align: top;
	padding: 0 0.5rem;
}
.boxflex img {
	width: 100%;
	height: auto;
}

.flex3 .boxflex {
	width: 33.3333333%;
}
.flex6 .boxflex {
	width: 16.6666666%;
	/*width: 10.2rem;*/
}
.flex2 .boxflex {
	width: 50%;
}

footer {
	margin: 10rem 0 5rem 0;
}
	footer .wrapper {
		border-top: 1px solid #E5E5E5;
	}
	footer dd {
		float: left;
		margin-top: 0.8rem;
		font-size: 0.6rem;
		line-height: 1.4rem;
	}
	footer dd.d1 {
		width: 40%;
	}
	footer dd.d2 {
		width: 40%;
	}
	footer dd.d3 {
		float: right;
	}


/*
* Elements
*/
.body-bg {
	display: block;
	position: absolute;
	z-index: -1;
	background-repeat: no-repeat;
}
.body-bg.bg-left {
	width: 36%;
	height: 610px;
	top: -60px;
	left: -348px;
	background-image: url("../AppSkin/svg/bg_1.svg");
	background-size: contain;
	animation: slideInTop .2s ease;
}
.body-bg.bg-right {
	width: 24%;
	height: 860px;
	top: 0;
	right: 0;
	background: url("../AppSkin/svg/bg_2.svg") left bottom;
	animation: slideInTop .4s ease;
}

.flex3 .cbox {
	padding: 2.2rem 2rem;
	height: 21.4rem;
}
	.cbox h2 {
		color: #FFFFFF;
		font-weight: bold;
	}
	.cbox p {
		color: #FFFFFF;
		margin-top: 1.2rem;
	}
.cgreen {      
	background: #1CAD5A url(./img/cgreen.svg) left bottom no-repeat;
}
/*a:hover .cgreen {
	background-color: #25BB65;
}*/
a:active .cgreen {
	background-color: #16A051;
}
.cblue {
	background: #2D89E3 url(img/cblue.svg) center bottom no-repeat;
}
/*a:hover .cblue {
	background-color: #3591EC;
}*/
a:active .cblue {
	background-color: #2479CC;
}
.ccyan {
	background: #247469 url(img/ccyan.svg) right bottom no-repeat;
}
/*a:hover .ccyan {
	background-color: #2C8679;
}*/
a:active .ccyan {
	background-color: #1C6A5F;
}

.pbox {
	padding: 2rem;
	background-color: #F1F8FB;
}
	.pbox h4
	{
		background: left top no-repeat;
		padding-top: 5rem;
		margin-bottom: 1rem;

	}
	.pbox h4.p1 {
		background-image: url(img/pbox1.svg);
	}
	.pbox h4.p2 {
		background-image: url(img/pbox2.svg);
	}
	.pbox h4.p3 {
		background-image: url(img/pbox3.svg);
	}
	.pbox p {
		font-size: 0.7rem;
		color: #75726D;
	}
	.pbox ul {
		list-style: url(img/pbox_li.svg) inside;
		font-size: 0.7rem;
		line-height: 1.4rem;
		margin-top: 2rem;
	}
	.pbox .button {
		display: inline-block;
		margin-top: 2rem;
	}
	.pbox .fixmargin14 {
		margin-top:3.4rem;
	}
	.pbox .fixmargin12 {
		margin-top:3.2rem;
	}

.client {
	width: 100%;
	height: 6.4rem;
	margin-top: 1rem;
	background: center center no-repeat;
	background-size: 100% auto;
	text-indent: -99rem;
}

.cthumbnail, .mthumbnail {
	display: block;
	color: inherit;
}
	.cthumbnail h4, .mthumbnail h4 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.cthumbnail p, .mthumbnail p {
		margin-top: 0.8rem;
		color: #75726D;
		display: block;
		overflow: hidden;
	}

.cthumbnail {
	position: relative;h
}
	.cthumbnail .cate {
		position: absolute;
		background: #282624;
		background: linear-gradient(-60deg, transparent 16px, #282624 17px);
		color: #FFFFFF;
		font-size: 12px;
		padding: 0.3rem 1.2rem 0.3rem 0.5rem;
	}
	.cthumbnail h4 {
		margin-top: 0.8rem;
	}
	.cthumbnail p {
		font-size: 0.7rem;
		line-height: 1.2rem;
	}

.mthumbnail {
	margin-bottom: 4rem;
}
	.mthumbnail h4 {
		margin-top: 0.8rem;
		font-size: 1.2rem;
	}
	.mthumbnail p {
		font-size: 0.8rem;
	}

.teambox {
	margin-bottom: 1.6rem;
}
	.teambox h4 {
		font-size: 0.8rem;
		margin-top: 1rem;
	}
	.teambox p {
		font-size: 0.7rem;
		line-height: 1.1rem;
		margin: 0.3rem 0;
		color: #75726D;
	}

.articlelist {
	margin-bottom: 2.4rem;
}
	.articlelist .articlethumbnail {
		display: block;
		float: left;
		margin-right: 1.6rem;
	}
	.articlelist h4 {
		font-size: 1.2rem;
	}
	.articlelist h4 a {
		color: inherit;
	}
	.articlelist h4 a:hover, .articlelist h4 a:active {
		color: #1CAD5A;
	}
	.articlelist p {
		color: #75726D;
		margin-top: 1.6rem;
	}
	.articlelist p.info {
		margin-top: 2.4rem;
	}

.wrapper.mapbox {
	height: 24rem;
	background: url(./img/map.svg) center center no-repeat;
	background-size: cover;
	margin-bottom: 1.4rem;
}


form.comment-form input, form.comment-form textarea {
	width: 100%;
	margin-bottom: 1.4rem;
	font-weight: bold;
}
form.comment-form input {
	height: 3.6rem;
	line-height: 3.6rem;
	font-size: 1.2rem;
	padding: 0 1rem;
}
form.comment-form textarea {
	height: 8.6rem;
	font-size: 0.8rem;
	line-height: 1.6rem;
	padding: 1rem;
}
form.comment-form textarea::-webkit-input-placeholder { /* Chrome */
	font-size:1.2rem;
}
form.comment-form textarea:-ms-input-placeholder { /* IE 10+ */
	font-size:1.2rem;
}
form.comment-form textarea::-moz-placeholder { /* Firefox 19+ */
	font-size:1.2rem;
}
form.comment-form textarea:-moz-placeholder { /* Firefox 4 - 18 */
	font-size:1.2rem;
}
form.comment-form .action {
	margin: 0;
}

h3#reply-title {
	background: none;
}

ul.category {
	font-size: 0.7rem;
}
ul.category li {
	display: inline-block;
	margin-bottom: 1rem;
}
ul.category li a {
	color: inherit;
	display: block;
	padding: 0.5rem 1rem;
	border-radius: 1rem;
}
/*ul.category li a:hover, ul.category li a:active {
	color: #1CAD5A;
}*/
ul.category li.current-cat a{
	background-color: #2D89E3;
	color: #FFFFFF;
}

ul.tabmenu {
	display: table-row;
	font-weight: 300;
	font-size: 0.8rem;
}
	ul.tabmenu li {
		display: table-cell;
		padding: 0.3rem 5rem 0.6rem 0.7rem;
		border-left: 1px solid #E5E5E5;
	}
	ul.tabmenu img {
		display: block;
		margin: 0 0 1.4rem 0;
		width: 2.4rem;
		height: 2.4rem;
		opacity: 0.8;
	}
	ul.tabmenu a {
		color: #75726D;
		padding-bottom: 0.2rem;
		display: block;
	}
	/*ul.tabmenu a:hover, ul.tabmenu a:active {
		color: #282624;
	}*/
	ul.tabmenu a:hover img, ul.tabmenu a:active img {
		opacity: 1;
	}
	ul.tabmenu .current-page a {
		color: #282624;
		font-weight: bold;
		border-bottom: 4px solid #1A7EE0;
	}

img.avatar {
	border-radius: 50%;
}

.comment {
	margin: 0 0 2rem 0;
}
.comment-list .children {
	padding: 0 0 0 3.6rem;
}
.comment-meta {
	font-size: 0.7rem;
	line-height: 1.2rem;
}
.comment-meta .avatar {
	width: 2.8rem;
	height: 2.8rem;
	float: left;
	margin: 0 0.8rem 0 0;
}
.comment-meta strong {
	display: block;
	font-size: 0.8rem;
	margin-top: 0.2rem;
}
.comment-meta time {
	color: #9B9B9B;
	font-weight: 300;
}
.comment-content p {
	max-width: 48rem;
	font-size: 0.7rem;
	color: #75726D;
	padding: 0.2rem 0 0.2rem 3.6rem;
}

.must-log-in {
	margin: 3rem 0;
}
.cancel-reply-link {
	margin: 0.6rem 0;
}
.logged-in-as {
	display: block;
	text-align: right;
	height: 2rem;
}
.logged-in-as * {
	vertical-align: middle;
}

/* Pagination */
.pagination {
	font-size: 0.7rem;
}
	.pagination .left {
		float: left;
	}
	.pagination .right {
		float: right;
	}
	.pagination a {
		display: block;
		padding: 0.6rem;
	}

/* Slick Banner */
div.banner {
	width: 100%;
	height: 30rem;
}
	.banner .slick-dots {
		display: block;
		width: 100%;
		max-width: 1372px;
		padding: 0.4rem 1.2rem;
		margin: 0 auto;
		text-align: right;
	}
	.banner .slick-dots li {
		display: inline-block;
		margin-left: 4px;
		font-size: 0;
	}
	.banner .slick-dots li button {
		overflow: hidden;
		text-indent: -99px;
		width: 1.2rem;
		height: 4px;
		border: none;
		cursor: pointer;
		outline: 0;
		background-color: #CBCBCB;
	}
	.banner .slick-dots li.slick-active button {
		background-color: #31B469;
	}
	.banner .wrapper {
		padding: 9rem 1.2rem 0 1.2rem;
	}
	.banner .bannercon {
		width: 100%;
		height: 30rem;
		background: center center no-repeat;
		background-size: cover;
	}
		.bannercon h1 {
			max-width: 32rem;
			margin: 0.8rem 0;
		}
		.bannercon p {
			max-width: 24rem;
			margin: 0.8rem 0;
			font-size: 0.8rem;
			color: #75726D;
		}
		.bannercon.dark h1, .bannercon.dark p, .bannercon.dark p a {
			color: #FFFFFF;
		}
		.bannercon a {
			color: inherit;
		}
		.bannercon p a {
			color: #1A7EE0;
		}
		/*.bannercon a:hover, .bannercon a:active {
			color: #1CAD5A;
		}*/

	div.banner.bannerblog {
		height: 17.5rem;
	}
		.banner.bannerblog .wrapper {
			padding: 8rem 1.2rem 0 1.2rem;
		}
		.banner.bannerblog .bannercon {
			height: 17.5rem;
		}
		.banner.bannerblog .bannercon h1 {
			max-width: inherit;
			font-weight: 400;
		}
		.banner.bannerblog .bannercon p {
			width: 100%;
			font-size: 0.7rem;
		}
		.banner.bannerblog img.alignleft {
			width: 6rem;
			height: 6rem;
			border-radius: 3rem 3rem;
			margin: 0.2rem 2.8em 2em 0;
		}


.pace {
	-webkit-pointer-events: none;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.pace-inactive {
	display: none;
}

.pace .pace-progress {
	background: #1CAD5A;
	position: fixed;
	z-index: 2000;
	top: 0;
	right: 100%;
	width: 100%;
	height: 2px;
}


/*
* Responsive
*/

@media (max-width: 1439px) {
	html { font-size: 18px; }
	
	.body-bg {
		display: none;
	}

	section#sectionPageInfo ul li {
		padding-right: 14%;
	}
}
@media (max-width: 960px) {

	section#sectionClient .client {
		height: 5rem;
	}
	section#sectionCon img {
		max-width: 100%;
		height: auto;
	}

}
@media (max-width: 840px) {
	
	header {
		height: 3rem;
		line-height: 3rem;
	}
	header a.logo, header.offset a.logo {
		width: 2rem;
		height: 2rem;
		background-image: url(./img/logo_mini.svg);
		background-size: 2rem 2rem;
	}
	header.dark .logo {
		background-image: url(./img/logo_white_mini.svg);
	}

	header a.btn_menu, header.offset a.btn_menu {
		display: inline-block;
		text-indent: -99rem;
		width: 2rem;
		height: 2rem;
		padding: 0;
		margin: -0.2rem 0 0 0.5rem;
		-webkit-mask-image: url(./img/ic_menu.svg);
		mask-image: url(./img/ic_menu.svg);
		-webkit-mask-size: 2rem 2rem;
		mask-size: 2rem 2rem;
		background-color: #282624;
		border:1px solid red;
	}
	header.dark .btn_menu {
		background-color: #FFFFFF;
	}

	header .menu {
		display: none;
		max-height: 20rem;
		overflow: hidden;
		font-size: 1rem;
		background-color: rgba(255,255,255,0.98);
		color: #282624;
		position: absolute;
		margin: 0;
		width: 100%;
		top: 3rem;
		left: 0;
		transition: all .2s ease;
	}
	header .menu.close {
		max-height: 0;
	}
	header .menu li {
		display: block;
		padding: 0;
		background-position: 4rem 1rem;
	}
	header .menu li a {
		display: block;
		padding: 0.2rem 0 0.2rem 3.5rem;
		width: 100%;
	}

	div.banner, .banner .bannercon {
		height: 24rem;
	}
	.banner .wrapper,
	.banner.bannerblog .wrapper {
		padding-top: 4.2rem;
	}
	div.banner.bannerblog,
	div.banner.bannerblog .wrapper,
	div.banner.bannerblog .bannercon {
		height: auto;
	}

	section.panel {
		margin-top: 3rem;
	}
	
	section#sectionPageTitle,
	section.posttitle {
		margin-top: 5rem;
	}
	section#sectionService {
		margin-top: 3rem;
	}
	section#sectionService .boxflex,
	section#sectionWorks .boxflex {
		width: 100%;
		margin-bottom: 1rem;
	}
	section#sectionService .cbox {
		height: auto;
		padding: 1.6rem;
		background-position: left bottom;
	}
	section#sectionWorks .pbox {
		padding: 1.6rem;
	}
	section#sectionWorks .pbox h4 {
		font-size: 1.6rem;
		padding: 0 0 1rem 0;
		background-position: right top;
	}
	section#sectionWorks .pbox p {
		margin: 0 0 1rem 0;
	}
	section#sectionWorks .pbox ul {
		margin: 0;
	}
	section#sectionWorks .pbox .button {
		margin-top: 1rem;

		text-align: center;
	}

	section#sectionClient .boxflex,
	section#sectionTeam .boxflex {
		width: 25%;
	}
	
	section#sectionArticle .boxflex {
		width: 100%;
	}
	.cthumbnail {
		margin-bottom: 2.4rem;
	}
	.cthumbnail img {
		width: 50%;
		float: left;
		margin: 0 1rem 1rem 0;
	}
	.cthumbnail h4 {
		margin: 0;
		overflow: inherit;
		white-space: inherit;
	}
	.cthumbnail p {
		font-size: 0.8rem;
		line-height: 1.4rem;
	}

	section#sectionPageInfo ul li {
		padding-right: 8%;
	}

	.articlelist .articlethumbnail {
		width: 50%;
		margin-right:0.8rem;
	}
	.articlelist .articlethumbnail img {
		width: 100%;
		height: auto;
	}
	.articlelist .articlecon p {
		margin-top: 0.8rem;
	}

	.comment-list .children {
		padding-left: 2rem;
	}
	.logged-in-as {
		text-align: left;
	}
	
	footer {
		margin-bottom: 2rem;
	}
	footer .wrapper dd {
		float: none;
		width: 100%;
		margin-top: 1rem;
	}

}
@media (max-width: 600px) {

	section#sectionClient .boxflex,
	section#sectionTeam .boxflex  {
		width: 33%;
	}
	
	section#sectionPageInfo ul li {
		padding-right: 1rem;
		width: 40%;
	}
	
}
@media (max-width: 480px) {
	html { font-size: 14px; }
	p {
		font-size: 1rem;
		line-height: 1.9rem;
	}

	header {
		height: 3.5rem;
		line-height: 3.5rem;
	}
	header .menu {
		font-size: 1.1rem;
	}

	.banner .wrapper {
		display: block;
		height: 19.7rem;
		overflow: hidden;
	}
	div.banner, .banner .bannercon {
		height: 21rem;
		background-position: left center;
	}
	.bannercon p {
		font-size: 1rem;
		line-height: 1.9rem;
		width: 100%;
	}
	div.bannercon img {
		display: none;
	}
	
	section#sectionWorks .button,
	section#sectionWorks ul,
	section#sectionWorks p {
		font-size: 1rem;
		line-height: 1.9rem;
	}
	section#sectionWorks .pbox .button {
		width: 100%;
	}
	section#sectionClient .client {
		height: 4rem;
	}

	.cthumbnail {
		
	}
	.cthumbnail img {
		width: 100%;
		float: none;
		margin: 0;
	}
	.cthumbnail h4 {
		margin: 0.5rem 0;
		overflow: hidden;
		white-space: nowrap;
		font-size: 1.2rem;
	}
	.cthumbnail p {
		font-size: 1rem;
		line-height: 1.9rem;
		margin: 0;
	}

	section#sectionListCon .boxflex {
		width: 100%;
	}
	section#sectionListCon p,
	.pagination,
	.comment-content p {
		font-size: 1rem;
		line-height: 1.9rem;
	}

	.articlelist .articlethumbnail {
		width: 100%;
		float: none;
		margin: 0;
	}
	.articlelist .articlethumbnail img {
		width: 100%;
		height: auto;
	}
	.articlelist h4 {
		margin-top: 0.8rem;
	}
	.articlelist .articlecon p {
		margin-top: 0.8rem;
	}

	section#sectionCon p,
	section#sectionCon ul,
	section#sectionCon ol {
		font-size: 1.1rem;
		line-height: 2.1rem;
	}
	section#sectionInfo {
		font-size: 1rem;
	}
	
	.comment-list .children {
		padding-left: 1rem;
	}
	.comment-meta {
		font-size: 0.9rem;
	}
	.comment-meta strong {
		font-size: 1rem;
	}
	.logged-in-as {
		height: 2.5rem;
	}

	#respond .boxflex {
		width: 100%;
	}

	.tagbox {
		font-size: 1rem;
	}
	.tag-cloud-link {
		white-space: nowrap;
	}

	ul.category {
		font-size: 1rem;
	}
	ul.tabmenu {
		font-size: 1rem;
	}
	ul.tabmenu li {
		padding-right: 2rem;
	}

	footer dd {
		font-size: 0.8rem;
		line-height: 1.9rem;
	}
	

}


del {
	color: #E5E5E5;
}
code,
kbd,
tt,
var,
samp,
pre {
	font-family: Inconsolata, monospace;
	background-color: #F5F5F5;
	padding: 0.1rem;
}
blockquote {
	border-left: 4px solid #1CAD5A;
	font-style: italic;
	margin: 0 0 35px -21px;
	padding: 0.4rem 0.4rem 0.4rem 17px;
	background-color: #F5F5F5;
}

blockquote > blockquote {
	margin-left: 0;
}

blockquote > p:last-child {
	margin-bottom: 0!important;
}

blockquote cite,
blockquote small {
}

blockquote em,
blockquote i,
blockquote cite {
	font-style: normal;
}

blockquote strong,
blockquote b {
	font-weight: 400;
}

address {
	font-style: italic;
	margin: 0 0 28px;
}



.slideInTop {
	animation: slideInTop .2s ease;
}
.slideInLeft {
	animation: slideInLeft .2s ease;
}

@keyframes slideInTop {
	from {
		transform: translateY(-100px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes slideInLeft {
	from {
		transform: translateX(-50px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/**
 * 8.0 Alignments
 */

.alignleft {
	display: inline;
	float: left;
}

.alignright {
	display: inline;
	float: right;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

blockquote.alignleft,
.wp-caption.alignleft,
img.alignleft {
	margin: 0.4em 1.6em 1.6em 0;
}

blockquote.alignright,
.wp-caption.alignright,
img.alignright {
	margin: 0.4em 0 1.6em 1.6em;
}

blockquote.aligncenter,
.wp-caption.aligncenter,
img.aligncenter {
	clear: both;
	margin-top: 0.4em;
	margin-bottom: 1.6em;
}

.wp-caption.alignleft,
.wp-caption.alignright,
.wp-caption.aligncenter {
	margin-bottom: 1.2em;
}