@charset "utf-8";

.main_header {background:#fff;width:100%;height:90px;text-align:center;}
.main_header > h1 {position:absolute;left:80px;top:30px;}
.main_header > h1 a img {width:200px;}
.main_header > span {font-size:20px;padding-top:30px;display:block;}
.main_header > p {position:absolute;right:87px;top:20px;font-size:20px;background:#0c5420;padding:5px 20px;border-radius:30px;color:#fff;} 
.main_header > p i {position:relative;top:2px;}

/* 메인 컨텐츠 */
#mainContainer {position:relative; height:100%; overflow:hidden}
/* 비디오 커버 */
#mainContainer .videoCover {position:fixed; top:0; left:0; width:100%; height:100%}
#mainContainer .videoCover .mask {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.4; filter:alpha(opacity='40'); z-index:10}
#mainContainer .videoCover video {position:absolute; top:0; left:0; bottom:0; right:0; width:auto; height:130%; object-fit:cover}
/* 좌측 레이아웃 */
#mainContainer .leftArea {position:relative; float:left; width:100%; height:100%; }
/* 우측 레이아웃 */
#mainContainer .rightArea {position:relative; float:right; width:50%; height:100%}
/* 좌우측 공통 */
#mainContainer .items .row {height:auto; border-top:1px solid rgba(255,255,255,.3)}
#mainContainer .items .row:after {clear:both; display:block; content:''}
#mainContainer .items .row:first-child {border-top:none}
#mainContainer .items .row .item {position:relative; float:left; width:25%; height:100%; border-left:1px solid rgba(255,255,255,.3);border-top:1px solid rgba(255,255,255,.3); z-index:30; overflow:hidden;/*background:#0c5420;*/}
#mainContainer .items .row .item a {display:block; width:100%; height:100%}
#mainContainer .items .row .item:first-child {border-left:none;border-top:none;}
#mainContainer .items .row .item .imgArea {position:absolute; top:0; left:0; width:100%; height:100%; opacity:1; filter:alpha(opacity='0'); z-index:5; transition:all .5s ease}
#mainContainer .items .row .item:hover .imgArea {opacity:1; filter:alpha(opacity='100')}
#mainContainer .items .row .item .imgArea img {display:block; width:100%; height:100%}
#mainContainer .items .row .item .caption {position:absolute; top:200px;margin-top:0px; left:0; width:100%;  text-align:center; z-index:10;transition:all .5s ease}
#mainContainer .items .row .item:hover .caption {opacity:0;}
#mainContainer .items .row .item .caption span {color:#fff; margin-bottom:15px;font-size:14px;display:block;}
#mainContainer .items .row .item .caption h2 {font-size:30px; color:#fff;line-height:1.2;text-shadow:1px 1px 1px #000;}
#mainContainer .items .row .item .slipbox {position:absolute; top:-100%; left:-100%; width:100%; height:100%; text-align:center; background:#0c5420/*url(../img/slipbox_bg.png) left top repeat*/; z-index:50; vertical-align:middle}
#mainContainer .items .row .item .slipbox h2 {font-size:30px; color:#fff;line-height:1.2;}
/*#mainContainer .items .row .item .slipbox h2:after {display:block; width:35px; height:1px; content:''; margin:20px auto; background:#fff}*/
#mainContainer .items .row .item .slipbox span {color:#fff;margin-bottom:0px;display:block;padding-top:200px;margin-top:-80px;}
#mainContainer .items .row .item .slipbox p {color:#fff;margin-bottom:15px;display:block;}
/*#mainContainer .items .row .item .slipbox p.more {display:inline-block; margin-top:40px; font-size:13px; color:#21bbb1; padding:12px 20px; border-radius:50px; background:#fff}
#mainContainer .items .row .item .slipbox p.more span {display:inline-block; width:17px; height:17px; margin-left:10px; background:url(../img/read_arrow.png) center top no-repeat; vertical-align:middle}*/
/* 중앙 레이아웃 */
#mainContainer .centerArea {position:fixed; width:300px; top:0; left:50%; margin-left:-150px; border-left:1px solid rgba(255,255,255,.3); border-right:1px solid rgba(255,255,255,.3); z-index:50}
#mainContainer .centerArea #gnbOpen {position:relative; width:36px; height:36px; margin:50px auto 0 auto; cursor:pointer; z-index:100}
#mainContainer .centerArea #gnbOpen span {position:absolute; left:0; display:block; width:100%; height:2px; background:#21bbb1; transition:all .4s ease}
#mainContainer .centerArea #gnbOpen span:before {position:absolute; width:0; height:100%; content:''; background:#fff; transition:all .3s ease}
#mainContainer .centerArea #gnbOpen:hover span:before {width:100%}
#mainContainer .centerArea #gnbOpen span.bar1 {top:0}
#mainContainer .centerArea #gnbOpen span.bar2 {top:12px}
#mainContainer .centerArea #gnbOpen span.bar3 {top:24px}
#mainContainer .centerArea #gnbOpen span.bar3 {top:24px}
#mainContainer .centerArea #gnbOpen.open span.bar1 {top:18px; transform:rotate(45deg)}
#mainContainer .centerArea #gnbOpen.open span.bar2 {display:none}
#mainContainer .centerArea #gnbOpen.open span.bar3 {top:18px; transform:rotate(-45deg)}
#mainContainer h1 {position:absolute; top:50%; left:50%; width:auto; margin:-55px 0 0 -42.5px}
#mainContainer h1 img {display:block; width:100%}
#mainContainer .infoArea {position:absolute; bottom:0; left:0; width:100%; text-align:center; padding-bottom:35px; z-index:100}
#mainContainer .infoArea a.btnInquiry {position:relative; display:inline-block; font-size:13px; margin-bottom:30px; padding:8px 30px 8px 20px; color:#21bbb1; background:#242424}
#mainContainer .infoArea a.btnInquiry:after {position:absolute; top:12px; right:15px; width:6px; height:13px; content:''; background:url(../img/inquiry_arrow.png) 0 0 no-repeat}
#mainContainer .infoArea ul.tel {margin-bottom:30px}
#mainContainer .infoArea ul.tel li {font-size:13px; color:#888}
#mainContainer .infoArea ul.tel li span {font-size:13px; color:#aaa}
#mainContainer .infoArea ul.tel li a {font-size:13px !important; color:#888 !important}
#mainContainer .infoArea address {font-size:13px; color:#888}
.bottom-link {display:none;}


/* 푸터 */
#footer {margin-top:0px; padding:30px 0 30px 0; background:#f3f4f8;border-top:solid 1px #e6e6e6;}
#footer > .inner {width:1400px; margin:auto}
#footer .foot_wrap {position:relative;font-size:0px;}
#footer .foot_wrap > div {display:inline-block;vertical-align:top;}
#footer .foot_info {width:1100px;padding-left:0px;padding-top:10px;}
#footer .foot_info span {color:#979797;font-size:17px;display:block;line-height:1.8;}
#footer .foot_info > h3 {margin-top:0px;margin-bottom:10px;}
#footer .foot_info > h3 a {color:#979797;font-size:17px;margin-bottom:10px;font-weight:normal;padding-right:100px;}
#footer .foot_customer {width:300px;text-align:right;}
#footer .foot_customer h1 {font-size:35px;color:#979797;font-family:'Montserrat';font-weight:bold;}
#footer .foot_customer p {font-size:15px;color:#979797;}
#footer .foot_customer span {margin-top:20px;display:inline-block;}
#footer .foot_customer span a {display:inline-block;margin-left:9px;font-size:24px;color:#979797}

/* 상단으로 스크롤 */



/* 미디어쿼리 */
@media screen and (max-width:1440px) {
/* #mainContainer .items .row {border:none}
 #mainContainer .items .row .item {float:none; width:100%; border-left:none; border-bottom:1px solid rgba(255,255,255,.3)}*/
 #mainContainer .items .row .item .caption h2 {font-size:35px;}
 #mainContainer .items .row .item .slipbox h2 {font-size:35px;}
 .main_header > span {font-size:16px;padding-top:35px;display:block;}
 
 #footer > .inner {width:100%; margin:auto;padding:0px 20px;}
}
@media screen and (max-width:1024px) {

 /*#mainContainer .leftArea {}
 #mainContainer .rightArea {}*/
  #mainContainer {margin-top:70px;}
 #mainContainer .items .row .item {float:left; width:100%; border-left:1px solid rgba(255,255,255,.3)}
 .main_header {height:70px;position:fixed;left:0px;width:100%;top:0px;z-index:100}
 .main_header > h1 {position:relative;left:auto;top:auto;display:block;width:100%;padding-top:20px;}
.main_header > span {display:none;}
.main_header > p {display:none;} 
.bottom-link {display:block;position:fixed;bottom:0px;left:0px;width:100%;z-index:100;background:#fff;font-size:0px;padding:10px 10px 24px;border-top-left-radius:0px;border-top-right-radius:0px;}
.bottom-link > span {display:inline-block;width:33.3%;text-align:center;position:relative;}
.bottom-link > span:before {content:'';height:50px;width:1px;background:#0c5420;position:absolute;left:0px;top:15px;}
.bottom-link > span:first-child:before {display:none;}
.bottom-link > span a {font-size:14px;color:#0c5420;line-height:1;letter-spacing:-0.05em;}
.bottom-link > span a img {position:relative;top:3px;}


/* 푸터 */
#footer {padding:70px 0 180px 0;}
#footer > .inner {}
#footer .foot_wrap {position:relative;font-size:0px;text-align:center;}
#footer .foot_wrap > div {display:block;vertical-align:top;}
#footer .foot_logo {width:100%;}
#footer .foot_logo a img {width:80px;}
#footer .foot_info {width:100%;padding-left:0px;padding-top:20px;}
#footer .foot_info span {font-size:14px;display:block;line-height:1.5;}
#footer .foot_info span a {color:#bdbdbd;font-size:14px;}
#footer .foot_info > h3 {margin-top:30px;}
#footer .foot_info > h3 a {font-size:14px;padding:0px 10px;}
#footer .foot_customer {width:100%;text-align:center;}
#footer .foot_customer h1 {font-size:25px;}
#footer .foot_customer p {font-size:12px;color:#555;}
#footer .foot_customer span {margin-top:20px;display:inline-block;}
#footer .foot_customer span a {display:inline-block;margin-left:10px;font-size:20px;}
#footer .foot_customer span a:first-child {margin-left:0px;}
}



@media screen and (max-width:768px) {
 #mainContainer .videoCover video  {display:none !important;}
 #mainContainer .videoCover {display:none}
 #mainContainer .centerArea {position:static; width:100%; height:60px; margin:0; border:none}
 #mainContainer .centerArea h1 {display:none}
 #mainContainer .centerArea #gnbOpen {margin-top:30px}
 #mainContainer .leftArea {position:relative; width:100%; padding:0; border-top:0px solid rgba(255,255,255,.3)}
 #mainContainer .rightArea {position:relative; width:100%; padding:0 0 300px 0}
 #mainContainer .items .row .item:last-child {margin-bottom:92px;}
 #mainContainer .items .row .item .caption {top:70px;}
 #mainContainer .items .row .item:hover .caption {opacity:1;}
 #mainContainer .items .row .item .caption span {font-size:12px}
 #mainContainer .items .row .item .caption h2 {font-size:24px}
 #mainContainer .items .row .item {float:left;  border-left:1px solid rgba(255,255,255,.3)}
 #mainContainer .items .row .item .slipbox h2 {font-size:24px}
 #mainContainer .items .row .item .slipbox p {font-size:13px}
 #mainContainer .items .row .item .slipbox p.more {margin-top:25px}
 #mainContainer .items .row .item .slipbox span {padding-top:85px;}
}
@media screen and (max-width:480px) {
 #mainContainer .items .row .item {float:left; width:100%;background:none;border-top:0px;}
 #mainContainer .items .row .item:last-child {margin-bottom:92px;}
 #mainContainer .items .row .item .imgArea {opacity:1 !important; filter:alpha(opacity='100') !important}
 #mainContainer .items .row .item .caption {top:55px;}
 #mainContainer .items .row .item .caption span {font-size:11px; color:#fff}
 #mainContainer .items .row .item .caption h2 {font-size:25px; color:#fff}
 #mainContainer .items .row .item .caption p {display:none;}
 #mainContainer .items .row .item:hover .caption {opacity:1;}
 #mainContainer .items .row .item .slipbox h2 {padding-top:45px; font-size:16px}
 #mainContainer .items .row .item .slipbox h2:after {width:20px; margin:15px auto}
 #mainContainer .items .row .item .slipbox p {font-size:11px}
 #mainContainer .items .row .item .slipbox p.more {margin-top:20px; padding:8px 15px}
 #mainContainer .items .row .item .slipbox p.more span {display:none}
}