@charset "utf-8";
/* CSS Document */

/* 폰트 */
@font-face {
    font-family:'Nanum';
    src:url('../font/nanum.eot');
    src:url('../font/nanum.eot?#iefix') format('embedded-opentype'), url('../font/nanum.woff') format('woff'), url('../font/nanum.ttf') format('truetype');
    font-weight:normal;
    font-style:normal; 
}
@font-face {
    font-family:'NanumBold';
    src:url('../font/nanum_bold.eot');
    src:url('../font/nanum_bold.eot?#iefix') format('embedded-opentype'), url('../font/nanum_bold.woff') format('woff'), url('../font/nanum_bold.ttf') format('truetype');
    font-weight:bold;
    font-style:normal; 
}

body{font-family:'돋움',Dotum,'굴림',Gulim,Helvetica,sans-serif}
body, input, textarea, select, button, table, h1, h2, h3, h4, h5{font-size:16px; line-height:1.25em /* 20px */}

/* HTML Default */
article, aside, figcaption, figure, footer, header, hgroup, nav, section {display:block}
mark{background:#FF0;color:#000}
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, font, img, 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; font-size:100%;}
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,q:before, q:after { content:''; }
a {margin:0; padding:0; text-decoration:none;}
button { margin:0; padding:0; border:0; font:inherit; color:inherit; background:transparent; overflow:visible; cursor:pointer; line-height:1; }
button::-moz-focus-inner { margin: -1px; padding: 0; }
table {border-collapse:collapse; border-spacing:0; width:100%;}
h1, h2, h3, h4, h5 {font-weight:normal; font-family:'NanumBold';}
img, select, input, button {vertical-align:middle;}
input, select { color:inherit; font:inherit; line-height:100%; }
textarea { resize:none; font:inherit; overflow-y:auto; }
html {-webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;}
.hid, legend, hr {position:absolute; left:-10000%; top:0; overflow:hidden; width:1px; height:1px; font-size:0; line-height:0; text-indent:-10000px;}
caption {visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
body {margin:0; padding:0; font-size:14px; word-break:break-all; -webkit-text-size-adjust:none;}
ul, ol, li, figure {list-style-type:none; margin:0; padding:0;}
cite, blockqoute {display:block; font-style:normal;}
figcaption { display:none;}
.blind {display:block; overflow:hidden; position:absolute; top:0; left:0; width:0 !important; min-width:0 !important; height:0; border:0; background:0 0; font-size:0; line-height:0}

.al {text-align:left !important;}
.ac {text-align:center !important}
.ar {text-align:right !important}
.fl {float:left !important;}
.fr {float:right !important;}

.no_wrap {white-space:nowrap}
.ell_txt {text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

.border_none{ border:none !important;}

.clearfix:after {display:block; visibility:hidden; clear:both; height:0; content:'';}
.clearfix {*zoom:1;}
.inner {width: 1280px; margin: 0 auto; position: relative;}

#skipArea, #skipArea ul {height:0; width:100%;}
#skipArea a {position:absolute; top:-9999px; left:0; z-index:100; width:100%; height:30px; background-color:#000; color:#fff; line-height:30px; font-family:'NanumBold'; opacity:0.6; text-align:center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60);}
#skipArea a:focus, #skipArea a:hover, #skipArea a:active{top:0;}

/* 마진값 */
.mr0 { margin-right:0 !important; }
.mgt5 { margin-top:5px !important; }
.mgt10 { margin-top:10px !important; }
.mgt50 { margin-top:50px !important; }
.mgr25 { margin-right:25px !important; }
.mgt30 { margin-top:30px !important; }
.mgt40 { margin-top:40px !important; }
.mgt50 { margin-top:50px !important; }
.mr0 { margin-right: 0 !important;}



.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }

.hamburger-box {
  width: 30px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 2px;
    background-color: #A49E95;
    border-radius: 2px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; display: none;}


#clock { position:absolute; top:-20px; right: 100px;width:200px;height:200px; }
	#clock img { position:absolute;top:0;left:0; }




body, html { height:100%; background-color: #fff;}
.inner {width: 1280px; margin: 0 auto;}

.horizon{ opacity:"0"; }

#wrap {position: relative; width: 100%; overflow: hidden;}
header {position: relative;}
header .sTop h1 {padding-top: 50px}
header .sTop h1 a {text-indent: -9999px; display: block; background: url(../images/logo.jpg) no-repeat center 0; height: 111px;}

.gnb h1 {text-indent: -9999px; display: block; background: url(../images/logo.gif) no-repeat center 0; height: 30px; width: 150px; display: none;} 
.hamburger{position: absolute;top:18px ;right: 0;z-index: 9999999; padding: 0 !important;}  

.hamburger--collapse.is-active .hamburger-inner {z-index: 9999999; }

#side_slidebar button {position:absolute; top:75px; right:50px; text-indent:-9999px; background:url(../images/close.gif); width:24px; height:24px}
#side_slidebar {position: fixed; right: -400px; width: 320px; padding-left: 80px; padding-top: 80px; height: 100%; top: 0; background: #EEEAE5; z-index: 99999}
#side_slidebar a {text-indent: -9999px; background: url(../images/sidebar_txt.png) no-repeat; display: block;}
#side_slidebar .lang_wrap a{ float: left; display: block; width: 38px; height: ; }
#side_slidebar .lang_wrap a:first-child {background-position: 0 0;}
#side_slidebar .lang_wrap a:last-child {background-position: -38px 0;}

#side_slidebar ul {margin: 140px 0 100px;}
#side_slidebar li {margin-bottom:65px;}
#side_slidebar li a {width: 100px;}
#side_slidebar li:first-child a {background-position: 0 -20px;}
#side_slidebar li:nth-child(2) a {background-position: 0 -40px;}
#side_slidebar li:nth-child(3) a {background-position: -103px -80px;}
#side_slidebar li:nth-child(4) a {background-position: 0 -60px;}
#side_slidebar li:last-child a {background-position: 0 -80px;}

#side_slidebar .sns_wrap {margin-top: 110px;}
#side_slidebar .sns_wrap a {float:left}
#side_slidebar .sns_wrap a:first-child {margin-left:0}
#side_slidebar p{text-indent: -9999px; background: url(../images/sidebar_txt.png) no-repeat 0 -100px; height: 30px; }
#side_slidebar span{text-indent: -9999px; background: url(../images/sidebar_txt.png) no-repeat 0 -131px; height: 30px; display: block; height: 20px; margin-top: 60px;}

.gnb {position: relative; width: 100%; ;z-index:500; margin-top:60px; height: 35px; }
.gnb.smint.fxd {background:#fff; margin-top:0; height: 50px;}

.gnb a{display: block;  z-index: 800; font-size: 15px; background: url(../images/gnb.png) no-repeat 0 0; text-indent: -9999px; width: 80px; height: 30px; margin-right: 143px; float: left; margin-top: 5px;}
.gnb .first {background-position: 5px 0; margin-left:150px;}
.gnb .sec {background-position: -70px 0;}
.gnb .fourth {background-position: -140px 0;}
.gnb .thrd {background-position: -310px 0;}
.gnb .last {background-position: -222px 0;}


.gnb .first:hover, .gnb .first:focus {background-position: 5px -34px;} 
.gnb .sec:hover, .gnb .sec:focus{background-position: -70px -34px;}
.gnb .thrd:hover, .gnb .thrd:focus{background-position: -310px -34px;}
.gnb .fourth:hover, .gnb .fourth:focus{background-position: -140px -34px;}
.gnb .last:hover, .gnb .last:focus{background-position: -222px -34px;}


 

#container {position: relative; padding-bottom: 170px; margin-top:30px;}

.main_slider ul li {position: relative;}
.main_slider ul .txt {opacity: 0; position: absolute; top: 200px; left: 0; z-index: 9999;}
.main_slider p {color:#fff; text-align:center; position: absolute; left:0; bottom: 30px; width:100%; padding-top:30px ; font-family: 'Roboto', sans-serif; background: url(../images/pager_bg.png) no-repeat center 0;}


.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {bottom: 55px;}
.bx-wrapper .bx-pager.bx-default-pager a {width: 0;
	height: 0;
	border: 6px solid transparent;
	border-bottom-color: #fff;
	position: relative;
	top: -6px;
border-radius: 0; background: none;    margin: 0 45px; opacity: 0;}

.bx-wrapper .bx-pager.bx-default-pager a:after {
	content: '';
	position: absolute;
	left: -6px;
	top: 6px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-top-color: #fff;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {background: none; opacity: 1;}


.s1 {padding-top: 100px;}
.p1 p {text-indent: -9999px; background: url(../images/p1.png) center 0 no-repeat; height: 234px;}


.p2 {padding: 200px 0 100px; position: relative;}
.p2 p {text-indent: -9999px; background: url(../images/p2.png) no-repeat 100% 0; height: 134px; }

.dot {position: absolute; width: 24px; height: 373px; background: url(../images/bg_txt.png);}
.d01 {top:0; left: 0}
.d02 {top:50px; left: 50px}
.d03 {top:100px; left: 100px}
.d04 {top:150px; left: 150px}
.d05 {top: 0; right: 0;}
.d06 {top: 50px; right: 50px;}
.d07 {top: 100px; right: 100px;}
.d08 {top: 150px; right: 150px;}
.p3 {padding: 150px 0 50px; position: relative;}
.p3 p {text-indent: -9999px; background: url(../images/p3.png) no-repeat 100% 0; height: 164px; position: relative; z-index: 1000;}

.img02 {margin: 100px auto 50px;}


.s2 {padding-top: 50px;}
.p4 { background: #D3D0CB; padding:100px 0; width: 100%;}
.p4 p {text-indent: -9999px; background: url(../images/p4.png) no-repeat center 0; height: 177px;}
.p4 .inner > div {width: 1100px; margin: 70px auto 0; padding-bottom: 100px;}
.p4 .inner > div div{float: left; width: 16%;text-align: center;}



.p5 p { text-indent: -9999px; background: url(../images/img04.jpg) no-repeat; height: 440px;  margin-top: -80px;}

.p6 {margin: 100px auto;}
.p6 p {text-indent: -9999px; background: url(../images/p5.png) no-repeat; height: 115px;}

.category {padding: 50px 0;}
.category > div {width: 25%; float: left; }



.category > div img {width: 100%;}

.img03  {margin: 100px auto;}

.img03 h3 {text-indent: -9999px; background: url(../images/p7.png) no-repeat; height: 35px; margin-top: 80px;}



.s3 {margin-top: 50px;}
.img04 {padding-top :50px; position: relative;}
.img04 .ap {position: absolute;}
.img04 .w {top: 588px; left: 145px;  
      -webkit-animation-duration: 7s;
    -moz-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-delay: 1s;
     -moz-animation-delay: 1s;
    animation-delay: 1s;
    
}
/*  animation-iteration-count: infinite;}*/
.img04 .i {top:645px ; left:295px;
    -webkit-animation-duration: 7s;
    -moz-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-delay: 3s;
     -moz-animation-delay: 3s;
    animation-delay: 3s
}
.img04 .n {top:590px ; left:688px;
     -webkit-animation-duration: 7s;
    -moz-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-delay: 5s;
     -moz-animation-delay: 5s;
    animation-delay: 5s
}


.img04 .d {top: 383px; left:965px;
  -webkit-animation-duration: 8s;
    -moz-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-animation-delay: 8s;
     -moz-animation-delay: 8s;
    animation-delay: 8s
}



/*
.img04 .b {width: 23px; height: 55px; background: url(../images/test.png) no-repeat 0px -3px;top: 433px; left:965px;}
.img04 .b:hover {
  background-position: -220px -3px;
  transition: background 0.5s steps(10);
}
*/


.img04 .btn_view {text-indent: -9999px; display: block; background: url(../images/btn_view.jpg); margin: -32px auto 0 ; width: 280px; height: 64px; position: relative; z-index: 499}

.img04 .m_bg {display: none; width: 100%;}


.p7 {margin-top: 50px; margin-bottom: 130px;}
.p7 p{ text-indent: -9999px; background: url(../images/p8.png) no-repeat 100% 0; height: 35px;}



#map { position: relative; height: 650px; }



.contact {margin: 30px auto 100px;}
.contact p{ text-indent: -9999px; background: url(../images/p9.png) 0 0 no-repeat; height: 32px;}

.p8 p{text-indent: -9999px; background: url(../images/p11.png) 0 0 no-repeat; height: 215px;}

.top {text-indent: -9999px; background: url(../images/top.jpg); display: block; width: 60px; height:60px ;position: absolute;top:-30px; left: 50%; margin-left: 580px;  z-index: 9999}


footer {border-top: 1px solid #F5F5F5; position: relative; padding: 0px 0 80px;}
footer li {float: left; width: 360px;  margin-top: 50px;}
footer p {font-size: 12px; color: #aaa; font-family: '맑은 고딕'; line-height: 20px;}
footer h4 {text-indent: -9999px; background: url(../images/p10.png) no-repeat; width: 100px; margin-bottom: 20px;}
footer li:first-child h4{background-position: 0 0;}
footer li:nth-child(2) h4{background-position: -100px 0;}
footer li:last-child h4{background-position: -200px 0;}


.sns_wrap a {text-indent: -9999px; background: url(../images/sns.png) no-repeat !important; width: 25px; height: 21px; float: right; display: block; margin-left: 10px;}
.sns_wrap .fb { background-position: 0 0;}
.sns_wrap .is { background-position: -33px 0 !important;}

.copyright {margin-top: 70px;font-family: '맑은 고딕';}
.copyright p{ text-align: center; font-size: 14px; color: #aaa;}

/*----------------------------------*/
#s_container {background: #F8F8F8;position: relative; padding-bottom: 170px; margin-top:30px;}

.s_visual {position: relative;}
.s_visual img {width: 100%;}
.s_visual p {text-indent: -9999px;background: url(../images/sub/s_visual_txt.png) no-repeat center 0; width: 880px; height: 480px; position: absolute; top: 0; left: 50%; margin-left: -440px;}


.s_contents ul li{float: left; width: 400px; margin-right: 40px; position: relative; margin-bottom: 50px;}
.s_contents ul li img {width: 400px;}
.s_contents ul li h3 {font-family: Georgia, Times, "Times New Roman", serif; font-weight: bold; color: #000; font-size: 22px; padding: 30px 30px 0 30px;background: #fff;}
.s_contents ul li p {font-family: Georgia, Times, "Times New Roman", serif; color: #000; font-size: 16px;  background: #fff; padding: 10px 0 30px 30px;}
.dim { background: rgba(0,0,0,0.05); position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; display: none;} 
.s_contents ul li a {display: block;}
.s_contents ul li a > div {overflow: hidden; position: relative;}
.s_contents ul li a:hover .dim{ display: block;}



.s_menu ul {margin: 80px auto 40px; width: 615px;}
.s_menu li{height: 19px; float: left; text-indent: -9999px; background: url(../images/sub/s_menu.png) no-repeat; margin-right: 70px; }
.s_menu li:first-child {background-position: 0 -21px; width: 20px;}
.s_menu li:nth-child(2) {background-position:-87px -21px;  width:165px ; }
.s_menu li:nth-child(3) {background-position:-318px -21px; width: 70px; }
.s_menu li:nth-child(4) {background-position: -454px -21px; width: 55px;}
.s_menu li:last-child {width: 25px;background-position: -572px -21px; }
.s_menu li:hover:first-child, .s_menu li:focus:first-child, .s_menu li.active:first-child{background-position: 0 0; }
.s_menu li:hover:nth-child(2), .s_menu li:focus:nth-child(2), .s_menu li.active:nth-child(2){background-position: -87px 0; }
.s_menu li:hover:nth-child(3), .s_menu li:focus:nth-child(3), .s_menu li.active:nth-child(3){background-position: -318px 0; }
.s_menu li:hover:nth-child(4), .s_menu li:focus:nth-child(4), .s_menu li.active:nth-child(4){background-position: -454px 0; }
.s_menu li:hover:last-child, .s_menu li:focus:last-child, .s_menu li.active:last-child{background-position: -572px 0; }



@media screen and (max-width :1280px) {
    
    .s_contents ul li{float: left; width: 32%; margin-right: 2%; position: relative; margin-bottom: 50px;}
    .s_contents ul li img {width: 100%;}
    .gnb {margin-top: 10px;}
    .gnb h1 {display: block;}
    .hamburger {top: 10px;}
    header .sTop h1 {display: none;}
    .gnb.smint.fxd {padding-top: 10px;}
    #container, #s_container {margin-top: 10px;}
    .inner {width: 90%; }
    .main_slider.inner, .s_visual{width: 100%;}
    .gnb a {display: none;}
    .p4 p, .p5 p, .img03 h3, .p7 p, .contact p, .p8 p{-webkit-background-size: contain;
    background-size: contain;}
    .img03 img{width: 100%;}
    .p4 .inner > div {width: 90%;}
    .s_visual p {width: 500px; -webkit-background-size: contain;background-size:contain; margin-left: -250px;}
    .hamburger{right: 20px;}
    .s_contents ul li h3 {height: 40px; font-size: 16px;}
    .img04 .bg, .img04 .ap {display: none;}
    .img04 .m_bg {display: block;}
    .s_contents ul li p {font-size: 12px;}
    #clock { position:relative; margin: 50px auto 0; top:0; right: 0; }    
}


@media screen and (max-width :1030px) { 
    
    .p4 .inner > div div img {width: 100%;}
}
@media screen and (max-width :980px) { 
    .p1 p, .p2 p, .p3 p, .p6 p{-webkit-background-size: contain;
    background-size: contain;}
    .s_contents ul li h3 {font-size: 14px;}
    .img01 img, .img02 img{width: 100%;}
}
@media screen and (max-width :880px) {
    #side_slidebar p {display: none;}
    #side_slidebar button {top: 35px; right: 20px;}
    #side_slidebar ul {margin: 50px 0;}
    #side_slidebar li {margin-bottom: 20px;}
    #side_slidebar {padding-left: 30px; padding-top: 40px; width: 230px;}
    #side_slidebar .sns_wrap {margin-top: 50px;}
    #side_slidebar span{margin-top: 30px;}
    .main_slider ul .txt {width: 600px;left: 50%; margin-left: -300px; top:150px;}
    .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {bottom: 33px;}
    .main_slider p {bottom: 10px;}
    .p4 {padding: 50px 0;}
    .s_menu li {margin-right: 30px;}
    .s_menu ul {width: 465px;}
    
    
     
/*
    .s_contents ul li {width: 49%; margin-right: 2%;}
    .s_contents ul li:nth-child(3) { margin-right: 2%;}
    .s_contents ul li:nth-child(2), .s_contents ul li:nth-child(4) {margin-right: 0;}
*/
    
    .s_contents ul li {width: 100%; margin-right: 0;}
    .s_contents ul li h3 {height: 20px;} 
    
  
}

@media screen and (max-width :620px) {
    .p5 p {height: 200px;}
    .p4 .inner > div {margin-top: 0;padding-bottom:0}
    .main_slider ul .txt {width: 420px;margin-left: -210px; top:100px;}
    .s_visual p {width: 320px; -webkit-background-size: contain;background-size:contain; margin-left: -160px;}
    .s_menu ul {width: 215px;}
    .s_menu li {margin-bottom: 10px;}
    .s_menu li:nth-child(2) {margin-right: 0;}
    .dot {opacity: 0.5 !important;}
}

@media screen and (max-width :580px) { 
 
/*    .s_contents ul li:nth-child(3) { margin-right: 0;}*/
    
    .p6 {margin: 0 auto;}
    .p4 p {height:100px ;}
    .p2 {padding-bottom: 0; margin-top: -140px;}
    .p5 p{margin-top: -30px;}
    .p1 p {height: 130px;}
    .img02{margin-top: 0;}
    .img03 {margin: 0 auto;}
    .img03 h3 {margin-top: 15px;}
    .p7 {margin: 15px auto 0;}
    .s3 {margin-top: 0;}
    .p8 p {height: 80px;}
    .p3 {margin-top: -50px;}
    .p3 p {height: 95px;}
    .p6 p {height: 100px;}
    .category {padding-top: 0;}
    #container {padding-bottom: 50px;}
    .contact {margin-bottom: 50px;}
}


@media screen and (max-width :400px) { 
    .img02 {margin: 0 auto;}
    .main_slider ul .txt {top:50px;}
    .p1 p {height: 160px;}
    .p4 p {height: 90px;}
    .p2 {padding:50px 0;}
    .p5 p {margin-top: -20px;}
    .p6 {margin: 0 auto;}
    .category > div {width: 50%; margin-bottom: 30px;}
    .img03 {margin: 0 auto;}
    .img03 h3 {margin-top: 10px;}
    .p7 {margin-bottom: 0;}
    .s_visual p {height: 160px;}
    #map {height: 350px;}
    .p8 p {height: 60px;}
}