/*
	Copyright 2020 Raonbnp
	http://raonbnp.com, http://raonwebstore.com
*/
@charset "UTF-8";
@import '/_css/common.css'; /* front, admin 공통*/
@import '/_css/member.css'; /* front member 공통*/
@import '/_css/board.css'; /* front member 공통*/
@import 'loading.css';
@import 'fontSet.css';
@import 'basic.css';
@import 'layout.css';


/* 인사말 */
.sub0101 .sec02 {
	padding:12rem 0;
	background:#f5f5f5;
}
.sub0101 .sec02 h3 {
	font-size:3.4rem;
	font-weight:600;
	color:#222;
	text-align:center;
}
.sub0101 .sec02 h3.sky {
	color:#9ad8fc;
}
.sub0101 .sec02 h3.blue {
	color:#0073c6;
}
.sub0101 .sec02 .top .box {
	height:100%;
	box-sizing:border-box;
	padding:6rem 2rem;
	border:1px solid #ddd;
	box-shadow:5px 10px 15px rgba(0,0,0,0.05);
	background:#fff;
	text-align:center;
	border-radius:2rem;
	font-size:2rem;
	color:#222;
}
.sub0101 .sec02 .top .box p {
	margin-top:2rem;
}
.sub0101 .sec02 .btm {
	margin-top:12rem;
}
.sub0101 .sec02 .value {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:5rem;
	margin-top:6rem;
}
.sub0101 .sec02 .value > .won {
	width:calc(20% - 5rem);
}
.sub0101 .sec02 .value > .won > .inner {
	text-align:center;
	height:100%;
}
.sub0101 .sec02 .value > .won > .inner > .icon {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	padding-bottom:100%;
	background:#fff;
	border:1px solid #ddd;
	box-shadow:5px 10px 15px rgba(0,0,0,0.05);
	border-radius:50%;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto;
}
.sub0101 .sec02 .value > .won > .inner > .icon:after {
	content: "\e913";
	font-family:"xeicon";
	font-size:3rem;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:-4rem;
}
.sub0101 .sec02 .value > .won:last-child > .inner > .icon:after {
	display:none;
}
.sub0101 .sec02 .value > .won > .inner > .txt {
	font-size:1.8rem;
	color:#222;
}
.sub0101 .sec02 .value > .won > .inner > .txt > h4 {
	font-size:2.4rem;
	font-weight:600;
	color:#0073c6;
	margin-top:2rem;
}
.sub0101 .sec02 .value > .won > .inner > .txt > p {
	margin-top:1.5rem;
}
@media (max-width: 1199.98px) {
	.sub0101 .sec02 h3 {
		font-size:3rem;
	}
	.sub0101 .sec02 .top .box {
		padding:4rem 2rem;
		border-radius:1rem;
		font-size:1.8rem;
	}
	.sub0101 .sec02 .top .box p {
		margin-top:1rem;
	}
	.sub0101 .sec02 .btm {
		margin-top:8rem;
	}
	.sub0101 .sec02 .value {
		gap:3rem;
		margin-top:4rem;
	}
	.sub0101 .sec02 .value > .won {
		width:calc(20% - 3rem);
	}
	.sub0101 .sec02 .value > .won > .inner {
		text-align:center;
		height:100%;
	}
	.sub0101 .sec02 .value > .won > .inner > .icon:after {
		font-size:2rem;
		right:-2.5rem;
	}
	.sub0101 .sec02 .value > .won > .inner > .icon {
		background-size:40%;
	}
	.sub0101 .sec02 .value > .won > .inner > .txt {
		font-size:1.6rem;
	}
	.sub0101 .sec02 .value > .won > .inner > .txt > h4 {
		font-size:2rem;
		margin-top:1rem;
	}
	.sub0101 .sec02 .value > .won > .inner > .txt > p {
		margin-top:1rem;
	}
}
@media (max-width: 991.98px) {
	.sub0101 .sec02 {
		padding:6rem 0 8rem;
	}
	.sub0101 .sec02 h3 {
		font-size:2.4rem;
	}
	.sub0101 .sec02 .top .box {
		padding:3rem 2rem;
	}
	.sub0101 .sec02 .top .row > div[class^='col-']:first-child {
		margin-bottom:1rem;
	}
	.sub0101 .sec02 .btm {
		margin-top:6rem;
	}
	.sub0101 .sec02 .value {
		gap:2rem;
	}
	.sub0101 .sec02 .value > .won {
		width:100%;
	}
	.sub0101 .sec02 .value > .won > .inner {
		text-align:left;
		height:auto;
		display:flex;
		align-items:center;
	}
	.sub0101 .sec02 .value > .won > .inner > .icon {
		width:18rem;
		padding-bottom:18rem;
	}
	.sub0101 .sec02 .value > .won > .inner > .icon:after {
		display:none;
	}
	.sub0101 .sec02 .value > .won > .inner > .txt {
		width:calc(100% - 18rem);
		box-sizing:border-box;
		padding-left:4rem;
		font-size:1.6rem;
	}
	.sub0101 .sec02 .value > .won > .inner > .txt > h4 {
		font-size:2rem;
		margin-top:1rem;
	}
	.sub0101 .sec02 .value > .won > .inner > .txt > p {
		margin-top:1rem;
	}
}
@media (max-width: 575.98px) {
	.sub0101 .sec02 {
		padding:6rem 0 12rem;
	}
	.sub0101 .sec02 .btm {
		margin-top:4rem;
	}
	.sub0101 .sec02 .value {
		margin-top:3rem;
	}
	.sub0101 .sec02 .value > .won > .inner > .icon {
		width:12rem;
		padding-bottom:12rem;
	}
	.sub0101 .sec02 .value > .won > .inner > .txt {
		width:calc(100% - 12rem);
		padding-left:2rem;
	}
}