@charset "UTF-8";

html {overflow:auto;}
body {height:100vh;background:#3B3C3B ; }
button {outline:none;cursor:pointer;}

input::-ms-input-placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder { color: #fff; }
input::placeholder {color:#999;}

#wrapper {width:100%;min-width:1280px;height:100vh;background:url(../img/main_out/bg_top_out.jpg) center top no-repeat;}
.box {width: 1280px;margin: 0 auto;}
#header {width:100%;height: 94px;min-width:1280px;position:absolute;z-index:99;}
#container {width: 100%;min-width:1280px;padding:20px 0;margin-top: 445px;background:#f3f3f3;position:relative;/*top:90px; */z-index:9;display:inline-block;}
#footer {width:100%;height: 50px;margin-top:0px;background: #3B3C3B;text-align:center;font-size:14px;color:#666;line-height: 40px;position:relative;z-index:99;display:inline-block;}



/******** header ******/
#header h1.head {width:405px;height:80px;margin:13px 0 0 500px;background:url(../img/main_out/out_logo_main.gif) 0 0 no-repeat;text-indent:-9999px;float: right;}
#header .loginBox {width:315px;padding:35px 45px;color:#fff;float: right;}
#header .loginBox .loginTitle {width:100%;height:40px;font-size:18px;}
#header .loginBox p label {margin-left:5px;}
#header .loginBox p.tac {text-align: center;}
input.ipid {width:90%;height:45px;padding:0 5%;margin:10px 0;border:1px solid #0c4280;font-size:16px;}
button.btLogin {width: 100%;height:50px;margin:20px 0 15px 0;background:#1b2573 url(../img/main_out/onpassBg.gif) center 5px no-repeat;border:0;color:#fff;font-size: 18px;letter-spacing:3px;text-indent:-9999px;text-align: center;}

button.btNobg {background:none;border:none;color:#fff;font-size: 13px;text-align: center;}
button.more {margin: 20px 5px 0 0;background:none;border:none;color:#333;font-size: 11px;text-align: center;float: right;}

#header .top {width:100%;height:40px;background:#165090;background-size:contain;float:left;}
#header .top .logo {width:310px;height:30px;background:url(../img/main_out/logo_top_out.png) 20px 7px no-repeat;text-indent:-9999px;float:left;}
#header .top .right {width:230px;height:30px;float:right;}
#header .top .right li {padding:0px 0px 0 15px;font-size:12px;color:#fff;line-height: 40px;float:left;}
#header .top .right li img {margin:0px 5px 0 0;}
#header .top span {margin-right: 20px;font-size:14px;color:#fff;line-height: 38px;float:right;}
#header .top span img {margin-right:5px;}

#header .gnb {width: 100%;background:url(../img/bg_gnb3.png) center -41px no-repeat;min-width: 1280px;float: left;}
#header .gnb h1 {height: 54px;font:normal 22px/54px 'NanumSquareB';letter-spacing:-1px;color: #333;float: left;}
#header .gnb ul {float: right;}
#header .gnb li {float: left;cursor:pointer;}
#header .gnb li h2 {width: 132px;padding:0 0px;font-size: 15px;font-weight: bold;color: #222;line-height: 54px;text-align: center;}
#header .gnb li:first-child h2 {width: 142px;}
#header .gnb li h2.on {color: #e5581a;}
#header .gnb li ul {width: 131px;height: 340px;background:rgba(255,255,255,.9);border: 1px solid #999;border-left:0 ;}/* �޴��߰��ó��̺��� */
#header .gnb li ul.bdlY {border-left: 1px solid #999;}/* �޴��߰��ó��̺��� */
#header .gnb li li {width: 131px;padding:10px 0 5px 0;font-size: 13px;color: #222;text-align: center;letter-spacing:-1px;clear:both;}
#header .gnb li li:hover {text-decoration:underline;}
#header .gnb li li.on {font-weight:bold;color:#e5581a;text-decoration: underline;}


/******** footer ******/
/*개인정보처리방침 추가*/
#footer {width:100%;padding:15px 0;font-size:13px;color:#b2bdc8;text-align:center;float:left;}
#psl_info_policy{color:white  position: relative; margin: auto; padding: 20px 0 0;  overflow: hidden;}
#psl_info_policy ul{text-align: center; }
/* #psl_info_policy li >a{white-space: nowrap;} */
#psl_info_policy li > b{color:#ffe359; font-weight:500;cursor:pointer; font-size:15px;}


[class*='panel']{
	display:table; /* ☆ [class*='deco1']+.body1{display:table-cell;} 높이가 유연하게 대응 */
	z-index:0; /* ☆ */
	position:relative;
	box-sizing:border-box; /* ☆ */
	width:100%;
	margin:1.25em 0;
	padding:1em 1.25em;
	border:1px solid #d4d8dd;
	background:#fcfdfe;
}
[class][class].hb0{padding:0;border:0;background:transparent;}

/* 불릿있는제목 */
.hb1{display:block;
	position:relative;
	margin:1.5em 0 1em;
	padding:0 0 0 .75em;
	background:url() no-repeat 0 50%;
	background-position:0 .25em;
	color:#555;
	font-weight:500;
	line-height:1.375;
	letter-spacing:-.0625em; /* 1/16 */
}
.hb1.h1{
	padding:0 0 .25em;
	background-image:url(../../img/lib/h1bg.png);
	background-position:0 100%;
	font-size:2.5em; /* =40/16 */
}
.hb1.h2{
	padding-left:32px;
	/* padding-bottom:.5em; */
	/* border-bottom:1px solid #444; */
	background-image:url(../../img/lib/h2bg1.png);
	background-position:0 .28125em;
	color:#333;
	/* font-weight:400; */
	font-size:1.625em; /* =26/16 */
}
.hb1.h3{
	/*padding:22px 0 0 0;*/
	margin:1em 0 1em;
	padding:18px 0 0 0;
	background-image:url(../../img/lib/h3bg.png);
	background-position:0 .375em;
	/*color:#555;*/
	color:#0056ac;font-weight:600;
	/*font-size:1.375em; /* =22/16 */
	font-size:1.25em; /* =20/16 */
}
.hb1.h4{
	padding-left:22px;
	background-image:url(../../img/lib/h4bg.png);
	/* color:#590; */
	color:#555;
	font-size:1.25em; /* =20/16 */
}
.hb1.h5{
	background-image:url(../../img/lib/h5bg.png);
	color:#089;
	font-weight:400;
	font-size:1.125em; /* =18/16 */
}
.hb1.h6{
	background-image:url(../../img/lib/h6bg.png);
	color:#09c;
	font-weight:400;
	font-size:1em; /* =16/16 */
}


/* 불릿없는제목 (font-size = .hb1) */
.hb2{display:block;position:relative;
	margin:.75em 0;
	padding:0;
	border:0;
	background:transparent;
	color:#000;
	font-weight:500;
	line-height:1.375;
	letter-spacing:-.0625em; /* 1/16 */
}
/* ( (40 26 22 20 18 16)/16 ) */
.hb2.h1{font-size:2.5em;}
.hb2.h2{font-weight:400;font-size:1.625em;}
.hb2.h3{font-size:1.375em;}
.hb2.h4{font-size:1.25em;}
.hb2.h5{font-size:1.125em;}
.hb2.h6{font-size:1em;}


/* 디자인제목 */
.hb3.h3{
	padding:0 0 0 30px;
	background-image:url(../../img/lib/h2bg1.png);
	background-position:0 .1875em;
	color:#007e4c;
	font-weight:600;
	font-size:1.375em; /* =22/16 */
}


/* Other styled text tags (Emphasis (≥ Contrast 3:1) 배경#eee) 20200117 */
em,
.em{color:#d43;} /* #e04 강조색 기본 */
.em1{color:#e00;} /* 빨 red */
.em1-2{color:#e55;} /* 다홍 red */
.em2{color:#e50;} /* 주 orange (dung) */
.em3{color:#b70;} /* 노 yellow (gold) */
.em3-4{color:#690;} /* 연두 light green */
.em4{color:#080;} /* 초 green */
.em4-5{color:#078;} /* 청록 cyan (green blue) */
.em5{color:#05b;} /* 파 blue */
.em5-6{color:#04a;} /* 암청 cobalt blue */
.em6{color:#009;} /* 남 navy */
.em7{color:#85e;} /* 보 violet */
.em8{color:#c2c;} /* 심홍 magenta (blue red) */
.em9{color:#d06;} /* 분홍 pink */
.em0{color:#000;} /* 흑 black */

/* Paragraph 20200110 */
p.bu{
	position:relative;
	padding:0 0 0 1.25em;
	background:url(../../img/lib/li1bg.png) no-repeat 0 .375em;
}


/* List 20190829 */

ul.b0,
ol.b0,
dl.b0{list-style:none;margin-left:0;padding-left:0;text-align:left;}
ul.b0>li,
ol.b0>li,
dl.b0>dt,
dl.b0>dd{margin:.375em 0;padding:0;}


/* 순번목록 */
ol[class*='bo']{
	list-style:decimal-leading-zero;
	/* margin:0; ☆ 20190222 */
	padding:0 0 0 1.8em;
	text-align:left;
}
ol[class*='bo']>li{
	margin:.375em 0;
	padding:0;
	background:transparent;
}
ol.bo0{
	/* padding:0; */
}
/* [IE9+] */
html.gteIE9orSUA ol.bo1{list-style:none;
	padding-left:2.1em; /* ☆~99 보장 */
}
ol.bo1>li{
	   list-style-position: inside;
    text-indent: -20px;
    padding-left: 20px;
}


/* List Property 20181012 */
.ttmg0[class]>li,
.ttmg0[class]>dt,
.ttmg0[class]>dd{margin:0;}


/* 정의(ex)용어.. 위 우선순위 12점 보다 큰 선택자 사용 */
.dfn[class]>li{
	margin:1em 0;
}
.dfn[class]>dt{margin-top:1em;}
.dfn[class]>dd{margin-bottom:1em;}


/* 일반목록 */
ul.bu{list-style:none;margin-left:0;padding:0;text-align:left;}
ul.bu ul{list-style:none;margin:.5em 0;padding:0;}
ul.bu li{
	margin:.375em 0;
	padding:0 0 0 1.25em;
}

/******** container ******/
#container .box620 {width:620px;height:225px;margin-bottom:20px;float: left;}
#container .sect_title {width:580px;height:45px;padding:0 0 0 40px;background:url(../img/main_out/ic_red.gif) 10px 10px no-repeat;font:normal 20px/45px 'NanumSquareB';color: #222;float: left;}
#container .sect_con {width:100%;height:180px;border-top:2px solid #c5c5c5;border-bottom:1px solid #c5c5c5;float: left;}
#container .sect_con table {width:100%;margin-top:3px;font-size:14px;color:#666;border-collapse:collapse;}
#container .sect_con table td {height:32px;text-align: center;}
#container .sect_con table td.tal {text-align:left;}
#container .sect_con table td b {font-size: 18px;}

#container .sect_conbg {width:620px;height:220px;margin-top:10px;background:#227adf url(../img/main_out/bg_shortcut.gif) 0px bottom no-repeat;float: left;}
#container .sect_conbg ul {margin:29px 0 0 43px;}
#container .sect_conbg ul li {width:159px;height:159px;margin-right:30px;float: left;}
#container .sect_conbg ul li a {width:159px;height:159px;text-indent:-9999px;display:inline-block}


/******** footer ******/
#footer {width:100%;padding:15px 0;font-size:13px;color:#b2bdc8;text-align:center;float:left;}


/******** popup ******/
.main_popup {width: 100%;height:100vh;background:rgba(0,0,0,.7);font-size:12px;position:fixed;left:0;top:0;z-index:999;}
.main_popup .popBox {width:600px;height:80%;height:80vh;background:#f3f3f3;border-radius:5px;position:relative;top:50px;left:50%;margin-left:-300px;overflow-y:hidden;}


.main_popup .close {width: 100%;margin-top: 30px;text-align: center;}
.main_popup .close button {background:none;border:none;font-size:40px;color: #fff; opacity:0.6;}
.main_popup .poptitle {width: 100%;padding: 15px 0 10px 0;border-bottom: 1px solid #ccc;font-size: 20px;font-weight: bold;color: #222;text-align: center;}
.main_popup .poptitle i {margin-right:5px;}
.main_popup .popCont {width:90%;height:70%;margin:0 5%;overflow-y:auto;overflow-x:hidden;}
.main_popup .popCont dl {margin:10px 0 20px 0;}
.main_popup .popCont dt {padding: 20px 0px 10px 0;font-size:16px;color: #333;}
.main_popup .popCont dt b {color:#d42222;}
.main_popup .popCont dt i {margin-right:5px;}
.main_popup .popCont dd {width:95.5%;height:108px;padding:5px 2%;background:#fff;border: 1px solid #ddd;line-height:18px;overflow-y:auto;overflow-x:hidden;}
.main_popup .popCont table {width: 70%;margin: 15px 15%;font-size: 14px;border-collapse:collapse;}
.main_popup .popCont table tr {border-bottom: 1px dashed #ccc;}
.main_popup .popCont table th {height: 50px;width:23%;padding:0 10px 0 0;color:#333;text-align: right;}
.main_popup .popCont table td {height: 50px;}
.main_popup .popCont table button {padding:0 10px;height:28px;margin:0 0 0 5px;background:#6888bc;border:0;vertical-align: middle;line-height: 28px;color: #fff;}
.main_popup .popCont table label {margin:0 15px 0 3px;vertical-align:middle;color: #333;}

.main_popup  p {padding: 20px;text-align: center;border-bottom: 1px dashed #ccc;font-size:14px;color: #222;}
.main_popup .btgr {width:100%;padding:15px 0;text-align: center;float: left;}
.main_popup .btgr button.ok {width: 100px;height: 40px;margin:0 5px;border:none;border-radius:5px;background:#175090;color: #fff;font-size:16px;text-align: center;}
.main_popup .btgr button.no {width: 100px;height: 40px;margin:0 5px;border:none;border-radius:5px;background:#999;color: #fff;font-size:16px;text-align: center;}

	/******** popup input,select******/
input.ips_mp1 {width:50%;height:26px;padding:0 5px;}
input.ips_mp2 {width:80%;height:26px;padding:0 5px;}
input.ips_mp3 {width:15%;height:26px;padding:0 5px;}
input.ips_mp4 {width:10%;height:26px;padding:0 5px;}



select.slt_mp1 {width:55%;height:28px;}
select.slt_mp2 {width:25%;height:28px;padding:0 5px;}

/******** etc ******/
.mgr40 {margin-right:40px;}