@charset "utf-8";	/* UTF-8 인코딩 */

/* common.css - Cascading Style Sheet Document Definition - font: Verdana, Tahoma, Gulim; */
body { margin:0;padding:0; font-family:Verdana; font-size:12px; color:#000000; line-height:16px; }

img { border:none; }
label { cursor:pointer; }
form { margin:0; padding:0; }

/* Special Class Selector */
.fr { float:right; }
.fl { float:left; }
.clear { clear:both; }
.fwB { font-weight:bold;}
.fwN { font-weight:normal;}
.tCenter { text-align:center; }
.tRight { text-align:right; }
.tLeft { text-align:left; }
.gap1 { margin-top:.8em; }
.nowrap { white-space:nowrap; }
.grayBdOn { border:1px solid #cccccc; padding:1px; }			/* 2011-01-30 추가 */
.grayBgOn { background:#ededed; }						/* 2011-01-30 추가 */
.paddingOn { padding:2px 4px 2px 4px; }					/* 2011-02-04 추가 */

/* Input Style Definition */
/* 2018.02.02 Remarks & Modify - .inputTypeText { border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; height:1.4em; padding:.2em 0 0 .3em; background:#ffffff; font-size:1em; _font-size:9pt; border-radius: 3px 3px 3px 3px; } */
.inputTypeText { border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; height:1.4em; padding:.2em 0 .1em 0; background:#ffffff; font-size:1em; _font-size:9pt; border-radius: 3px 3px 3px 3px; }
*:first-child+html .inputTypeText { font-size:9pt; }
.inputTypeText:hover,
.inputTypeText:focus { background:#f4f4f4; }
/* 2017.09.21 주석처리 후 아래와 같이 수정 .inputTypeTextArea { border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; padding:.2em 0 0 .3em; background:#ffffff; font-size:1em; _font-size:9pt; border-radius: 3px 3px 3px 3px; } */
.inputTypeTextArea { border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; padding:.2em 0 0 .3em; background:#ffffff; font-size:1em; _font-size:9pt; border-radius: 3px 3px 3px 3px; }
*:first-child+html .inputTypeTextArea { font-size:9pt; }
.inputTypeTextArea:hover,
.inputTypeTextArea:focus { background:#f4f4f4; }
/* 2018.02.02 Remarks & Modify
.input { border:1px solid; border-color:#C6C6C6; font-size:9pt;color:#525252; background-color:#ffffff; height:1.8em; padding:.2em .1em .1em .2em; border-radius: 3px 3px 3px 3px; }
.input.dashed { border:1px dashed; border-color:#C6C6C6; font-size:9pt;color:#525252; background-color:#ffffff; height:1.8em; padding:.2em 0 0 .3em; }
*/
.input { border:1px solid; border-color:#C6C6C6; font-size:9pt;color:#525252; background-color:#ffffff; height:1.8em; padding:0 3px 0 3px; border-radius: 3px 3px 3px 3px; }
.input.dashed { border:1px dashed; border-color:#C6C6C6; font-size:9pt;color:#525252; background-color:#ffffff; height:1.8em; padding:0 3px 0 3px; }
.inputTypeSourceCode { border:1px solid; border-color:#a6a6a6 #d8d8d8 #d8d8d8 #a6a6a6; padding:.1em 0 0 .1em; background:#ffffff; font-size:.9em; _font-size:8pt; }

.wide { width:100%; }
.half_wide { width:50%; }
.quarter_wide { width:25%; }
.remainder { width:auto; }
.w10 { width:10px; }
.w15 { width:15px; }
.w20 { width:20px; }
.w25 { width:25px; }
.w30 { width:30px; }
.w35 { width:35px; }
.w40 { width:40px; }
.w45 { width:45px; }
.w50 { width:50px; }
.w60 { width:60px; }
.w70 { width:70px; }
.w80 { width:80px; }
.w90 { width:90px; }
.w100 { width:100px; }
.w110 { width:110px; }
.w120 { width:120px; }
.w130 { width:130px; }
.w140 { width:140px; }
.w150 { width:150px; }
.w160 { width:160px; }
.w170 { width:170px; }
.w180 { width:180px; }
.w190 { width:190px; }
.w200 { width:200px; }
.w210 { width:210px; }
.w220 { width:220px; }
.w230 { width:230px; }
.w240 { width:240px; }
.w250 { width:250px; }
.w260 { width:260px; }
.w270 { width:270px; }
.w280 { width:280px; }
.w290 { width:290px; }
.w300 { width:300px; }
.w350 { width:350px; }
.w400 { width:400px; }
.w450 { width:450px; }
.w500 { width:500px; }
.w550 { width:550px; }
.w600 { width:600px; }
.w650 { width:650px; }
.w700 { width:700px; }
.p90 { width:90%; }
.p95 { width:95%; }
.p98 { width:98%; }
.p100 { width:100%; }

/* editor style */
a.bold { font-weight:bold; }

.editor_blue_text { color: #145ff9 !important; }
.editor_blue_text a { color: #145ff9 !important; }
.editor_red_text { color: #f42126 !important; }
.editor_red_text a { color: #f42126 !important; }
.editor_yellow_text { color: #c9bd00 !important; }
.editor_yellow_text a { color: #c9bd00 !important; }
.editor_green_text { color: #08830B !important; }
.editor_green_text a { color: #08830B !important; }
.editor_gray_text { color: #C0C0C0 !important; }

.folder_opener { display: block; }
.folder_closer { display: none; }
.folder_area { display: none; }

#waitingforserverresponse { border:2px solid #444444; font-weight:bold; color:#444444; padding: 7px 5px 5px 25px; background:#FFFFFF url("../images/loading.gif") no-repeat 5px 5px; top:40px; left:40px; position:absolute; z-index:100; visibility:hidden; }

#popup_menu_area{ position:absolute; background:#fff; border:2px solid #eee; -moz-border-radius:5px; -webkit-border-radius:5px; margin:0; padding:0;}
#popup_menu_area *{ margin:0; padding:0; list-style:none; font-size:12px; line-height:normal;}
#popup_menu_area ul{ border:1px solid #ddd; -moz-border-radius:5px; -webkit-border-radius:5px; padding:10px 10px 5px 10px;}
#popup_menu_area li{ padding:2px 0 2px 20px; background-repeat:no-repeat; background-position:left center; margin-bottom:3px; white-space:nowrap;}
#popup_menu_area li a{ text-decoration:none; color:#000;}
#popup_menu_area li a:hover,
#popup_menu_area li a:active,
#popup_menu_area li a:focus{ font-weight:bold; letter-spacing:-1px;}

/* body { background:#548DB5; } */
body { background:#FFFFFF; }

.N2_Admin { width:100%; height:61px; border-bottom:1px solid #1b3d51; background:#FFFFFF url("../images/top_back.gif") repeat-x left top; position:relative; z-index:100;}
.N2_Admin h1 { position:absolute; top:15px; left:20px; margin:0; padding:0; }
.N2_Admin h1 img{ _behavior:url(./js/iePngFix.htc);}
.N2_Admin ul.globalNavigator { list-style:none; margin:0; padding:0; position:absolute; right:20px; top:13px; }
.N2_Admin ul.globalNavigator li { color:#ddd; display:inline; margin:0 1px;}
.N2_Admin ul.globalNavigator li a{ color:#ddd; text-decoration:none;}

.N2_Admin div.mainNavigator { position:absolute; right:20px; top:35px; padding:0 0 0 6px; background:url("../images/menu_left.gif") no-repeat left top; }
.N2_Admin div.mainNavigator img { float:left; display:block; }
.N2_Admin div.mainNavigator ul { float:left; position:relative; list-style:none; margin:0; padding:0 6px 0 0; background:url("../images/menu_right.gif") no-repeat right top; }
.N2_Admin div.mainNavigator ul li { position:relative; float:left; background:#547C93 url("../images/menu_bar.gif") no-repeat left top; padding:0; color:#eee; border-top:1px solid #1b3d51;}
.N2_Admin div.mainNavigator ul li a{ position:relative; display:block; float:left; height:18px; padding:7px 10px 0 10px; color:#fff; text-decoration:none;}
.N2_Admin div.mainNavigator ul li:hover { color:#FFFFFF; }
.N2_Admin div.mainNavigator ul li.first { background-image:none; }

.adminFolder { background:url("../images/folder_bg.gif") repeat-x left top; height:6px; text-align:center; overflow:hidden;}
.adminPackage { background:#eee url("../images/package_bg.gif") repeat-x left top; overflow:hidden; height:28px; padding:10px 0 0 0;}
.adminPackage ul { position:relative; clear:both; margin:0; padding:0 0 0 20px; height:28px; overflow:hidden;}
.adminPackage ul li { list-style:none; background:url("../images/tab.gif") no-repeat scroll left -35px; margin-right:10px; position:relative; text-align:center; top:0; height:28px;}
.adminPackage ul li a { background:url("../images/tab.gif") no-repeat scroll right -35px; color:#FFFFFF; font-weight:bold; display:block; left:3px; padding:8px 15px 0 10px; position:relative; text-decoration:none; height:28px;}
.adminPackage ul li.active { background-position:left top; top:0; height:28px; }
.adminPackage ul li.active a { background-position:right top; padding:8px 15px 5px 10px; height:28px; color:#185B83;}

.adminSubMenuWide { position:absolute; float:right; text-align:right; overflow:hidden; width:100%; height:28px; padding:0 0 0 0; right:20px; visibility:hidden; color:#548DB5; }
.adminSubMenuWide span { position:relative; margin:0; padding:0 0 0 20px; height:28px; overflow:hidden;}
.adminSubMenuWide span a{ position:relative; display:block; height:18px; padding:7px 10px 0 10px; color:#fff; text-decoration:none;}
.adminSubMenuWide span.hover { color:#ddd;  text-decoration:none; }
.adminSubMenuWide span.active { color:#ddd; }
.adminSubMenuWide span.active a { color:#ddd; }

/* 2009/03/06 IE^ 버그수정 - position:relative; 가 정의되면 IE6에서 버튼 위치가 제멋대로 틀어짐.
.adminContentBody { background:#FFFFFF; position:relative; padding:20px; }
*/
.adminContentBody { background:#FFFFFF; padding:20px; }
.adminContentBody:after { content:""; display:block; clear:both;}

.adminFooter{ background:#548DB5; text-align:center; padding:10px 0;}
.adminFooter address { font:11px Tahoma; color:#fff;}
.adminFooter address a{ font:11px Tahoma; color:#fff; text-decoration:none;}

.pagelink{ text-align:center; padding:10px 0;}
.Copyright{ padding:10px 0;}
.Copyright address { font:11px Tahoma; color:#aaa;}
.Copyright address a{ font:11px Tahoma; color:#aaa; text-decoration:none;}

.ctitle { text-align:center; font-weight:bold; color:#70A2C6; }
.ltitle { text-align:left; font-weight:bold; color:#70A2C6; }
.rtitle { text-align:right; font-weight:bold; color:#70A2C6; }

/* 2017.06.07 추가 */
/* 2017.06.15 주석처리 후 아래와 같이 수정
.leftbox { padding:5px; line-height:16px; margin-bottom:5px; float:left; width: 50%; }
.rightbox { padding:5px; line-height:16px; margin-bottom:5px; float:right; width: 50%; }
*/
.leftbox { float:left; width: 50%; }
.rightbox { float:right; width: 50%; }
#leftbox30 { float:left; width: 30%; }
#rightbox70 { float:right; width: 70%; }
#leftbox35 { float:left; width: 35%; }
#rightbox65 { float:right; width: 65%; }
#leftbox40 { float:left; width: 40%; }
#rightbox60 { float:right; width: 60%; }
#leftbox50 { float:left; width: 50%; }
#rightbox50 { float:right; width: 50%; }
#fullline { float:right; width: 100%; }

#container {
  display: flex;
}
#container a {
  color: #222222;
  cursor: auto;
  text-decoration: none;
  /* color: -webkit-link; */
}
#container a:hover {
  color: #3D83B8;
}

/* 2017.12.13 listcover 추가 */
.listcover {
	display: flex;
	float: left;
	margin: 0 0 0 0;
	width: 50px;
	height: auto;
	max-width: 50px;
	box-shadow: 1px 1px 1px grey;
	border : solid 1px grey;
}
.detailcover {
	display: flex;
	float: left;
	margin: 0 0 0 0;
	/* 2018.02.06 Comment-Out width: 450px; */
	height: auto;
	max-width: 450px;
	box-shadow: 3px 3px 3px grey;
	border : solid 1px grey;
}

/* 2017.07.03 coverimage 추가 */
.coverimage {
	display: flex;
	float: left;
	/*
	margin-right: auto;
	padding-right: 5px;
	*/
	margin: 0 1em 1em 0;
	width: 80px;
	height: 106px;
	box-shadow: 3px 3px 3px grey;
	border : solid 1px grey;
}
/* 2017.08.29 videoimage 추가 */
.videoimage {
	display: flex;
	float: left;
	margin: 0 1em 1em 0;
	width: 80px;
	height: 60px;
	box-shadow: 3px 3px 3px grey;
	border : solid 1px grey;
}
/* 2017.09.20 thumbnail 추가 - 범용으로 사용할 쎔네일 이미지 정의 */
.thumbnail {
	display: flex;
	float: left;
	margin: 0 1em 1em 0;
	width: 80px;
	max-width:100%;
	height: auto;
	box-shadow: 3px 3px 3px grey;
	border : solid 1px grey;
}

/* 2017.06.07 아래 box-left, box-center, box-right 현재 테스트 용도 */
#box-left {
  background: red;
  flex-basis: 150px;
}
#box-center {
  background: orange;
  flex: 1;
  text-align: center;
}
#box-right {
  background: yellow;
  flex-basis: 150px;
  text-align: right;
}