@charset "utf-8";
@import "common.css";

/*-----------------------------------------------
	technology_development
-----------------------------------------------*/
/* top */
.top{
	background:url(/assets/img/technology/img_top.jpg) center top no-repeat;
}
@media only screen and (min-width:1400px){
	.top{
		background-size:cover;
	}
}
@media only screen and (max-width:767px){
	.top{
		background-size:cover;
	}
}
/* top */
#main article .top .inner{
	max-width:1020px;
	margin:0 auto;
	padding-top:80px;
	color:#fff;
	text-align:center;
}
#main article .top h2{
	margin-bottom:44px;
	font-weight:bold;
	font-size:32px;
	line-height:50px;
}

/* figure */
.figure{
	width:100%;
	margin-bottom:38px;
	padding:83px 0 52px;
	background:url(/assets/img/technology/bg_figure.jpg) center top no-repeat;
}
.figure figure{
	position:relative;
	width:910px;
	margin:0 auto;

	text-align:center;
}
.figure img{
	margin-left:8px;
}
.figure li{
	position:absolute;
	max-width:270px;
	min-width:195px;
	padding:15px 14px 12px;
	border-radius:6px;
	box-shadow:16px 10px 10px rgba(103,200,207,0.16);
	background-color:rgba(255,255,255,0.8);
	font-size:16px;
	line-height:18px;
	text-align:center;
}
.figure .mgt1{
	top:-70px;
	left:550px;
	color:#f39100;
}
.figure .mgt2{
	top:60px;
	left:650px;
	color:#00abcd;
}
.figure .mgt3{
	top:392px;
	left:630px;
	color:#007e9e;
}
.figure .mgt4{
	top:400px;
	right:632px;
	color:#699a03;
}
.figure .mgt5{
	top:104px;
	right:690px;
	color:#eb3a3d;
}
@media only screen and (min-width:1400px){
	.figure{
		background-size:cover;
	}
}
@media only screen and (max-width:767px){
	.figure{
		margin-bottom:28px;
		padding:85px 0 60px;
		background-size:cover;
	}
	.figure figure{
		width:320px;
	}
	.figure img{
		width:302px;
		max-width:100%;
		height:auto;
		margin-left:4px;
	}
	.figure li{
		max-width:140px;
		min-width:89px;
		padding:7px;
		border-radius:4px;
		box-shadow:0 10px 10px rgba(103,200,207,0.16);
		background-color:rgba(255,255,255,0.8);
		font-size:7px;
		line-height:11px;
	}
	.figure .mgt1{
		top:-75px;
		left:150px;
	}
	.figure .mgt2{
		top: 10px;
		right:5px;
		left:inherit;
		width:82px;
	}
	.figure .mgt3{
		top:inherit;
		right:10px;
		bottom:-50px;
		left:inherit;
	}
	.figure .mgt4{
		top:inherit;
		right:inherit;
		bottom:-48px;
		left:10px;
	}
	.figure .mgt5{
		top:-55px;
		right:inherit;
		left:5px;
	}
}

/* contents */
.contents{
	text-align:center;
}
.contents .section{
	max-width:1400px;
	margin:0 auto 80px;
}
.contents h4{
	font-size: 33px;
	line-height:36px;
	font-weight: normal;
	margin-bottom: 15px;
	padding-bottom: 20px;
	position: relative;
	text-align:center;
}
.contents .sub{
	color:#EB8D00;
	font-size:16px;
	font-weight:bold;
	margin-bottom: 26px;
	text-align:center;
}
.contents p{
	margin-bottom:24px;
	font-size:16px;
	line-height:28px;
}
.business-info{
	padding-top: 63px;
}
.section .img{
	display:flex;
}
.section .img figure{
	width:50%;
}
.txt-block{
	width:960px;
	margin:0 auto 0;
}
.section.research .img figure{
	width:100%;
}
.section .img figcaption{
	width:100%;
	font-size:14px;
	line-height:26px;
	text-align:center;
}
.section .img > figure:first-of-type > figcaption{
	float:right;
}
.section .img > figure:last-of-type > figcaption{
	padding-left:48px;
}
.section.research .img > figure > figcaption{
	float:none;
	width:950px;
	margin:0 auto;
	padding-left:0;
}
@media only screen and (max-width:767px){
	.contents .section{
		margin-bottom:100px;
	}
	.contents .section:last-of-type{
		margin-bottom: 90px;
	}
	.contents h4{
		margin-bottom:4px;
		padding:0 14px;
		font-size:20px;
		line-height:30px;
	}
	.contents p{
		margin-bottom:4px;
		padding:0 14px;
		/*font-size:11px;
		line-height:18px;*/
	}
	.contents p br{
		display:none;
	}
	.section .img{
		display:block;
	}
	.section .img figure{
		position:relative;
		width:100%;
		height:260px;
	}
	.section .img figure img{
		position:absolute;
		top:0;
		left:50%;
		width:auto;
		height:225px;
		transform:translateX(-50%);
	}
	.section .img figcaption,
	.section.research .img > figure > figcaption{
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		padding:0 14px 4px;
		font-size:10px;
		line-height:14px;
		text-align:center;
	}
	.section .img > figure:first-of-type > figcaption{
		float:none;
	}
	.section .img > figure:last-of-type > figcaption{
		padding-left:0;
	}
.txt-block{
	width:100%;
}

}