@charset "utf-8";
/* 초기화 */
html{min-height:100%;height:100%;margin:0;}

body { min-height: 100%;height:100%;margin:0;padding:0;font-size:13px;font-family:"Malgun Gothic", "돋움", "Dotum", "굴림", "Gulim", sans-serif;color:#333;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0;display:block;}
h1, h2, h3, h4, h5, h6 {font-size:13px;font-family:"Malgun Gothic", "돋움", "Dotum", "굴림", "Gulim", sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:"Malgun Gothic", "돋움", "Dotum", "굴림", "Gulim", sans-serif;font-size:1em}
input[type="submit"]{cursor:pointer}
button {cursor:pointer}
ul:after{display:block;clear:both;content:''}
legend{border-bottom:none}

p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}
a:hover{text-decoration:none}

.red{color:#ff0000;}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-inline{
	padding-top:10px;
	height:68px;
}
.form-group{
	padding: 0 7px;
}
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
.right{
	float:right;
}
.h2-right{
	margin-top:-26px;
	float:right;
}
.h3-right{
	margin-top:-19px;
	float:right;
}
.padding-10 {
	 margin: 0 -10px !important;
}
.padding-ban {
	padding-bottom:16px;
}

/* 레이아웃 크기 지정 */
#hd, #wrapper, #ft{min-width:1400px}

#hd_pop{width:100%}
#hd_wrapper,
#tnb ul,
#gnb #gnb_wrap,
#container_wr,
#ft_wr{width:1400px}

/* 상단 레이아웃 */
.top-bar{background:#005953;height:1px}
#header{position:relative;width:100%;background:rgba(255,255,255,1);-webkit-transition: 0.3s; -o-transition: 0.3s;transition: 0.3s;z-index:999;}
.header{border-bottom:1px solid #ccc;}
#logo{float:left;z-index:100;position:relative;}
#logo img{max-width:100%;}

#header.fbg{position:fixed;z-index:999;left:0;top:0;border-bottom:1px solid #ccc}
.wrap {
	min-height: 100%; 
	position: relative;
	padding-bottom: 0; /* footer height */
}
.head{margin:0 auto;max-width:1427px;position:relative;padding:15px 0 0}
.head:after{display:block;clear:both;content:''}

.gnb{float:right;}
.gnb>ul {text-align:right;}
.gnb>ul>li{display:inline-block;padding-top:0px;margin-right:30px; position:relative;height:68px}
.gnb>ul>li:last-child{margin-right:0}
.gnb ul li{-webkit-transition:all .3s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out;}
.gnb>ul>li a{display:block;width:100%;position:relative;font-size:14px;}
.gnb>ul>li>a{display:block;width:100%;position:relative;font-size:18px;font-weight:600;background-color:#eee;padding:10px 15px; border-radius:5px;box-shadow:3px 3px 3px gray;}
.gnb>ul>li ul{display:none}
.gnb>ul li ul a{padding:10px 10px;line-height:120%;text-align:left}
.gnb>ul>li>ul {position:absolute; top:68px; left:50%;width:180px;z-index:99;margin-left:-80px}
.gnb>ul>li>ul>li {font-size:14px; line-height:28px;text-align:left;background-color:rgba(0,0,0,0.6);border-bottom:1px solid #333;position:relative}
.gnb>ul>li>ul>li:hover{background-color:rgba(0,0,0,1);}
.gnb>ul>li:not(:last-child)>ul>li ul {border-left:1px solid #000;position:absolute;top:0;left:100%;width:95%;z-index:99;}
.gnb>ul>li:last-child>ul>li ul {border-left:1px solid #000;position:absolute;top:0;right:100%;width:95%;z-index:99;}
.gnb>ul>li>ul>li ul > li : last-child {right:100%;}
.gnb>ul>li>ul>li ul li {font-size:11px;line-height:28px;text-align:left;background-color:rgba(0,0,0,0.8);border-bottom:1px solid rgba(255,255,255,0.2);position:relative}
.gnb>ul>li>ul>li ul li:hover{background-color:rgba(0,146,224,1)}

.plus>a:after{display:block;position:absolute;right:10px;font-size:16px;font-weight:600 !important;content:'+';top:10px}
.gnb ul li a, .gnb ul li a:link{color:#fff}
.gnb>ul>li>a, .gnb>ul>li>a:link{color:#000}
.gnb ul li a:hover, .gnb ul li a:focus {color:#005953;}
.gnb .active>a, #snb .active>a{color:#029a90 !important;}
.gnb>ul>li>ul>li ul li.active{background:#005953 !important}
.gnb>ul>li>ul>li ul li.active>a{color:#fff !important}

.mbg{background:rgba(255,255,255,0.98);position:absolute;z-index:9;width:100%;height:100%;top:-100%;display:none}

.mgnb{display:none;position:fixed;right:-280px;top:0;width:280px;height:100%;background:#fff;z-index:9999;overflow-y:auto;overflow-x:hidden}
.m-top{width:200px;float:right;margin-top:80px}
.m-top li{width:31%;float:left;text-align:center;font-size:12px;margin-right:2%}
.m-top li a{display:block;width:100%;padding:5px 0;color:#666;text-align:center;background:#999;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;-o-border-radius:30px;color:#fff}

.m-menu{margin-top:100px;border-top:1px solid #ccc}
.m-menu>li{position:relative;border-bottom:1px solid #ccc;background-color:#f6f6f6}
.m-menu>li a{ color:#000;display:block;width:100%;position:relative;font-size:13px;}
.m-menu>li>a{ color:#000;display:block;width:100%;position:relative;font-size:14px;;padding:18px}
.m-menu>li ul{display:none;}

.m-menu li ul a{padding:10px 0 10px 30px}
.m-menu li ul li ul li a{padding:10px 0 10px 45px}
.m-menu li ul li ul li ul li a{padding:10px 0 10px 60px;font-size:12px;color:#666}
.m-menu>li>ul>li{font-size:13px;text-align:left;background-color:#bbb;border-top:1px solid #ccc;position:relative}
.m-menu>li>ul>li ul {}
.m-menu>li>ul>li ul li {font-size:13px;text-align:left;background-color:#fff !important;border-top:1px solid #cdcdcd;position:relative}
.m-menu li ul li ul li{background:rgba(255,255,255,1)}
.m-menu li ul li ul li ul li{background:rgba(255,255,255,0.9)}
.m-menu .mplus>a{}
.m-menu li a, .m-menu ul li a:link{color:#000}
a.plusbt{top:0;position:absolute !important;z-index:99;right:0;height:55px !important;width:50px !important;background:#ddd url('../images/icon_arrow2.png') no-repeat 50% 23px;cursor:pointer}
.m-menu>li.lactive > a{background-color:#005953;color:#fff !important}
.m-menu>li>ul>li.lactive > a{background-color:#555;color:#fff !important}
a.plusbt.mactive{background-color:#000 !important}
.mactive{background-position:50% -30px !important;}
.m-menu>li>ul>li a.plusbt{top:0;position:absolute !important;z-index:99;right:0;height:38px !important;width:47px !important;background:url('../images/icon_arrow2.png') no-repeat 50% 13px;background-color:rgba(0,0,0,0.1)}
.m-menu>li>ul>li>ul>li a.plusbt{top:0;position:absolute !important;z-index:99;right:-10px;height:35px !important;width:20px !important;background:url('../images/icon_arrow2.png') no-repeat 38% 13px;background-color:rgba(0,0,0,0.1)}
.m-menu .pageon{}
.m-menu>li>ul>li a.plusbt.mactive{background-position:50% -38px !important;background-color:#000}
.m-menu>li>ul>li>ul>li a.plusbt.mactive{background-position:38% -38px !important;background-color:#000}
.m-menu>li>ul>li.lactive{border-top-color:#333}
.wrapbg{cursor:pointer;position:fixed;z-index:999;background:rgba(0,0,0,0.8);top:0;left:0;width:100%;height:100%;display:none}

.pattern{position:relative}
.pattern:before{display:block;content:'';position:absolute;width:100%;height:100%;z-index:1;background:rgba(0,0,0,0.5)url(/images/pattern1.png);opacity:0.7}

.adm-bt{position:absolute;color:#fff;background:#828282;padding:4px 10px 3px;font-size:12px;letter-spacing:0;display:inline-block;width:80px;text-align:center;top:14px;webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s}
a.adm-bt:hover{color:#fff;background:#000}

.menu-bt-wrapper {
     position:fixed;right:30px;top:30px;display:none;cursor:pointer;z-index:99999
}
.menu-bt {
    height: 71px;
    width:45px;
    display: block;
    position: relative;
    z-index: 1;
    top: 0;
    padding:10px 10px;
    float:left;
}
.menu-bt-line {
    float: left;
    position: relative;
    height: 2px;
    width: 100%;
    background-color:#000;
   transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    -webkit-transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
    -moz-transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
    -o-transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
    -ms-transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
}
.menu-bt-line1 {
    top: 0;
}
.menu-bt-line2 {
    top: 7px;
    opacity: 1;
}
.menu-bt-line3 {
    top: 14px;
}
.menu-open .menu-bt-line{background-color:#000;}
.menu-open .menu-bt .menu-bt-line1{transform: translate3d(0, 9px, 0) rotate(225deg);
    -webkit-transform: translate3d(0, 9px, 0) rotate(225deg);
    -moz-transform: translate3d(0, 9px, 0) rotate(225deg);
    -o-transform: translate3d(0, 9px, 0) rotate(225deg);
    -ms-transform: translate(0, 9px) rotate(45deg)}
.menu-open .menu-bt .menu-bt-line2{opacity:0;}
.menu-open .menu-bt .menu-bt-line3{transform: translate3d(0, -9px, 0) rotate(-225deg);
    -webkit-transform: translate3d(0, -9px, 0) rotate(-225deg);
    -moz-transform: translate3d(0, -9px, 0) rotate(-225deg);
    -o-transform: translate3d(0, -9px, 0) rotate(-225deg);
    -ms-transform: translate(0, -9px) rotate(-45deg);}

/* 중간 레이아웃 */
#container {position:relative;min-height:500px;height:auto !important;margin:0 auto;height:500px;zoom:1;clear:both}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#container_title {font-size:1.333em;margin:0 auto;font-weight:bold;}
#container_title span{margin:0 auto 10px;display:block;line-height:30px;}
#container img{max-width:100%}


/* 하단 레이아웃 */
#footer{position: absolute;left: 0;bottom: 0;width: 100%;margin-bottom:0;text-align:center;font-size:14px;color:#ccc;z-index:1;}

.foot-area{max-width:1220px;padding:1px;margin:0 auto;text-align:center;line-height:100%;  width: 100%;
  max-width: 100%;   /* 혹시 다른 CSS에서 제한되는 것 방지 */
  box-sizing: border-box; /* padding 포함해서 계산 */
}
.foot-area:after{display:block;clear:both;content:''}
.foot-area span{display:inline-block;margin:0 5px;word-break:keep-all;}
.foot-area p{color:#999;margin-top:5px}
.foot-area .foot-a {color:#ddd;}

.gray{color:#666 !important}

.fa{font-size:24px}
#top_btn {position:fixed;bottom:20px;right:20px;width:52px;height:52px;border-radius:30px;line-height:10px;color:#333;text-align:center;font-size:22px;z-index:90;background:#999;border:none}
#top_btn:hover{background:#000;color:#fff}

.mt10{margin-top:10px !important}
.mt20{margin-top:20px !important}
.mt30{margin-top:30px !important}
.mt40{margin-top:40px !important}
.mt50{margin-top:50px !important}
.mt60{margin-top:60px !important}
.mt70{margin-top:70px !important}
.mt80{margin-top:80px !important}
.mt90{margin-top:90px !important}
.mt100{margin-top:100px !important}

.pb10{padding-bottom:10px !important}
.pb20{padding-bottom:20px !important}
.pb30{padding-bottom:30px !important}
.pb40{padding-bottom:40px !important}
.pb50{padding-bottom:50px !important}
.pb60{padding-bottom:60px !important}
.pb70{padding-bottom:70px !important}

table{line-height:120%}

.sub-container{max-width:1400px;padding:0 0 45px;margin:0 auto;line-height:200%;font-size:1.5em}
.sub-container:after{display:block;clear:both;content:''}
.col5 li{width:20%}
.col4 li{width:25%}
.col6 li{width:16.6666666%}

.flag p{font-size:10px;line-height:120%;margin-top:5px}
img.bd{border:1px solid #dedede}

.keep{word-break:keep-all}

.pd0{padding:0 !important}

.check{margin-top:10px;font-size:1.1em;font-weight:600;line-height:200%}

table, td{word-break:break-all}
th{word-break:keep-all}
p.writor{color:#000;margin-top:50px;font-size:1.2em}
.h2-title{padding-top:20px;padding-bottom:10px;border-bottom:1px solid #ddd;margin-bottom:15px;font-size:17px;}

/* 물류기기 제품 버튼 디자인 */
button.btn1 {
  position: absolute;
  top: 0;
  left : 15px; 
	font-size:12px !important;
	font-weight:600;
	background-color:#eee;
	padding:0 3px 0 3px;
	box-shadow:2px 2px 2px ;
}

a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle;padding:0 20px}
button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
.btn_cancel:hover {background:#aaa;
}
a.btn_frmline, button.btn_frmline {display:inline-block;padding:0 5px;height:40px;border:0;background:#3c3c3c;border-radius:5px;color:#fff;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */
a.btn_frmline {}
button.btn_frmline {font-size:1em}

/*컬러*/
.color_1 {background:#169dd6}
.color_2 {background:#14d53d}
.color_3 {background:#3814ff}
.color_4 {background:#7520c5}

.frm_input {height:40px;}
.full_input{width:100%}
.half_input{width:49.5%}

/* 게이판 레이아웃 */
.board{
	font-weight:400;font-size:13px;line-height:1.82em;
}
.panel-body li a{
	float:left;
	display: block;
	width: 210px;
	font-weight:400;
	font-size:13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.panel-txt {
	font-size:12px;
	font-weight:300;
	line-height:25px;
	word-break:keep-all;
}
.panel-default{
	line-height:23px;
}
.panel-body p {
	font-size:12px;
	line-height:23px;
	padding-bottom:10px;
	word-break:keep-all;
	margin-top:-4px;
}
.panel-body {
	font-size:12px;
	line-height:20px;
	word-break:keep-all;
	padding-bottom:19.3px;
}

.panel-group{
	margin-bottom:0px;
}
/* 마우스 오버 텍스트 표시 (우선 생략) */
.product-details {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 120px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.product-details:hover {
  overflow: hidden;
	float:left;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: visible;
  white-space: normal;
  width: 280px;
}

.bot-b{margin-bottom:-1px;}

.civilservice{position:relative; float:left; width:358px;}
.civilservice .titlebox{margin-bottom:15px;}
.civilservice .titlebox h2{color:#000; font-size:17px; font-weight:500; letter-spacing:-0.04em;}
.civilservice .listbox ul li.item{float:left; width:33%; margin-right:0.5%; margin-bottom:17px;}
.civilservice .listbox ul li.item:nth-child(3n){margin-right:0;}
.civilservice .listbox ul li.item .linkbox{display:block; position:relative; border:1px solid #d3d3d3; padding:8px 3% 0; text-align:center; color:#000;}
.civilservice .listbox ul li.item .linkbox:before{display:block; position:absolute; top:-1px; left:-1px; z-index:1; width:calc(100% + 2px); height:calc(100% + 2px); border-width:8px; border-style:solid; border-color:transparent; box-sizing:border-box; content:''; transition-property:border-color, background-color, box-shadow; transition-duration:200ms; transition-timing-function:ease-in-out;}
.civilservice .listbox ul li.item .linkbox:hover:before{border-color:#a6b3c5; background-color:#FFF; box-shadow:rgba(30, 45, 87, 0.15) 0 5px 27px;}

.civilservice .listbox ul li.item .linkbox .innerbox{display:block; position:relative; z-index:2;}
.civilservice .listbox ul li.item .linkbox .innerbox:before{display:block; width:72px; height:48px; margin:10px auto 0; background-repeat:no-repeat; background-image:url(../images/icons.png); content:'';}
.civilservice .listbox ul li.item.item01 .linkbox .innerbox:before{background-position:left center;}
.civilservice .listbox ul li.item.item02 .linkbox .innerbox:before{background-position:-72px center;}
.civilservice .listbox ul li.item.item03 .linkbox .innerbox:before{background-position:-144px center;}
.civilservice .listbox ul li.item.item04 .linkbox .innerbox:before{background-position:-216px center;}
.civilservice .listbox ul li.item.item05 .linkbox .innerbox:before{background-position:-288px center;}
.civilservice .listbox ul li.item.item06 .linkbox .innerbox:before{background-position:-360px center;}
.civilservice .listbox ul li.item .linkbox .innerbox .textbox{display:block; height:57px;}
.civilservice .listbox ul li.item .linkbox .innerbox .textbox .text{font-weight:300;padding-top:10px;display:block; line-height:20px; font-size:13px; letter-spacing:-0.04em;}


/* web */
@media all and (max-width:1360px){
.civilservice{width:100%;}
.civilservice .listbox ul li.item .linkbox .innerbox .textbox .depth2 .depth2_item a{padding:1px 3px 2px;}
}

/* tablet */
@media all and (max-width:1000px){
.rowgroup5:before{top:auto; bottom:0; width:67%; height:0; padding:29% 0;}
.civilservice{float:none; width:auto;}
}

@media all and (min-width:641px) and (max-width:1000px) {
.civilservice .listbox ul li.item:nth-child(3n+1){margin-right:0;}
.civilservice .listbox ul li.item:nth-child(3n-1){margin-left:0.5%; text-align:center;}
.civilservice .listbox ul li.item:nth-child(3n){text-align:right;}
.civilservice .listbox ul li.item .linkbox{display:inline-block; max-width:190px; width:100%; vertical-align:top;}
}

@media all and (max-width:640px){
.rowgroup5{margin-bottom:0;}
.rowgroup5:before{display:none;}
.rowgroup5 .wrap{width:auto;}
.civilservice{width:94%; margin:auto;}
.civilservice .titlebox{margin-bottom:12px;}
.civilservice .titlebox h2{line-height:24px; font-size:18px;}
.civilservice .listbox ul li.item{float:none; width:auto; margin-top:10px; margin-right:0; margin-bottom:0;}
.civilservice .listbox ul li.item:first-child{margin-top:0;}
.civilservice .listbox ul li.item .linkbox:before{display:none;}
.civilservice .listbox ul li.item .linkbox{padding:11px 4% 9px;}
.civilservice .listbox ul li.item .linkbox .innerbox{display:table; width:244px; margin:auto; padding-left:70px;}
.civilservice .listbox ul li.item .linkbox .innerbox:before{position:absolute; top:4px; left:0; width:41px; height:40px; margin:0; background-size:246px auto;}
.civilservice .listbox ul li.item.item02 .linkbox .innerbox:before{background-position:-41px center;}
.civilservice .listbox ul li.item.item03 .linkbox .innerbox:before{background-position:-82px center;}
.civilservice .listbox ul li.item.item04 .linkbox .innerbox:before{background-position:-123px center;}
.civilservice .listbox ul li.item.item05 .linkbox .innerbox:before{background-position:-164px center;}
.civilservice .listbox ul li.item.item06 .linkbox .innerbox:before{background-position:-205px center;}
.civilservice .listbox ul li.item .linkbox .innerbox .textbox{display:table-cell; width:100%; height:48px; text-align:left; vertical-align:middle;}
.civilservice .listbox ul li.item .linkbox .innerbox .textbox .depth2{margin-top:5px;}
.civilservice .listbox ul li.item .linkbox .innerbox .textbox .text{font-size:15px;}
}

/* 레이어 */
.overLayer{
	visibility:hidden; 
	position:absolute; 
	left:42.5%;
	top:58%;
	z-index:999;
	width: 500px; 
	height: 190px; 
	border: 1px solid #333; 
	background-color:#FFC0C0; 
}

.overLayer-txt{
	width: 500px; 
	height: 190px; 
	font-size:13px; 
	line-height:25px; 
	font-weight:500;
	padding:5px 10px; 
	display: table-cell;
	vertical-align:middle;
}