/***********************************************************************************
* Copyright (C)RFLOGIX since 2010.08.24 (rflogix@rflogix.com)
************************************************************************************
* ● 프로젝트	: AGM-어드민
* ○ 파일		: common.css
* ○ 생성		: 2017.02.01(수요일)
* ○ 최종변경	: 2017.02.01(수요일)
************************************************************************************/




/***********************************************************************************
* 폰트 관련
***********************************************************************************/

@import url(https://fonts.googleapis.com/css?family=Dosis:400,500,600,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700);
/*@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,300,700);*/
@import url(font/noto/noto.css);




/***********************************************************************************
* 기본
***********************************************************************************/

html, body, iframe, div, form, img, ul, li, button {border:0px; margin:0px; padding:0px; font-family:"Nanum Gothic";}
html, body, iframe	{height:100%; width:100%;}
html, body {font-size:12px; color:#666666; }

div		{width:100%; position:relative;}
ul		{width:100%; list-style:none; clear:both; overflow:hidden;}
li		{float:left;}

img		{vertical-align:middle;} /* vertical-align:middle; 이거 안주면 밑에 3px 정도 뜸 */
textarea {resize:none; outline-style:none;}
input {margin:0px; padding:0px; outline-style:none;}

a:link							{color:#404040; text-decoration:none;}
a:visited, a:active, a:hover	{color:#404040; text-decoration:none;}
table {border-collapse:collapse;}

select {height:30px; color:#333; padding:0 30px 0 5px; border:1px solid #aaa; border-radius:3px; background:url("../image/common/select_arrow.png") no-repeat; background-position:calc(100% - 10px) center; background-color:white; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none; transition:border-color 0.3s;}
select:hover {border:1px solid #333;}
select::-ms-expand {display:none;}




/***********************************************************************************
* CK 에디터
***********************************************************************************/

.cke_upload_img_wrap {max-width:100%; border:5px dashed #eee;}
.cke_upload_img {max-width:100%;}




/***********************************************************************************
* date picker
***********************************************************************************/

.ui-datepicker-year		{width:70px !important;}
.ui-datepicker-month	{width:55px !important; margin-left:10px !important;}
.ui-datepicker-prev		{height:90% !important;}
.ui-datepicker-next		{height:90% !important;}
.ui_datepicker {width:135px !important; background-color:#efefef; text-align:center; cursor:pointer; position:relative;}
.datepicker.fa-times {cursor:pointer; padding-left:5px;}




/***********************************************************************************
* 그리드
***********************************************************************************/

.ui-jqgrid-titlebar {height:40px; display:flex; align-items:center;}
.ui-jqgrid div {width:auto;}

.ui-jqgrid-title {height:100%; font-size:14px; font-weight:bold; display:flex; align-items:center;}
.ui-jqgrid-title i {width:16px; height:100%; display:inline-block; overflow:hidden; background-position:center; background-size:contain; background-repeat:no-repeat; background-image:url('../image/button/ico_arrow_1.png'); float:left;}
.ui-jqgrid-title span {margin-left:5px; color:#333; display:inline-block; overflow:hidden; float:left}

.ui-jqgrid-htable tr.ui-jqgrid-labels th {height:40px !important; font-weight:bold; position:relative;}
.ui-jqgrid-btable tr.jqgrow td {height:40px !important; padding:5px 0 !important;}

.ui-jqgrid-btable tr.jqgrow td img {width:90%; border:1px solid #eee; background-size:contain; background-position:center; background-repeat:no-repeat;}
.ui-jqgrid-btable tr.jqgrow td input {height:28px; width:100px; padding:0 5px; border:1px solid #aaa; border-radius:3px; transition:border-color 0.3s;}
.ui-jqgrid-btable tr.jqgrow td input:hover {border-color:#333;}
.ui-jqgrid-btable tr.jqgrow td input[type='checkbox'] {height:auto; width:auto; padding:0; border:initial; border-radius:0;}
.ui-jqgrid-btable tr.jqgrow td textarea {height:45px; width:100px; padding:5px; border:1px solid #aaa; border-radius:3px; resize:none; transition:border-color 0.3s;}
.ui-jqgrid-btable tr.jqgrow td textarea:hover {border-color:#333;}

.ui-jqgrid-btable td {font-size:12px;}
.ui-jqgrid-btable tr.jqgrow td img {width:auto;}

.ui-jqgrid-btable .btn_update {width:75px; padding:7px 0; text-align:center; border-radius:4px; border:0; background-color:#aaa; color:white; cursor:pointer; transition:background-color 0.3s;}
.ui-jqgrid-btable .btn_update:hover {background-color:#333;}

.grid_check_box_top {width:12px !important; height:12px !important; border:1px solid #999 !important; margin:2px auto 0 auto !important;}

.ui-jqgrid-titlebar .button.grid		{width:auto; height:30px; top:calc(50% - 16px); position:absolute; padding:0 10px 0 8px; overflow:hidden; display:flex; align-items:center; border-top:1px solid #c7c8ca; border-right:1px solid #c6c6c6; border-bottom:1px solid #b1b1b1; border-left:1px solid #c6c6c6; border-radius:3px; background:linear-gradient(180deg, #ffffff, #f0f0f0); cursor:pointer;  transition:all 0.3s;}
.ui-jqgrid-titlebar .button.grid:hover	{background:linear-gradient(180deg, #a0a0a0, #606060);}
.ui-jqgrid-titlebar .button.grid i		{width:16px; height:100%; display:inline-block; float:left; position:relative; overflow:hidden; background-position:center; background-size:contain; background-repeat:no-repeat; background-image:url('../image/button/ico_submit.png');}
.ui-jqgrid-titlebar .button.grid span	{color:#555; font-size:12px; font-weight:bold; margin-left:5px; display:inline-block; float:left; position:relative; overflow:hidden; transition:color 0.3s;}
.ui-jqgrid-titlebar .button.grid:hover span {color:white;}




/***********************************************************************************
* 버튼
***********************************************************************************/

.button.basic		{width:auto; height:32px; line-height:34px; padding:0 20px 0 15px; text-align:center; position:relative; overflow:hidden; display:inline-block; border-top:1px solid #c7c8ca; border-right:1px solid #c6c6c6; border-bottom:1px solid #b1b1b1; border-left:1px solid #c6c6c6; border-radius:3px; background:linear-gradient(180deg, #ffffff, #f0f0f0); cursor:pointer;  transition:all 0.3s;}
.button.basic:hover	{background:linear-gradient(180deg, #e0e0e0, #b0b0b0);}
.button.basic i		{width:20px; height:100%; display:inline-block; position:relative; overflow:hidden; background-position:center; background-size:contain; background-repeat:no-repeat; background-image:url('../image/button/ico_submit.png');}
.button.basic span	{color:#444; font-size:12px; font-weight:bold; margin-left:10px; display:inline-block; position:relative; overflow:hidden; transition:color 0.3s;}




/***********************************************************************************
* 조회관련
***********************************************************************************/

.search_title		{width:calc(100% - 40px); height:40px; padding-top:20px; margin:0px 20px; font-size:18px; font-weight:bold; position:relative; border-bottom:2px solid #000; display:flex; align-items:center;}
.search_title i		{height:16px; width:16px; background-position:center; background-size:contain; background-repeat:no-repeat; background-image:url('../image/button/ico_arrow_1.png'); display:inline-block; float:left;}
.search_title span	{font-size:18px; color:#333; margin-left:8px; display:inline-block; float:left;}

.search_param				{width:calc(100% - 40px); margin:20px 20px 0 20px;}
.search_param table			{width:100%; border-top:1px solid #dcdcdc;}
.search_param table th		{font-size:12px; font-weight:bold; background:#efefef; border-bottom:1px solid #dcdcdc; padding:5px 0; text-align:center;}
.search_param table td		{font-size:12px; font-weight:normal; border-bottom:1px solid #dcdcdc; padding:5px 0 5px 20px; text-align:left;}
.search_param input			{width:230px; height:28px; padding:0 5px; border:1px solid #aaa; border-radius:3px; color:#333; transition:border-color 0.3s;}
.search_param input:hover	{border-color:#333;}
.search_param input.error	{border-color:red;}
.search_param select		{width:242px;}

.search_button		{width:100%; margin-top:15px; position:relative; overflow:hidden; text-align:center;}
.search_button .button i	{width:16px; background-image:url('../image/button/ico_search.png');}

.search_list		{width:calc(100% - 40px); margin:0px 20px; margin-top:20px; position:relative; text-align:center;}




/***********************************************************************************
* 팝업창
***********************************************************************************/

.popup_title {font-size:16px; font-weight:bold; color:#333; width:calc(100% - 40px); height:40px; line-height:40px; padding-top:20px; margin:0px 20px; position:relative; border-bottom:2px solid #000;}

.popup_content {width:calc(100% - 40px); margin:20px 20px 0 20px;}
.popup_content input {width:188px; height:28px; padding:0 5px; border:1px solid #aaa; border-radius:3px; color:#333; transition:border-color 0.3s;}
.popup_content input:hover {border-color:#333;}
.popup_content input.error {border-color:red;}
.popup_content textarea {width:188px; height:45px; padding:5px; border:1px solid #aaa; border-radius:3px; color:#333; resize:none; transition:border-color 0.3s;}
.popup_content textarea:hover {border-color:#333;}

.popup_content table {width:100%; border-top:1px solid #dcdcdc;}
.popup_content table th {font-size:12px; font-weight:bold; background:#efefef; border-bottom:1px solid #dcdcdc; text-align:center;}
.popup_content table td {font-size:14px; font-weight:normal; border-bottom:1px solid #dcdcdc; padding:9px 0 9px 20px; text-align:left;}

.popup_button {width:100%; margin-top:30px; position:relative; overflow:hidden; text-align:center;}




/***********************************************************************************
* 이미지 업로드
***********************************************************************************/

.upload_image					{width:calc(200px - 10px); border:1px solid #aaa; padding:4px; overflow:hidden; position:relative; float:left;}
.upload_image.dragover			{border:5px dotted #61442b; padding:0;}
.upload_image.loading			{background:url(../image/common/loading.gif) center center no-repeat;}
.upload_image.upload			{background:url();}
.upload_image .delete			{width:17px; height:17px; right:5px; top:5px; position:absolute; z-index:1; cursor:pointer; background:url(../image/common/btn_close_17x17.png) no-repeat; background-color:#999; display:inline-block; transition:background-color 0.3s;}
.upload_image .delete:hover	{background-color:#00c2c7;}
.upload_image .upload			{width:90px; height:32px; left:calc(50% - 45px); bottom:10px; position:absolute; z-index:1; cursor:pointer; background:url(../image/common/btn_img_upload.png) 0 -32px no-repeat; display:inline-block; transition:background-color 0.3s;}
.upload_image .upload:hover	{background:url(../image/common/btn_img_upload.png) 0 0 no-repeat;}
.upload_image img				{width:100%; background-size:contain; background-position:center; background-repeat:no-repeat; transition:all 0.5s;}
.upload_image input[type='file']	{display:none;}




/***********************************************************************************
* page_header
***********************************************************************************/

.page_header {min-width:1000px; background:url(../image/topmenu/top_bg.gif) 0 0 repeat-x; clear:both;}
.page_header .logo {display:inline-block; text-align:center; float:left; height:65px; padding-left:40px; color:white; font-weight:bold; font-size:35px; line-height:65px;}
.page_header .login_info {display:inline-block; text-align:right; float:right; margin-top:7px; font-size:11px;}
.page_header .login_info .intro, .page_header .spot_menu a {display:inline-block; height:25px; line-height:25px;}
.page_header .login_info .intro {background:url(../image/topmenu/ico_user.png) 0 4px no-repeat; color:#fffdc8; padding-left:16px; margin-right:20px;}
.page_header .login_info a {color:#fff; background:url(../image/topmenu/bull_dot1.png) 0 center no-repeat; padding-left:10px; margin-right:18px; cursor:pointer;}
.page_header .topmenu {clear:both; background:#2a407c; border-top:1px solid #4a4e81; border-bottom:1px solid #1e1e9a; box-shadow:0 0 8px black; width:95%; padding-left:5%;}
.page_header .topmenu li {float:left; display:inline-block;}
.page_header .topmenu li a {color:#fff; display:inline-block; padding:0 10px; height:35px; line-height:35px; letter-spacing:-1px;}
.page_header .topmenu li.choice a {font-weight:bold; background:#626e93;}
.page_header .topmenu:after {content:""; display:block; clear:both; font-size:0; width:0; height:0; line-height:0; overflow:hidden; visibility:hidden;}




/***********************************************************************************
* page_left
***********************************************************************************/

.page_left {width:190px; left:0; top:105px; color:#505050; background-color:#eee; position:absolute;}

.page_left .leftmenu {overflow:hidden; border-bottom:1px solid #ccc;}
.page_left .leftmenu .level2 {border-top:1px solid #ccc; width:100%; overflow:hidden;}
.page_left .leftmenu .level2 a {font-weight:bold; background:url(../image/leftmenu/left_menu_arr2.gif) right 18px no-repeat; display:block; height:40px; line-height:40px; padding-left:13px;}
.page_left .leftmenu .level2 a:hover {font-weight:bold; background:url(../image/leftmenu/left_menu_arr2.gif) right -17px no-repeat; color:red;}
.page_left .leftmenu .level2.choice a {background:url(../image/leftmenu/left_menu_arr2.gif) right 18px no-repeat #2a407c; color:#fff;}
.page_left .leftmenu .level2.fold a {background:url(../image/leftmenu/left_menu_arr1.gif) right 18px no-repeat; }
.page_left .leftmenu .level2.fold a:hover {background:url(../image/leftmenu/left_menu_arr1.gif) right -17px no-repeat; }
.page_left .leftmenu .level2.choice.fold a {background:url(../image/leftmenu/left_menu_arr2.gif) right -48px no-repeat #2a407c; color:#fff;}

.page_left .leftmenu .level3 {width:175px; margin-left:15px; overflow:hidden;}
.page_left .leftmenu .level3 a {background:url(../image/leftmenu/left_menu_arr2.gif) right 18px no-repeat; display:block; height:40px; line-height:40px; padding-left:13px;}
.page_left .leftmenu .level3 a:hover,
.page_left .leftmenu .level3 a:active,
.page_left .leftmenu .level3 a:focus {font-weight:bold; background:url(../image/leftmenu/left_menu_arr2.gif) right -17px no-repeat; color:#cc2928;}
.page_left .leftmenu .level3.choice a {font-weight:bold; color:#cc2928; font-weight:bold; background:url(../image/leftmenu/left_menu_arr2.gif) right -17px no-repeat;}




/***********************************************************************************
* page_content
***********************************************************************************/

.page_content {width:calc(100% - 190px); min-height:600px; min-width:1000px; margin-left:190px;}




/***********************************************************************************
* page_footer
***********************************************************************************/

.page_footer		{min-width:1000px; margin:20px auto; text-align:center; color:#999; letter-spacing:0.5px;}
.page_footer a		{color:#999; letter-spacing:0.5px; font-weight:bold; letter-spacing:0.2px;}
.page_footer span		{display:block; margin-top:5px; line-height:20px; color:#999; letter-spacing:0.7px;}










/***********************************************************************************
* 예전코드 - 팝업 페이지 등에서 쓰이고 있음
***********************************************************************************/

#SubContentWrap {width:100%; float:left; background:#fff; padding-bottom:20px; }
#SubContentWrap div {width:auto;}

/* contents */
#conWrap {clear:both; /*margin:20px;*/ padding:20px 20px 0px 20px; overflow:hidden;}
#conWrap h1 {border-bottom:2px solid #000; font-size:18px; color:#000; height:34px; line-height:34px; padding-left:5px; margin:20px 0; position:relative;}
#conWrap h1 .gnb {position:absolute; bottom:0; right:0; font-size:11px; font-weight:normal; color:#666;}
#conWrap h2 {font-size:12px; color:#000; height:30px; line-height:30px; background:url(../image/common/bull_arrow2.png) 5px center no-repeat; padding-left:25px; display:inline;}
#conWrap h3 {font-size:18px; color:white; background:url(../image/common/bull_arrow2.png) 5px 2px no-repeat; padding-left:25px; margin-top:3px;}

/* contents */
#botWrap {clear:both; padding:20px;}
#botWrap h1 {border-bottom:2px solid #000; font-size:18px; color:#000; height:34px; line-height:34px; padding-left:5px; margin:20px 0; position:relative;}
#botWrap h1 .gnb {position:absolute; bottom:0; right:0; font-size:11px; font-weight:normal; color:#666;}
#botWrap h2 {font-size:12px; color:#000; height:30px; line-height:30px; background:url(../image/common/bull_arrow2.png) 5px center no-repeat; padding-left:25px; display:inline;}


/* table3 */
.tb3 {border-top:1px solid #979797; border-bottom:1px solid #dcdcdc; width:100%;}
.tb3 th, .tb3 td {border-bottom:1px solid #dcdcdc; padding:6px 0; text-align:left;}
.tb3 th {background:#efefef; padding-left:20px;}
.tb3 td {padding-left:15px;}
.tb3 td.check * {vertical-align:middle;}
.tb3 td.check input {margin:-3px 3px 0 30px;}
.tb3 td.check input.first {margin:-3px 3px 0 0;}
.tb3 td.view {padding:25px 25px 50px 25px;}

/* table5 */
.tb5 {border-top:1px solid #979797; border-bottom:1px solid #dcdcdc; width:100%;}
.tb5 th, .tb5 td {border-bottom:1px solid #dcdcdc; padding:6px 0; text-align:left;}
.tb5 th {background:#efefef; padding-left:20px;}
.tb5 th.ct {text-align:center;}
.tb5 td.check * {vertical-align:middle;}
.tb5 td.check input.first {margin:-3px 3px 0 0;}
.tb5 td.view1 {padding-left:10px;}
.tb5 td.ct {text-align:center;}
.tb5 td.rt {text-align:right;}
.tb5 td.lt {text-align:left;}
.tb5 input.txt {border:1px solid #ddd; border-radius:2px; padding:2px 5px; background:#f5f5f5; box-shadow:inset 1px 1px 1px 0px rgba(0,0,0,0.35); height:18px; vertical-align:middle;}
.tb5 select {font-size:13px; height:22px; vertical-align:middle;}

/* table6 */
.tb6 {border:1px solid #979797; width:100%;}
.tb6 th, .tb6 td {border:1px solid #dcdcdc; padding:6px 0; text-align:center;}
.tb6 th {background:#efefef;}
.tb6 th.ct {text-align:center;}
.tb6 td.check * {vertical-align:middle;}
.tb6 td.check input.first {margin:-3px 3px 0 0;}
.tb6 td.view1 {padding-left:10px;}
.tb6 td.ct {text-align:center;}
.tb6 td.rt {text-align:right;}
.tb6 td.lt {text-align:left;}
.tb6 input.txt {border:1px solid #ddd; border-radius:2px; padding:2px 5px; background:#f5f5f5; box-shadow:inset 1px 1px 1px 0px rgba(0,0,0,0.35); height:18px; vertical-align:middle;}
.tb6 select {font-size:13px; height:22px; vertical-align:middle;}

.btn_gray2, .btn_gray2 span {display:inline-block; font-weight:bold; height:32px; line-height:34px; padding:0 0 0 30px; background:url(../image/board/btn_gray2.gif) 0 0 no-repeat; cursor:pointer;}
.btn_gray2 span {padding:0 30px 0 0; background-position:right 0;}
.btn_gray2:hover, .btn_gray2:active, .btn_gray2:focus, 
.btn_gray2:hover span, .btn_gray2:active span, .btn_gray2:focus span {background-image:url(../image/board/btn_gray2_over.gif); color:#fff;}