@charset "UTF-8";
/*
 * security.css
 *
 */

/* !保安法人1
---------------------------------------------------------- */
.security1 {
	width:100%;
	padding:120px 50px 150px 50px;
}
	.security1 div.inner {
		width:100%;
		max-width:1100px;
		margin:0 auto;
		display: flex;
		flex-wrap: wrap;
	}
		.security1 div.inner h2 {
			width:100%;
			font-size:40px;
			font-weight: 700;
			color: #21A6D8;
			text-align: center;
			line-height: 1.6;
			margin-bottom:80px; 
		}
		.security1 div.inner div.left {
			width:40%;
		}
			.security1 div.inner div.left h3 {
				font-size:28px;
				font-weight: 700;
				color: #26353D;
				line-height: 1.6;
				letter-spacing: 0.04em;
				padding-left:0.8em;
				position: relative;
			}
				.security1 div.inner div.left h3:before {
					position: absolute;
					content: "";
					width:3px;
					height: 100%;
					background-color: #21A6D8;
					top:0;
					left:0;
					transform: rotate(20deg);
				}
		.security1 div.inner div.right {
			width:60%;
		}
			.security1 div.inner div.right ul.branch {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				margin-bottom: -10px;
			}
				.security1 div.inner div.right ul.branch li {
					font-size:20px;
					font-weight: 700;
					text-align: center;
					padding:0.4em 1.2em;
					background-color: #E0E6F4;
					border-radius: 4px;
					margin-right: 10px;
					margin-bottom: 10px;
				}
				.security1 div.inner div.right ul.branch li:last-child {
					margin-right: 0;
				}
					.security1 div.inner div.right ul.branch li i {
						margin-right: 0.6em;
						color: #21A6D8;
					}

@media screen and (max-width:1039px){
.security1 {
	padding:100px 30px 120px 30px;
}
		.security1 div.inner h2 {
			font-size:30px;
			margin-bottom:60px;
		}
			.security1 div.inner div.left h3 {
				font-size:24px;
			}
				.security1 div.inner div.right ul.branch li {
					min-width: 80px;
					padding:0.4em 0.8em;
				}
}

@media screen and (max-width:767px){
.security1 {
	padding:80px 25px 100px 25px;
}
		.security1 div.inner h2 {
			font-size:22px;
			margin-bottom:50px; 
		}
		.security1 div.inner div.left {
			width:100%;
			margin-bottom: 40px;
		}
			.security1 div.inner div.left h3 {
				font-size:20px;
			}
				.security1 div.inner div.left h3:before {
					width:2px;
				}
		.security1 div.inner div.right {
			width:100%;
		}
			.security1 div.inner div.right ul.branch {
				max-width: 280px;
				flex-wrap: wrap;
				margin: 0 auto;
			}
				.security1 div.inner div.right ul.branch li {
					width: 48%;
					min-width: auto;
					font-size:16px;
					padding:0.4em 0.4em;
					margin-right: 4%;
					margin-bottom: 10px;
				}
				.security1 div.inner div.right ul.branch li:nth-child(even) {
					margin-right: 0;
				}
}

/* !保安法人2
---------------------------------------------------------- */
.security2 {
	width:100%;
	padding:0 50px 150px 50px;
}
	.security2 div.inner {
		width:100%;
		max-width:1100px;
		margin:0 auto;
		display: flex;
		flex-wrap: wrap;
	}
		.security2 div.inner div.left {
			width:40%;
		}
			.security2 div.inner div.left h2 {
				font-size:28px;
				font-weight: 700;
				color: #26353D;
				line-height: 1.6;
				letter-spacing: 0.04em;
				padding-left:0.8em;
				position: relative;
			}
				.security2 div.inner div.left h2:before {
					position: absolute;
					content: "";
					width:3px;
					height: 100%;
					background-color: #21A6D8;
					top:0;
					left:0;
					transform: rotate(20deg);
				}
		.security2 div.inner div.right {
			width:60%;
		}
			.security2 div.inner div.right ul.menu {
				width:100%;
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 50px;
			}
				.security2 div.inner div.right ul.menu li {
					width:30%;
					font-size:20px;
					font-weight: 700;
					line-height: 1.6;
					text-align: center;
					padding:1em 0;
					background-color: #E0E6F4;
					border-radius: 4px;
					margin-right: 5%;
					margin-bottom: 10px;
				}
				.security2 div.inner div.right ul.menu li:nth-child(3n) {
					margin-right: 0;
				}
					.security2 div.inner div.right ul.menu li span {
						display: block;
						font-family: "Roboto", sans-serif;
						font-size:16px;
						font-weight: 700;
						color: #21A6D8;
						margin-bottom: 3px;
					}
			.security2 div.inner div.right ul.photo {
				width:100%;
				display: flex;
				justify-content: space-between;
			}
				.security2 div.inner div.right ul.photo li {
					width:48%;
				}
					.security2 div.inner div.right ul.photo li img {
						display: block;
						width:100%;
						border-radius: 12px;
						margin: 0 auto;
					}
			.security2 div.inner div.right h3.copy {
				font-size:32px;
				font-weight: 700;
				color: #21A6D8;
				line-height: 1.6;
				margin-bottom: 40px;
			}
			.security2 div.inner div.right ul.merit {
				width:100%;
				margin-bottom: 60px;
			}
				.security2 div.inner div.right ul.merit li {
					font-size:20px;
					font-weight: 700;
					line-height: 1.6;
					padding-left:30px;
					margin-bottom: 35px;
					position: relative;
				}
				.security2 div.inner div.right ul.merit li:last-child {
					margin-bottom: 0;
				}
					.security2 div.inner div.right ul.merit li:before {
						position: absolute;
						font-family: "Roboto", sans-serif;
						font-size:16px;
						font-weight: 700;
						color: #21A6D8;
						top:3px;
						left:0;
					}
					.security2 div.inner div.right ul.merit li:first-child:before {
						content:"01";
					}
					.security2 div.inner div.right ul.merit li:nth-child(2):before {
						content:"02";
					}
					.security2 div.inner div.right ul.merit li:nth-child(3):before {
						content:"03";
					}
					.security2 div.inner div.right ul.merit li span {
						display: block;
						font-size:16px;
						font-weight: 400;
						margin-left: 1em;
						margin-top: 10px;
					}
						.security2 div.inner div.right ul.merit li span i {
							margin-right: 0.6em;
							color: #21A6D8;
						}
			.security2 div.inner div.right img.fig01 {
				display: block;
				width:500px;
				margin: 0 auto;
			}

@media screen and (max-width:1039px){
.security2 {
	padding:0 30px 120px 30px;
}
			.security2 div.inner div.left h2 {
				font-size:24px;
			}
			.security2 div.inner div.right ul.menu {
				margin-bottom: 40px;
			}
				.security2 div.inner div.right ul.menu li {
					font-size:16px;
				}
					.security2 div.inner div.right ul.menu li span {
						font-size:14px;
					}
					.security2 div.inner div.right ul.photo li img {
						border-radius: 10px;
					}
			.security2 div.inner div.right h3.copy {
				font-size:24px;
				margin-bottom: 35px;
			}
			.security2 div.inner div.right ul.merit {
				margin-bottom: 50px;
			}
				.security2 div.inner div.right ul.merit li {
					font-size:18px;
					margin-bottom: 30px;
				}
					.security2 div.inner div.right ul.merit li:before {
						font-size:16px;
						top:2px;
					}
					.security2 div.inner div.right ul.merit li span {
						font-size:15px;
					}
}

@media screen and (max-width:767px){
.security2 {
	padding:0 25px 100px 25px;
}
		.security2 div.inner div.left {
			width:100%;
			margin-bottom: 40px;
		}
			.security2 div.inner div.left h2 {
				font-size:20px;
			}
				.security2 div.inner div.left h2:before {
					width:2px;
				}
		.security2 div.inner div.right {
			width:100%;
		}
			.security2 div.inner div.right ul.menu {
				max-width:280px;
				margin: 0 auto 40px auto;
			}
				.security2 div.inner div.right ul.menu li {
					width:48%;
					font-size:16px;
					padding:1.4em 0;
					margin-right: 4%;
				}
				.security2 div.inner div.right ul.menu li:nth-child(3n) {
					margin-right: 4%;
				}
				.security2 div.inner div.right ul.menu li:nth-child(even) {
					margin-right: 0;
				}
					.security2 div.inner div.right ul.menu li span {
						font-size:12px;
					}
			.security2 div.inner div.right ul.photo {
				max-width:320px;
				flex-wrap: wrap;
				margin: 0 auto;
			}
				.security2 div.inner div.right ul.photo li {
					width:100%;
					margin-bottom: 15px;
				}
				.security2 div.inner div.right ul.photo li:last-child {
					margin-bottom: 0;
				}
					.security2 div.inner div.right ul.photo li img {
						border-radius: 8px;
					}
			.security2 div.inner div.right h3.copy {
				font-size:20px;
				margin-bottom: 30px;
			}
			.security2 div.inner div.right ul.merit {
				margin-bottom: 40px;
			}
				.security2 div.inner div.right ul.merit li {
					font-size:16px;
					padding-left:25px;
					margin-bottom: 30px;
				}
					.security2 div.inner div.right ul.merit li br {
						display: none;
					}
					.security2 div.inner div.right ul.merit li:before {
						font-size:14px;
						top:2px;
					}
					.security2 div.inner div.right ul.merit li span {
						font-size:14px;
						margin-top: 10px;
						margin-left: 0;
					}
			.security2 div.inner div.right img.fig01 {
				width:100%;
				max-width:320px;
			}
}