body{word-break:keep-all ;}

*{margin:0px; padding:0px;}
li{list-style:none;}
a{text-decoration:none; color:#222;}


body{font-family: 'Montserrat', sans-serif; font-family: 'Nanum Gothic', sans-serif; }

@media(min-width:1201px){
.bar{width:100%; }
.bar:after{clear:both; content:""; display:block;}
.bar li{float:left; height:12px;}
.bar li:first-child{width:80%; background:#ccc;}
.bar li:last-child{width:20%;background:#000; color:#fff; text-align:center; font-size:10px; line-height:12px;}

#header{width:1200px; margin:30px auto 0px; position:relative; height:84px; }
ul.nb{position:absolute; top:0px; right:0px;}
ul.nb li{float:left; margin-right:5px;}
ul.nb li a{color:#ccc; font-size:12px; }
img.nb{display:none;}
img.nb1{display:none;}
.gnb_mo{display:none;}

.gnb{ position:absolute; right:0; top:50px; z-index:999;}
.gnb>li{float:left;   position:relative;}
.gnb>li>a{ height:33px; color:#222; font-weight:bold; font-size:20px; line-height:33px; display:block; text-align:center; margin-right:90px;}

.gnb>li>a:hover{color:#ff6601;}
.gnb:after{clear:both; content:""; display:block;}
.gnb .no_m>a{margin-right:0px;}
.gnb>li>ul{width:100%; position:absolute; top:33px; left:0px; display:none;}
.gnb>li>ul a{display:block; /*height:50px; background:#777;*/font-size:15px; line-height:15px; color:#fff;  padding:20px 0px 10px 10px; box-sizing:border-box;}
.gnb>li>ul a:hover{color:#ff6601;}
.bgGnb {
    position:absolute; width:100%; height:283px; background:#777;
    left:0px; top:0px; /*top:33px; */display:none; z-index:99;
}


/*footer*/
#footer{width:100%; background:#1F1F1F; padding:50px 0px; color:#aaa; font-size:12px; margin-top:20px;}
.ft{width:960px; margin:0px auto; font:12px/20px "Nanum Gothic"; }
#footer img{float:left; margin-right:100px;}
#footer p{float:left;}
.ft:after{clear:both; content:""; display:block;}
}

@media(max-width:1200px){
.bar{width:100%; }
.bar:after{clear:both; content:""; display:block;}
.bar li{float:left; height:12px;}
.bar li:first-child{width:60%; background:#ccc;}
.bar li:last-child{width:40%;background:#000; color:#fff; text-align:center; font-size:0.7rem; line-height:12px;}		


#header{width:100%; margin:30px auto 0px; position:relative; height:84px; }
img.nb{position:absolute; top:0px; right:0px; cursor:pointer;}
img.nb1{position:absolute; top:0px; right:0px; display:none; cursor:pointer;}

ul.nb{display:none;}
.gnb{display:none;}


.gnb_mo{width:200px; height:100%; position:fixed; left:-1200px; top:126px; z-index:999; background:#777; /*padding:10px;*/ }
.gnb_mo>li{width:100%; /*float:left;*/   position:relative; z-index:999;}
.gnb_mo>li>a{height:60px; color:#222; font-size:1.1rem; line-height:60px; display:block; text-align:left; border-bottom:1px solid #ccc; padding:10px ;}

.gnb_mo>li>a:hover{color:#ff6601;}
.gnb_mo:after{clear:both; content:""; display:block;}
.gnb_mo>li:last-child>a{border-bottom:0px;}

.gnb_mo>li>ul{width:100%; position:absolute; top:10px; left:200px; }

.gnb_mo>li>ul a{ display:block; height:30px;  /*background:#777;*/font-size:1rem; line-height:30px; color:#fff;  padding:0px 0px 0px 10px; box-sizing:border-box;}
.gnb_mo>li>ul a:hover{color:#ff6601;}

#nav_bg{position:fixed; left:200px; top:126px; width:170px; height:100%; background:#775724; border-left:1px solid #fff; border-right:1px solid #ddd; z-index:99; display:none;}

/*footer*/
#footer{width:100%; background:#1F1F1F; padding:50px 0px; color:#aaa;  margin-top:20px;}
.ft{width:95%; margin:0px auto; font:0.9rem/20px "Nanum Gothic"; }
#footer img{ margin-bottom:20px;}
}