@import url(font-awesome.min.css);

/* 스킵 네비게이션 */
.skip_nav { position: absolute; margin: 0 auto; width: 100%; list-style: none; top: -60px; z-index: 9999999; background: #fff; } 
.skip_nav ul li a:focus { position: absolute; width: 100%; line-height: 60px; top: 60px; text-align: center; color: #000; font-weight: bold; background: #fff; outline: none; font-size:1.4rem; border:2px dotted #475470; } 

#wrapper {background-size:contain; min-height:calc(100% - 216px);}

/*header*/
header{top:0; left:0; z-index:999; width:100%; background:#fff; -webkit-transition:top 1s ease-in-out; position: relative; top: 0; right: 0; left: 0; z-index:1002; background-color: #fff;}

header .skip{position: relative;top: 0px;left: 0px;height: 0px;font-size: 0px;z-index: 9999;}
header .skip a{left: -3000%;position: absolute;font-size: 12px;}
header .skip a:hover,.skip a:focus,.skip a:active{background: #1d60a7;color: #fff;display: block;height: 30px;left: 0 !important;line-height: 30px; text-align:center;top: 0;width: 100%;z-index: 999999}

.header_menu{position:relative;  width:100%; background: #fff; height:90px; border-bottom:1px solid #e5eaf1; display:flex; justify-content: space-between;}
.header_menu h1{display:block; margin:20px;font-size: 0;width: 112px;height: 49px;background: url('/images/npps/logo.png') no-repeat 50% 50%;}
.header_menu h1 a {
   display: block;
}
.header_menu .nav{float:left;position:absolute; top:0px; right:180px; z-index:800; display:block; width:66%;}
.header_menu .nav > li {float:left; position:static; padding:0 28px; text-align:center;}

.header_menu .nav > li > a {position:relative; font-size:20px; padding:0; font-weight:600; color:#3b414f; text-align:center; display:block;white-space:nowrap; line-height:80px;}
.header_menu .nav > li > a .two-line{line-height:30px; display:inline-block; padding-top:15px;}
.header_menu .nav > li > a.on{color:#00bdbe;}
.header_menu .nav > li > a:hover{color:#137df1; }
.header_menu .nav .nav_depth{display:none; padding-top:14px; width:100%; height:185px; text-align:center; border-left:0; border-top:0; line-height:29px;}
.header_menu .nav .nav_depth_two_line{top:0px;}
.header_menu .nav .nav_depth > li > a.on{color:#22c3cb;}

.nav>li>a:focus,
.nav>li>a:hover{background:none;}

.header_link{font-size:13px; display:flex;  align-items: center;}

.header_link .btn_c1{margin-right:10px; border-radius:50px; padding:4px 11px 3px;background:#0a1c41}
.header_link .btn_c1:hover{margin-right:10px; border-radius:50px; padding:4px 11px 3px;background:#0a1c41}

/*header*/
/* .menu_btn{display:inline-block; padding:0;width:65px; height:74px; border:0; vertical-align:middle; cursor: pointer;border-left: 1px solid #505972; display: flex; align-items: center;}
.menu_btn .icon-bar{padding: 0; width: 26px; height: 18px;margin: 0 auto;}
.menu_btn p{color:#fff; font-size:11px; text-align:center;}
.menu_btn span{display: block; margin-bottom: 6px; height:2px; background:#fff; width: 26px; border-radius: 3px;}
.menu_btn:hover{background:#AF8E65;} */
.menu_btn{display:inline-block; padding:0;width:65px; height:90px; vertical-align:middle; cursor: pointer;border-left: 0px solid #505972; display: flex; align-items: center;}
.menu_btn .icon-bar{padding: 0; width: 26px; height: 18px;margin: 0 auto;}
.menu_btn p{color:#fff; font-size:11px; text-align:center;}
.menu_btn span{display: block; margin-bottom: 6px; height:3px; background:#222; width: 26px; border-radius: 5px;}
.menu_btn:hover{background:#0077e5;}


.ple_link img{width:90px; padding:0 8px;}

.my_link_wrap{display:flex; align-items:center;}
/* .my_link_wrap:hover{cursor: pointer;} */
.my_link_wrap:hover .id_name strong{color:#137df1;}
.my_link_wrap .id_name{padding-left:10px; }
.my_link_wrap .id_name strong{padding-right:3px;}
.my_link_wrap .id_img{border: 1px solid #ffffff; border-radius: 50px; overflow: hidden; display: inline-block; width: 30px; height:30px; text-align: center;}
.my_link_wrap .id_img .no_img{padding-top:5px;}

.session_wrap{display:flex; flex-direction: column;text-align: center; font-size:13px; padding:0 8px;}
/* .session_wrap span{color:#ffedda; width:42px;} */
.session_wrap span{color:#0077e5; width:42px;}
.session_wrap .btn{padding: 0; background: #2a3c62; font-size: 11px; color: #dae0ec;}

.id_box_wrap{position:absolute; top:72px; background:#f9f9f9; width:260px; right:10px; padding:10px 0 0; box-shadow:3px 3px #cccccc4d; border-radius:5px;}
.id_box_wrap:before{content: ' '; top:-10px; left:64%; height: 0;  width: 0; position: absolute; border:10px solid transparent; border-top-width: 0;  border-bottom-color: #f9f9f9;}
.id_box_wrap .loge{ background:#fff; border: 1px solid #ddd; border-radius:3px; padding:5px;}
.id_box_wrap .loge:hover{background:#e5e5e5;}
.id_box_wrap span{border: 1px solid #ddd;  background:#d2d2d2; border-radius: 50px; overflow: hidden; display: inline-block; width: 30px; height:30px; text-align: center; margin-right:10px;}
.id_box_wrap .no_img{padding-top:5px;}
.id_box_wrap .id_box{display:flex; justify-content: space-evenly; padding-bottom: 10px;}
.id_box_wrap .id_box .id_name{align-items: center; display:flex;}

.id_box_wrap .my_page{width:100%; text-align: center; border-top: 1px solid #ddd; display: block;  padding: 8px; background: #f1f2f3;}
.id_box_wrap .my_page:hover{background: #e4e5e8;}

.mobile_menu{display:none;}

/* 상위메뉴 hover시 백그라운드 */
.header_bg{display: none; width:100%;background:linear-gradient(153deg, #ffffff, #ffffff); height:140px; position: absolute;  top:89px; border-top: 1px solid #eceef2; z-index:0; box-shadow: 7px 7px 5px rgb(234 234 234 / 70%)}

/*nav*/
/* .header_bg{display: none; width:100%;background:linear-gradient(153deg, #ffffff, #ffffff); height:84px; position: absolute;  top:75px; border-top: 1px solid #eceef2; z-index:0; box-shadow: 7px 7px 5px rgb(234 234 234 / 70%)}

#nav_wrap{position:relative; width:950px; margin:0 auto;}
#nav_wrap .nav_dapth1 li{position:relative;}
#nav_wrap .nav_dapth1 li .on{font-weight:800; color:#d2aa77;}
#nav_wrap .nav_dapth1 li > a{position: relative;}
#nav_wrap .nav_dapth1 li > a:hover{color:#d2aa77;}
#nav_wrap .nav_dapth1 li > a:after {content: ""; position: absolute; left:50%; bottom: -1px; width:0; height: 2px; background:#d2aa77; transition: all 0.5s;}
#nav_wrap .nav_dapth1 li:hover > a:after  {left: 0; width: 100%;}
#nav_wrap .nav_dapth1>li a.active{color:#d8b283}
#nav_wrap .nav_dapth1 {padding-left:0px;}
#nav_wrap .nav_dapth1>li {float:left; width:25%; text-align: center;}
#nav_wrap .nav_dapth1>li a{padding:18px 0; display:block; font-size:21px; height:74px; line-height:40px; font-weight:600; color: #fff;}

.header_menu:hover .header_bg, .header_menu:hover #nav #nav_wrap .nav_dapth1 .nav_dapth2 {display:block;}

#nav_wrap .nav_dapth2{padding-top:16px; height:168px; display: none; }
#nav_wrap .nav_dapth2 li a{font-size:17px; text-align: center; height:auto; line-height: inherit; width: 100%; padding:2px 0; font-weight:400; color: #222;}
#nav_wrap .nav_dapth2 li a:hover{color:#AF8E65;}
#nav_wrap .nav_dapth2 li > a:after {display:none;}
#nav_wrap .nav_dapth2 li .on{color:#c99c64;}
#nav_wrap .nav_dapth3 {position: absolute; right: -15px; top: -8px;}
#nav_wrap .nav_dapth3 li .on{background:#AF8E65; color:#fff;}
#nav_wrap .nav_dapth3 li a{font-size:14px; font-weight:normal; text-align:left; height:auto; line-height: inherit; width: 100%; padding:0px 8px 0px 15px; color:#c99c64;} 
#nav_wrap .nav_dapth3plus {position: absolute; right: -43px; top: -6px;} */

#nav_wrap{position:relative; width:950px; margin:0 auto;}
#nav_wrap .nav_dapth1 li{position:relative;}
#nav_wrap .nav_dapth1 li .on{font-weight:800; color:#0077e5;}
#nav_wrap .nav_dapth1 li > a{position: relative;}
#nav_wrap .nav_dapth1 li > a:hover{color:#0077e5;}
#nav_wrap .nav_dapth1 li > a:after {content: ""; position: absolute; left:50%; bottom: -1px; width:0; height: 2px; background:#0077e5; transition: all 0.5s;}
#nav_wrap .nav_dapth1 li:hover > a:after  {left: 0; width: 100%;}
#nav_wrap .nav_dapth1>li a.active{color:#0077e5}
#nav_wrap .nav_dapth1 {padding-left:0px;}
#nav_wrap .nav_dapth1>li {float:left; width:20%; text-align: center;}
/* #nav_wrap .nav_dapth1>li:first-child .nav_dapth2{border-left: 1px solid #ebebeb;} */
#nav_wrap .nav_dapth1>li a{padding:25px 0; display:block; font-size:24px; height:90px; line-height:40px; font-weight:600; color: #222;}

/* #nav_wrap .nav_dapth1:hover .nav_dapth2, #nav_wrap .nav_dapth1:hover .header_bg:hover { display:block; } */

.header_menu:hover .header_bg, .header_menu:hover #nav #nav_wrap .nav_dapth1 .nav_dapth2 {display:block;}

#nav_wrap .nav_dapth2{padding-top:16px; height:168px; display: none; }
#nav_wrap .nav_dapth2 li a{font-size:17px; text-align: center; height:auto; line-height: inherit; width: 100%; padding:4px 0; font-weight:400; color: #222;}
#nav_wrap .nav_dapth2 li a:hover{color:#0077e5;}
#nav_wrap .nav_dapth2 li > a:after {display:none;}
#nav_wrap .nav_dapth2 li .on{color:#0077e5;}
#nav_wrap .nav_dapth3 {position: absolute; right: -23px; top: 8px;} /*  display: flex; */
#nav_wrap .nav_dapth3 li .on{background:#0077e5; color:#fff;}
#nav_wrap .nav_dapth3 li a{font-size:14px; font-weight:normal; text-align:left; height:auto; line-height: inherit; width: 100%; padding:0px 8px 0px 15px; color:#0077e5;}  
#nav_wrap .nav_dapth3plus {position: absolute; right: -43px; top: -6px;}
    
/*사이트맵*/
/* .sitemap_wrap{width:950px; min-height: calc(100% - 216px);} */
.sitemap_wrap{width:660px; min-height: calc(100% - 216px);}
/* .sitemap_wrap{width:400px; min-height: calc(100% - 216px);} */
.sitemap_wrap .modal-body{background: url(/images/npps/sales_obj02.png) no-repeat right bottom;}
.sitemap{display:flex; flex-wrap:wrap;}
.sitemap h5{font-size:25px; padding-bottom:5px;  color:#041030;}
/* .sitemap li{width:33.3%; } */
.sitemap li{width:50%; padding:8px;}
/* .sitemap li{width:100%; } */
/* .sitemap .haccp_m01{font-weight:800; font-size:20px; padding:20px; } */
.sitemap .nav_dapth2{font-size:15px;;}
.sitemap .nav_dapth2 li{width:100%;}
.sitemap .nav_dapth2 li{padding:12px 10px; background: #fff; line-height: 1.2; display: inline-block; border: 1px solid #e5e5e5; width: 94%; border-radius: 3px; margin:2px; font-size:16px;}
.sitemap .nav_dapth2 li:hover{border:1px solid #AF8E65; background: #fafaf9;}
.sitemap .nav_dapth3 { padding-top:6px;}
.sitemap .nav_dapth3 li{border:none; padding:3px; background:none; position: relative;}
.sitemap .nav_dapth3 li:before{content: ''; width:8px; height: 1px; position: absolute; display: block; background:#8c8c8c; left:0px;  top:11px;}
.sitemap .nav_dapth3 li:hover{border:none; background:none;}
.sitemap .nav_dapth3 li a{padding-left:11px;font-size: 14px;}

/*서브*/
#sub_wrapper{min-height:calc(100% - 216px); width: 1950px;  overflow: hidden; margin: 0 auto;}

#container {width:1400px; margin: 0 auto;}
#container h3{font-size:60px; text-align: center;  padding:60px 0;}

.m_call_wrap{display:flex; place-self:flex-end; flex-direction:column;}
.m_call_wrap h3{color:#1c396e; font-size:24px;background: url(/images/npps/m_call.png) no-repeat 0 3px; width: 295px; background-size: 32px; padding-left: 40px;}
.m_call_wrap p{color: #1c396e; letter-spacing:-0.8; font-size:15px;}

/*footer*/
#footer_wrap{background:#fff;  padding:0px; width:100%; bottom:0;}
.footer {padding:10px 0 10px; margin:0 auto;  display:flex; justify-content:space-between; background:#2d2f35;}
.footer img{height:25px;}
.footer address{color:#b5b5b5; font-size:15px; line-height:1.8; margin:0;}
.footer .addr_box{overflow:hidden; float:left; width:45%;}
.footer .addr_box:nth-child(2){width:30%;}
.footer .privacy_link{font-size:15px; color:#ffe9a6; padding: 6px 18px 0 0; display: inline-block;}

.footer .left{text-align:left; display:flex; flex-direction: column;  width: 1400px; margin:0 auto;}
.footer .left .box{display:flex; justify-content: flex-start; flex-direction: column; padding:20px 0; font-size:14px;}
.footer .left .box strong{color:#fff;}
.footer .left .box2{display:flex; border-top: 1px solid #666666; padding:20px 0 10px; justify-content:space-between; font-size:14px;}
.footer .left .box2 a{color:#cad9ff;}

.footer .left p{color:#e9e9e9; font-size:14px;}
.footer .relate-box{float:right; position: relative;}
.footer .relate-site{position:absolute;right:0;top:33px;}
.footer .relate-site .relate-box{position:relative;display:inline-block;margin:0 0 0 2px;}
.footer .relate-box .btn{display:block;width:190px;background:#4b5363 url(/images/npps/icon_up.png) no-repeat 95% 50%; padding:0;}
.footer .relate-box .btn button{width:100%;height:32px; padding:0 10px;border:0;font-size:13px;text-align:left;cursor:pointer;color:#f1f5fb;}

.footer .relate-box .site-list {position:absolute;display: none;bottom:32px;left:0;width:100%;background:#3f434e;z-index:100;text-align:left;}
.footer .relate-box .site-list li a{display:block;height:32px;line-height:32px;color:#fff;padding:0 15px;font-size:13px;border-top:#352d2a 1px solid;}
.footer .relate-box .site-list li a:hover, .footer .relate-box .site-list li a:focus{background:#005aa6;}
.footer .relate-box.open .site-list{display:block;}

/*스크롤*/
::-webkit-scrollbar {width:10px; height:10px;}
::-webkit-scrollbar-thumb {background-color:#ddd; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent;}
::-webkit-scrollbar-track {background-color:#f8f8f8; border-radius:10px;}

@media (max-width:1950px) {	
#sub_wrapper{width:100%;}
}


@media (max-width:1400px) {	
 #container{width:100%; padding:0 20px;}
.footer .right{width:100%;}

 #nav_wrap {width:800px;}
 
 #nav_wrap .nav_dapth3 {position: absolute; right: -32px; top: 6px;}
 #nav_wrap .nav_dapth3plus {position: absolute; right: -43px; top: -7px;}

.footer{width:100%; flex-direction:column; padding:20px;  text-align:center;}
.footer img {margin:10px auto 0;}
.footer .left{width:100%;}
.footer address{padding:0; font-size: 13px;}
}



@media (max-width:1200px) {	
/* .header_menu h1>a {padding:25px 10px 24px;}
#nav_wrap { width:661px;} */

.header_menu{position:relative;  width:100%; background: #fff; height:90px; border-bottom:1px solid #e5eaf1; display:flex; justify-content: space-between;}
.header_menu h1{display:block; margin:20px;font-size: 0;width: 112px;height: 49px;background: url('/images/npps/logo.png') no-repeat 50% 50%;background-size: 95px;}
.header_menu h1 a {
   display: block;
}

#nav_wrap .nav_dapth1>li a {font-size:18px;}
#nav_wrap .nav_dapth2 li a {font-size:14px;}
.ple_link img {width:78px;}

#container h3 {font-size:55px;}



.m_call_wrap {padding:0 0 10px;}
.m_call_wrap h3{margin: 0 auto; padding-left:0px; font-size:20px; width:252px; background-size: 27px;}
}


@media (max-width:1100px) {
#nav_wrap {width: 570px;}

.header_link .btn_c1 {font-size: 13px;}
}


@media (max-width:1000px) {

/*nav*/
#nav{display:none;}
#nav_wrap {width:478px;}
#nav_wrap .nav_dapth2 li a {font-size: 15px;}

.header_bg{display:none !important;}
.header_menu{height:62px;}
.header_menu h1{display:block; margin:10px;font-size: 0;width: 112px;height: 49px;background: url('/images/npps/logo.png') no-repeat 50% 50%;background-size: 85px;}
.menu_btn{height:61px; width:61px}

#container h3 {font-size:50px; padding:40px 0 40px;}

.sitemap_wrap{width:90%; margin:0 auto;}
.sitemap h5 {font-size: 20px;}
.sitemap .haccp_m01{padding: 10px;}
}



@media (max-width:850px) {
#container h3 {font-size:40px; padding:40px 0 10px;}
#sub_wrapper {min-height:calc(100% - 313px);}

.header_menu h1>a { padding: 10px;}
.header_menu h1>a img{width: 60px;height:34px}
}



@media (max-width:768px) {
.header_menu h1>a img {width:84px;}
.header_link .btn_c1 {margin-right:0px;padding: 2px 8px;font-size: 13px;}
.header_menu h1>a {padding: 20px 5px;}

.ple_link img {width:72px;}

 #container {padding:0 10px;}
 #container h3 {font-size:34px; padding:30px 0 10px;}
 
.sitemap h5 {font-size:18px; padding:5px 5px 2px;}
.sitemap li {width:50%;}
/* .sitemap li {width:100%;} */
.sitemap .haccp_m01 {padding:10px;}
.sitemap .nav_dapth2 li a {font-size:14px; display: inline-block; width: 100%}

.footer {padding: 0 10px}
.footer .left .box2 {flex-direction: column;}
}




@media (max-width:500px) {
#container h3 {font-size:25px;padding:20px 0 10px; line-height:1.2;}
.sitemap .haccp_m01 {padding: 5px;}
.sitemap .nav_dapth2 li{padding:12px 5px;}
.sitemap .nav_dapth3 li{padding:3px;}

}