@charset "UTF-8";

#wrapper {
	background-image: url(../../images/about/bg_pic.jpg);
	background-position: calc((100vw - 2109px)/2) 216px;
	background-size : auto;
}
@media screen and (max-width: 1020px) {
	#wrapper {
		background-position: -547px 216px;
	}
}

#content .inner {
	max-width: 720px;
}
#content h2 {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}
#content h3 {
	font-size: 18px;
	text-align: center;
	border-bottom: 2px solid #c9b200;
}
#content li {
	margin-top: 20px;
}
#content li a {
	height: 87px;
	display: block;
	font-size: 16px;
	line-height: 87px;
	position: relative;
	border: 2px solid #d5d5d5;
	background: url(../images/link/bg_link.gif) no-repeat 0 0 #fff;
	background-size: 35px;
	-moz-background-size: 35px;
	-webkit-background-size: 35px;
}
#content li a:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	border-color: #c9b200;
}
#content li a:before {
	width: 0;
	height: 0;
	right: 0;
	bottom: 0;
	content: "";
	display: block;
	position: absolute;
	border: 16px solid transparent;
}
#content li a:hover:before {
	border-color: transparent #c9b200 #c9b200 transparent;
}
#content li a:after {
	right: 5px;
	bottom: 5px;
	content: "";
	width: 12px;
	height: 12px;
	display: block;
	position: absolute;
	border: solid #c9b200;
	border-width: 0 2px 2px 0;
}
#content li a:hover:after {
	border-color: #fff;
}
#content li a span {
	line-height: 1.5;
	display: inline-block;
	vertical-align: middle;
}
@media screen and (min-width: 769px) {
	#content {
		padding: 50px 0 100px;
	}
	#content h3 {
		margin-top: 32px;
	}
	#content ul:after {
		content: "";
		display: block;
		clear: both;
	}
	#content ul > li:nth-child(odd) { float: left; }
	#content ul > li:nth-child(even) { float: right; }
	#content li a {
		width: 304px;
		padding-left: 37px;
	}
}
@media screen and (max-width: 768px) {
	#content {
		padding: 40px 15px 100px;
		box-shadow: 0px -10px 15px -2px #ccc8c8;
	}
	#content li a {
		padding-left: 37px;
	}
}