@charset "utf-8";

@import url('reset.css');
@import url('kor-option.css');
@import url('fontawesome.css');
@import url('kor-font.css');
@import url('cssmenu.css');


/* 사이트 기본구성 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* SkipNavi */
#skipNavi{position:absolute;left:0;top:0;z-index:5;width:100%;z-index:1000}
#skipNavi li{position:absolute;left:0;top:0;z-index:5;width:100%}
#skipNavi a{display:block;width:1px;height:1px;margin-bottom:-1px;font-size:0;overflow:hidden;}
#skipNavi a:active, #skipNavi a:focus{color:#000;width:100%;height:auto;padding:5px 0;background:#eee;font-size:12px;text-align:center;}
/* SkipNavi */

/* 기본 레이아웃[틀]  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#wrap { position: relative;  width: 100%; min-height: 100%; overflow: hidden; display: flex; align-items: center; flex-direction: column; font-size: 1.6rem; }

/* 메인index 한정 id */
#main { display: flex; flex-direction: column; width: 100%; background: #fff; overflow: hidden; }

/* 서브레이아웃 한정 id */
#container { display: flex; flex-direction: row; width: 100%; max-width: 1200px; background: #fff; overflow: hidden; justify-content: space-between; padding: 5rem 0 10rem 0; }
#rightCnt { width: 975px; }
#leftMenu { display: block; width: 185px; }
#leftMenu > h2 { padding-bottom: 30px; border-bottom: 1px solid #636363; } 
#leftMenu > h2 span {display:inline-block; color: #3a3a4a; font-size: 32px; font-weight: 600; }
#leftMenu > ul {width:100%; overflow:hidden;}
#leftMenu > ul > li {background:#fff;}
#leftMenu > ul > li > a {display:block; padding:16px 5px; border-bottom:1px solid #e5e5e5; font-size:16px;cursor:pointer; background:url('../images/common/leftMenu_arrOff.png') no-repeat left center; transform:skew(-0.001deg);}
#leftMenu > ul > li > a:hover {background:url('../images/common/leftMenu_arrOn.png') no-repeat left center; color:#2177ce;}
#leftMenu > ul > li > a.on {background:url('../images/common/leftMenu_arrOn.png') no-repeat left center; color:#2177ce;}
#leftMenu > ul > li > ul {width:100%; margin:5px 0; padding:5px 10px; background:#f7f8fc; overflow:hidden;}
#leftMenu > ul > li > ul > li {overflow:hidden;}
#leftMenu > ul > li > ul > li > a {display:block; background:url('../images/common/list-point01.jpg') no-repeat left 17px; padding:7px 0 7px 8px; color:#444; font-size:13px;}
#leftMenu > ul > li > ul > li > a:hover {text-decoration:underline;}
#leftMenu > ul > li > ul > li > a.on {text-decoration:underline;}



@media all and (max-width:479px) {
#leftMenu {display:none;}
}
@media all and (min-width:480px) and (max-width:767px) {
#leftMenu {display:none;}
}
@media all and (min-width:768px) and (max-width:991px) {
#leftMenu {display:none;}
}
@media all and (min-width:992px) and (max-width:1199px) {
#leftMenu {display:none;}
}
@media all and (min-width:1200px) {

}

@media all and (max-width:479px) {
#rightCnt {width: 100%; padding: 0 25px; }
}
@media all and (min-width:480px) and (max-width:767px) {
#rightCnt {width: 100%; padding: 0 25px; }
}
@media all and (min-width:768px) and (max-width:991px) {
#rightCnt {width: 100%; padding: 0 25px; }
}
@media all and (min-width:992px) and (max-width:1199px) {
#rightCnt {width: 100%; padding: 0 25px; }
}
@media all and (min-width:1200px) {

}


/* 콘텐츠 타이틀&네비 */
#navi {width:100%; padding-bottom:30px; /* margin-bottom:30px; */ overflow:hidden; /* border-bottom:1px solid #e5e5e5; */}
#navi > h3 {float:left; font-size: 32px; font-weight: 600; letter-spacing:-1px; color: #3a3a4a; }
#navi > p {float:right; margin:3px 0; color:#777;font-size: 1.4rem;}
#navi > p a {color:#777;}
#navi > p i {font-size:13px;}
#navi > p span {color:#000;}
@media all and (max-width:479px) {
#navi {margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px dashed #e5e5e5; text-align: center; }
#navi > h3 {float:none;margin-bottom: 2rem; }
#navi > p {float:none; }
}
@media all and (min-width:480px) and (max-width:767px) {
#navi {margin-bottom: 4rem; border-bottom: 1px dashed #e5e5e5; }
#navi > h3 {float:none; margin-bottom: 2rem; }
#navi > p {float:none; }
}


header { width: 100%; position: relative; overflow: hidden; display: flex; overflow: hidden; flex-direction: column; border-bottom: 1px solid #e5e5e5; z-index: 999; }
header::before { content: ""; display: inline-block; position: absolute; top: 100%; width: 100%; height: 200px; z-index: 1; background: #fff; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
header .gnbTop { padding: 0.8rem 0; background: #f7f8fc; }
header .gnbTop .inner_wrap { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; }
header .gnbTop .inner_wrap > * { margin-right: 1.5rem; }
header .gnbTop .inner_wrap > *:last-child { margin-right: 0; }
header .gnbTop .loginBtn { display: flex; align-items: center; }
header .gnbTop .loginBtn > * { margin-right: 1.5rem; }
header .gnbTop .loginBtn > *:last-child { margin-right: 0; }
header .gnbTop .inner_wrap a { display: flex; padding: 0.8rem 1rem; align-items: center; justify-content: center;  background: #93a0ae; color: #fff; font-size: 1.2rem; }
header .gnbTop .inner_wrap a i { padding-left: 5px; }
header .gnbTop .helloUser { display: flex; align-items: center; justify-content: center; font-weight: 400; }
header .gnbTop .helloUser > * { margin-right: 0.5rem; color: #2177ce; }
header .gnbTop .helloUser > *:last-child { margin-right: 0; }
header .gnbTop .helloUser span.wel { padding: 6px; color: #999; }

header .gnbMenu { display: flex; height: 9.5rem; justify-content: space-between; flex-wrap: wrap; background: #fff; }
header .gnbMenu h1 { width: 14rem; height: 100%; background: url('../images/common/iEot_logo.svg') center center no-repeat; background-size: contain; }
header .gnbMenu h1 a { display: inline-block; width: 100%; height: 100%; }
header .gnbMenu nav { display: flex; height: 100%; }
header .gnbMenu nav * { display: flex; position: relative; flex-direction: row; align-items: center; font-size: 2.2rem; font-weight: 400; height: 100%; }
header .gnbMenu nav a { padding: 0 4rem; height: 100%; }
header .gnbMenu nav a:hover { color: #2177ce; }
header .gnbMenu nav > ul { height: 100%; position: relative; }
header .gnbMenu nav > ul > li { display: flex; flex-direction: column; }
header .gnbMenu nav > ul > li > a { position: relative; }
/* header .gnbMenu nav > ul > li > a:hover::before { content: ""; display: block; position: absolute; width: 1em; height: 1em; background: red; } */
header .gnbMenu nav ul ul { display: flex; position: absolute; width: 100%; height: auto; top: 100%; flex-direction: column; z-index: 1; padding-top: 20px; }
header .gnbMenu nav ul ul li {width: 100%; justify-content: center;}
header .gnbMenu nav ul ul a { display: flex; position: relative; width: 100%; padding: 1rem; font-size: 1.6rem; justify-content: center; text-align: center; }
/* header .gnbMenu nav ul ul a:hover::before { content: ""; display: block; position: absolute; width: 1em; height: 1em; background: red; }
header .gnbMenu nav ul ul a:hover::after { content: ""; display: block; position: absolute; top: 0; width: 1em; height: 1em; background: red; } */

@media all and (max-width:479px) {
header {display:none;}
}
@media all and (min-width:480px) and (max-width:767px) {
header {display:none;}
}
@media all and (min-width:768px) and (max-width:991px) {
header {display:none;}
}
@media all and (min-width:992px) and (max-width:1199px) {
header {display:none;}
}
@media all and (min-width:1200px) {

}

/* 
@media screen and (max-width: 768px) {
#header-mobile .hm-menu dd.logo a span { display: none; }
#header-mobile .hm-total { width: 80%; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
}
@media screen and (min-width: 1200px) { 
#header-mobile {display:none;}
} */


/* 상단영역 - 모바일 */
#header-mobile { position: relative; width:100%; height: 60px; background:#fff; z-index:999; }
#header-mobile .hm-menu { display: flex; position: fixed; top: 0; width: 100%; height: 60px; padding: 0 25px 0 15px; overflow: hidden; border-bottom: #e5e5e5 1px solid; justify-content: space-between; background: #fff; box-shadow: 0px 2px 8px 2px #0000000f;}
#header-mobile .hm-menu h1 {width: 14rem; height: 100%; background: url('../images/common/iEot_logo_M.svg') center left no-repeat; background-size: contain;} 
#header-mobile .hm-menu h1 a { display: flex; height: 100%; }
#header-mobile .hm-menu button {float:left; width:10%; text-align:right; font-size:25px; color:#333;}
#header-mobile .hm-menu button:first-child {text-align:left;}
#header-mobile .hm-menu button i {color:#333; cursor:pointer; transition:0.3s;}
#header-mobile .hm-menu button i:hover {color:#777;}

/*  */
#header-mobile .hm-total {position:fixed; top:0; left:-100%; width: max(50vmin, 300px); height:100%; background:#fff; overflow:auto;}
#header-mobile .hm-total > .total-top { display: flex; width:100%; height: 60px; overflow:hidden; padding: 0 25px 0 15px; justify-content: space-between; align-items: center; background: #4c4c4c; color: #fff; box-shadow: 0px 3px 6px 1px #4475ad33;}
/* #header-mobile .hm-total > .total-top a { font-size: 1.6rem; font-weight: 400; display: flex; color: #fff; align-items: center; padding: 8px 20px; border: 1px solid #ffffff7d; border-radius: 50em; } */
#header-mobile .hm-total > .total-top i { padding-left: 0.8em; font-size: 0.6em; transform: translateY(0.25em); }
#header-mobile .hm-total > .total-top button { display: flex; justify-content: center; align-items: center; color: #999; width: 25px; height: 25px; }
#header-mobile .hm-total > .total-top button::before { content: ""; position: absolute; width: 3px; height: 20px; background: #fff; border-radius: 50em; transform: rotate(45deg); }
#header-mobile .hm-total > .total-top button::after { content: ""; position: absolute; width: 3px; height: 20px; background: #fff; border-radius: 50em; transform: rotate(-45deg); }
/* #header-mobile .hm-total > p {width:100%; padding:15px 10px; text-align:center; border-top:#373948 1px solid; overflow:hidden;}
#header-mobile .hm-total > p > a {display:inline-block; width:49%; padding:4px 0; font-size:14px; color:#ddd; background:#555;}
#header-mobile .hm-total > p > a:hover {color:#fff; background:#525573;}
#header-mobile .hm-total > p > a.on {color:#fff; background:#525573;}*/
#header-mobile .hm-wrap { position: fixed; top: 0; width: 100%; height: 100%; background: #00000080; display: none; } 
#header-mobile .hm-total > .total-top .logo { width: 14rem; height: 100%; background: url(../images/common/iEot_logo_M02.svg) center left no-repeat; background-size: contain; }
#header-mobile .hm-total > .total-top .logo a { display: inline-block; }


#loginWrap { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 25px 25px 22px 25px; }
/* #loginWrap .loginBtn { display: flex; align-items: center; justify-content: flex-start; flex-direction: row; height: 50px; } */
#loginWrap .helloUser { background: #fff; color: #000; box-sizing: border-box; font-size: 13.5px; text-align: left; }
#loginWrap .helloUser span.wel { display: contents; color: #999; }
#loginWrap .helloUser .btnWrap { margin-top: 15px; }
#loginWrap .helloUser .btnWrap::after { display: block; content: ""; clear: both; }
#loginWrap .helloUser .btnWrap > a { display: inline-block; /* width: calc(50% - 10px); */ margin-right: 10px; padding: 13px 0; border-radius: 4px; font-size: 15px; text-align: center; background: #5898e3; color: #fff; }
#loginWrap .helloUser .btnWrap > a:nth-child(2n) { margin-right: 0; background: #f16894; }
#loginWrap .helloUser .btnWrap > a:first-child:nth-last-child(1) { width: 100%; }
#loginWrap .helloUser .btnWrap > a:first-child:nth-last-child(2),
#loginWrap .helloUser .btnWrap > a:first-child:nth-last-child(2) ~ a { width: calc(50% - 5px); }
#loginWrap .helloUser .btnWrap > a.info > i { padding-left: 5px; }

@media all and (max-width:479px) {
#header-mobile .hm-total { width: 100%; }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
#header-mobile .hm-total { width: 80%; }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {

}
@media screen and (min-width: 1200px) { 
#header-mobile {display:none;}
}





/* 하단영역 */
footer { display: flex; position: relative; width: 100%; margin-top: auto; justify-content: center; background: #f6f7fb; flex-direction: column; overflow: hidden; align-items: center; color: #666; }
footer .fTop { width: 100%; border-bottom: 1px solid #ddd; font-size: 16px; }
footer .fTop ul { display: flex; }
footer .fTop ul li { position: relative; }
footer .fTop ul li a { display: flex; align-items: center; padding: 24px; }
footer .fTop ul li:first-child a { padding-left: 0px; }
footer .fTop ul li a strong { color: #5898e3; font-weight: 500; }
footer .fTop ul li a::after { content: ""; position: absolute; width: 1px; height: 1em; right: 0; background: #ddd;  }
footer .fTop ul li:last-child a::after { content: none; }
footer .fBtm { display: flex; align-items: center; padding: 20px 0; font-size: 14px; }
footer .fBtm > * { margin-right: 20px; }
footer .fBtm > *:last-child { margin-right: 0px; }
footer .fBtm > img { width: 83px; }
footer .fBtm ul li { margin-bottom: 0.4em; }
footer .fBtm ul li:last-child { margin-bottom: 0px; }
footer .fBtm ul li strong { color: #777; font-weight: 500; }

@media all and (max-width:767px) {
footer .fTop { font-size: 15px; }
footer .fTop ul { justify-content: center; }
footer .fTop ul li a { padding: 18px; }
footer .fBtm { flex-direction: column; }
footer .fBtm > * { margin-right: 0; margin-bottom: 20px; text-align: center; }
footer .fBtm > *:last-child { margin-bottom: 0px; }
footer .fBtm img { display: none; }
footer .fBtm ul li { line-height: 1.3em; }
footer .logoColor { vertical-align: top; }
}
@media all and (max-width:1199px) {
footer .fTop { font-size: 13px; }
footer .fTop ul li a { padding: 16px; }
footer .inner_wrap {padding: 0 25px;}
footer .fBtm { padding: 20px 25px; font-size: 13px; }
}

/* /* 팝업창 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
팝업창 타이틀
.popTitle {height:50px; padding:0 15px; background:url(/static_root/images/layer/pop_bg.jpg) no-repeat; background-size:cover; overflow:hidden;}
.popTitle dt {float:left; padding-top:10px; font-size:20px; line-height:30px; font-weight:bold; color:#fff;}
.popTitle dd {float:right; padding-top:15px; color:#fff; letter-spacing:-1px;}

.layerShadow {width:100%; height:5px; background:linear-gradient(to bottom, #bbb, #fff); position:relative; z-index:99;}    명암

.popArea {padding:30px 25px; margin-bottom:10px; background:#fff;} 팝업내용영역


레이어 사용 - 임시사용
.layerWrap500Dev {width:500px; background:url(/static_root/images/layer/pop_bg.jpg) no-repeat; z-index:10; border:1px solid #e5e5e5;}
.layerWrapAddr {width:500px; min-width: 300px; max-width:600px; background:url(/static_root/images/layer/layer_bg.gif); z-index:10; border:1px solid #e5e5e5;}

.layerTitle {height:60px; padding:0 25px; overflow:hidden;}
.layerTitle dt {float:left; padding-top:13px; font-size:22px; line-height:30px; font-weight:bold; color:#fff; letter-spacing:-1px;}
.layerTitle dd {float:right; padding-top:18px;}

.layerTLine {height:10px; background:url('/static_root/images/layer/layer_topBg.jpg') repeat-x;}
.layerBLine {height:10px; margin-bottom:20px;}

.layerArea {padding:20px; background:#fff;}
.layerArea .schChk {width:100%; overflow:hidden;}
.layerArea .schChk dt {padding:0 0 15px 22px; font-size:14px; font-weight:bold; color:#333; background:url('../images/btnIcn/icn_title2.gif') 0 2px no-repeat;}
.layerArea .schChk dd {margin-bottom:15px; border:#e5e5e5 1px solid; background:#f9f9f9;}
.layerArea .schChk dd a {display:block; padding:5px 10px 5px 20px; border-bottom:#e5e5e5 1px solid; background:url('../images/btnIcn/icn_dot1.gif') 10px 15px no-repeat;}
.layerArea_view {border:1px solid #dedede; overflow:hidden;}

.searchTable {width:100%; overflow:hidden;}
.searchTable table {width:100%; table-layout:fixed; border:#e5e5e5 1px solid; background:#f1f1f6;}
.searchTable table th {padding:7px 10px 8px 38px; text-align:left; font-size:16px; font-weight:bold; color:#333; background:url('../images/btnIcn/icn_search.png') 15px center no-repeat;}
.searchTable table th.stBtn {padding:7px 10px 8px 10px; text-align:center; border-left:#ddd 1px solid; background:none;}
.searchTable table td {padding:12px 10px 12px 15px; background:#fff;}
.searchTable table td label {font-weight:bold; color:#333;}

.tableListTitle {overflow:hidden;}
.tableListTitle table {width:100%; table-layout:fixed; border-top:#e4e4e4 1px solid; border-left:#e4e4e4 1px solid;}
.tableListTitle table th {padding:12px 0 12px 0; font-weight:bold; color:#0b2e47; letter-spacing:-1px; text-align:center; background:#fafbfc; border-right:#e4e4e4 1px solid; border-bottom:#e4e4e4 1px solid;}

.tableListCtn {height:300px; border-bottom:#e4e4e4 1px solid; overflow:auto;}
.tableListCtn table {width:100%; table-layout:fixed; border-left:#e4e4e4 1px solid;}
.tableListCtn table td {padding:8px 5px; text-align:center; border-right:#e4e4e4 1px solid; border-bottom:#e4e4e4 1px solid;} 
.tableListCtn table th {padding:8px 5px 8px 15px; text-align:left; border-right:#e4e4e4 1px solid; border-bottom:#e4e4e4 1px solid;}

.nyroModalBg {
	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #000;
	opacity: 0.7;
}
.nmReposition {
	position: absolute;
}
.nyroModalCloseButton {
	top: -13px;
	right: -13px;
	width: 12px;
	height: 12px;
	text-indent: -9999em;
	background: url(../image/nyromodal/close.gif);
}
.nyroModalTitle {
	top: -26px;
	left: 0;
	margin: 0;
    font-size: 1.1em;
	color: #ddd;
}
.nyroModalCont {
	position: absolute;
	border: 4px solid #777;
	margin: 25px;
	background: #fff;
}
.nyroModalCont iframe {
	width: 600px;
	height: 400px;
}
.nyroModalError {
	border: 4px solid red;
	color: red;
	width: 250px;
	height: 250px;
}
.nyroModalError div {
	min-width: 0;
	min-height: 0;
	padding: 10px;
}
.nyroModalLink, .nyroModalDom, .nyroModalForm, .nyroModalFormFile {
	position: relative;
	padding: 10px;
	min-height: 250px;
	min-width: 250px;
	max-width: 1000px;
}
.nyroModalImage, .nyroModalSwf, .nyroModalIframe, .nyroModalIframeForm {
	position: relative;
	overflow: hidden;
}
.nyroModalImage img {
    vertical-align: top;
}
.nyroModalHidden {
	left: -9999em;
	top: -9999em;
}
.nyroModalLoad {
	position: absolute;
	width: 100px;
	height: 100px;
	background: #fff url(../image/nyromodal/ajaxLoader.gif) no-repeat center;
	padding: 0;
}
.nyroModalPrev, .nyroModalNext {
	outline: none;
	position: absolute;
	top: 0;
	height: 60%;
	width: 150px;
	min-height: 50px;
	max-height: 300px;
	cursor: pointer;
	text-indent: -9999em;
	background: transparent url('data:image/gif;base64,AAAA') left 20% no-repeat;
}
.nyroModalImage .nyroModalPrev, .nyroModalImage .nyroModalNext {
	height: 100%;
	width: 40%;
	max-height: none;
}
.nyroModalPrev {
	left: 0;
}
.nyroModalPrev:hover {
	background-image: url(../image/nyromodal/prev.gif);
}
.nyroModalNext {
	right: 0;
	background-position: right 20%;
}
.nyroModalNext:hover {
	background-position: right 20%;
	background-image: url(../image/nyromodal/next.gif);
} */