/*family page 
-------------------------------------------------------*/
.family-page .main-content {
	width: 1310px;
	margin: auto;
}
/*main-header*/
.family-page .main-header {
	height: 700px;
	position: relative;
}
/*.family-page .main-header:after {
	content: '';
	width: 100%;
	display: block;
	height: 6px;
	background-color: rgb(255,164,42);
}*/
.family-page .main-header img.header-background {
	width: 100%;
	height: 700px;
	object-fit: cover;
}
.family-page .main-header img.overlay-img {
	height: 35%;
	object-fit: contain;
	position: absolute;
	top: 15%;
}
.family-page .main-header .header-text {
	height: 45%;
	padding: 20px;
	position: absolute;
	bottom: 0;
	background-color: rgba(0,0,0,.5);
	color: white;
}
.family-page .main-header .header-text .inner-text {
	width: 96%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.family-page .main-header .header-text h2 {
	font-size: 40px;
	font-weight: bold;
}
@media only screen and (max-width: 767px) {
	.family-page .main-header .header-text h2 {
		margin-bottom: 0;
	}
}
/*-------------------------------------------
				customize headers
				overlay-img & header-text
---------------------------------------------*/
.family-page .main-header img.overlay-img.left {
	left: calc((100% - 1310px) / 2 + 40px) ;
}
.family-page .main-header img.overlay-img.right {
	right: calc((100% - 1310px) / 2 + 40px);
}
.family-page .main-header img.overlay-img.center {
	left: 50%;
	transform: translateX(-50%);
}
.family-page .main-header .header-text.left {
	width: calc(1310px / 2);
	left: calc((100% - 1310px) / 2);
} 
.family-page .main-header .header-text.right {
	width: calc(1310px / 2);
	right: calc((100% - 1310px) / 2);
} 
.family-page .main-header .header-text.center {
	width: 1310px;
	left: 50%;
	transform: translateX(-50%);
} 
@media only screen and (max-width: 1419px) {
	.family-page .main-header img.overlay-img.left {
		left: calc((100% - 1130px) / 2 + 40px) ;
	}
	.family-page .main-header img.overlay-img.right {
		right: calc((100% - 1130px) / 2 + 40px);
	}
	.family-page .main-header .header-text.left {
		width: calc(1130px / 2);
		left: calc((100% - 1130px) / 2);
	} 
	.family-page .main-header .header-text.right {
		width: calc(1130px / 2);
		right: calc((100% - 1130px) / 2);
	} 
	.family-page .main-header .header-text.center {
		width: 1130px;
	} 
	.family-page .main-header .header-text h2 {
		font-size: 34px;
	}
}
@media only screen and (max-width: 1199px) {
	.family-page .main-header {
		height: 420px;
	}
	.family-page .main-header img.header-background {
		height: 420px;
	}
	.family-page .main-header img.overlay-img.left {
		left: 5%;
	}
	.family-page .main-header img.overlay-img.right {
		right: 5%;
	}
	.family-page .main-header .header-text {
		padding: 10px;
	}
	.family-page .main-header .header-text.left {
		width: 65%;
		left: 0;
	} 
	.family-page .main-header .header-text.right {
		width: 65%;
		right: 0;
	} 
	.family-page .main-header .header-text.center {
		width: 100%;
	} 
	.family-page .main-header .header-text h2 {
		font-size: 24px;
	}
}
@media only screen and (max-width: 999px) {
	.family-page .main-header .header-text h2 {
		font-size: 22px;
	}
}
@media only screen and (max-width: 767px) {
	.family-page .main-header {
		height: 206px;
	}
	.family-page .main-header img.header-background {
		height: 206px;
	}
	.family-page .main-header img.overlay-img.left {
		left: 1%;
	}
	.family-page .main-header img.overlay-img.right {
		right: 1%;
	}
	.family-page .main-header .header-text {
		padding: 15px;
	}
	.family-page .main-header .header-text.left {
		width: 100%;
	} 
	.family-page .main-header .header-text.right {
		width: 100%;
	} 
	.family-page .main-header:after {
		height: 3px;
	}
	.family-page .desktop-hidden .header-description {
		display: block;
		padding: 25px 15px;
		background-color: black;
		color: white;
	}
}
/*---------------------------------------------*/
@media only screen and (min-width: 768px) {
  .family-page .overview, .family-page .custom-area1,
  .family-page .custom-area3, .family-page .row {
    width: 718px;
  }
}
@media only screen and (min-width: 1000px) {
  /* line 67, ../scss/layout/_container.scss */
  .family-page .overview, .family-page .custom-area1,
  .family-page .custom-area3, .family-page .row {
    width: 950px;
  }
}
@media only screen and (min-width: 1200px) {
  .family-page .overview, .family-page .custom-area1,
  .family-page .custom-area3, .family-page .row {
    width: 1130px;
  }
}
@media only screen and (min-width: 1420px) {
  .family-page .overview, .family-page .custom-area1,
  .family-page .custom-area3, .family-page .row {
    width: 1310px;
  }
}
.family-page .overview, .family-page .custom-area1,
.family-page .custom-area3, .family-page .row {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  max-width: 100%;
}
.left {
	float: left;
	width: 50%;
	padding-left: 30px;
}
.right {
	float: right;
	width: 50%;
}
.left img, .right img {
	margin: auto;
	width: 480px;
	height: 280px;
	object-fit: contain;
}
@media only screen and (max-width: 1199px) {
	.left img, .right img {
		width: 350px;
		height: 205px;
	}
}
@media only screen and (max-width: 767px) {
	.left, .right {
		float: none;
		width: 100%;
		padding: 0 15px;
	}
	.left img, .right img {
		width: 290px;
		height: 170px;
	}
}
/*---------------------------------------------
overview*/
.family-page .overview {
	overflow: auto;
	padding: 70px 0;
}
.family-page h3 {
	font-size: 28px;
	margin-bottom: 10px;
}
.family-page .overview .left {
	min-height: 280px;
}
.family-page .quotation {
	float: right;
}
.family-page .quotation p {
	display: block;
	background-color: rgb(255,164,42);
	padding: 5px 15px;
	color: white;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 7px;
}
.family-page .quotation .sentence1 {
	transform-origin:right bottom;
	transform:rotate(-1.5deg);
}
.family-page .quotation .sentence2 {
	transform-origin:right bottom;
	transform:translateX(-30px);
}
.family-page .overview .quotation .publisher {
	float: right;
	transform:rotate(-2.5deg)translateX(60px);
}
@media only screen and (max-width: 1199px) {
	.family-page .overview {
		padding: 50px 0;
	}
	.family-page .overview .left {
		min-height: 200px;
	}
	.family-page h3 {
		font-size: 22px;
		margin-bottom: 7px;
	}
}
@media only screen and (max-width: 767px) {
	.family-page .overview {
		padding: 20px 0;
	}
	.family-page .overview .left {
		overflow: auto;
	}
	.family-page .quotation {
		margin: 10px 30px 10px 0;
	}
	.family-page .quotation p {
		font-size: 14px;
		padding: 5px 10px;
	}
	.family-page .overview .quotation .publisher {
		float: none;
		display: inline-block;
	}
}
/*---------------------------------------------
block area*/
.family-page .block-area {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	width: 100%;
	margin: 100px 0;
}
.family-page .block-area .block.total3 {
	flex: 0 1 386px;
	position: relative;
	height: 230px;
	margin-right: 20px;
}
.family-page .block-area .block.total3:last-child {
	margin-right: 0;
}
.family-page .block-area .block.total2 {
	flex: 0 1 595px;
	position: relative;
	height: 300px;
}
.family-page .block-area .block.total2:nth-child(1) {
	margin-right: 20px;
}
.family-page .block-area .block.total1 {
	flex: 0 1 1220px;
	position: relative;
	height: 400px;
	margin-right: 0;
}
.family-page .block-area .block.total3:after {
	content: '';
	display: block;
	background-color: black;
	opacity: .6;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}
.family-page .block-area .block.total2:after,
.family-page .block-area .block.total1:after {
	content: '';
	display: block;
	background-color: black;
	opacity: .6;
	width: 100%;
	height: 45%;
	position: absolute;
	bottom: 0;
}
.family-page .block-area .block.total1:after {
	height: 30%;
}
.family-page .block-area .block img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.family-page .block-area .block .block-text {
	position: absolute;
	color: white;
	z-index: 1;
}
.family-page .block-area .block.total3 .block-text {
	top: 0;
	padding: 20px;
}
.family-page .block-area .block.total2 .block-text {
	height: 45%;
	bottom: 0;
	padding: 10px 15px;
}
.family-page .block-area .block.total1 .block-text {
	height: 30%;
	bottom: 0;
	padding: 10px 15px;
}
.family-page .block-area .block .block-text .block-title {
	padding-top: 0;
}
.family-page .block-area .block a {
	position: absolute;
	bottom: -39px;
	right: 0;
}
@media only screen and (max-width: 1199px) {
	.family-page .block-area {
		margin: 40px 0 60px 0; 
	}
	.family-page .block-area .block.total3 {
		flex-basis: 234px;
		height: 160px;
	}
	.family-page .block-area .block.total2 {
		flex-basis: 355px;
		height: 300px;
	}
	.family-page .block-area .block.total1 {
		flex-basis: 735px;
		height: 240px;
	}
	.family-page .block-area .block.total1:after {
		height: 45%;
	}
	.family-page .block-area .block.total1 .block-text {
		height: 45%;
	}
	.family-page .block-area .block.total3 .block-text {
		padding: 10px;
	}
	.family-page .block-area .block.total3 .block-text h3 {
		font-size: 18px;
	}
	.family-page .block-area .block.total3 .block-text p {
		font-size: 12px;
	}
}
@media only screen and (max-width: 767px) {
	.family-page .block-area {
		display: block;
		margin: 20px 0;
	}
	.family-page .block-area .block {
		margin-bottom: 70px;
		margin-right: 0 !important;
	}
	.family-page .block-area .block.total3 {
		height: 200px;
	}
	.family-page .block-area .block.total2, 
	.family-page .block-area .block.total1 {
		height: 300px;
	}
	.family-page .block-area .block.total3 .block-text {
		position: absolute;
		top: 50%;
		transform: translateY(-50%); 
	}
	.family-page .block-area .block a {
		bottom: -38px;
		right: 0;
	}
}
@media only screen and (max-width: 360px) {
	.family-page .block-area .block.total2:after, 
	.family-page .block-area .block.total1:after {
		height: 60%;
	}
	.family-page .block-area .block.total2 .block-text,
	.family-page .block-area .block.total1 .block-text {
		height: 60%;
	}
}
/*---------------------------------------------
row*/
.family-page .row {
	margin-top: 60px;
	margin-bottom: 100px;
}
.family-page .row h3 {
	font-size: 28px;
	font-weight: bold;
}
@media only screen and (max-width: 1199px) {
	.family-page .row .left img, 
	.family-page .row .right img {
		width: 290px;
		height: 170px;
	}
	.family-page .row h3 {
		font-size: 22px;
	}
}
@media only screen and (max-width: 767px) {
	.family-page .row {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.family-page .row .left img, 
	.family-page .row .right img {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}
@media only screen and (max-width: 360px) {
	.family-page .row .left img, 
	.family-page .row .right img {
		width: 100%;
	}
}