@charset "utf-8";

/**
 *	섹션 & 그리드
 */
hr{margin:60px 0;border-top:1px dashed #ccc;}
.section + .section{margin-top:60px;}
.section .section + .section{margin-top:30px;}

.row{margin-right:-25px;margin-left:-25px;}
.row + .row{margin-top:30px;}
.row::after{content:"";display:block;clear:both;}
.row-no-gutters{margin-right:0;margin-left:0;}
.row-no-gutters [class*=col-]{padding-right:0;padding-left:0;}
.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{float:left;padding:0 25px;}
.col-12{width:100%;}
.col-11{width:91.66666667%;}
.col-10{width:83.33333333%;}
.col-9{width:75%;}
.col-8{width:66.66666667%;}
.col-7{width:58.33333333%;}
.col-6{width:50%;}
.col-5{width:41.66666667%;}
.col-4{width:33.33333333%;}
.col-3{width:25%;}
.col-2{width:16.66666667%;}
.col-1{width:8.33333333%;}
.col-offset-12{margin-left:100%;}
.col-offset-11{margin-left:91.66666667%;}
.col-offset-10{margin-left:83.33333333%;}
.col-offset-9{margin-left:75%;}
.col-offset-8{margin-left:66.66666667%;}
.col-offset-7{margin-left:58.33333333%;}
.col-offset-6{margin-left:50%;}
.col-offset-5{margin-left:41.66666667%;}
.col-offset-4{margin-left:33.33333333%;}
.col-offset-3{margin-left:25%;}
.col-offset-2{margin-left:16.66666667%;}
.col-offset-1{margin-left:8.33333333%;}
.col-offset-0{margin-left:0;}

/**
 *	타이틀 & 텍스트 
 */
/* 타이틀 */
h2.contents-title{margin-bottom:20px;color:#232323;font-size:20px;font-weight:700;}
h3.contents-title{margin-bottom:18px;color:#154b9c;font-size:18px;font-weight:600;position:relative;padding-left:25px;}
h3.contents-title::before{content:"\f152";position:absolute;top:1px;left:0;font-family:"Font Awesome 5 Pro";font-size:17px;font-weight:bold;}
h3.contents-title span{font-weight:400;}
h4.contents-title{margin-bottom:12px;color:#152f6c;font-size:16px;font-weight:600;position:relative;padding-left:24px;}
h4.contents-title::before{content:"\f0c8";position:absolute;top:4px;left:5px;font-family:"Font Awesome 5 Pro";color:#495e8c;font-size:10px;font-weight:bold;}
h5.contents-title{margin-bottom:12px;color:#232323;font-size:14px;font-weight:500;position:relative;padding-left:24px;}
h5.contents-title::before{content:"";position:absolute;top:8px;left:9px;width:5px;height:5px;background:#8d8d8d;border-radius:50%;}

.title-wrap{position:relative;margin-bottom:30px;border-bottom:1px solid #b0b0b0;padding-bottom:15px;}
.title-wrap .page-option{position:absolute;top:0;right:0;}
.title-wrap .contents-title{margin-bottom:0;}

/* 기본 텍스트(검정색) */
.desc-text,
.text-desc{color:#515151;word-break:keep-all;}
div.desc-text,
div.text-desc,
p.desc-text,
p.text-desc{margin-bottom:.8em;}

/* 정보성 텍스트(파란색) */
.info-text,
.text-info{color:#3889dd;word-break:keep-all;}
div.info-text,
div.text-info,
p.info-text,
p.text-info{margin-bottom:.8em;}

/* 정보성/경고성 텍스트(빨간색) */
.warning-text,
.text-control,
.text-warning,
.control-info{color:#ee5e57;word-break:keep-all;}
div.warning-text,
div.text-warning,
div.text-control,
div.control-info,
p.warning-text,
p.text-warning,
p.text-control,
p.control-info{margin-bottom:.8em;}
/* .control-info .star,
.text-control .star{position:relative;top:3px;margin-right:2px;} */

/* 상태 텍스트 */
.status-text-1{color:#1b98f0;}
.status-text-2{color:#004f98;}
.status-text-3{color:#0f16ab;}
.status-text-4{color:#df1f7e;}
.status-text-5{color:#f32c56;}
.status-text-6{color:#3375fd;}
.status-text-7{color:#4249da;}
.status-text-8{color:#0ba6e0;}
.status-text-9{color:#05c5ac;}
.status-text-10{color:#01b768;}
[class*=status-text]{font-weight:500;font-size:110%;}
a[class*=status-text],
button[class*=status-text]{text-decoration:underline;}

/* 링크 */
.text-link{color:#006edf;font-size:inherit;text-decoration:underline;}
a.text-link:hover,
button.text-link:hover{color:#f66017;text-decoration:underline;}

/* 필수항목 표시 */
.required,
.text-required{position:relative;word-break:keep-all;}
.required::before,
.text-required:before{content:'\f069';position:absolute;left:-12px;top: 0;color:#ee5e57;font-size:10px;font-family:"Font Awesome 5 Pro";font-weight:bold;transform: scale(0.7);}

/* 텍스트 여백 */
* + div.desc-text,
* + p.desc-text,
* + div.control-info,
* + p.control-info{margin-top:5px;}
* + span.desc-text,
* + span.control-info{display:inline-block;margin-left:6px;vertical-align:middle;}
/* .contents-title + .text-info{position:absolute;top:36px;right:40px;} */
table + .text-info{margin-top:8px;}

/**
 *	목록 
 */
.number-list{counter-reset:number-counter;}
.dotted-list > li,
.dashed-list > li,
.number-list>li {
	position: relative;
	padding-left: 14px;
	color: #555;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -.025em;
	word-break: keep-all;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.number-list > li{padding-left:24px;}
.dotted-list > li + li,
.dashed-list > li + li,
.number-list > li + li{margin-top:2px;}
.dotted-list > li:before{content:'';position:absolute;top:8px;left:0;width:5px;height:5px;background:#676666;border-radius:50%;}
.number-list > li:before,
.dashed-list > li:before{content:'-';position:absolute;top:0;left:0;}
.number-list > li:before{content:counter(number-counter,decimal)'.';counter-increment:number-counter;width:20px;text-align:center;}
.dotted-list strong,
.dashed-list strong,
.number-list strong{font-weight:500;}
.dotted-list ul,
.dotted-list ol,
.dashed-list ul,
.dashed-list ol,
.number-list ul,
.number-list ol{margin-top:3px;}

/*=========================================================================================================================================*/
/**
 *	탭 
 */
/* 1depth 탭 */
.page-tab{margin-bottom:30px;}
.page-tab .tab-list{border-bottom:2px solid #213f85;}
.page-tab .tab-list li{display:inline-block;vertical-align:bottom;margin-right:6px;}
.page-tab .tab-list li a {
	position: relative;
	display: inline-block;
	min-width: 170px;
	padding: 0 20px;
	height: 38px;
	line-height: 41px;
	border-radius: 10px 10px 0 0;
	background: linear-gradient(to bottom, #828a9b 0%, #8d96a9 50%, #919aad 100%);
	text-align: center;
	color: #fff;
	font-size: 15px;
	vertical-align: bottom;
	box-shadow: 2px -1px 6px rgba(64,71,81,.36);
}
.page-tab .tab-list li.on a{height:45px;line-height:45px;font-size:17px;font-weight:600;background:linear-gradient(to bottom, #3358aa 0%, #284b9a 50%, #224490 100%);}

/* 2depth 탭 (상위에 1depth 탭이 있을 경우) */
.contents-tab{margin-bottom:30px;}
.contents-tab .tab-list::after{content:"";display:block;clear:both;}
.contents-tab .tab-list li{float:left;}
.contents-tab .tab-list li a {
	position: relative;
	display: block;
	min-width: 176px;
	padding: 0 20px;
	height: 42px;
	line-height: 38px;
	border: 2px solid #e1e1e1;
	text-align: center;
	color: rgba(81,81,81,.6);
	font-size: 14px;
	margin-left: -2px;
	background: #f5f5f5;
}
.contents-tab .tab-list li.on a{color:#515151;font-weight:600;}
.contents-tab .tab-list li.on a::after{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;z-index:1;border:2px solid #969595;}

/*=========================================================================================================================================*/
/** 
 *  버튼
 *	.btn: 버튼 기본 클래스
 */
.btn {
	display: inline-block;
	min-width: 90px;
	height: 38px;
	padding: 0 20px;
	border: none;
	background: #666;
	color: #fff !important;
	font-size: 14px;
	line-height: 38px;
	text-align: center;
	cursor: pointer;
	vertical-align: middle;
	box-shadow: none !important;
	border-radius: 5px !important;
	background: linear-gradient(to bottom, #046dce 0%, #035bad 98%);
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .29) !important;
	overflow: hidden;
}
.btn:hover{text-decoration:none !important;}
.btn.no-radius{border-radius:0 !important;}
.btn[disabled]{opacity:.6;cursor:default;}
.btn i{float:left;font-size:16px;line-height:38px;/* margin-top:1px; */margin-right:12px;}
/* 크기*/
.btn.btn-small{min-width:48px;padding:0 12px;height:28px;font-size:12px;line-height:28px;font-weight:normal;}
.btn.btn-small i{float:left;font-size:13px;line-height:28px;margin-top:1px;margin-right:9px;}
/* 색상 */
.btn.complete,/* 완료 */
.btn.regist,/* 등록 */
.btn.save,/* 저장 */
.btn.confirm{background:linear-gradient(to bottom, #0084ea 0%, #006ec3 100%);} /* 적용, 확인 */
.btn.list{background:linear-gradient(to bottom, #029ee7 0%, #0285c3 100%);} /* 목록 */
.btn.close, /* 닫기 */
.btn.delete, /* 삭제 */
.btn.cancel{background:linear-gradient(to bottom, #7b828b 0%, #676d75 100%);} /* 취소 */
.btn.update, /* 수정 */
.btn.modify{background:linear-gradient(to bottom, #3b75ed 0%, #3263c8 100%);} /* 변경 */
.btn.create,/* 생성 */
.btn.add{background:linear-gradient(to bottom, #13b884 0%, #109b6f 100%);} /* 추가 */
.btn.search{background:linear-gradient(to bottom, #2967ad 0%, #235793 100%);} /* 조회, 찾기 */
.btn.excel{background:linear-gradient(to bottom, #008f4a 0%, #00793e 100%);} /* 엑셀 다운로드 */
.btn.excel-upload{background:linear-gradient(to bottom, #06aab4 0%, #059199 100%);} /* 엑셀 업로드 */
.btn.print, /* 출력 */
.btn.view{background:linear-gradient(to bottom, #2f54bd 0%, #28469e 100%);} /* 전체보기 */
.btn.kakao{background:#ffe20a;color:#353535 !important;font-weight:500;} /* 카카오톡 */
.btn.facebook{background:#4160b4;} /* 페이스북 */
.btn.twitter{background:#0ba6e0;} /* 트위터 */
.btn.naver{background:#30ba2c;} /* 네이버 */
.btn.kakao::before,
.btn.facebook::before,
.btn.twitter::before,
.btn.naver::before {
	content: "";
	margin-right: 12px;
	float: left;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: auto 100%;
}
.btn.kakao::before{width:21px;background-image:url("../../../images/onioncms/cmm/icon_kakao.png");}
.btn.facebook::before{width:10px;background-image:url("../../../images/onioncms/cmm/icon_facebook.png");}
.btn.twitter::before{width:21px;background-image:url("../../../images/onioncms/cmm/icon_twitter.png");}
.btn.naver::before{width:14px;background-image:url("../../../images/onioncms/cmm/icon_naver.png");}
.btn.kakao.btn-small::before,
.btn.facebook.btn-small::before,
.btn.twitter.btn-small::before,
.btn.naver.btn-small::before{margin-right:7px;}
.btn.etc{background:linear-gradient(to bottom, #7871f5 0%, #6660d0 100%);} /* 기타1 */
.btn.etc2{background:linear-gradient(to bottom, #b072ea 0%, #9460c5 100%);} /* 기타2 */
.btn.etc3{background:linear-gradient(to bottom, #e673b9 0%, #c1619b 100%);} /* 기타3 */
.btn.etc4{background:linear-gradient(to bottom, #1ec3c1 0%, #19a4a2 100%);} /* 기타4 */
.btn.etc5{background:linear-gradient(to bottom, #9dc424 0%, #84a51f 100%);} /* 기타5 */
.btn.etc6{background:#777;} /* 기타6 */
.btn.etc7{background:#444;} /* 기타7 */
.btn.etc8{background:linear-gradient(to bottom, #e48a32 0%, #e49532 100%);} /* 기타8 */
.btn.etc9{background:linear-gradient(to bottom, #3b75ed 0%, #3263c8 100%);} /* 기타9 */
.btn.etc10{background:linear-gradient(to bottom, #13b884 0%, #109b6f 100%)} /* 기타10 */

/* 테이블 행 추가/삭제 */
.btn-util{font-size:28px;color:#5f5f5f;line-height:1;vertical-align:middle;}
.btn-util i{vertical-align:top;}

/* 파일 다운로드 */
.btn-download{width:25px;height:25px;border:1px solid #ccc;font-size:14px;background:#fff;line-height:23px;color:#888;border-radius:3px;text-align:center;}
a.btn-download{display:inline-block;}

/*=========================================================================================================================================*/
/** 
 *  버튼 그룹
 *	.btn-group: 버튼 그룹 기본 클래스
 *	.btn-group .left-group: 왼쪽 정렬 버튼 그룹
 *	.btn-group .right-group: 오른쪽 정렬 버튼 그룹
 *	.btn-group .center-group: 중앙 정렬 버튼 그룹
 */
.btn-group{display:table;width:100%;/* table-layout:fixed; */margin-top:20px;}
.btn-group.top{margin-top:0;margin-bottom:10px;}
.btn-group + .btn-group{margin-top:24px;padding-top:24px;border-top:1px solid #a8a8a8;}

.btn-group [class$="group"]{display:table-cell;vertical-align:middle;}
.btn-group .left-group{text-align:left;}
.btn-group .right-group{text-align:right;}
.btn-group .center-group{text-align:center;}
.btn-group .left-group a,
.btn-group .left-group .btn{margin-right:6px;}
.btn-group .right-group a,
.btn-group .right-group .btn{margin-left:6px;}
.btn-group .center-group a,
.btn-group .center-group .btn{margin:0 3px;}

/* .board-list + .btn-group{margin-bottom:-62px;} */
.pagination + .btn-group,
.dataTables_wrapper + .btn-group{margin-top:-34px;}
.dataTables_wrapper + .btn-group .btn,
.dataTables_wrapper + .btn-group button,
.dataTables_wrapper + .btn-group a{position:relative;}

/*=========================================================================================================================================*/
/** 
 *	폼요소
 */ 
div.form-control{width: 100%; max-width: 100%;}
div.form-control:not(.horizonal)+div.form-control:not(.horizonal){margin-top: 5px;}
div.form-control input.inp-text,
div.form-control input.inp-file,
div.form-control select.sel{width:100%;}

span.form-control{display: inline-block; max-width: 100%; margin:2px 15px 2px 0; vertical-align: middle;}
span.form-control:last-child{margin-right:0;}
.lbl + span.form-control{margin-left:5px;}
span.form-control .text + input.inp-text,
span.form-control .text + select.sel,
span.form-control .lbl + input.inp-text,
span.form-control .lbl + select.sel{margin-left:4px;}
span.form-control input.inp-text + .text,
span.form-control select.sel + .text{margin-left:3px;}
span.form-control .bul{margin:0 5px;}
span.form-control .btn + .btn{margin-left:3px;}
/* span.form-control .inp-text + .btn{margin-left:6px;} */
span.form-control .text{vertical-align:middle;line-height:28px;font-weight:500;}
span.form-control .text + .text{margin-left:20px;}
span.form-control .text strong{/* font-size:14px; */font-weight:500;margin-right:3px;}
.bul{font-size:14px;font-weight:500;margin:0 2px;vertical-align:middle;}

.form-control.horizonal{display: inline-block; width: auto; margin:2px 5px 2px 0; vertical-align: middle;}
.form-control.no-radius *{border-radius: 0 !important;}
.form-control.control-center{margin-left:auto;margin-right:auto;}

/* 버튼이 있는 폼요소 */
div.form-control.with-btn{position: relative; padding-right: 94px;}
div.form-control.with-btn .btn{position: absolute; top: 0; right: 0; width: 90px; padding-left: 0; padding-right: 0; margin-right:0;}
div.form-control.with-btn-search{position: relative; padding-right: 115px;}
div.form-control.with-btn-search .btn{position: absolute; top: 0; right: 0; width: 110px; padding-left: 0; padding-right: 0;}
div.form-control .btn{margin-right: 3px;}

/* 아이콘과 함께 있는 폼요소 */
div.form-control.with-icon{display:flex;align-items:center;}
div.form-control.with-icon i{flex:0 0 auto;color:#4570b0;font-size:22px;}
div.form-control.with-icon i.fa-level-up-alt{flex-basis:40px;}
div.form-control.with-icon input.inp-text{flex:1 1 auto;min-width:0;}


/* 날짜 아이콘이 있는 폼요소 */
.form-control.date{position: relative; width:147px; padding-right: 27px}
/* .form-control.date .inp-text{text-align:center;} */
.form-control.date img{position: absolute; top: 50%; right: 0; margin-top: -12px; cursor: pointer;}

/* 이메일 */
div.form-control.email{*zoom: 1;}
div.form-control.email::after{content: ''; display: block; clear: both;}
div.form-control.email .inp-text{float: left; width: 32%;}
div.form-control.email .email-at{float: left; width: 5%; height: 100%; margin-top: 7px; text-align: center;}
div.form-control.email select{float: left; width: 30%; margin-left: 1%;}
div.form-control.email.no-select .inp-text{width: 47%;}
div.form-control.email.no-select .email-at{width: 6%;}

/* 전화번호 */
div.form-control.phone{*zoom: 1;}
div.form-control.phone::after{content: ''; display: block; clear: both;}
div.form-control.phone select{float: left; width: 30%;}
div.form-control.phone .phone-bar{float: left; width: 5%; height: 100%; margin-top: 6px; font-size: 20px; text-align: center;line-height:1;}
div.form-control.phone .inp-text{float: left; width: 30%;}

/** form-control 크기 **/
.form-control.number{width: 75px;}
.form-control.xsmall{width: 120px;}
.form-control.small{width: 240px;}
.form-control.medium{width: 360px;}
.form-control.large{width: 480px;}
.form-control.xlarge{width: 600px;}

/* 라벨이 있는 폼요소 */
.form-control.with-label{position:relative;padding-left:60px;}
.form-control.with-label .lbl{position:absolute;left:0;top:50%;width:60px;color:#3f3f3f;font-size:14px;font-weight:500;transform:translateY(-50%);}
.form-control.with-label .rdo + .lbl,
.form-control.with-label .chk + .lbl{position:static;width:auto;font-weight:400;}
/* 라벨이 길 경우 */
.form-group.label .form-control{position:relative;padding-left:100px;}
.form-group.label .form-control .lbl{position:absolute;left:0;top:50%;width:100px;color:#3f3f3f;font-size:14px;font-weight:500;transform:translateY(-50%);}

/* placeholder */
::-webkit-input-placeholder{color:#a7a7a7;}
:-moz-placeholder{color:#a7a7a7;}
::-moz-placeholder{color:#a7a7a7;}
:-ms-input-placeholder{color:#a7a7a7;}

/* form 여백 */
* + .form-row{margin-top:5px;}

/* form 공통 */
input.inp-text,
input.inp-file,
select.sel,
textarea.txtarea{font-size:12px;max-width:100%;background-color:#fff;color:#515151;border:1px solid #ccc;border-radius:3px;vertical-align:middle;}
input.inp-text,
input.inp-file,
select.sel{width:240px;height:28px;}
input.inp-text.num,
input.inp-file.num,
select.sel.num{width:100px;text-align:right;}
input.inp-text.xxsmall,
input.inp-file.xxsmall,
select.sel.xxsmall{width:60px;text-align:center;}
input.inp-text.xsmall,
input.inp-file.xsmall,
select.sel.xsmall{width:100px;}
input.inp-text.small,
input.inp-file.small,
select.sel.small{width:150px;}
input.inp-text.medium,
input.inp-file.medium,
select.sel.medium{width:200px;}
input.inp-text.large,
input.inp-file.large,
select.sel.large{width:480px;}
input.inp-text.xlarge,
input.inp-file.xlarge,
select.sel.xlarge{width:600px;}
input.inp-text.full,
input.inp-file.full,
select.sel.full{width:100%;}

/* input[type=text, password] */
input.inp-text{padding:0 10px;}
input.inp-text[readonly]{color:#bababa;cursor:default;}
input.inp-text[numberOnly]{text-align:right;}
input.inp-text.datepicker{cursor:pointer;color:#515151;background:#fff url("../../../images/onioncms/cmm/icon_calendar.gif") no-repeat right 10px top 50%;}

/* input[type=file] */
input.file,
input.inp-file{padding:2px 10px;}

/* input[type=checkbox,radio] */
input.chk,
input.rdo{vertical-align:middle;}
label.lbl + input.rdo,
label.lbl + input.chk{margin-left:4px;}

/* label */
label.lbl,
label.rdo-lbl,
label.chk-lbl{vertical-align:middle;}
input.rdo + label.lbl,
input.chk + label.lbl{margin-left:4px;}

/* textarea */
textarea.txtarea{resize:vertical;width:100%;padding:6px 10px;}

/* select box */
select.sel{padding:0 6px;}

/* disabled/readonly color */
input.inp-text[disabled],
select.sel[disabled],
textarea.txtarea[disabled]{background:#efefef !important;}

/* focus color */
input.inp-text:focus,
input.inp-file:focus,
textarea.txtarea:focus,
select.sel:focus{border-color:#438de2;outline:none;box-shadow:0 0 2px rgba(0,0,0,.1);}
input.inp-text[readonly]:focus,
input.inp-text[disabled]:focus,
select.sel[readonly]:focus,
select.sel[disabled]:focus{border-color:#ccc;outline:none;}

/*=========================================================================================================================================*/
/** 
 *  게시판
 *
 * 	1. 공통
 *	.search-area : 공통 검색영역
 *	.pagination : 공통 페이징
 *	.file-upload : 첨부파일 목록
 *
 *	2. 테이블형
 *	.board-list : 게시판 목록
 *	.board-write : 게시판 상세보기, 쓰기
 */

/* 검색영역 */
.search-area{position: relative; margin-bottom: 10px;min-height:28px;}
.search-area .area-left{float:left;}
.search-area .area-left .txt{margin-right:10px;font-size:14px;font-weight:500;letter-spacing:-.05em;vertical-align:middle;}
.search-area .area-left .btn{margin-right:5px;vertical-align:middle;}
.search-area .total{float:left; margin-top: 8px; color: #666; font-size: 13px; font-weight: 500}
.search-area .total strong{color: #f34b4b;}
.search-area .total .bar{font-size: 11px; font-weight: normal}
.search-area .total .number{font-size: 12px; font-weight: normal}
.search-area .search-wrap{float: right; position: relative;}
.search-area .search-wrap select.sel{width:130px;margin-right:1px;}
.search-area .search-wrap input.inp-text{width:200px;}
.search-area .search-wrap .btn + select.sel,
.search-area .search-wrap .btn.search + .btn.view{margin-left:4px;}

/* search box */
.search-box{position:relative;margin-bottom:30px;border:1px solid #438de2;background:#eef5fd;padding:6px 20px;font-size:13px;}
.search-box span.lbl,
.search-box label.lbl {
	display: inline-block;
	/* min-width: 100px; */
	height: 28px;
	margin-right: 10px;
	border-radius: 3px;
	color: #4774c2;
	vertical-align: middle;
	/* text-align: center; */
	font-size: 14px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: -.035em;
}
.search-box span.lbl:before,
.search-box label.lbl:before{content:"";display:inline-block;width:5px;height:5px;background:#5478b7;margin-right:8px;margin-top:-3px;border-radius:50%;vertical-align:middle;}
/* .search-box span.form-control{margin-right:30px;} */
.search-box .text.text-strong{text-align:center;font-size:18px;font-weight:bold;padding:10px 0;}
.search-box .form-control.control-filter label.lbl{color:#209ad8;}
.search-box .form-control.control-filter label.lbl::before{background:#209ad8;}
.search-box .box-button{position:absolute;top:8px;right:20px;}

/* table option */
.table-option{margin-bottom:10px;min-height:28px;}
.table-option::after{content:"";display:block;clear:both;}
.table-option .option-left{float:left;}
.table-option .option-left .text-info{margin-top:6px;margin-bottom:0;}
.table-option .option-right{float:right;}

/* pagination */
.pagination{margin-top: 30px; text-align: center}
.pagination .pagination-wrap{display: inline-block; vertical-align: top;}
.pagination .pagination-wrap:after{content: ''; display: block; clear: both;}
.pagination a,
.pagination img{vertical-align: top;}
.pagination a{float:left;display: inline-block; width:29px; height:29px; margin-right: 4px;}
.pagination a:last-child{margin-right: 0}
.pagination a.num{width: auto; min-width: 29px; padding: 0 5px; border: 1px solid #d4d4d4; color: #666; font-size: 14px; line-height: 27px;}
.pagination a.num.on{background-color: #f2576a; color: #fff;}
.pagination .pg-btn{display:block;width:29px;height:29px;border:1px solid #d4d4d4;background:#efefef;}
/* .pagination .pg-btn.pg-prev{margin-right:10px;} */
/* .pagination .pg-btn.pg-next{margin-left:10px;} */
.pagination .pg-btn::before{font-family:"Font Awesome 5 Pro";font-weight:bold;line-height:28px;font-size:11px;color: #888;}
.pagination .pg-btn.pg-first::before{content:"\f053\f053";letter-spacing:-.15em;}
.pagination .pg-btn.pg-prev::before{content:"\f053";}
.pagination .pg-btn.pg-next::before{content:"\f054";}
.pagination .pg-btn.pg-last::before{content:"\f054\f054";letter-spacing:-.15em;}
/* 크기가 작은 pagination */
.pagination.small{margin-top: 20px;}
.pagination.small a{float:left; width: 24px; height: 24px; margin-right:3px;}
.pagination.small a.num{width: auto; min-width: 24px; padding: 0 5px;border: 1px solid #d4d4d4; font-size: 13px; line-height: 24px;}
.pagination.small a.num.on{background: #353535; color: #fff}
/* datatables */
.dataTables_wrapper .pagination > div{display: inline-block;vertical-align:top;}
.dataTables_wrapper .pagination span{float:left;display:inline-block;margin-right:4px;}
.dataTables_wrapper .pagination span::after{content:"";display:block;clear:both;}
.dataTables_wrapper .pagination span a{width: auto; min-width: 29px; padding: 0 8px; border: 1px solid #d4d4d4; color: #666; font-size: 14px; line-height: 27px;}
.dataTables_wrapper .pagination span a.current{background-color: #f2576a; color: #fff;}
.dataTables_wrapper .pagination a.previous,
.dataTables_wrapper .pagination a.next{text-indent:-999em;background-repeat:no-repeat;}
.dataTables_wrapper .pagination a.previous{background-image:url("../../../images/onioncms/cmm/btn_prev.gif");}
.dataTables_wrapper .pagination a.next{background-image:url("../../../images/onioncms/cmm/btn_next.gif");}

/** 
 *  테이블
 */
table{width:100%;/* table-layout:fixed; */}
table.text-left th,
table.text-left td{text-align:left;}
table.text-left th{padding-left:30px;}
table.text-center th,
table.text-center td{text-align:center;}
table th.text-center,
table td.text-center{text-align:center !important;}
table th.text-left,
table td.text-left{text-align:left !important;}
table th.text-right,
table td.text-right{text-align:right !important;}
table td.text-left,
table td.text-right{padding-left:15px;padding-right:15px;}
.board-option{margin-bottom:10px;text-align:right;}
/* 등록된 게시물이 없을 경우 */
table .nodata{padding:80px 0;text-align:center;}
table .nodata p{font-weight:bold;}
/* 데이터 정렬 */
table .sort{position:relative;display:block;padding-right:10px;cursor:pointer;min-height:37px;margin:-9px 0;line-height:37px;}
table [rowspan="2"] .sort{min-height:75px;line-height:75px;}
table .sort:after {
	content: '\f0dc';
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -11px;
	font-family: "Font Awesome 5 Pro";
	font-size: 16px;
	text-align: center;
	line-height: 22px;
	font-weight: bold;
}
table .sort.asc:after{content:'\f0de';}
table .sort.desc:after{content:'\f0dd';}

/***** 기본 테이블1 *****/
.table-basic th,
.table-basic td{height:38px;padding:5px 10px;border:1px solid rgba(117,117,117,.5);text-align:center;}
.table-basic th{background:#6085bf;font-size:13px;color:#fff;font-weight:500;}
.table-basic td{background:#fff;font-size:12px;color:#616161;}

/***** 기본 테이블2 *****/
.table-basic2{border-top: 2px solid #141414;}
.table-basic2 th,
.table-basic2 td{height:40px;padding:6px 10px;font-size:13px;border:1px solid #d1d1d1;text-align:center;}
.table-basic2 th.text-left,
.table-basic2.text-left th{text-align: left;padding-left:20px;}
.table-basic2 th{color: #333;}
.table-basic2 thead th{border-bottom: 1px solid #b9bcc3;}
.table-basic2 td{color: #555;}

/***** 기본 테이블3 *****/
.table-basic3 th,
.table-basic3 td{height:40px;padding:6px 10px;font-size:13px;border:1px solid #d1d1d1;color: #555;text-align: center}
.table-basic3 th.text-left,
.table-basic3.text-left th{text-align: left;padding-left:20px;}
.table-basic3 th{background-color: #ebebeb;/* word-break: keep-all;*/}

/* 게시판 목록 */
.board-list{border-top:2px solid #616161;}
.dataTables_wrapper .board-list{border-top:0;}
.board-list + .board-list{margin-top:20px;}
.text-info + .board-list{margin-top:8px;}
.board-list th,
.board-list td{height:40px;padding:6px 10px;border:1px solid #e4e4e4;font-size:12px;text-align:center;}
.board-list th{background:#f3f6f9;color:#515151;font-weight:600;}
.board-list td{/* background:#fff; */color:#616161;}
.board-list tr.strong td{color:#006edf;}
.board-list tr:hover td{background:rgba(85, 129, 208, .08);}
.board-list tr.notice td{background:#f2f2f2;font-weight:600;}
.board-list tr.on td{background:#5581d0;color:#fff;}
.board-list .fa-caret-up,
.board-list .fa-caret-down{font-size:180%;margin-right:3px;vertical-align:-9%;}
.board-list .fa-caret-up{color:#006edf;}
.board-list .fa-caret-down{color:#f2576a;}
.board-list .fa-download{font-size:120%;margin-left:6px;color:inherit;}
.board-list .nodata{padding:20px 0;font-size:13px;}
.board-list .fa-star{color:#c1c8cf;}
.board-list .checkbox{margin-top:4px;}

/* 게시판  상세보기, 등록, 수정 */
.board-write{border-top:2px solid #616161;table-layout:fixed;}
.board-write + .board-write{margin-top:20px;}
.text-info + .board-write{margin-top:8px;}
.board-write > thead > tr > th,
.board-write > tbody > tr > th,
.board-write > tbody > tr > td{height:40px;padding-top:6px;padding-bottom:6px;border:1px solid #e4e4e4;font-size:12px;text-align:center;}
.board-write > thead > tr > th,
.board-write > tbody > tr > th{background:#f3f6f9;color:#515151;font-weight:600;}
.board-write > tbody > tr > td{background:#fff;color:#616161;text-align:left;padding-left:15px;padding-right:15px;}
.board-write > tbody > tr > td img{margin-top:1em;display:block;}
.board-write > tbody > tr > th.strong{background:#ffc000;}
.board-write .text-link + .text-link{margin-left:10px;}

/* 이전글, 다음글 */
/* table.view-option{position: relative; margin-top: -1px; border-top: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1}
.board-answer + table.view-option{margin-top:0;}
table.view-option a.text-link{display:block; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; color: inherit;}
table.view-option a.text-link:hover,
table.view-option a.text-link:focus{text-decoration:underline;}
table.view-option .btn-view{position:relative;display:inline-block;padding-left:20%;}
table.view-option .btn-view:before{content:'';position:absolute;top:50%;left:0;display:inline-block;width:11px;height:8px;margin-top:-4px;background-repeat:no-repeat;}
table.view-option .btn-view.next:before{background-image:url(../../../images/onioncms/cmm/ico_move_next.gif);}
table.view-option .btn-view.prev:before{background-image:url(../../../images/onioncms/cmm/ico_move_prev.gif);} */

/* 썸네일형 목록 */
.thumb-list{display:flex;flex-wrap:wrap;align-items:stretch;margin-bottom:-36px;}
.thumb-list > li{flex:0 1 calc((100% - 144px) / 5);width:calc((100% - 144px) / 5);margin-right:36px;margin-bottom:36px;}
.thumb-list > li:nth-child(5n){margin-right:0;}
.thumb-list .list-item{display:flex;flex-direction:column;border:1px solid #e0e0e0;height:100%;border-radius:3px;box-shadow:4px 4px 0 rgba(115,115,115,.07);}
.thumb-list .item-top{padding:10px 20px;text-align:center;color:#676666;font-size:14px;letter-spacing:-.05em;}
.thumb-list .item-top i{margin-right:6px;}
.thumb-list .item-thumb{padding:0 20px;}
.thumb-list .item-thumb:first-child{padding-top:20px;}
.thumb-list .item-thumb .thumb-wrap{position:relative;}
.thumb-list .item-thumb .chk{position:absolute;top:10px;left:10px;width:20px;height:20px;z-index:1;}
.thumb-list .item-thumb .thumb {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid #dfe5ea;
	border-radius: 3px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}
.thumb-list .item-section{padding:12px 20px;}
.thumb-list .item-section + .item-section{border-top:1px solid #c5c5c5;}
.thumb-list .item-button{padding:0 20px 15px;display:flex;margin-top:auto;}
.thumb-list .item-button .btn{flex:1 1 100%;}
.thumb-list .item-button .btn + .btn{margin-left:10px;}
.thumb-list .item-title {
	max-height: 2.8em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: bold;
	word-break: keep-all;
	overflow-wrap: break-word;
	word-wrap: break-word;
	line-height: 1.4;
}

/* 리스트 아이템이 없을 경우 */
.no-item{text-align:center;padding:50px 0;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;}
.no-item p{font-size:13px;}
.no-item p + i{margin-top:20px;}

/* 파일 첨부 */
.file-upload .upload-wrap label + input[type="file"]{display:none;}
.file-upload .file-list{position:relative;}
.file-upload .file-list .text-link{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-upload .file-list .file-wrap{color:#333;font-weight:500}
.file-upload .upload-wrap ~ .file-list .file-wrap:first-of-type{margin-top:12px;/* padding-top: 10px; border-top: 1px solid #e1e1e1; */}
/* .file-upload .file-wrap a{color:inherit;font-size:inherit;font-weight:inherit;} */
.file-upload .file-wrap + .file-wrap{margin-top:7px}
.file-upload .file-wrap .file-up,
.file-upload .file-wrap .file-down,
.file-upload .file-wrap .file-del {
	margin-left: 5px;
	margin-top: -2px;
	border: none;
	font-size: 0;
	vertical-align: middle;
	line-height: 1;
}
.file-upload .file-wrap .file-down{margin-left:0;}
.file-upload .file-wrap .file-up::after,
.file-upload .file-wrap .file-down::after,
.file-upload .file-wrap .file-del::after {
	font-family: "Font Awesome 5 Pro";
	color: #14b885;
	font-size: 24px;
	vertical-align: top;
}
.file-upload .file-wrap .file-up::after{content:"\f151";}
.file-upload .file-wrap .file-down::after{content:"\f150";}
.file-upload .file-wrap .file-del::after{content:"\f410";font-weight:bold;}
.file-upload .file-wrap .file-up[disabled]::after,
.file-upload .file-wrap .file-down[disabled]::after{color:#999;opacity:1;}

.file-upload .image-wrap{display:inline-block;width:200px;margin-top:15px;margin-bottom:5px;margin-right:10px;text-align:center;vertical-align:top;}
.file-upload .image-wrap .item-wrap{display:inline-block;position:relative;max-width:100%;}
.file-upload .image-wrap .rdo{display:none;}
.file-upload .image-wrap .lbl{margin:0;max-width:100%;display:block;}
.file-upload .image-wrap .lbl span {
	display: block;
	width: 200px;
	height: 160px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	background-color: #f0f7fe;
	box-shadow: inset 0 0 0 1px #ccc;
}
.file-upload .image-wrap .lbl span.cover{background-size:cover;}
.file-upload .image-wrap .lbl img{margin:0;display:inline-block;}
.file-upload .image-wrap .file-del{display:none;position:absolute;top:0;right:0;background:#13b884;height:30px;width:30px;font-size:0;border-bottom-left-radius:5px;}
.file-upload .image-wrap .file-del::after {
	content: "\f00d";
	font-family: "Font Awesome 5 Pro";
	color: #fff;
	font-size: 19px;
	font-weight: bold;
	vertical-align: top;
}
.file-upload .image-wrap .button-wrap{text-align:center;margin-top:2px;line-height:32px;}
.file-upload .image-wrap .file-left,
.file-upload .image-wrap .file-right{font-size:0;vertical-align:top;line-height:1;margin:0 1px;}
.file-upload .image-wrap .file-left::after,
.file-upload .image-wrap .file-right::after {
	font-family: "Font Awesome 5 Pro";
	color: #14b885;
	font-size: 32px;
	vertical-align: top;
}
.file-upload .image-wrap .file-left::after{content:"\f191";}
.file-upload .image-wrap .file-right::after{content:"\f152";}
.file-upload .image-wrap .file-left[disabled]::after,
.file-upload .image-wrap .file-right[disabled]::after{color:#999;opacity:1;}
.file-upload .image-wrap .item-wrap:hover .file-del{display:block;}
.file-upload .image-wrap .rdo:checked ~ .lbl:before,
.file-upload .image-wrap .item-wrap:hover .lbl:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:4px solid #13b884;}
.file-upload .image-wrap .rdo:checked ~ .lbl:after {
	content: "대표";
	position: absolute;
	top: 0;
	left: 0;
	height: 30px;
	line-height: 30px;
	padding: 0 12px;
	border-bottom-right-radius: 5px;
	background: #13b884;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
}
.file-upload .image-wrap .text-link{display:block;margin-bottom:6px;}
/* .file-upload .rdo-main-img{display:none;}
.file-upload .lbl-main-img{width: 77px; height: 20px; border-radius: 3px; background: url(../../../images/onioncms/cmm/icon_main_off.gif) no-repeat; text-indent: -999em}
.file-upload .rdo-main-img:checked + .lbl-main-img{background-image: url(../../../images/onioncms/cmm/icon_main_on.gif)} */

/*=========================================================================================================================================*/
/**
 *	캘린더
 */
.calendar-box{}
.calendar-box.fc .fc-toolbar>*>*{margin-left:0}
.calendar-box.fc .fc-toolbar h2{display:inline-block;margin:0 40px;color:#333;font-size:22px;font-weight:bold;}
.calendar-box.fc .fc-toolbar .fc-center > *{vertical-align:middle;float:none;}

/*.calendar-box .fc-day-header{background-color:#e9e9e9;height:34px;vertical-align:middle;}*/
.calendar-box .fc-day-header{background-color:#e9e9e9;/* border-color:#fff; color:#fff;*/height:34px;vertical-align:middle;}
.calendar-box .fc-day-header:not(:first-child){border-left-color:#cacaca;}
/*.calendar-box .fc-day-header.fc-sat{color:#2479c1;}
.calendar-box .fc-day-header.fc-sun{color:#dc4441;}*/
.calendar-box .fc-day-header.fc-sat{color:#2479c1;}
.calendar-box .fc-day-header.fc-sun{color:#dc4441;}
.calendar-box .fc-basic-view .fc-day-top{padding:6px;}
.calendar-box .fc-basic-view .fc-day-top .fc-day-number{float:none !important;}
.calendar-box .fc-bg td.fc-today{opacity:1;background-color:#c9e0f4 !important;font-weight:bold;border-color:#ddd;}
.calendar-box td.fc-day.fc-disabled-day{background:none;}
.calendar-box .fc-row .fc-content-skeleton{padding-bottom:8px;}
.calendar-box .fc-row .fc-content-skeleton table tbody td{padding:0 6px;}
.calendar-box .fc-day-grid-event{margin-left:0;margin-right:0;}
.calendar-box .fc-day-grid-event .fc-content{text-overflow:ellipsis;/*color:#fff;*/padding:2px 4px;}
.calendar-box .fc-day-grid-event .fc-time{display:none;}

.calendar-box button.fc-button{text-shadow:none;box-shadow:none;}
.calendar-box button.fc-today-button{border:0;padding:0 16px;height:44px;background:#358bd5;color:#fff;font-size:15px;}
.calendar-box .fc-center button.fc-button{width:44px;height:44px;background-image:url(../../../images/onioncms/cmm/btn_calendar.png);background-repeat:no-repeat;background-color:transparent;border:none;}
.calendar-box .fc-center button.fc-button .fc-icon{display:none;}
.calendar-box .fc-center button.fc-prevYear-button{margin-right:-1px;background-position:0 0;border-top-right-radius:0;border-bottom-right-radius:0;}
.calendar-box .fc-center button.fc-prev-button{background-position:-43px 0;border-top-left-radius:0;border-bottom-left-radius:0;}
.calendar-box .fc-center button.fc-next-button{background-position:0 -44px;border-top-right-radius:0;border-bottom-right-radius:0;}
.calendar-box .fc-center button.fc-nextYear-button{margin-left:-1px;background-position:-43px -44px;border-top-left-radius:0;border-bottom-left-radius:0;}

/**
 *	모달
 */
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;}
.modal.on{display:block;}
.modal .modal-wrap {
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 440px;
	max-width: 90%;
	margin: 0 auto;
	z-index: 1001;
	background: #fff;
	border-radius: 23px;
	transform: translate3d(-50%,-50%,0);
	word-break: keep-all;
	word-wrap: break-word;
	animation:.3s fadeIn;
}
.modal .modal-wrap.wrap-medium{width:640px;}
.modal .modal-wrap.wrap-large{width:970px;}

.modal .modal-head{position:relative;background:#2769d1;text-align:center;height:58px;}
.modal .modal-title{color:#fff;font-size:20px;font-weight:bold;line-height:58px;}
.modal .modal-body{overflow-y:auto;max-height:360px;max-height:calc(100vh - 200px);}
.modal .modal-contents{background:#e8edf3;padding:30px 40px;}
.modal .modal-text{margin-bottom:30px;color:#0f4291;font-size:18px;font-weight:600;text-align:center;}
.modal * + .modal-text{margin-top:30px;margin-bottom:0;}
.modal .cost-box{text-align:center;}
.modal .cost-box span.form-control.check-control{margin-right:50px;}
.modal .cost-box span.form-control.check-control:last-of-type{margin-right:0;}
.modal .cost-box .rdo-lbl{font-size:16px;font-weight:600;}
.modal .table-basic input.inp-text.datepicker{width:120px;}
.modal .btn-wrap{text-align:right;margin-bottom:8px;}
.modal .btn-wrap.center{text-align:center;margin-top:10px;}
.modal .modal-text + .btn-wrap{margin-top:-30px;}
.modal .modal-button{padding:16px 0;text-align:center;}
.modal .modal-button .btn{margin:0 3px;height:34px;line-height:34px;min-width:79px;}
.modal .modal-button .btn.confirm{background:linear-gradient(to bottom, #089ee5 0%, #0386d7 98%);} /* 적용, 등록 */
.modal .modal-bg{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1000;background:rgba(0,0,0,.57);}
.modal .btn-modal-close {
	position: absolute;
	top: 15px;
	right: 20px;
	width: 30px;
	height: 30px;
	color: #fff;
	font-size: 26px;
	line-height: 1;
}
.modal .btn-modal-close i{line-height:1;vertical-align:top;}

/* 로그인 */
.modal .login-form{width:278px;margin:0 auto;max-width:100%;}
.modal .login-form + .login-form{margin-top:10px;}
.modal .login-form .lbl{display:inline-block;min-width:70px;color:#515151;font-size:14px;font-weight:600;vertical-align:middle;}
.modal .login-form .inp-text{width:200px;}
.modal .login-check{padding-left:74px;}
.modal .login-check .lbl{font-weight:normal;}

/* 비밀번호 변경 */
.modal .password-form + .password-form{margin-top:10px;}
.modal .password-form .pw-lbl{display:inline-block;min-width:140px;color:#515151;font-size:14px;font-weight:600;vertical-align:middle;}
.modal .password-form .inp-text{width:200px;}

/* Window popup */
.window .window_layer{background:#fff;/*border:1px solid #ccc;*/padding:2px;}
.window .window_layer .window_header{height:55px;padding:16px 20px;background-color:#3c4652;}
.window .window_layer .window_header .tit{color:#fff;font-size:18px;}
.window .window_layer .window_close{position:absolute;top:24px;right:22px;z-index:10;}
.window .window_layer .window_close a{display:block;width:14px;height:14px;background:url("../../../images/onioncms/cmm/icon_common.png") -31px -33px no-repeat;text-indent:-9999px;}
.window .window_layer .window_body{position:relative;padding:20px 15px;}
.window .window_layer .window_body .body_title{margin-bottom:10px;color:#333;font-size:20px;margin-bottom:10px;}
.window .window_layer .window_body .info{color:#333;font-size:15px;line-height:1.5;}

/* 우편번호찾기 */
.window.window_view_search_addr .search_wrap{padding:12px 20px;margin:20px 0;background-color:#f6f6f6;border:1px solid #dadada;}
.window.window_view_search_addr .info{margin-top:20px;font-weight:bold;}
.window.window_view_search_addr .sub_info{margin-bottom:10px;color:#777;font-size:13px;}
.window.window_view_search_addr .pagination{margin-top:20px;}

/***** 지도표시 *****/
.map-container{position:relative; height:400px; margin-bottom:3px;}
.map-container .base-map{position: absolute; z-index: 1; left:0; top:0; right:0; bottom:0;}
.map-container .openlayers-map{position: absolute; z-index: 2; left:0; top:0; right:0; bottom:0;}
.map-location input{width:50%;}

/* 차트(Chart) */
.chart-wrap{margin-bottom:30px;height:400px;padding:20px 30px 30px;border:1px solid #ccc;}

/* preloader */
.preloader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 70px;
	margin: -35px 0 0 -35px;
	border-radius: 50%;
	border-top: 8px solid #e7edf8;
	border-right: 8px solid #e7edf8;
	border-bottom: 8px solid #e7edf8;
	border-left: 8px solid #5478b7;
	-webkit-animation: rotation 1s infinite linear;
	animation: rotation 1s infinite linear;
}

/* 에러 페이지 */
.error {
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.error .error-cell{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.error .error-title{color:#ccc;font-size:106px;font-weight:600;text-align:center;margin-bottom:.4em;letter-spacing:.04em;line-height:1;}
.error .error-sub-title{color:#231f20;font-size:24px;margin-bottom:.5em;}
.error .error-desc{font-size:16px;color:#3f3c3d;line-height:1.6;/* text-align:left; */word-break:keep-all;font-weight:300;}
.error .btn-group{margin-top:40px;}

/* Animation */
@keyframes animatetop {
    from {top: 46%; opacity: 0}
    to {top: 50%; opacity: 1}
}
@keyframes alertTop {
    from {transform:translateY(-10px); opacity: 0}
    to {transform:translateY(0); opacity: 1}
}
@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}
@keyframes rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}