@charset "utf-8";
@import url("mnav.css");
@import url('../font/font.css');

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption, summary, mark, meter, output, progress, time, video 
{ display: block; }
body,form,th,td,p { margin:0;padding:0; -webkit-text-size-adjust:none;}
html { font-family:"Noto Sans KR","Malgun Gothic","Dotum","Gulim,Helvetica","sans-serif"; }
a:link, a:visited, a:hover, a:active, a:focus { text-decoration:none; color:inherit; cursor:pointer; }
a:hover{ text-decoration:none; color:#1660c3; cursor:pointer; }
a { text-decoration:none;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,  ins, kbd, 
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, article, aside, hgroup, 
header, footer, figure, figcaption, nav, section { margin:0; padding:0; border:0;  vertical-align:baseline; background:transparent; }
img { border:0;  vertical-align:baseline; background:transparent;}

/*****************************PC화면*************************************/

@media all and (min-width:960px)  { 
body { font-size:12px; overflow:hidden;  color:#333;  }
#wrap {max-width:100%; margin:0 auto; position:relative; }
#toparea {width:100%; background:none; }
#top {  border-bottom:0px solid #343848;    }
#topBox { margin:0 auto; max-width:1100px !important;  position:relative;}
div.top_mask {width:100%; } 
aside.util {position:absolute; right:20px; margin:0 auto; font-size:13px; display:block;   z-index: 15;border-bottom:0px solid #dfdfdf; }
aside.util div.util_Area { color:#fff; right:0px;   margin:0 auto;  text-align:right; padding:10px 0px 0px 0; height:30px; box-sizing:border-box; }
aside.util div.util_Area a{  padding:0px 9px 0 5px; border-left:0px solid #ccc;  }
aside.util div.util_Area a:hover {color:#333;}
aside.util div.util_Area a.lang{ }
.lang_m {display:none;}

#header div.logo { position:absolute; left:0; padding:5px 0px;   box-sizing:border-box;   z-index:23 ; }
#header div.logo a {display: block; width:220px; height:78px;  background:url("../../img/main/logo_w.png")no-repeat center center;  }
#header div.logo_on a {background:url("../../img/main/logo.png")no-repeat center center}
.button_container {display:none;}

.gnb{ position:absolute; top:0px ; background:none; left:0; width:100%;  z-index:13;  border-bottom:1px solid rgba(255,255,255,0.3);  
margin:0px auto 0 auto; text-align:center; transition: all 0.5s ; }
.gnb a {color:#fff;}
.gnb > ul{overflow:hidden; list-style-type:none; width:1100px; padding-left:300px; box-sizing:border-box; margin:0 auto;}
.gnb .menu{float:left; width:20%; text-align:center;}
.gnb .menu:first-child{margin:0}
.gnb .depth1{padding:0; font-size:18px; font-weight:normal; display:block; padding:32px 0 28px 0; height:90px; box-sizing:border-box;}
.gnb .depth2{height:0 ;overflow:hidden;  font-size:14px; border-left:0px solid #353535;  }
.gnb .menu:first-child .depth2{border-left:0px solid #dfdfdf; }
.gnb .depth2 ul{overflow:hidden; } /*depth2 높이 css/menu.js 에서 조절*/
.gnb .depth2 ul li{margin-top:15px;}
.gnb .depth2 ul li:first-child{margin-top:10px}
.gnb .depth2 ul li a:hover {text-decoration:underline; color:#f26c4f !important; }
.gnb:hover {background:rgba(255,255,255,1); color:#333; }
.gnb:hover a {color:#333;}
.gnb:hover div.util_Area, .gnb:hover div.util_Area a  {color:#999;}
.gnb .menu:hover {background-color:#f5f5f5;  }
.gnb .menu:hover a{  border-bottom:2px solid #00689F;  padding-bottom:7px;}
.gnb .menu:hover .depth2 ul li a {border-bottom:0;}
.gnb:hover .depth2 {}

.page-wrap {  width: 100%;  height: 100vh;  display: -webkit-box;  display: -ms-flexbox;}
#home-slider {  height: 100vh;  width: 100vw;  position: relative; padding:0px 0 0 0;}

.swiper-container {  height: 100%;  width: 100%; margin:0 auto;  position: relative;  overflow: hidden;  z-index: 1;}
div.mask {position:absolute;  height: 100vh;  width: 100vw; background:rgba(0,0,0,0.1);}
/**images**/
.swiper-image-1 {}
.swiper-image-2 {  background:url("../../img/main/main_visual_1.jpg")}
.swiper-image-3 { background-image:url("../../img/main/main_visual_2.jpg")}
.swiper-image-4 { }
.swiper-image-5 {  }
.swiper-image-6 {  background-image:url("../../img/main/main_visual_3.jpg")}
.swiper-image-7 {  background-image:url("../../img/main/main_visual_4.jpg")}
.swiper-image-8 {  }
.swiper-image-9 {  }
.swiper-image-10 { background-image:url("../../img/main/main_visual_5.jpg") }
.swiper-image {  width: 100%; height: 100%;}
.swiper-image-inner {  background-size: cover;  background-position: center center;  
  display: -ms-flexbox;  display: flex; display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -ms-flex-direction: column;  flex-direction: column;
  -webkit-box-align: center;   -ms-flex-align: center;  align-items: center;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;
  width: 100%;  height: 100%;  background-blend-mode: overlay;}
.swiper-image .info {display:block !important; padding-bottom:250px; opacity:0.6; line-height:50px; color:#000; font-size:17px; text-align:center; }

/**text**/
div.swiper-box {width:1100px; margin:0 auto;    }
div.cont {text-align:center; width:500px;  }
div.cont2 {text-align:center; width:1100px; }
div.cont2 ul{list-style: none; clear:both; padding:30px 0 50px 0; margin:0;}
div.cont2 ul li{float:left; width:25%;  color:#fff; font-size:16px;  padding-top:180px;}
div.cont2 ul li h3 {font-size:30px; font-weight:500; padding-bottom:20px;}
div.cont2 ul li .txt01 {font-size:18px;}
div.cont2 ul li.ico1 {background:url("../../img/main/ico1.png")no-repeat center top; }
div.cont2 ul li.ico2 {background:url("../../img/main/ico2.png")no-repeat center top; }
div.cont2 ul li.ico3 {background:url("../../img/main/ico3.png")no-repeat center top; }
div.cont2 ul li.ico4 {background:url("../../img/main/ico4.png")no-repeat center top; }
/*div.cont3 p, div.cont3 span{color:#333; !important}*/
div.cont3 p.txt {font-size:20px; text-align:left; }
div.cont3 h1 span.emphasis {font-weight:600; font-size:45px;}
p.gallery {width:100%; margin:0px auto; padding-top:20px;}
.board_output_gallery_subject {display:none; text-align:center; font-size:15px; width:100%;  color:#fff;}

div.cont2 ul.pro {padding:0px 0 50px 0; }
div.cont2 ul.pro li{   padding-top:0px; text-align:center;}
div.cont2 ul.pro li a { height:250px; width:250px;overflow:hidden; display:block; border:1px solid rgba(0,0,0,0.3); box-sizing:border-box;  }
div.cont2 ul.pro li a:hover {color:#fff; }
div.cont2 ul.pro li h3 {font-size:23px; padding-top:10px; }

div.cont2 ul.pro li a img{transition: transform 0.5s; width:250px; height:250px; }
div.cont2 ul.pro li a:hover img{
	transform: scale(1.1,1.1);  opacity:1; transition:opacity 0.5s, transform 0.5s;
	-webkit-transform: scale(1.1,1.1) ; -moz-transform: scale(1.1,1.1) ; -ms-transform: scale(1.1,1.1) ; -o-transform: scale(1.1,1.1) ;	}


h1, .swiper-image p  {  font-weight: 400;  color: #fff; margin: 0 0 35px 0;  font-size: 2.5rem;  line-height: 1;  opacity: 1;}
h1 span.emphasis {  font-weight: 400; padding:0 10px 10px 0px;  font-size: 40px;display:block;}
.swiper-image p.txt {display:block; font-size: 22px; line-height:35px; text-align: center; }
.swiper-image p.btn a{display:block; margin:0 auto; background:rgba(255,255,255,0.2); border:2px solid #fff; width:300px; text-align:center; 
padding:20px 30px; font-size: 22px; font-weight:400; }
.swiper-image p.btn a:hover{display:block; background:rgba(0,0,0,0.2); color:#fff; }

p.paragraph {display:none;  color:#000;}
.swiper-slide.swiper-slide-active h1 span { opacity:1; }
.swiper-wrapper div.mobile {position:absolute; z-index: 99;}

/**swiper**/
.swiper-container-vertical > .swiper-wrapper {  -webkit-box-orient: vertical;  -ms-flex-direction: column;  flex-direction: column;}
.swiper-wrapper {  position: relative;  width: 100%;  height: 100%;  z-index: 1;
  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-transition-property: -webkit-transform;  transition-property: -webkit-transform;
  transition-property: transform;  transition-property: transform, -webkit-transform;  box-sizing: content-box;}
.swiper-container-android .swiper-slide, .swiper-wrapper {  -webkit-transform: translate3d(0px, 0, 0);  transform: translate3d(0px, 0, 0);}
.swiper-container-multirow > .swiper-wrapper {  -webkit-box-lines: multiple;  -moz-box-lines: multiple;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  }
.swiper-container-free-mode > .swiper-wrapper {  -webkit-transition-timing-function: ease-out;  transition-timing-function: ease-out;  margin: 0 auto;}
.swiper-slide {  -webkit-flex-shrink: 0;  -ms-flex: 0 0 auto;  -ms-flex-negative: 0; flex-shrink: 0;
  width: 100%;  height: 100%;  position: relative;  background-color: #fff;  overflow: hidden;
  display: -webkit-box;  display: -ms-flexbox;  display: flex;  }

/* Auto Height */
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {  height: auto;}
.swiper-container-autoheight .swiper-wrapper {  -webkit-box-align: start;  -ms-flex-align: start;  align-items: flex-start;
  -webkit-transition-property: -webkit-transform, height;  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;  transition-property: transform, height;  transition-property: transform, height, -webkit-transform;}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {  -ms-touch-action: pan-y;  touch-action: pan-y;}
.swiper-wp8-vertical {  -ms-touch-action: pan-x;  touch-action: pan-x;}

/* Pagination Styles */
.swiper-pagination {  position: absolute;  text-align: center;  -webkit-transition: 300ms;  transition: 300ms;
  -webkit-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);  z-index: 10;}
.swiper-pagination.swiper-pagination-hidden {  opacity: 0;}

/* paging button */
.swiper-pagination-bullet {  width: 14px;  height: 14px;  display: inline-block;  background: #fff;  opacity: 0.8;}
.swiper-pagination-clickable .swiper-pagination-bullet {  cursor: pointer; border-radius:10px}
.swiper-pagination-white .swiper-pagination-bullet {  background: #aaa;}
.swiper-pagination-bullet-active {  opacity: 1;  background:none; border:2px solid #fff;  width: 10px;  height: 10px; }
.swiper-pagination-white .swiper-pagination-bullet-active {  background: #aaa;}
.swiper-pagination-black .swiper-pagination-bullet-active {  background: #000;}
.swiper-container-vertical > .swiper-pagination-bullets {  right: 25px;  bottom: 45%;}
.swiper-container-vertical  > .swiper-pagination-bullets .swiper-pagination-bullet {  margin: 7px 0;  display: block;}
.swiper-container-horizontal  > .swiper-pagination-bullets .swiper-pagination-bullet {  margin: 0 5px;}

}


/*****************************모바일 화면****************************/
@media not all and (min-width:960px){
#menu {	display:none;}
.slicknav_menu { }/*모바일 메뉴*/
.flex-direction-nav a  {display:none;}
body { font-size:12px;  color:#454545; overflow-x:hidden; }
#wrap {max-width:100%; margin:0 auto; position:relative; padding:0; }
#top {position:absolute; top:0;}
aside.util { display:none; }
#header div.logo { position:absolute; left:0; padding:18px 10px;   box-sizing:border-box;   z-index:23 ; }
#header div.logo a {display: block; width:150px; height:60px; background-size: contain !important;  background:url("../../img/main/logo.png")no-repeat left top; }
div.button_container div.txt{display:none;}
.gnb{ display:none; }
.lang_m a{display:block; z-index:100; position:absolute; right:75px; top:19px; padding-top:3px; box-sizing:border-box; 
text-align:center; border:1px solid #888; width:37px; height:29px; font-size:15px; z-index:9; }

/*scroll*/
.center-it {display:none;}

.page-wrap {  width: 100%;  height: 100vh;  display: -webkit-box;  display: -ms-flexbox;}
#home-slider {  height: 90vh;  width: 100vw;  position: relative; padding:70px 0 0 0;}
.swiper-container {  height: 100%;  width: 100%; margin:0 auto;  position: relative;  overflow: hidden;  z-index: 1;}
div.mask {position:absolute;  height: 100vh;  width: 100vw; background:rgba(0,0,0,0.1);}
/**images**/
.swiper-image-1 {}
.swiper-image-2 {  background:url("../../img/main/main_visual_1.jpg")}
.swiper-image-3 { background-image:url("../../img/main/main_visual_2.jpg")}
.swiper-image-4 { }
.swiper-image-5 {  }
.swiper-image-6 {  background-image:url("../../img/main/main_visual_3.jpg")}
.swiper-image-7 {  background-image:url("../../img/main/main_visual_4.jpg")}
.swiper-image-8 {  }
.swiper-image-9 {  }
.swiper-image-10 { background-image:url("../../img/main/main_visual_5.jpg") }
.swiper-image {  width: 100%; height: 100%;}
.swiper-image-inner {  background-size: cover;  background-position: center center;  
  display: -ms-flexbox;  display: flex; display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -ms-flex-direction: column;  flex-direction: column;
  -webkit-box-align: center;   -ms-flex-align: center;  align-items: center;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;
  width: 100%;  height: 100%;  background-blend-mode: overlay;}
.swiper-image .info {display:block !important; padding-bottom:250px; opacity:0.6; line-height:50px; color:#000; font-size:17px; text-align:center; }

/**text**/
div.swiper-box {width:100%; margin:0 auto;    }
div.cont {text-align:center; width:100%;  }
div.cont2 {text-align:center; width:100%; float:none; }

div.cont2 ul{list-style: none; clear:both; padding:0px 0 50px 0; margin:0;}
div.cont2 ul li{float:left; width:50%;  color:#fff; font-size:16px;  padding-top:110px; background-size:50% !important;}
div.cont2 ul li h3 {font-size:20px; font-weight:500; padding-bottom:10px;}
div.cont2 ul li .txt01 {font-size:12px; min-height: 70px; display:block;}
div.cont2 ul li.ico1 {background:url("../../img/main/ico1.png")no-repeat center top; }
div.cont2 ul li.ico2 {background:url("../../img/main/ico2.png")no-repeat center top; }
div.cont2 ul li.ico3 {background:url("../../img/main/ico3.png")no-repeat center top; }
div.cont2 ul li.ico4 {background:url("../../img/main/ico4.png")no-repeat center top; }

div.cont3 p, div.cont3 span{color:#fff; !important; width:100%; }
div.cont3 p.txt {font-size:15px; }
div.cont2 p.txt2 { display:none; }

div.cont2 ul.pro li {width:50%; float:left;  padding-top:10px;}
div.cont2 ul.pro li a { height:auto; width:80%; margin:0 auto; overflow:hidden; display:block; border:0px solid rgba(0,0,0,0.3); box-sizing:border-box;  }
div.cont2 ul.pro li a img {width:100%; max-width:100%;}
div.cont2 ul.pro li h3 {font-size:20px; padding-top:5px; }

.board_output_gallery_subject {display:none; text-align:center; font-size:15px; width:100%;  color:#fff;}
h1, .swiper-image p  { width:100%; text-align:center; font-weight: 400;  color: #fff; margin: 0 0 30px 0;  font-size: 2.5rem;  line-height: 1;  opacity: 1;}
h1 span.emphasis {  font-weight: 400; padding:0 10px 20px 0px;  font-size: 30px; padding-bottom:10px;}
.swiper-image p.txt {display:block; font-size: 16px; line-height:28px; }
.swiper-image p.btn a{display:block; margin:0 auto; background:rgba(255,255,255,0.2); border:2px solid #fff; width:60%; box-sizing:border-box; text-align:center; 
padding:15px 30px; font-size: 22px; font-weight:400; }
.swiper-image p.btn a:hover{display:block; background:rgba(0,0,0,0.2); color:#fff; }

p.paragraph {display:none;  color:#000;}
.swiper-slide.swiper-slide-active h1 span { opacity:1;  font-size: 30px; display: block; }
.swiper-wrapper div.mobile {position:absolute; z-index: 99;}

/**swiper**/
.swiper-container-vertical > .swiper-wrapper {  -webkit-box-orient: vertical;  -ms-flex-direction: column;  flex-direction: column;}
.swiper-wrapper {  position: relative;  width: 100%;  height: 100%;  z-index: 1;
  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-transition-property: -webkit-transform;  transition-property: -webkit-transform;
  transition-property: transform;  transition-property: transform, -webkit-transform;  box-sizing: content-box;}
.swiper-container-android .swiper-slide, .swiper-wrapper {  -webkit-transform: translate3d(0px, 0, 0);  transform: translate3d(0px, 0, 0);}
.swiper-container-multirow > .swiper-wrapper {  -webkit-box-lines: multiple;  -moz-box-lines: multiple;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  }
.swiper-container-free-mode > .swiper-wrapper {  -webkit-transition-timing-function: ease-out;  transition-timing-function: ease-out;  margin: 0 auto;}
.swiper-slide {  -webkit-flex-shrink: 0;  -ms-flex: 0 0 auto;  -ms-flex-negative: 0; flex-shrink: 0;
  width: 100%;  height: 100%;  position: relative;  background-color: #fff;  overflow: hidden;
  display: -webkit-box;  display: -ms-flexbox;  display: flex;  }

/* Auto Height */
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {  height: auto;}
.swiper-container-autoheight .swiper-wrapper {  -webkit-box-align: start;  -ms-flex-align: start;  align-items: flex-start;
  -webkit-transition-property: -webkit-transform, height;  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;  transition-property: transform, height;  transition-property: transform, height, -webkit-transform;}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {  -ms-touch-action: pan-y;  touch-action: pan-y;}
.swiper-wp8-vertical {  -ms-touch-action: pan-x;  touch-action: pan-x;}

/* Pagination Styles */
.swiper-pagination {  position: absolute;  text-align: center;  -webkit-transition: 300ms;  transition: 300ms;
  -webkit-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);  z-index: 10;}
.swiper-pagination.swiper-pagination-hidden {  opacity: 0;}

/* paging button */
.swiper-pagination-bullet {  width: 14px;  height: 14px;  display: inline-block;  background: #fff;  opacity: 0.7;}
.swiper-pagination-clickable .swiper-pagination-bullet {  cursor: pointer; border-radius:10px}
.swiper-pagination-white .swiper-pagination-bullet {  background: #aaa;}
.swiper-pagination-bullet-active {  opacity: 1;  background:none; border:2px solid #fff;  width: 10px;  height: 10px; }
.swiper-pagination-white .swiper-pagination-bullet-active {  background: #aaa;}
.swiper-pagination-black .swiper-pagination-bullet-active {  background: #000;}
.swiper-container-vertical > .swiper-pagination-bullets {  right: 25px;  top: 25px;}
.swiper-container-vertical  > .swiper-pagination-bullets .swiper-pagination-bullet {  margin: 7px 0;  display: block;}
.swiper-container-horizontal  > .swiper-pagination-bullets .swiper-pagination-bullet {  margin: 0 5px;}

.swiper-image {  width: 100%; height: 100%;}
.mobile {position:absolute; bottom:0; float:left; height: 100%; z-index:100;}
.swiper-slide {
  -webkit-flex-shrink: 0;  -ms-flex: 0 0 auto;  -ms-flex-negative: 0; flex-shrink: 0;
  width: 100%;  height: 100%;  position: relative;  background-color: #fff;  overflow: hidden;
   display: block;  }
.img_right {overflow:hidden; position:absolute; top:0; }
}