@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

@font-face {
     font-family: 'S-CoreDream-6Bold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

body {
	background: url(/epa_area/assets/images/common/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.introWrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-content: center;
	align-items: stretch;
}

.introWrap div {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.introWrap div {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	overflow: hidden;
}

.introWrap div.tFlex {
	display: flex;
	height: 120px;
	align-items: center;
	justify-content: center;
}

.introWrap div.tFlex .logo > a img { 
	height: 30px;
}

.introWrap div.mFlex {
	display: flex;
	flex-direction: row;
	height: 720px;
	justify-content: center;
}

.introWrap div.mFlex div {
	position: relative;
	overflow: hidden;
	width: 720px;
	height: 720px;
	padding: 0px;
	background: #0b4d7e;
}

.introWrap div.mFlex div img {
  max-width: 100%;
  vertical-align: top;
}

.introWrap div.mFlex div h4 {
	position: absolute;
	top: 60px;
	left: 70px;
	font-size: 40px;
	color: #1f4466;
	font-family: 'S-CoreDream-3Light', sans-serif;	
	letter-spacing: -3px;
	line-height: 50px;
	text-align: left;
}

.introWrap div.mFlex div h4 span {
	display: block;
	font-size: 40px;
	font-family: 'S-CoreDream-6Bold', sans-serif;	
	color: #1f4466;
}

.introWrap div.mFlex div i {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  font-size: 60px;
  color: #000000;
  width: 120px;
  height: 120px;
  line-height: 120px;
  background: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -webkit-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.introWrap div.mFlex div a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}

.introWrap div.mFlex div.forestry {
  background-color: #2472a4;
}
.introWrap div.mFlex div.forestry i {
  color: #20638f;
}

.introWrap div.mFlex div.mount {
  background-color: #229955;
}
.introWrap div.mFlex div.mount i {
  color: #1e8449;
}

.introWrap div.mFlex div:hover img {
  opacity: 0.2;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.introWrap div.mFlex div:hover i {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.introWrap div.mFlex div:hover h4,
.introWrap div.mFlex div:hover h4 span {
	color: #FFF;
}

/* .introWrap div.mFlex div.forestry { background: url(/epa_area/assets/images/common/btn_bg01.png) no-repeat center center fixed; }
.introWrap div.mFlex div.mount { background: url(/epa_area/assets/images/common/btn_bg02.png) no-repeat center center fixed; } */

.introWrap div.bFlex {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aec4dd;
	font-size: 14px;
	font-family: 'NanumSquareRound', Sans-serif !important;
    letter-spacing: 0px;
	padding-top: 30px;
}