@charset "utf-8";

/* 본고딕 웹폰트 가져오기 180124 morenvy.com */ 
/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess */ 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 100; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); 
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 300; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'); 
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 400; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 500; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 700; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 900; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype'); 
 } 





/* reset.css */
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, address, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea{margin:0; padding:0; font-family: 'Noto Sans KR';}
h1, h2, h3, h4, h5, h6{font-size:100%;}
img, fieldset{border:0px;}
table{border-collapse:collapse;}
ul, ol, li{list-style:none;}
address, em{font-style:normal;}
li img, object{vertical-align:top;}
input, select, textarea, form img{vertical-align:middle;}
a{ outline:1; text-decoration:none; border:nonbe;}
body { font: 12px /1.2 Dotum, "돋움", arial; color:#666;   }
.noMargin { margin:0px;}



/*layout*/
.headerWrap {width:100%;  background:#f2941a; }
#header {width:1000px; height:119px; margin:0 auto; position:relative;}
.contactWrap {width:100%; background:#626262;}
#contact {width:1000px; height:58px; margin:0 auto; position:relative;}

.slideWrap {width:1000px; height:518px; position:relative; margin:0 auto;}
#slide {width:1000px; height:518px; background:#fff; position:relative; margin:0 auto; }
#container {width:100%; margin:0 auto; }
.footerWrap {width:100%;  background:#717171; overflow:hidden;}
#footer {width:1000px; height:260px; margin:0 auto;}
.content1Wrap {width:100%; height:478px;  background:#f5f5f5; background:url(../img/con1_bg2.jpg); background-repeat:no-repeat; background-position:center bottom; }
.content1 { width:1000px; height:477px; margin:0 auto; overflow:hidden;}
.content2 { width:1000px; height:561px; margin:0 auto; overflow:hidden;}
.content3Wrap {width:100%; background:#ededed;}
.content3 { width:1000px; height:720px; margin:0 auto; overflow:hidden;}
.content4 { width:1000px; height:521px; margin:0 auto;}
.content5 {width:50%; height:431px; background:#f2941a; float:left;}
#map {width:50%; height:431px; background:#f0ede6; float:left;}
.subTitle_wrap {width:100%; background:#efefef;}
.subTitle {width:1000px; height:252px; margin:0 auto; background:url(../img/sub_bg.jpg);overflow:hidden;}


/*header*/

#header h1 {float:left; margin-top:27px;}
#gnb {float:right; font-size:18px; letter-spacing:-2px; font-weight:700; position:relative; }
#gnb>li {float:left; margin-left:20px; margin-top:61px; text-align:center; }
#gnb a {color:rgba(255,255,255,0.8); transition:color 0.5s;}
#gnb a:hover {color:rgba(255,255,255,1);}
#gnb>li:last-child {margin-top:55px; }
#gnb>li:last-child a {display:inline-block; background:rgba(255,255,255,0.8); color:#f2941a; margin-left:5px; width:93px; height:34px; border-radius:17px; padding-top:5px; box-sizing:border-box;transition:background 0.5s;}
#gnb>li:last-child a:hover {background:rgba(255,255,255,1);}
#gnb>li>ul {position:absolute; top:85px; display:none;}
#gnb>li>ul>li {float:left; margin-right:15px; font-weight:500;}
#gnb>li>ul>li>a {font-size:14px; letter-spacing:-1px; color:#535353;}
#gnb>li>ul>li>a:hover {text-decoration:underline; color:#535353;}


.toggle{ display: block; }
#nav_btn{ display: none; position:absolute; top:30px; left:20px; cursor: pointer; }
#nav_btn span, #nav_btn span:before, #nav_btn span:after{ 
width: 28px; 
height: 4px; 
float: left; 
display: block; 
background: #fff; 
position: relative; 
text-indent: -9000px; 
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
-ms-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
#nav_btn span{ margin: 8px 0; }
#nav_btn span:before, #nav_btn span:after{ content: ''; position: absolute; }
#nav_btn span:before{ top: -8px; }
#nav_btn span:after{ bottom: -8px; }
#nav_btn.active span{ background-color: transparent; }
#nav_btn.active span:before, #nav_btn.active span:after{ top: 0; }
#nav_btn.active span:before{ transform: rotate(45deg); -webkit-transform: rotate(45deg); }
#nav_btn.active span:after{ transform: translateY(-10px) rotate(-45deg); -webkit-transform: translateY(-10px) rotate(-45deg); top: 10px; }

.btnMo .fa { font-size:35px; color:#fff;}
.catalk2 { display:none; position:absolute; bottom:-20px; right:15px; opacity:1;}   
.ntalk2 { display:none; position:absolute; bottom:-20px; right:15px; opacity:1;}  

#gnb #con2 {display:none;}


/*contact*/
#contact>img {position:absolute; top:13px; left:5px;}
.ntalk {position:absolute; right:0px; bottom:6px; display:block; }
.catalk {position:absolute; right:170px; bottom:6px; }
#contact>p {display:inline; font-size:32px; color:#b5b4b4; letter-spacing:-3px; font-weight:500; position:absolute; top:9px; left:45px;}
.phone {font-size:37px; position:absolute; top:6px; left:168px; font-weight:700; color:#f2941a; letter-spacing:-1px;}
.tel {position:absolute; top:12px; left:432px; font-size:15px; color:#b5b4b4; letter-spacing:0.5px;}
.tel span {letter-spacing:-1px; font-size:14.5px;}
.mail {position:absolute; top:29px; right:360px; font-size:15px; color:#b5b4b4;}



/*subTitle*/
.subTitle h1 {font-size:40px; font-weight:500; letter-spacing:-4px; margin-top:85px; margin-left:5px;}
.subTitle P {font-size:16px; font-weight:500; letter-spacing:5px; margin-top:15px; margin-left:9px; color:#f2941a; font-weight:bold;}



/*★content change★*/

.map {text-align:center; position:relative;}
.map h1 {font-size:46px;font-weight:500; letter-spacing:-5px; margin-top:200px; margin-bottom:80px;}
.map h1 span {color:#f2941a;}
.map h1:before {content:""; display:block; width:40px; height:2px; background:#f2941a; position:absolute; left:50%; margin-left:-20px; top:-30px;}
.map p {font-size:22px;font-weight:300; letter-spacing:-2px; margin-bottom:55px; line-height:1.7em;}
.map p:nth-child(2) {font-size:24px; font-weight:400; color:#535353; letter-spacing:-2px;}
.map p:nth-child(3) { color:#535353; letter-spacing:-2px; line-height:1.8em;}
#map {width:1000px; height:462px; border:0px solid; background:#f3f2eb; margin-top:90px; margin-bottom:183px; position:relative; left:50%; margin-left:-500px;}



/*footer*/
#footer {text-align:center;}
#footer ul {margin-top:60px; margin-bottom:30px; display:inline-block;}
#footer li {float:left; margin-right:30px; font-size:16px; font-weight:500; letter-spacing:-1px; }
#footer li:last-child {margin-right:0px;}
#footer p {clear:both; color:#a3a2a2; font-size:16px; margin-bottom:25px;}
#footer li a {color:#bdbcbc;}
#footer li a:hover {text-decoration:underline;}


@media screen and (min-width:640px) and (max-width:999px) { 
    
    /*layout*/
#header {width:100%; height:81px;  }
.contactWrap {width:100%;  background:#626262; overflow:hidden;}
#contact {width:100%; height:41px; margin:0 auto; position:relative; display:none; }
.slideWrap {width:100%; height:400px; position:relative;}
#slide {width:100%; height:400px; background:#fff; position:relative;  overflow:hidden;}
#footer {width:100%; height:120px; margin:0 auto;}
    .content1Wrap {width:100%; height:400px;  background:#f5f5f5; background:url(../img/con1_bg2.jpg); background-repeat:no-repeat; background-position:center bottom; }
.content1 { width:100%; height:400px; margin:0 auto; overflow:hidden;}
.content2 { width:100%; height:480px; margin:0 auto; overflow:hidden;}
.content3 { width:100%; height:580px; margin:0 auto; overflow:hidden;}
.content4 { width:100%; height:400px; margin:0 auto; }
.content5 {width:100%; height:431px; background:#f2941a; float:left;}
.subTitle_wrap {width:100%; background:#efefef; display:none; }
.subTitle {width:1000px; height:252px; margin:0 auto; background:url(../img/sub_bg.jpg);overflow:hidden; } 
 
    
/*header*/

#header h1 {float:none; margin-top:0px; margin-left:0px; width:270px; margin:0px auto; position:relative; top:10px;}
#header h1 img {width:270px;}
#gnb {float:none; width:100%; font-size:16px; letter-spacing:-1px; font-weight:700; position:absolute; z-index:9999; top:81px; overflow:hidden; margin-left:0px;}
#gnb>li {float:none; margin-left:0px; margin-top:0px; text-align:left; height:40px; width:100%;  background:#545453; border-bottom:1px solid #777; font-weight:400; padding-bottom:0px;}
#gnb>li>a {color:rgba(255,255,255,0.8); transition:none; width:100%; height:100%; display:inline-block; background:#626262; padding-top:10px; padding-left:15px; box-sizing:border-box;}    
#gnb>li>a:hover {background:#777; color:#fff;}    
#gnb a {color:#ccc; transition:none; width:100%; display:block;}
#gnb a:hover {color:#777;}
#gnb>li:last-child {margin-top:0px; border-bottom:0px solid #777; background:#626262;}
#gnb>li:last-child a {display:inline-block;   color:#ccc; margin-left:0px; width:100%; height:100%; border-radius:0px; padding-top:10px; box-sizing:border-box; transition:none; background:none; }
#gnb>li:last-child a:hover {background:#777; height:100%;color:#fff;}
#gnb>li>ul {position:absolute; top:0px; right:0px; width:50%;}
#gnb>li>ul>li {float:none; margin-right:0px; font-weight:500;display:block; height:40px; background:#777; border-bottom:1px solid #777; }
#gnb>li>ul>li {border-bottom:1px solid #777; }
#gnb>li>ul>li:last-child {border-bottom:0px solid #777; }
#gnb>li>ul>li>a {font-size:14.5px; letter-spacing:-1px; color:#fff; width:100%; height:100%; padding-top:10px; padding-left:15px; box-sizing:border-box; font-weight:300;  }
#gnb>li>ul>li>a:hover {text-decoration:none; color:#f2941a;}    

.toggle{ display: none; }
#nav_btn{ display: block; }
    
.btnMo .fa { font-size:35px; color:#fff;}
/*
.catalk2 { display:block; position:absolute; bottom:20px; right:52px; opacity:1;}   
.ntalk2 { display:block; position:absolute; bottom:20px; right:15px; opacity:1;}  
*/
#gnb>li>a.on {background:#777; color:#fff;}
   
#gnb #con2 {display:block;}    
#gnb #online {display:none;}   
#gnb #con2 #contact02 li a {letter-spacing:0px; font-size:14.5px;}
    #gnb #con2 #contact02 li a b {font-size:18px; display:inline-block; margin-right:10px;}
    
    
    
/*★content change★*/

.map {text-align:center; position:relative;}
.map h1 {font-size:40px;font-weight:500; letter-spacing:-4px; margin-top:120px; margin-bottom:40px;}
.map h1 span {color:#f2941a;}
.map h1:before {content:""; display:block; width:40px; height:2px; background:#f2941a; position:absolute; left:50%; margin-left:-20px; top:-25px;}
.map p {font-size:18px;font-weight:300; letter-spacing:-2px; margin-bottom:35px; line-height:1.7em;}
.map p:nth-child(2) {font-size:20px; font-weight:400; color:#535353; letter-spacing:-2px;}
.map p:nth-child(3) { color:#535353; letter-spacing:-2px; line-height:1.8em;}
#map {width:100%; height:400px; border:0px solid; background:#f3f2eb; margin-top:70px; margin-bottom:0px; position:relative; left:0px; margin-left:0px;}   
    
    
    
    
/*footer*/
#footer {text-align:center;}
#footer ul {margin-top:60px; margin-bottom:30px; display:inline-block; display:none;}
#footer li {float:left; margin-right:30px; font-size:16px; font-weight:500; letter-spacing:-1px; }
#footer li:last-child {margin-right:0px;}
#footer p {clear:both; color:#a3a2a2; font-size:16px; margin-bottom:20px; margin-top:40px;}
#footer li a {color:#bdbcbc;}
#footer li a:hover {text-decoration:underline;}    
}


@media screen and (min-width:0px) and (max-width:639px) { 
 
    
/*layout*/
    .headerWrap {background:#f2941a; }
#header {width:100%; height:65px;  }
.contactWrap {width:100%;  background:#626262; overflow:hidden;}
    
#contact {width:100%; height:41px; margin:0 auto; position:relative; display:none; }
.slideWrap {width:100%; height:400px; position:relative;}
#slide {width:100%; height:450px; background:#fff; position:relative;  overflow:hidden;}
#footer {width:100%; height:50px; margin:0 auto;}
.content1 { width:100%; height:400px; margin:0 auto; overflow:hidden;}
    .content1Wrap {width:100%; height:400px;  background:#f5f5f5; background:url(../img/con1_bg2.jpg); background-repeat:no-repeat; background-position:center bottom; }
.content2 { width:100%; height:400px; margin:0 auto; overflow:hidden;}
.content3 { width:100%; height:845px; margin:0 auto; overflow:hidden;}
.content4 { width:100%; height:450px; margin:0 auto; overflow:hidden;}
.content5 {width:100%; height:400px; background:#f2941a; float:left;}
.subTitle_wrap {width:100%; background:#efefef; display:none; }
.subTitle {width:1000px; height:252px; margin:0 auto; background:url(../img/sub_bg.jpg);overflow:hidden; } 
 
    
    
/*header*/

#header h1 {float:none; margin-top:0px; margin-left:0px; width:165px; margin:0px auto; position:relative; top:15px;}
#header h1 img {width:165px;}
#gnb {float:none; width:100%; font-size:16px; letter-spacing:-1px; font-weight:700; position:absolute; z-index:9999; top:65px; overflow:hidden; margin-left:0px;}
#gnb>li {float:none; margin-left:0px; margin-top:0px; text-align:left; height:40px; width:100%;  background:#545453; border-bottom:1px solid #777; font-weight:400; padding-bottom:0px;}
#gnb>li>a {color:rgba(255,255,255,0.8); transition:none; width:100%; height:100%; display:inline-block; background:#626262; padding-top:10px; padding-left:2%; box-sizing:border-box;}    
#gnb>li>a:hover {background:#777; color:#fff;}    
#gnb a {color:#ccc; transition:none; width:100%; display:block;}
#gnb a:hover {color:#777;}
#gnb>li:last-child {margin-top:0px; border-bottom:0px solid #777; background:#626262;}
#gnb>li:last-child a {display:inline-block;   color:#ccc; margin-left:0px; width:100%; height:100%; border-radius:0px; padding-top:10px; box-sizing:border-box; transition:none; background:none; }
#gnb>li:last-child a:hover {background:#777; height:100%;color:#fff;}
#gnb>li>ul {position:absolute; top:0px; right:0px; width:50%;}
#gnb>li>ul>li {float:none; margin-right:0px; font-weight:500;display:block; height:40px; background:#777; border-bottom:1px solid #777; }
#gnb>li>ul>li {border-bottom:1px solid #777; }
#gnb>li>ul>li:last-child {border-bottom:0px solid #777; }
#gnb>li>ul>li>a {font-size:14.5px; letter-spacing:-1px; color:#fff; width:100%; height:100%; padding-top:10px; padding-left:3%; box-sizing:border-box; font-weight:300;  }
#gnb>li>ul>li>a:hover {text-decoration:none; color:#f2941a;}    

.toggle{ display: none; }
#nav_btn{ display: block; top:23px; left:2%; }
    
.btnMo .fa { font-size:35px; color:#fff;}
/*
.catalk2 { display:block; position:absolute; bottom:20px; right:52px; opacity:1;}   
.ntalk2 { display:block; position:absolute; bottom:20px; right:15px; opacity:1;}  
*/    
#gnb>li>a.on {background:#777; color:#fff;}
   
#gnb #con2 {display:block;}    
#gnb #online {display:none;}   
#gnb #con2 #contact02 li a {letter-spacing:0px; font-size:14.5px;}
    #gnb #con2 #contact02 li a b {font-size:18px; display:inline-block; margin-right:10px;}
    
    
/*★content change★*/

.map {text-align:center; position:relative;}
.map h1 {font-size:34px;font-weight:500; letter-spacing:-4px; margin-top:80px; margin-bottom:25px;}
.map h1 span {color:#f2941a;}
.map h1:before {content:""; display:block; width:30px; height:2px; background:#f2941a; position:absolute; left:50%; margin-left:-15px; top:-20px;}
.map p {font-size:16px;font-weight:300; letter-spacing:-1.5px; margin-bottom:25px; line-height:1.7em; margin-left:5%; margin-right:5%;}
.map p:nth-child(2) {font-size:16px; font-weight:400; color:#535353; letter-spacing:-2px;}
.map p:nth-child(3) { color:#535353; letter-spacing:-1.5px; line-height:1.8em;}
#map {width:100%; height:300px; border:0px solid; background:#f3f2eb; margin-top:50px; margin-bottom:0px; position:relative; left:0px; margin-left:0px;}       
.map p br {display:none;}
    
    
/*footer*/
#footer {text-align:center;}
#footer ul {margin-top:60px; margin-bottom:30px; display:inline-block; display:none;}
#footer li {float:left; margin-right:30px; font-size:16px; font-weight:500; letter-spacing:-1px; }
#footer li:last-child {margin-right:0px;}
#footer p {clear:both; color:#a3a2a2; font-size:13px; margin-bottom:20px; margin-top:30px;}
#footer li a {color:#bdbcbc;}
#footer li a:hover {text-decoration:underline;}    
    #footer img {display:none;}     
}