/*mainVisual*/
#mainVisual { width:100%; height:400px; position:relative; }
.visual { width:100%; height:400px; }
.visual li { width:100%; height:100%;  }
.visual li > a { width:100%; max-width:1140px; margin:0 auto; height:100%; position:relative; display:block;}
.visual li img { display:none; }
.vs3 { background:url(/img/main/mainVisual3.jpg) no-repeat center; }
.vs1 { background:url(/img/main/mainVisual1.jpg) no-repeat center; }
.vs2 { background:url(/img/main/mainVisual2.jpg) no-repeat center; }

.vs3 h2 {position:absolute; top:105px; left:55px; font-size:55px; line-height:120%; font-family: "Nanum Pen Script"; color:#000; }
.vs3 h2:before { content:""; display:block; position:absolute; top:-30px; left:65px; background:url(/img/main/icon_vs1.png) no-repeat; width:65px; height:34px; }
.vs3 h2:after { content:""; display:block; position:absolute; top:112px; left:303px; background:url(/img/main/leaf.png) no-repeat; width:49px; height:48px; }
.vs3 h2 span { display:block;  }
.vs3 h2 em.c3 { color:#d95548; font-size:83px; font-weight:600; }

.vs1 h2 { position:absolute; right:0; top:70px; font-size:60px; line-height:130%; font-family: "Nanum Pen Script"; color:#000; }
.vs1 h2:before { content:""; display:block; position:absolute; top:-10px; left:92px; background:url(/img/main/icon_vs1.png) no-repeat; width:65px; height:34px; }
.vs1 h2 span { display:block; margin-left:65px; }
.vs1 h2 em { font-size:77px; font-weight:bold; }
.vs1 h2 em.c1 { color:#d95548; }
.vs1 h2 em.c2 { color:#46ba3a; }
.vs2 h2 { font-size:57px; letter-spacing:-.3px; position:absolute; left:20px; top:62px; line-height:90%;  font-family: "Nanum Pen Script"; color:#000;}
.vs2 h2 span { display:block; margin-left:30px; }
.vs2 h2 em { color:#e70b0a; }
.vs2 .time { position:absolute; bottom:0; left:0; background:#fff; border:1px solid #a1a1a1; border-bottom:none; border-radius:10px 10px 0 0; width:298px; height:175px; overflow:hidden; }
.vs2 .time h3 { margin:22px 0 0 22px; font-size:16px;  color:#d95548; font-weight:bold;}
.vs2 .time ul { margin:12px 0 0 39px; }
.vs2 .time ul li { line-height:150%; overflow:hidden; font-size:14px; color:#333; }
.vs2 .time ul li span { width:74px; display:inline-block; *display:inline; zoom:1; }
.vs2 .time > p { color:#d95548; font-size:16px; font-weight:bold; display:block; margin:10px 0 0 22px; }
.vs2 .number { position:absolute; bottom:8px; right:0; color:#fff; font-size:16px; text-shadow:0 0 5px #000; font-weight:bold; }
/*btn*/
#mainVisual .bx-pager {  position:absolute; bottom:20px; width:100%; max-width:1140px; left:50%; margin-left:-570px; z-index:99; text-align:center; }
#mainVisual .bx-pager div { display:inline-block; *display:inline; zoom:1; margin:0 4px; }
#mainVisual .bx-pager a {display: block; width:12px; height:12px; text-indent:-9999px; border-radius:50%; background:#b7b7b7; }
#mainVisual .bx-pager a:hover, #mainVisual .bx-pager a.active { background:#403b3a; }


/*main-menu*/
.mainCon { width:100%; max-width:1140px; margin:6px auto 30px; overflow:hidden; }
.mainCon > nav { width:100%; overflow:hidden; }
.mainCon > nav li { float:left; width:25%; height:116px; transition:height .3s; }
.mainCon > nav li.c1 { background:#5a6a21; }
.mainCon > nav li.c2 { background:#ee9e15; }
.mainCon > nav li.c3 { background:#d95548; }
.mainCon > nav li.c4 { background:#286371; }
.mainCon > nav li a { width:100%; height:100%; display:table; color:#fff; font-size:20px; font-weight:bold; text-align:center;  }
.mainCon > nav li p { display:table-cell; vertical-align:middle; }
.mainCon > nav li p img { vertical-align: middle; padding-right:10px; }
/*main-board*/
.mainCon > div { margin-top:6px; width:100%; overflow:hidden; border:1px solid #dfe2e5; box-sizing:border-box; background:#fff; }
.mainCon > div > article { float:left; border-right:1px solid #dfe2e5; height:233px;  position:relative; }
.gallery { width:378px; }

.gallery > img{ width:378px; }
.gallery > div.basic { display:block; position:absolute; z-index:55; width:90%; left:5%; bottom:8px; color:#fff; }
.gallery > div h3 { float:left; font-size:16px; font-weight:bold; float:left; margin-right:10px; }
.gallery > div p { float:left; width:220px; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gallery > div p a { color:#fff; }
.gallery > div.basic > a { display:block; float:right; width:19px; height:19px; border:1px solid #fff; text-align:center; line-height:19px; color:#fff; }
/*photo_gallery*/
.photo { width:100%;  }
.photo li { position:relative; width:100%; }
.photo img { width:100%; }
.photo li div { position:absolute; z-index:55; width:90%; left:5%; bottom:30px; color:#fff; }
.photo li div h3 { float:left; font-size:16px; font-weight:bold; float:left; margin-right:10px; }
.photo li div p { float:left; width:220px; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.photo li div p a { color:#fff; }
.photo li div > a { display:block; float:right; width:19px; height:19px; border:1px solid #fff; text-align:center; line-height:19px; color:#fff; }
/*btn*/
.gallery .bx-pager {  position:absolute; top:10px; width:auto; right:10px; z-index:99; text-align:center; }
.gallery .bx-pager div { float:left; margin-left:4px; }
.gallery .bx-pager a {display: block; width:10px; height:10px; text-indent:-9999px; border-radius:50%; background:#b7b7b7; }
.gallery .bx-pager a:hover, .gallery .bx-pager a.active { background:#fff; }

.notice { width:381px; box-sizing:border-box; padding:24px 24px 0;}
.notice h3 { float:left; color:#2b2e32; font-size:16px; font-weight:bold; }
.notice > a { float:right; display:block; margin-top:5px; width:19px; height:19px; text-align:center; border:1px solid #c1c1c1; color:#696969; line-height:19px; }
.notice ul { clear:both; width:100%; padding-top:5px; }
.notice ul li { overflow:hidden; margin-top:5px; }
.notice ul li > a { display:block; float:left; background:url(/img/main/bullet_notice.gif) no-repeat 0 8px; font-size:13px; letter-spacing:-.2px; padding-left:12px; width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notice ul li span { display:block; float:right; font-size:12px; color:#999; }
.notice em { font-weight:bold; color:#7ab800; margin-right:3px; }
.notice ul li.first { border-bottom:1px solid #dee1e4;  margin:0 0 15px; }
.notice ul li.first div { width:100%; overflow:hidden; background:url(/img/main/icon_notice.gif) no-repeat 10px 5px; min-height:36px; padding-bottom:20px; }
.notice ul li.first div a { display:block; float:right; width:240px; height:48px; font-weight:bold; color:#2b2e32; font-size:15px; overflow:hidden; }
.notice ul li.first div a em { color:#dc5034; }
.notice ul li.first a span { display:block; width:100%; min-height:48px; position:relative; font-size:15px;color:#333}
.notice ul li.first a span i { display:; font-style:normal; position:absolute; top:24px; right:0; height:24px; background:#fff; text-align:center; width:17px; }
.banner { float:right; width:378px; }
.banner ul li { float:left; height:116px; overflow:hidden; }

.cs { width:229px; border-right:1px solid #dee1e4; border-bottom:1px solid #dee1e4; }
.cs h3 { font-size:16px; color:#2b2e32;  font-weight:bold; margin:23px 0 0 25px; }
.cs address { font-family:"Roboto"; color:#7ab800; font-size:25px; line-height:100%; font-weight:500; margin:9px 0 0 25px; }
.cs p { font-family:"Roboto"; color:#999; font-size:15px; margin:6px 0 0 25px; }
.map { width:148px; border-bottom:1px solid #dee1e4; background:#f7f8fa url(/img/main/icon_map.gif) no-repeat center 19px; }
.map a { display:block; width:100%; height:100%; overflow:hidden; text-align:center; color:#2b2e32; }
.map a p { font-size:14px; font-weight:bold; margin-top:77px; }
.catalog { width:229px; border-right:1px solid #dee1e4; background:#ecedf2 url(/img/main/bg_catalog.png) no-repeat right ; background-size:auto 100%;  }
.catalog h3 { color:#2b2e32; font-size:22px; font-weight:bold; letter-spacing:-.2px; margin:18px 0 0 25px;  }
.catalog h3 span { display:block; font-size:14px; color:#7b8088; margin-bottom:5px; font-weight:normal; }
.catalog a { display:block; width:77px; height:25px; line-height:26px; margin:12px 0 0 25px; text-align:center; background:#1c1c1c; border-radius:10px; color:#fff; font-size:11px; font-family:"Dotum"; }
.bean { width:148px; }
.bean a { display:block; width:100%; height:100%; background:url(/img/main/bg_bean.gif) no-repeat center center; font-size:0; }

@media screen and ( max-width:1000px) {

	/*mainVisual*/
	#mainVisual, .visual { height:calc(100vw*(1/1.5)); }
	.visual li img { display:block; width:100%; }
	/*
	.vs1, .vs2 , .vs3{ background-size: auto 350px; }
	.vs1 h2{ right:10px; top:60px; font-size:50px; line-height:110%; text-shadow:0 0 5px #fff; }
	.vs3 h2  {top:60px; left:15px; font-size:50px; line-height:110%; text-shadow:0 0 5px #fff; }
	.vs1 h2:before{ top:-5px; left:85px; background-size:45px; width:45px; height:34px; }
	.vs3 h2:before { top:-25px; left:65px; background-size:45px; width:45px; height:34px; }
	.vs1 h2 span { margin-left:45px; }
	.vs1 h2 em { font-size:67px;  }
	.vs2 h2 { font-size:40px; left:15px; top:35px; text-shadow:0 0 5px #fff;  }
	.vs2 h2 span { margin-left:35px; }
	.vs2 .time { width:240px; height:150px; }
	.vs2 .time h3 { margin:10px 0 0 10px; }
	.vs2 .time ul { margin:5px 0 0 15px; }
	.vs2 .time ul li { font-size:12px; }
	.vs2 .time ul li span { width:58px; }
	.vs2 .time > p { font-size:14px; margin:5px 0 0 10px; }
	.vs2 .number { bottom:none; top:5px; right:10px; font-size:12px; }
	*/

	/*btn*/
	#mainVisual .bx-pager { left:0; margin-left:0; bottom:0; }

	/*main-menu*/
	.mainCon { margin-top:5px; }
	.mainCon > nav li { width:50%; height:100px; }
	.mainCon > nav li a { font-size:16px; }
	.mainCon > nav li p img { height:50px; }


	/*main-board*/
	.mainCon > div { margin-top:5px; }
	.mainCon > div > article {  overflow:hidden; }
	.gallery { width:calc(50% - 1px); }
	.gallery div.basic img { width:100%; min-height:233px; position:absolute; top:0; bottom:0; left:50%; transform: translateX(-50%);  }
	.gallery div.basic { bottom:15px;  }
	.gallery div.basic p { width:calc(100% - 115px); }

	/*photo_gallery*/
	.photo li { min-height:233px; }
	.photo img { width:100%; min-height:233px; position:absolute; top:0; bottom:0; left:50%; transform: translateX(-50%); }
	.photo li div { bottom:15px; }
	.photo li div p { width:calc(100% - 115px); }



	.mainCon > div > article.notice {  width:50%; padding:20px 15px 0; border-right:none; }
	.notice ul li > a {  padding-left:10px; width:calc(100% - 85px); }
	.notice ul li.first div a {  width:calc(100% - 75px); }
	.banner { width:100%; border-top:1px solid #dee1e4; }
	.cs, .catalog { width:calc(65% - 1px); }
	.map, .bean { width:35%; }


}

@media screen and ( max-width:650px) {
	/*main-menu*/
	.mainCon > nav li { height:80px; }
	.mainCon > nav li a { font-size:14px; }
	.mainCon > nav li p img { height:40px; padding-right:5px; }

	/*main-board*/
	.mainCon > div > article { height:auto; }
	.mainCon > div > article.gallery { border-right:0; border-bottom:1px solid #dee1e4;  }
	.gallery { width:100%;  }
	.gallery img { min-height:auto; position:static; top:none; bottom:none; left:none; transform:none;  }
	/*photo_gallery*/
	.photo li { min-height:auto; }
	.photo img { min-height:auto; position:static; top:none; bottom:none; left:none; transform:none;  }

	.mainCon > div > article.notice {  width:100%; padding-bottom:5%; }
	.cs h3, .cs address, .cs p, .catalog h3, .catalog a { margin-left:15px; }
	.bean a { background-size:100px; }


}