@charset "utf-8";

/* ----------	main.css	----------------------*/

#topVisiual {	position: relative;	display: block;  width: 100%;  height: 600px;
  margin: 0 auto;  text-align: center;  overflow: hidden;}
#topVisiual .loader {	max-width:100%;  width: 100%;  height: 100%;	text-align: center;
	background:url(../images/mainimg03.jpg) no-repeat 0/cover;}
.icon-scroll {	position: absolute;	display: block;	bottom: 3%;	width: 100%;text-align: center;}
#topVisiual .icon-scroll a {	display: inline-block;	width: 25px;	height: 50px;
	left: 50%;	cursor:pointer;	transform: translateX(-50%);
	background:url(../img/main/icon_scroll.png) 0 0 no-repeat;}

.mainSection {width: 100%;margin: 0 auto;}
.mainSection2 {width: 90%;margin: 0 auto;}
p.txt, p.txt2, p.txt3{	font-size: 16.5px !important;	font-family: 'NanumSquare','Sans-serif';}

.bghave {	background:#f1f1f1;	height:auto;}
.bghave2 {background:#f1f1f1;	height:auto;}
.bghave3{	background:#BBCDCF;height:auto;}
.bgPatten {background:#f1f1f1 url(../img/main/bghave.jpg) 0 2px repeat;}
.main3h {height:873px;}

h2.tit {font-size: 30px;font-weight: normal;padding: 60px 0 30px 0;text-align: center;	color: #282b32;}
h2.tit:after{	content: '';	display: block;  margin: 0 auto;	width: 44px;  height: 1px;
  background-color: #00224b;  margin-top: 10px;}

h3.tit {font-size: 30px;font-weight: normal;padding: 60px 0 35px 0;text-align: center;color: #282b32;}
h4.tit {font-size: 24px;padding-bottom: 15px;	margin-bottom: 20px;	color: #00588A;	font-weight: bold;}
h4.tit::after{	content: '';	display: block;  margin: 0 auto;  width: 40px;  height: 1px;
  background-color: #00224b;  margin-top: 10px;}
h4.tit2 {position:absolute;top:320px;font-size:18px;font-weight:bold;color:#00588A;}
h4.tit3 {font-size:20px;color:#00588a;font-weight:bold;padding:20px 0 20px 0;}
p.txt {color: #262626;line-height: 1.8;}
p.txt1 {font-size:24px;height:50px;
	line-height:50px;text-align:center;color:#FFF;background-color:rgba(35,31,32,0.7);margin:0;padding:0;}
p.txt2 {position:absolute;	top:360px;	font-size:19px;margin:0;color:#272727;}
p.txt3 {font-size:16.5px;color:#272727;}
p.stxt{color:#666666;font-size:14.5px;margin:12px 0 0 0;}
p.stxt2 {	position: absolute;	top: 426px;	font-size: 15px;	color: #666;	letter-spacing: -0.5px}

.h9sub, .h2sub	{	width:100%;	font-size: 18px;font-family: 'NanumSquare','Sans-serif';text-align:center;color:#272727;}
.h9sub{	padding:24px 0 0 0;}
.h2sub{	padding:0px 0 45px 0;}
/* .line{width:44px;height:1px;margin:0 auto;text-align:center;background-color:#000;	margin-top: -20px;}	 */

#topVisiual > .eng{	position: absolute;	display:inline-block;	height: auto;	bottom: 10%; left: 5%;
	text-align: left;	color:#000;}
#topVisiual .eng1{ font-size: 90px;	font-weight: 900;	line-height: 1;	color: rgba(255,255,255,.75)}
#topVisiual .eng2{ font-size: 18px;}
#topVisiual .eng2 .eng2_01{	font-size: 22px;}
#topVisiual .eng2 .eng2_02{	font-size: 20px;}
#topVisiual .eng2 .eng2_b{	font-weight: bold;}

@media all and (max-width:1089px){
#topVisiual .eng1{	font-size: 4em;}
#topVisiual, #topVisiual .loader{height: 66.25vw;}
.topVisiual{	margin-top: 0;width: 100%;	height: 100%;	box-sizing: border-box;	margin: 0 auto;  }
.icon-scroll{	display:none;}
}
@media all and (max-width:768px){
#topVisiual, #topVisiual .loader{height: 96.25vw;}
h2.tit { padding: 30px 0 10px 0;}
#topVisiual .loader {	background:url(../images/mainimg03.jpg) no-repeat 0/cover;}
#topVisiual .eng1{	font-size: 1.5em;}
#topVisiual .eng2 .eng2_01, #topVisiual .eng2 .eng2_02{	font-size: 16.5px;	line-height: 1.1;}
.h9sub{	width: 80%;	margin: 0 auto;}
}

/*************/
#mainvisual {  position: absolute;  width: 100%; height: 100%;text-align: center;}
#mainvisual .mainimg {  position: absolute;  width: 100%;  height: 100%;
    overflow: hidden;  background: url(../images/mainimg03.jpg) no-repeat 0/cover;}
#topVisiual .maintext {  position: absolute;  top: 250px;  width: 100%;  text-align: center;}
#topVisiual .maintext .mtitle {  max-width: 1200px;  height: auto;  color: #fff;
  font-weight: bold;  font-size: 52px;  line-height: 70px;	padding: 0;  margin: 0 auto;
	text-shadow: 2px 2px 5px rgba(0,0,0,0.8);  transition: all 0.4s ease .0s;word-break: keep-all;}

.icon-scroll { position: absolute; left: calc(50% - 33px); top: 680px; width: 67px; height: 67px;
  text-align: center;}

@media all and (max-width:1089px){
#topVisiual .maintext {top: 50%;  transform: translateY(-50%);  vertical-align: middle;}
#mainsect{padding:0;}
}
@media all and (max-width:768px){
#topVisiual .maintext .mtitle{ font-size: 32.5px;}
}
/************/
#mainsect {  width: 100%;  padding: 10px 0 0 0;	font-family: 'NanumSquare', 'sans-serif';}
#mainsect .main01, #mainsect .main03 {  width: 100%;  padding: 50px 0;  background-color: #fff;}
#mainsect .main02, #mainsect .main04 {  width: 100%;  padding: 50px 0;  background-color: #f7f7f7;}

.box01 a, #mainsect .main02 ul li a, #mainsect ul li a{
  box-shadow: -1px 1px 10px -1px rgba(0,0,0,.2);
  -moz-box-shadow: -1px 1px 10px -1px rgba(0,0,0,.2);
  -webkit-box-shadow: -1px 1px 10px -1px rgba(0,0,0,.2);}

.box01{	position: relative;
  display: block;
  width: 100%;	height: auto;	margin: 0 auto;
  /* padding: 5px; */
  overflow: hidden;  text-align: center;  font-size: 0;	box-sizing: border-box;	}
.box01 a{	position: relative;	display: inline-block;
  /* width: 31%;	 */
  width: calc(100% / 3 - 20px); margin: 10px;

  height: auto;

  vertical-align: top;	overflow: hidden;	box-sizing: border-box;}
.box a::after{	content: "";  position: absolute;  display: block;	width: 100%;	height: 100%;
  left: 0;	top: 0;	transition: all .4s;	z-index: -1;	border-radius: 25px 0 0 0;}
.box01 a .thumbnails {	position: relative;	overflow: hidden;	height: 20vw;}
.box01 a:hover .thumbnails .loader{	transform: scale(1.08);}
.box01 a:hover .box01 a::after{	box-shadow: 0 4px 4px rgba(0, 0, 0, .12);}
.box01 a .thumbnails .loader {	position: absolute;	top: 0;	right: 0;	bottom: 0;	left: 0;	margin: auto;
	transform: scale(1);	transition: transform 0.35s;	background-repeat: no-repeat;
	background-position: center center;	background-size: cover;}
.box01 a .info {  position: relative; display: inline-block;  width: 100%;  height: 100px;
  padding: 10px;  bottom: 0px;  left: 0px;  box-sizing: border-box;  overflow: hidden;
  text-align: left;  background-color: rgba(255,255,255,.95);  vertical-align: middle;box-sizing: border-box;}
.box01 a .info .txt {  width: 100%;  margin: 10px 5px 5px 10px;  font-size: 20px;	line-height: 1.3;
	font-weight: bold;	color: #10693a;	box-sizing: border-box;	word-wrap: break-word;
	white-space: normal;	-webkit-line-clamp: 1;	overflow: hidden;	text-overflow: ellipsis;
	display: -webkit-box;	-webkit-box-orient: vertical;}
.box01 a .info .txt2 {  margin: 5px 5px 0px 10px;  font-size: 18px;	line-height: 1.4;	color: #000;
  word-wrap: break-word;	white-space: normal;	-webkit-line-clamp: 2;	overflow: hidden;
  text-overflow: ellipsis;	display: -webkit-box;	-webkit-box-orient: vertical; box-sizing: border-box;}
.box01 a .info .txt2 sup{ font-size: 80%;}

@media all and (max-width:1089px){
.box01{	position: relative;	font-size: 0;	text-align: center;	overflow: hidden;	}
.box01 a{  width: calc(46.5% - 3.5px);  margin: 6px;}
.box01 a .thumbnails{  height: 40vw;}
.box01 a .info .eng {	font-size: 18px;}
.box01 a .info .txt, .box01 a .info .txt2{	margin: 5px 0;}
.box01 a .info .txt2{	margin-top: 0;}
}


/*********************/
#mainsect h2 {  font-size: 34px;  text-align: center;  margin: 0 0 50px 0;
	color:#046939;	font-weight: 400;	font-family: 'NanumSquare', 'sans-serif';}

#mainsect ul {  width: 99%;  max-width: 1200px;  margin: 0 auto;}
#mainsect ul li a {  display: block;  overflow: hidden;  }
#mainsect ul li a:hover img {  opacity: 0.7;  transform: scale(1.2);  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);  -ms-transform: scale(1.2);  -o-transform: scale(1.2);}
#mainsect ul li {  display: inline-block;  width: calc(100% / 4 - 11px); margin: 4px;}
#mainsect .main01 ul li a, #mainsect .main03 ul li a {   width: 100%;   }

/************/
#mainsect .main01 ul li a:after{	position: absolute;	content: "";	display: block;
	width: 100%;	height: 100%;	left: 0;	top: 0;	transition: all .4s;	z-index: -1;	}
#mainsect .main01 ul li a .thumbnails {	position: relative;	overflow: hidden;	height: 250px;	}
#mainsect .main01 ul li a:hover .thumbnails .loader{	transform: scale(1.08);}
#mainsect .main01 ul li a:hover #mainsect .main01 ul li a::after{
	box-shadow: 0 4px 4px rgba(0, 0, 0, .12);}
#mainsect .main01 ul li a .thumbnails .loader {	position: absolute;	top: 0;	right: 0;	bottom: 0;	left: 0;
	margin: auto;	transform: scale(1);	transition: transform 0.35s;	background-repeat: no-repeat;
	background-position: center center;	background-size: cover;}
#mainsect .main01 ul li a .info {	position: relative;	display: inline-block;	width: 100%;
	height: initial;		box-sizing: border-box;	overflow: hidden;	bottom: 0px;	left: 0px;	padding: 10px;
	text-align: left;	background-color: rgba(255,255,255,.95);	vertical-align: middle;}
#mainsect .main01 ul li a .info .txt {	font-size: 20px;	line-height: 1.3;	font-weight: bold;
	color: #10693a;	width: 100%;	margin: 10px 5px 5px 10px;	box-sizing: border-box;	word-wrap: break-word;
	white-space: normal;	-webkit-line-clamp: 1;	overflow: hidden;	text-overflow: ellipsis;
	display: -webkit-box;	-webkit-box-orient: vertical;}
#mainsect .main01 ul li a .info .txt2 {	margin-top: 8px;	font-size: 18px;	line-height: 1.4;
	color: #000;	word-wrap: break-word;	white-space: normal;	-webkit-line-clamp: 2;
	overflow: hidden;	text-overflow: ellipsis;	display: -webkit-box;	-webkit-box-orient: vertical;}
#mainsect .main01 ul li a .info .txt2{		margin: 5px 5px 0px 10px;}

@media all and (max-width:1089px){
#mainsect ul li{float:left;width:calc(100% / 2 - 10px);text-align:center;overflow:hidden;}
#mainsect ul li a{width:100%;overflow:hidden;}
#mainsect ul li img{width:100%;height:100%;}

#mainsect .main01 p, #mainsect .main03 p{		text-align: center;	}
.main01{ position: relative;		text-align: center;	overflow: hidden;	}
.main01 a{	width: calc(46.5% - 3.5px);	margin: 6px;	}
.main01 a .thumbnails{	height: 250px;}
.main01 a .info {}
.main01 a .info .eng {	font-size: 18px;}
#mainsect .main01 ul li a .info .txt,
#mainsect .main01 ul li a .info .txt2{	text-align: center;	margin: 0;	margin-top: 5.5px;}
.main01 a .info .txt2{	margin-top: 0;}
}
@media all and (max-width:500px){
#mainsect ul li{float:none;width:100%;margin:0 0 30px 0;}
#mainsect .main01 ul li a{	max-width:300px;	width: 95%;	margin: 0 auto;}
.boximg{ width: 100%; max-width: inherit; padding: 0;}
}

/******* 02*****/

#mainsect .main02 ul li{ float: left;width: calc(100% / 3 - 10px);	height: 390px;
  margin: 5px; box-sizing: border-box;  }
#mainsect .main02 ul li:nth-child(1),
#mainsect .main02 ul li:nth-child(2){width: calc(100% / 3 - 10px);}

#mainsect .main02 ul li a {	position: relative;  width: 100%;  height: 390px;}
#mainsect .main02 ul li img{	width: 100%;	height: 100%;}
#mainsect .main02 ul li p {  position: absolute;  width: auto;  height: auto;  left: 25px;  top: 295px;
	font-size: 17px;  color: #fff;  text-shadow: 1px 1px 4px rgba(0,0,0,0.8);}
#mainsect .main02 .info{	position: absolute;  width: auto;  height: auto;  left: 25px;  top: 295px;
	font-size: 17px;  color: #fff;  text-shadow: 1px 1px 4px rgba(0,0,0,0.8);}
#mainsect .main02 .info .txt{	font-size: 20px;}

@media all and (max-width:1089px){
#mainsect .main02 ul{height:auto;}
#mainsect .main02 ul li{width: calc(100% / 2 - 10px); margin: 5px;}
#mainsect .main02 ul li a{	width:100%; overflow:hidden;}
#mainsect .main02 .info{	left: inherit;	margin: 0 auto;	width: 100%;}
#mainsect .main02 ul li p{  width: 100%;	margin: 0 auto;  height: auto;  min-height: 100px;
	text-align: center;  padding: 0;  color: #fff;  text-shadow: 1px 1px 4px rgba(0,0,0,0.8);}
}
@media all and (max-width:500px){
#mainsect .main02 ul li{float:none;width:calc(100% - 10px);margin-bottom: 10px;margin-right: 0;}
#mainsect .main02 ul li:nth-child(1), #mainsect .main02 ul li:nth-child(2){width: calc(100% - 10px);}
}

/******* main02 효과*********/
.main02 .thumbnails::after{	content: '';	position: absolute;	margin: 0 auto; top: 10px; right: 10px; bottom: 10px;
left: 10px;	border: 2px solid #ffffff;	opacity: 0;	visibility: hidden;
transition: opacity 0.5s, visibility 0.5s, transform 0.5s;}
.main02 a:hover .thumbnails::after  {	opacity: 0.8;	visibility: visible;}
.main02 a .thumbnails .loader::after {    content: '';    position: absolute;
  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;  background: transparent;}
.main02 a:hover .thumbnails .loader::after { background: rgba(0,0,0,0.6);}
.main02 a .thumbnails .eng{	position: absolute;	top: 50%; right: 0; left: 0; margin: auto;	font-size: 24px;line-height: 1.4;
	font-weight: normal;	font-family: 'NanumSquare', 'sans-serif';	color: #fff;text-align: center;	transform: translateY(-50%);
	opacity: 0;	visibility: hidden;	transition: opacity 0.5s, visibility 0.5s;	transition-delay:0.1s;}
.main02 a:hover .thumbnails .eng {	opacity: 1;	visibility: visible;}

/***** 03 *******/
#mainsect .main03 .box01{ padding: 5px;}
#mainsect .main03 a { display: inline-block; float: left;  width: calc(100% / 2 - 20px);
  margin: 10px;  background-color:#fff;  box-sizing: border-box; }
#mainsect .main03 a:nth-child(1), #mainsect .main03 a:nth-child(2){
  float: left; margin: 10px; width: calc(100% / 2 - 20px); }
/* #mainsect .main03 .box01 a .thumbnails{height: 20vw;} */
/* #mainsect .main03 .box01 a .info .txt, #mainsect .main03 .box01 a .info .txt2{  margin-top: 0;} */

#mainsect .main03 .box01 a .info{min-height: 110px;}

#mainsect .main03 p {  padding: 10px 0 0 5px;  color: #000;  font-size: 18px;	text-align: left;}
#mainsect .main03 p > span {  color: #083562;  font-size: 20px;  font-weight: bold;}
@media all and (max-width:1089px){
#mainsect .main03 .box01 a .thumbnails{height: 24vw;}
}
@media all and (max-width:768px){
#mainsect .main03 .box01 a .thumbnails{height: 37vw;}
#mainsect .main03 a{
  width: calc(100% / 2 - 10px); margin: 5px;}
}