.JC--about {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 100px;
}
.JC--headman--art {
    margin-bottom: 50px;
}
.JC--headman--art > h2 {
    color: #F2F7FF;
    font-size: 150px;
}
.JC--headman--art > h3 {
    color: var(--fire);
    font-size: 79px;
    font-weight: 700;
    padding-left: 135px;
    margin-top: -75px;
    z-index: 1;
}
.JOA--about--node {
    background-color: #F0F5FE;
    padding: 30px 20px;
    border-left: 2px solid var(--sea);
}
.JOA--about--node > p {
    font-size: 17px;
    line-height: 1.75;
}
.JOA--about--node > p:not(:last-child) {
    margin-bottom: 20px;
}
.JC--face {
    margin-top: 200px;
}
.JC--face--root {
	position: relative;
	background-color: var(--sea);
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	height: 726px;
}
.JC--face--1 {
    position: absolute;
    color: var(--cream);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-left: 350px;
    padding-top: 55px;
    -webkit-transition: opacity 1500ms ease-in-out;
    -o-transition: opacity 1500ms ease-in-out;
    transition: opacity 1500ms ease-in-out;
    z-index: -1;
}
.JC--F--box--hero{
	z-index: 1;
}
.JC--face--1 > h2 {
    color: var(--soft);
    font-size: 65px;
}
.JC--face--1 > p {
    font-size: 19px;
    font-weight: 300;
    max-width: 800px;
    margin-top: 20px;
    margin-bottom: 40px;
    line-height: 1.75;
}
.property {
    background-color: var(--soft);
    color: var(--sea);
    width: 200px;
    height: 50px;
    font-size: 19px;
    display: inline-block;
    text-align: center;
    line-height: 52px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.property--2 {
    margin-top: 50px;
}
.JC--face--1 > span {
    font-size: 19px;
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-weight: 300;
	display: block;
}
.JC--face--1 > .JC--know--how{
	font-weight: 700;
}
.email {
    font-size: 19px;
    letter-spacing: 1px;
    font-weight: 300;
}
.JC--face--tree {
    background-image: url(../front/images/pattern.png);
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    background-color: var(--sea);
    padding-top: 50px;
}
.JC--F--arrow {
    margin-right: 100px;
}
.JC--F--arrow > span {
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 1px solid #dde7fb;
    padding: 22px;
    cursor: pointer;
    -webkit-transition: background-color 400ms ease-in-out;
    -o-transition: background-color 400ms ease-in-out;
    transition: background-color 400ms ease-in-out;
}
.JC--F--arrow > span:hover {
    background-color: #c2d3f3;
}
.JC--F--arrow > span:hover svg * {
    fill: var(--cream);
}
@media screen and (max-width: 1366px) {
	.JC--headman--art > h3 {
		font-size: 59px;
	}
	.JC--face--1 {
		padding-left: 100px;
	}
	.JC--face--1 > h2 {
		font-size: 55px;
	}
}
@media screen and (max-width: 1024px) {
	.JC--headman--art {
		padding-left: 40px;
	}
	.JC--headman--art > h2 {
		font-size: 90px;
	}
	.JC--headman--art > h3 {
		font-size: 45px;
		padding-left: 50px;
		margin-top: -40px;
	}
	.JC--face--1 > p {
		font-size: 17px;
		line-height: 1.5;
	}
}
@media screen and (max-width: 800px) {
	.JC--face--tree {
		background-image: none;
	}
	.JC--face--root {
		-ms-flex-preferred-size: 100%;
		flex-basis: 100%;
		height: 700px;
	}
	.JC--face--1 {
		padding-left: 25px;
		padding-right: 25px;
	}
}
@media screen and (max-width: 480px){
	.JOA--about--node {
		border-left: 0;
	}
	.JOA--about--node > p {
		font-size: 15px;
	}
	.JC--face {
		margin-top: 0;
	}
	.JC--face--1 {
		padding-top: 25px;
	}
	.JC--face--1 > h2 {
		font-size: 35px;
	}
	.JC--F--arrow > span {
		width: 70px;
		height: 70px;
	}
}
@media screen and (max-width: 414px){
	.JC--headman--art > h2 {
		font-size: 69px;
	}
	.JC--headman--art > h3 {
		font-size: 29px;
		padding-left: 25px;
	}
	.JC--face--root{
		height: 600px;
	}
}
@media screen and (max-width: 360px){
	.JC--face--1 > span {
		font-size: 17px;
	}
	.email {
		font-size: 17px;
		letter-spacing: 0;
	}
}