@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; }


/*header*/
header{top:0; left:0; z-index:999; width:100%; background:#fff; -webkit-transition:top 1s ease-in-out; height:65px; overflow: inherit;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:65px; border-bottom:1px solid #e5eaf1; display:flex; justify-content: space-between;}
.header_menu h5>a:first-child{float:left; padding:13px 0 0 13px;}
.header_menu h5>a:first-child img{margin:0;  height: 35px;}
.header_menu h5>a:nth-child(2){float:left; padding:18px 0 0 0px; font-weight: bold; font-size: 15px;}
.header_menu h5 a{font-weight: 600;}
.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;}

.haccp_m01 a{background: url(./../image/haccp_m01.svg) no-repeat 0 15px; background-size:30px;}
.haccp_m01 a:hover{background: url(./../image/haccp_m01_2.svg) no-repeat 0 15px; background-size:30px;}
.haccp_m02 a{background: url(./../image/haccp_m02.svg) no-repeat 0 15px; background-size:30px;}
.haccp_m02 a:hover{background: url(./../image/haccp_m02_2.svg) no-repeat 0 15px; background-size:30px;}
.haccp_m03 a{background: url(./../image/haccp_m03.svg) no-repeat 0 15px; background-size:30px;}
.haccp_m03 a:hover{background: url(./../image/haccp_m03_2.svg) no-repeat 0 15px; background-size:30px;}
.haccp_m04 a{background: url(./../image/haccp_m04.svg) no-repeat 0 15px; background-size:30px;}
.haccp_m04 a:hover{background: url(./../image/haccp_m04_2.svg) no-repeat 0 15px; background-size:30px;}
.haccp_m05 a{background: url(./../image/haccp_m05.svg) no-repeat 0 15px; background-size:30px;}
.haccp_m05 a:hover{background: url(./../image/haccp_m05_2.svg) no-repeat 0 15px; background-size:30px;}
.haccp_m06 a{background: url(./../image/haccp_m06.svg) no-repeat 0 15px; background-size:30px;}
.haccp_m06 a:hover{background: url(./../image/haccp_m06_2.svg) no-repeat 0 15px; background-size:30px;}
.haccp_m07 a{background: url(./../image/haccp_m07.svg) no-repeat 0 15px; background-size:30px;}
.haccp_m07 a:hover{background: url(./../image/haccp_m07_2.svg) no-repeat 0 15px; background-size:30px;}

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


.menu_btn{display:inline-block; padding:0; width:63px; height:63px;  border:0; vertical-align:middle; cursor: pointer;border-left: 1px solid #efefef; margin-left: 15px; background:#2556bf;}
.menu_btn .icon-bar{padding:18px 20px;}
.menu_btn p{color:#fff; font-size:11px; text-align:center;}
.menu_btn span{display: block; margin-bottom: 6px; height: 4px; background:#5d626a; width: 26px; border-radius: 3px;}
.menu_btn:hover span{background:#137df1;}
.menu_btn .link_txt{word-break: keep-all; text-align: center;padding: 12px;font-weight: bold; font-size: 12px;color: #fff;}

.header_bg{width:100%; background:#fff;  height:260px; position: absolute;  top:64px; border-top: 1px solid #eceef2; z-index:0; box-shadow: 9px 9px 5px rgb(214 214 214 / 70%);}

.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_img{border: 1px solid #ddd; 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;}

.id_box_wrap{position:absolute; top:65px; 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:50%; 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:#fff; 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;}


/*nav*/
#common_nav{position:initial !important}
#nav_wrap{position:relative; width:1340px; margin:0 auto;}
#nav_wrap .nav_dapth1 li .on{font-weight:800; color:#137df1; }
#nav_wrap .nav_dapth1 li > a{position: relative;}
#nav_wrap .nav_dapth1 li > a:after { content: ""; position: absolute; left:50%; bottom: -1px; width:0; height: 2px; background:#137df1; transition: all 0.5s;}
#nav_wrap .nav_dapth1 li:hover > a:after  {left: 0; width: 100%;}

#nav_wrap .nav_dapth1 {padding-left:0px;}
#nav_wrap .nav_dapth1>li {float:left; width: 14%; text-align: center;}
#nav_wrap .nav_dapth1>li a{padding:10px 0; display:block; font-weight:bold; font-size:15px; height:64px; line-height:40px;}
#nav_wrap .nav_dapth2{position:absolute; padding-top:10px; text-align:left;}
#nav_wrap .nav_dapth2 li a{font-size:15px; text-align:left; height:auto; line-height: inherit; width: 100%; padding:5px 0;}
#nav_wrap .nav_dapth2 li .on{color:#137df1; }
#nav_wrap .nav_dapth3 li .on{background:#137df1; color:#fff;}
#nav_wrap .nav_dapth3 {padding-bottom:13px;}
#nav_wrap .nav_dapth3 li a{font-size:13px; font-weight:normal; text-align:left; height:auto; line-height: inherit; width: 100%; padding:2px 8px 2px 8px;}




/*스크롤 디자인*/
::-webkit-scrollbar {width: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;}


/*footer*/
#footer_wrap{background:#353e50; padding:45px 20px; width:100%; bottom:0;}
.footer {padding:0 10px 0; margin:0 auto;  display:flex; justify-content:space-between;}
.footer img{height:45px;}
.footer address{color:#c4c9d1; font-size:13px; 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:14px; color: #ffe9a6; padding: 6px 18px 0 0; display: inline-block;}
.footer .left{display:flex;}
.footer .right{padding-top:8px; text-align:right;}
.footer .right p{color:#c4c9d1; font-size:12px;}
.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(./../image/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;}


.mobile_menu{background:linear-gradient(#45b2ff, #1863c4 ); position:fixed; top:0; right: 0; height:100%; z-index: 3; width:239px; box-shadow:-6px -4px 10px rgb(112 152 217 / 45%); display:none;}
.mobile_menu .close_btn{width:60px; height:60px; display:block; background: #fff; float:right;}
.mobile_menu ul li{ width:100%;}
.mobile_menu ul li:first-child{border-top:1px solid #72b4f0;}
.mobile_menu ul li a{color:#fff;  width:100%;  font-size:15px; padding:15px 0 15px 15px; border-bottom: 1px solid #72b4f0; display: block;}
.mobile_menu ul li a:hover{background:#2a8ee9;}
.mobile_menu ul li a img{width:22px; margin-right:8px;}
.mobile_menu ul {clear:both;}
.mobile_menu .close_btn{background: url(./../image/close.svg) no-repeat center #fff; background-size:35px;}


@media (max-width:1430px) {
 #nav_wrap { width:640px;}
}



@media (max-width:1120px) {
/*nav*/
#common_nav{display:none;}
#footer_wrap{padding:20px 10px;}
.footer img {margin: 0 auto; height:auto; width: 210px;}
.footer{width:100%; flex-direction:column; padding:0}
.footer .right{text-align:center;  padding-top:18px;}
.footer .right p{font-size: 12px;}
.footer address{padding:0; font-size: 12px;}
}



@media (max-width:768px) {
.header_menu h1>a {padding:13px 0 0 15px;}

.footer address{font-size:10px;}
.footer .right p {font-size:10px;}
.footer address span{display: block;}

}


@media (max-width:450px) {
	.header_link .header_userNm{display: none;}
}


@media (max-width:375px) {

}