.gnb_pc{width:50%;margin:0 auto;max-width:700px;}
.gnb_pc:after{display:block;clear:both;content:"";}




/*2017501 수정*/

#mainNavigation{position:absolute; top:0; left:0; width:100%; min-height:95px; z-index:1;border-top:1px solid #eee;*background-color:#eee;}
#mainNavigation .gnbOneBg{position:absolute; top:0; left:0; width:100%; min-width:1120px; height:95px; background:#0070d9;}
#mainNavigation .gnbTwoBg{position:absolute; top:92px; left:0; width:100%; height:0; border-top:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3; background:rgba(255,255,255,0.98);}


#navigation{position:fixed; top:0; left:0; width:100%; height:95px; z-index:100;}
#navigation .gnbOneBg{position:absolute; top:0; left:0; width:100%; height:95px; background:#0070d9;}
#navigation .gnbTwoBg{position:absolute; top:90px; left:0; width:100%; height:0; border-bottom:1px solid #e3e3e3; *background:#fff;}
.gnbD{position:relative; margin:0 auto; margin-left:24%;padding:15px 0 18px;/*width:1280px;*/width:640px; z-index:9999;}
.gnbD .gnb{padding:15px 0 0 400px;}
.gnbD .gnb:after{content:""; display:block; clear:both;}
.gnbD .gnb li{float:left; position:relative; padding:18px 10px; background:url('/images/gnb_line.gif') right 21px no-repeat;}
.gnbD .gnb li:first-child{padding:19px 10px 14px ;  background:url('/images/gnb_line.gif') right 21px no-repeat;}
.gnbD .gnb li:last-child{background:#fff url('/images/gnb_line.gif') right -9999px no-repeat;}
.gnbD .gnb li a{padding:20px 5px;}
.gnbD .gnb li .oneD{font-size:16px; color:#000;}
.gnbD .gnb li .twoD{position:absolute; top:76px; left:0; width:1180px;}
/*.gnbD .gnb li:before{position:absolute; top:-15px; left:50%; content:""; display:block; margin:0 auto; width:1px; height:20px; background:#fff; display:none;}
.gnbD .gnb li:after{position:absolute; top:57px; left:50%; content:""; display:block; margin:0 auto; width:1px; height:23px; background:#fff; display:none;}  */
#mainNavigation .gnbD .gnb li:hover:before{display:block;}
#mainNavigation .gnbD .gnb li:hover:after{display:block;}
.gnbD .gnb li:nth-child(1) .twoD{left:10px;}
.gnbD .gnb li:nth-child(2) .twoD{left:-20px;}
.gnbD .gnb li:nth-child(3) .twoD{left:-50px;}
.gnbD .gnb li:nth-child(4) .twoD{left:-380px;}
.gnbD .gnb li:nth-child(5) .twoD{left:-480px;}
.gnbD .gnb li .twoD:after{content:""; display:block; clear:both;}
.gnbD .gnb li .twoD .pack{position:relative; float:left;}
.gnbD .gnb li .twoD .pack.line{*border-left:1px solid #e9e9e9;;}
.gnbD .gnb li .twoD .pack.line:last-child{*border-right:1px solid #e9e9e9;}
.gnbD .gnb li .twoD .pack>a{ display:inline-block; padding:20px 20px;  font-size:16px; color:#555;cursor:default;}
.gnbD .gnb li .twoD.hasThird .pack>a{padding:20px 40px 20px 20px;}
.gnbD .gnb li .twoD .pack .thiD{position:relative; padding:0 0 20px 20px;}
.gnbD .gnb li .twoD .pack .thiD a{display:block; padding:0 40px 0 0; font-size:14px; color:#777;  line-height:22px;}
.gnbD .gnb li .twoD .pack .thiD a:hover{color:#0163bf;}
.gnbD .gnb li .twoD .pack .thiD a.more{position:absolute; top:-37px; right:0; display:block; padding:0;}
.gnbD .gnb li .twoD .pack .thiD a.news{display:block; padding:0; font-size:14px; width:215px;}
.gnbD .gnb li .twoD .pack .thiD a.news img{width:215px; height:103px;}
.gnbD .gnb li .twoD .pack .thiD a.news .txt{padding-top:5px; line-height:18px;color:#666;}
.gnbD .gnb li .twoD .pack .thiD a.sustainability{position:relative; display:block; margin-top:40px; box-sizing:border-box; width:240px; height:137px; overflow:hidden;}
.gnbD .gnb li .twoD .pack .thiD a.sustainability .txtArea{position:absolute; bottom:0; left:0; padding:8px; box-sizing:border-box; width:100%; height:40px; font-size:14px; color:#fff; background:rgba(0,0,0,0.7);}
/*.gnbD .activeLine{position:absolute; top:0; left:0;}*/



/********* pc *********/
@media all and (min-width:1200px) {



.gnbWarp{width:55%;margin:0 auto;max-width:700px}



}


/********* tablet *********/
@media all and (max-width:1199px) {


.gnbWarp{width:55%;margin:0 auto;max-width:700px}


}


/********* tablet *********/
@media all and (max-width:1100px) {

/*

.gnb_pc{display:none;}
.gnb_tablet{display:block;margin:0 auto;width:98%;background-color:#fff;border-top:1px solid #efefef;}

*/



.gnb_tablet{display:none;}


#mainNavigation{position:relative;position:absolute; top:68px; left:0; width:100%; min-height:55px; z-index:10000;}
#mainNavigation .gnbOneBg{position:absolute; top:0; left:0; width:100%; min-width:1120px; height:55px; background:#0070d9;}
#mainNavigation .gnbTwoBg{position:absolute; top:53px; left:0; width:100%; height:0; border-top:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3; background:rgba(255,255,255,0.98);}


#navigation{position:fixed; top:0; left:0; width:100%; height:55px; z-index:100;}
#navigation .gnbOneBg{position:absolute; top:0; left:0; width:100%; height:55px; background:#0070d9;}
#navigation .gnbTwoBg{position:absolute; top:50px; left:0; width:100%; height:0; border-bottom:1px solid #e3e3e3; background:#fff;}
.gnbD{position:relative; margin:0 auto; padding:0px 0 0px;/*width:1280px;*/width:100%; z-index:9999;}
.gnbD .gnb{padding:15px 0 0 400px;}
.gnbD .gnb:after{content:""; display:block; clear:both;}
.gnbD .gnb li{float:left; position:relative; padding:18px 0; background:#fff url('/images/gnb_line.gif') right 21px no-repeat;text-align:center;width:20%;}
.gnbD .gnb li:first-child{padding:18px 0 18px ;  background:#fff url('/images/gnb_line.gif') right 21px no-repeat;}
.gnbD .gnb li:last-child{background:#fff url('/images/gnb_line.gif') right -9999px no-repeat;}
.gnbD .gnb li a{padding:20px 0px;}
.gnbD .gnb li .oneD{font-size:15px; color:#000;}
.gnbD .gnb li .twoD{position:absolute; top:55px; left:0; width:1180px;}
/*.gnbD .gnb li:before{position:absolute; top:-15px; left:50%; content:""; display:block; margin:0 auto; width:1px; height:20px; background:#fff; display:none;}
.gnbD .gnb li:after{position:absolute; top:57px; left:50%; content:""; display:block; margin:0 auto; width:1px; height:23px; background:#fff; display:none;}  */
#mainNavigation .gnbD .gnb li:hover:before{display:block;}
#mainNavigation .gnbD .gnb li:hover:after{display:block;}
.gnbD .gnb li:nth-child(1) .twoD{left:30px;}
.gnbD .gnb li:nth-child(2) .twoD{left:-60px;}
.gnbD .gnb li:nth-child(3) .twoD{left:-20px;}
.gnbD .gnb li:nth-child(4) .twoD{left:-390px;}
.gnbD .gnb li:nth-child(5) .twoD{left:-380px;}
.gnbD .gnb li .twoD:after{content:""; display:block; clear:both;}
.gnbD .gnb li .twoD .pack{position:relative; float:left;text-align:left;}
.gnbD .gnb li .twoD .pack.line{*border-left:1px solid #e9e9e9;}
.gnbD .gnb li .twoD .pack.line:last-child{*border-right:1px solid #e9e9e9;}
.gnbD .gnb li .twoD .pack>a{ display:inline-block; padding:20px 20px;  font-size:14px; color:#555;}
.gnbD .gnb li .twoD.hasThird .pack>a{padding:20px 40px 20px 20px;}
.gnbD .gnb li .twoD .pack .thiD{position:relative; padding:0 0 20px 20px;}
.gnbD .gnb li .twoD .pack .thiD a{display:block; padding:0 40px 0 0; font-size:13px; color:#777;  line-height:22px;}
.gnbD .gnb li .twoD .pack .thiD a:hover{color:#0163bf;}
.gnbD .gnb li .twoD .pack .thiD a.more{position:absolute; top:-37px; right:0; display:block; padding:0;}
.gnbD .gnb li .twoD .pack .thiD a.news{display:block; padding:0; font-size:14px; width:215px;}
.gnbD .gnb li .twoD .pack .thiD a.news img{width:215px; height:103px;}
.gnbD .gnb li .twoD .pack .thiD a.news .txt{padding-top:5px; line-height:18px;color:#666;}
.gnbD .gnb li .twoD .pack .thiD a.sustainability{position:relative; display:block; margin-top:40px; box-sizing:border-box; width:240px; height:137px; overflow:hidden;}
.gnbD .gnb li .twoD .pack .thiD a.sustainability .txtArea{position:absolute; bottom:0; left:0; padding:8px; box-sizing:border-box; width:100%; height:40px; font-size:14px; color:#fff; background:rgba(0,0,0,0.7);}
/*.gnbD .activeLine{position:absolute; top:0; left:0;}*/






}






@media all and (max-width:1000px) {

/*.gnb_tablet{display:block;margin:0 auto;width:100%;background-color:#fff;border-top:1px solid #efefef}*/


}



/********* mobile *********/
@media all and (max-width:768px) {

.gnb_pc{display:none;}
.gnb_tablet{display:none;}


}













