@charset "utf-8";

/*** 버튼스타일 ***/
a.btnStyle {transition:all 0.2s ease; display:inline-block; font-size:14px; color:#fff; margin:0 1px; position:relative; text-align:center; box-sizing:border-box; background:#000; border:1px solid #000; padding:0 15px; position:relative; min-width:72px; height:34px; line-height:31px; border-radius:3px; font-weight:500; vertical-align:middle;}
a.btnStyle:hover {animation:btnStyleHover 3s infinite; color:#fff;}
a.btnStyle:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
/* 작은 버튼 */
a.btnStyleS {transition:all 0.2s ease; display:inline-block; font-size:11px; color:#fff; margin:0 1px; position:relative; text-align:center; box-sizing:border-box; background:#000; border:1px solid #000; padding:0 7px; position:relative; min-width:40px; height:26px; line-height:23px; border-radius:3px; vertical-align:middle;}
a.btnStyleS:hover {animation:btnStyleHover 3s infinite; color:#fff;}
a.btnStyleS:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
a.btnStyleS.width {width:58px;}
@keyframes btnStyleHover {
	0% {box-shadow:0 0 0 0 rgba(0,0,0,.4), inset 0px 0px 5px rgba(0,0,0,0.7);}
	30% {box-shadow:0 0 0px 5px rgba(0,0,0,0), inset 0px 0px 5px rgba(0,0,0,0.7);}
	100% {box-shadow: 0 0 0 0 rgba(0,0,0,0), inset 0px 0px 5px rgba(0,0,0,0.7);}
}
a.btnStyleBd {background:#fff; color:#000;}
a.btnStyleBd:hover {color:#000;}

a.btnStyleS.wide {
  width: 75px;
}

/* 버튼 강조 색상 */
a.bgActive {background:#29333C !important; border-color:#29333C; color:#fff;}
a.bdActive {background:#fff; border-color:#29333C; color:#29333C !important;}
a.bgActive:hover {animation:btnStyleHoverbgActive 3s infinite; }
a.bdActive:hover {animation:btnStyleHoverbdActive 3s infinite; }
a.bgActive:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
a.bdActive:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
a.disabled {background:#ddd !important; border-color:#ddd !important; color:#999 !important; box-shadow:none !important; cursor:default;}
@keyframes btnStyleHoverbgActive {
	0% {box-shadow:0 0 0 0 rgba(69,71,83,0.7), inset 0px 0px 5px rgba(0,0,0,0.8);}
	30% {box-shadow:0 0 0px 5px rgba(69,71,83,0), inset 0px 0px 5px rgba(0,0,0,0.8);}
	100% {box-shadow: 0 0 0 0 rgba(69,71,83,0), inset 0px 0px 5px rgba(0,0,0,0.8);}
}
@keyframes btnStyleHoverbdActive {
	0% {box-shadow:0 0 0 0 rgba(69,71,83,0.7), inset 0px 0px 5px rgba(69,71,83,0.9);}
	30% {box-shadow:0 0 0px 5px rgba(69,71,83,0), inset 0px 0px 5px rgba(69,71,83,0.9);}
	100% {box-shadow: 0 0 0 0 rgba(69,71,83,0), inset 0px 0px 5px rgba(69,71,83,0.9);}
}

/* 레드색상 */
a.bgRed {background:#b60005; border-color:#b60005; color:#fff !important;}
a.bdRed {background:#fff; border-color:#b60005; color:#b60005 !important;}
a.bgRed:hover {animation:btnStyleHoverbgRed 3s infinite;}
a.bdRed:hover {animation:btnStyleHoverbdRed 3s infinite;}
a.bgRed:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
a.bdRed:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
@keyframes btnStyleHoverbgRed {
	0% {box-shadow:0 0 0 0 rgba(182,0,5,0.6), inset 0px 0px 5px rgba(0,0,0,0.6);}
	30% {box-shadow:0 0 0px 5px rgba(182,0,5,0), inset 0px 0px 5px rgba(0,0,0,0.6);}
	100% {box-shadow: 0 0 0 0 rgba(182,0,5,0), inset 0px 0px 5px rgba(0,0,0,0.6);}
}
@keyframes btnStyleHoverbdRed {
	0% {box-shadow:0 0 0 0 rgba(182,0,5,0.6), inset 0px 0px 5px rgba(182,0,5,1);}
	30% {box-shadow:0 0 0px 5px rgba(182,0,5,0), inset 0px 0px 5px rgba(182,0,5,1);}
	100% {box-shadow: 0 0 0 0 rgba(182,0,5,0), inset 0px 0px 5px rgba(182,0,5,1);}
}

/* 엑셀 색상 */
a.bgEx {background:#1f7244; border-color:#1f7244; color:#fff;}
a.bdEx {background:#fff; border-color:#1f7244; color:#1f7244 !important;}
a.bgEx:hover {animation:btnStyleHoverbgEx 3s infinite;}
a.bdEx:hover {animation:btnStyleHoverbdEx 3s infinite;}
a.bgEx:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
@keyframes btnStyleHoverbgEx {
	0% {box-shadow:0 0 0 0 rgba(31,114,68,0.6), inset 0px 0px 5px rgba(0,0,0,0.6);}
	30% {box-shadow:0 0 0px 5px rgba(31,114,68,0), inset 0px 0px 5px rgba(0,0,0,0.6);}
	100% {box-shadow: 0 0 0 0 rgba(31,114,68,0), inset 0px 0px 5px rgba(0,0,0,0.6);}
}
@keyframes btnStyleHoverbdEx {
	0% {box-shadow:0 0 0 0 rgba(31,114,68,0.6), inset 0px 0px 5px rgba(31,114,68,1);}
	30% {box-shadow:0 0 0px 5px rgba(31,114,68,0), inset 0px 0px 5px rgba(31,114,68,1);}
	100% {box-shadow: 0 0 0 0 rgba(31,114,68,0), inset 0px 0px 5px rgba(31,114,68,1);}
}

/* 그레이색상 */
a.bgGr {background:#999; border-color:#999; color:#fff !important;}
a.bdGr {background:#fff; border-color:#999; color:#999 !important;}
a.bgGr:hover {animation:btnStyleHoverbgGr 3s infinite;}
a.bdGr:hover {animation:btnStyleHoverbdGr 3s infinite;}
a.bgGr:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
a.bdGr:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
@keyframes btnStyleHoverbgGr {
	0% {box-shadow:0 0 0 0 rgba(153,153,153,0.7), inset 0px 0px 5px rgba(0,0,0,0.3);}
	30% {box-shadow:0 0 0px 5px rgba(153,153,153,0), inset 0px 0px 5px rgba(0,0,0,0.3);}
	100% {box-shadow: 0 0 0 0 rgba(153,153,153,0), inset 0px 0px 5px rgba(0,0,0,0.3);}
}
@keyframes btnStyleHoverbdGr {
	0% {box-shadow:0 0 0 0 rgba(153,153,153,0.7), inset 0px 0px 5px rgba(153,153,153,1);}
	30% {box-shadow:0 0 0px 5px rgba(153,153,153,0), inset 0px 0px 5px rgba(153,153,153,1);}
	100% {box-shadow: 0 0 0 0 rgba(153,153,153,0), inset 0px 0px 5px rgba(153,153,153,1);}
}

/* 블루색상 */
a.bgBl {background:#4f557a; border-color:#4f557a; color:#fff;}
a.bdBl {background:#fff; border-color:#4f557a; color:#4f557a !important;}
a.bgBl:hover {animation:btnStyleHoverbgGr 3s infinite;}
a.bdBl:hover {animation:btnStyleHoverbdGr 3s infinite;}
a.bgBl:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
a.bdBl:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
@keyframes btnStyleHoverbgGr {
	0% {box-shadow:0 0 0 0 rgba(84,92,143,0.7), inset 0px 0px 5px rgba(0,0,0,0.4);}
	30% {box-shadow:0 0 0px 5px rgba(84,92,143,0), inset 0px 0px 5px rgba(0,0,0,0.4);}
	100% {box-shadow: 0 0 0 0 rgba(84,92,143,0), inset 0px 0px 5px rgba(0,0,0,0.4);}
}
@keyframes btnStyleHoverbdGr {
	0% {box-shadow:0 0 0 0 rgba(84,92,143,0.7), inset 0px 0px 5px rgba(84,92,143,1);}
	30% {box-shadow:0 0 0px 5px rgba(84,92,143,0), inset 0px 0px 5px rgba(84,92,143,1);}
	100% {box-shadow: 0 0 0 0 rgba(84,92,143,0), inset 0px 0px 5px rgba(84,92,143,1);}
}

/* 블루색상2 */
a.bgBl2 {background:#7892C2; border-color:#7892C2; color:#fff;}
a.bdBl2 {background:#fff; border-color:#7892C2; color:#7892C2 !important;}
a.bgBl2:hover {animation:btnStyleHoverbgGr 3s infinite;}
a.bdBl2:hover {animation:btnStyleHoverbdGr 3s infinite;}
a.bgBl2:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
a.bdBl2:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}

/* window 색상 */
a.bgWindow {background:#2297FF; border-color:#2297FF; color:#fff;}
a.bdWindow {background:#fff; border-color:#2297FF; color:#2297FF !important;}
a.bgWindow:hover {animation:btnStyleHoverbgGr 3s infinite;}
a.bdWindow:hover {animation:btnStyleHoverbdGr 3s infinite;}
a.bgWindow:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
a.bdWindow:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}

/* 오렌지색상 */
a.bgOr {background:#F07100; border-color:#F07100; color:#fff;}
a.bdOr {background:#fff; border-color:#F07100; color:#F07100 !important;}
a.bgOr:hover {animation:btnStyleHoverbgGr 3s infinite;}
a.bdOr:hover {animation:btnStyleHoverbdGr 3s infinite;}
a.bgOr:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
a.bdOr:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}

/* 하늘색상 */
a.bgSky {background:#111be4; border-color:#111be4; color:#fff;}
a.bdSky {background:#fff; border-color:#111be4; color:#111be4 !important;}
a.bgSky:hover {animation:btnStyleHoverbgGr 3s infinite;}
a.bdSky:hover {animation:btnStyleHoverbdGr 3s infinite;}
a.bgSky:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
a.bdSky:active {animation:btnPush 0.3s infinite; animation-iteration-count:1;}
@keyframes btnStyleHoverbgGr {
	0% {box-shadow:0 0 0 0 rgba(17,27,28,0.7), inset 0px 0px 5px rgba(0,0,0,0.4);}
	30% {box-shadow:0 0 0px 5px rgba(17,27,28,0), inset 0px 0px 5px rgba(0,0,0,0.4);}
	100% {box-shadow: 0 0 0 0 rgba(17,27,28,0), inset 0px 0px 5px rgba(0,0,0,0.4);}
}
@keyframes btnStyleHoverbdGr {
	0% {box-shadow:0 0 0 0 rgba(17,27,28,0.7), inset 0px 0px 5px rgba(17,27,28,1);}
	30% {box-shadow:0 0 0px 5px rgba(17,27,28,0), inset 0px 0px 5px rgba(17,27,28,1);}
	100% {box-shadow: 0 0 0 0 rgba(17,27,28,0), inset 0px 0px 5px rgba(17,27,28,1);}
}

/* 누를때 */
@keyframes btnPush {
	0% {transform: scale(1);}
	50% {transform: scale(0.94);}
	100% {transform: scale(1);}
}

/* 버튼 속 이미지 */
a.btnStyle img {vertical-align:middle; padding:0 6px 0 0; position:relative; top:-0px;}
a.btnStyleS img {vertical-align:middle; padding:0 5px 0 0; position:relative; top:-1px;}
a.btnStyleM img {vertical-align:middle; padding:0 6px 0 0; position:relative; top:-0px;}
a.btnStyleB img {vertical-align:middle; padding:0 8px 0 0; position:relative; top:-0px;}
a.btnRight {position:absolute; top:0; right:0; margin-right:0;}
a.btnLeft {position:absolute; top:0; left:0; margin-left:0;}
/* 버튼 첫번째 마지막 */
a.btnStyle:first-child, a.btnStyleS:first-child, a.btnStyleM:first-child, a.btnStyleB:first-child {margin-left:0;}
a.btnStyle:last-child, a.btnStyleS:last-child, a.btnStyleM:last-child, a.btnStyleB:last-child {margin-right:0;}

/* 체크박스, 라디오버튼 */
.checkLabel {display:inline-block; position:relative; cursor:pointer; margin:0px; line-height:1;}
.checkLabel.ml {margin-left:10px;}
.checkLabel.mr {margin-right:10px;}
.checkLabel * {vertical-align:middle;}
.checkLabel input {opacity:0; position:absolute; z-index:3; cursor:pointer;}
.checkLabel .bg {display:inline-block; position:relative; height:14px; width:14px; background:#fff; border:1px solid #d5d5e7; box-sizing:border-box; transition:all 0.2s;}
.checkLabel .bg:after {/* transition:all 0.2s */;}
.checkLabel .txt {padding:0 1px;}
.checkLabel:hover .bg {border-color:#5e6479; box-shadow:inset 0 0 2px rgba(0,0,0,0.5);}
.checkLabel:hover .txt {color:#111; transition:all 0.2s;}
.checkLabel input:checked ~ .bg {border-color:#5e6479;}
.checkLabel input:checked ~ .txt {color:#111;}
.checkLabel.check .bg:after {content:""; position:absolute; border:solid 1px #383d4c; border-width:0px; transform:rotate(-45deg); left:7px; top:7px; width:0px; height:0px; z-index:3;}
.checkLabel.check input:checked ~ .bg:after {width:6px; height:3px; left:3px; top:3px; border-width:0px 0px 2px 2px;}
.checkLabel.radio .bg {border-radius:99px;}
.checkLabel.radio .bg:after {content:""; position:absolute; border:none; width:0%; height:0%; background:none; border-radius:99px; top:50%; left:50%; }
.checkLabel.radio input:checked ~ .bg {border-color:#5e6479;}
.checkLabel.radio input:checked ~ .bg:after {width:6px; height:6px; top:50%; left:50%; margin:-3px 0 0 -3px; background:#383d4c;}
.lowMise8 .checkLabel .bg {display:none;}
.lowMise8 .checkLabel input {opacity:1; position:static;}

.checkLabel input:checked ~ .txt.color {color:#de242a;}
.checkLabel input:checked ~ .bg.bdc {border-color:#de242a;}
/* .checkLabel input:checked ~ .bg.bdc:after {background:#de242a;} */
.checkLabel input[type="checkbox"]:checked ~ .bg.bdc:after {border-color:#de242a;}
.checkLabel input[type="radio"]:checked ~ .bg.bdc:after {background:#de242a;}

.checkLabel.error .bg {background: #b60005; border-color: #b60005 !important;}
.checkLabel.error .bg:after {border-color: #fff;}


/* form Style */
input[type="text"], input[type="password"], input[type="number"], select, textarea {transition:all 0.3s; height:26px; vertical-align:middle; box-sizing:border-box; border:solid 1px #ccc; padding:0px 6px; background:#fff; color:#888;}
input[type="text"]:hover, input[type="password"]:hover, input[type="number"]:hover, input.text:hover, select:hover, textarea:hover {transition:all 0.3s; border-color:#9a9ba0;}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input.text:focus, select:focus, textarea:focus {transition:all 0.3s; border-color:#454649; box-shadow:0px 1px 2px rgba(0,0,0,0.2); color:#454649; outline: none;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {appearance: none;}
select { -moz-appearance:none; -webkit-appearance:none; text-indent:0.01px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;background:#fff url(../images/board/bg_select.png) right center no-repeat; padding-right:22px;}
select::-ms-expand {appearance:none; display: none;}
select:hover {}
select:focus {background:#fff url(../images/board/bg_select_active.png) right center no-repeat;}
.lowMise9 select {padding-right:0px; background-image:none;}
select.bgGray {background-color: #EEEEEE;}
textarea {resize:none; padding:5px 7px; overflow:auto; line-height:1.5;}
textarea.autoSize {transition:none; width:100%; overflow-y:hidden; min-height:66px;max-height:250px;}
textarea.maxHeight {overflow-y:auto;}

/* .boardSearch input, .boardSearch select {border-radius:99px; padding:0px 14px; color:#2b2935;}
.boardSearch input:focus, .boardSearch select:focus {color:#454649;}
.boardSearch input {padding:0 16px;}
.boardSearch select {background:#fff url(../images/board/bg_search_select.png) right center no-repeat; padding-right:42px;}
.boardSearch select:focus {background:#fff url(../images/board/bg_search_select_active.png) right center no-repeat;} */

/* 플레이스 홀더 */
::-webkit-input-placeholder {color:rgba(182,0,5,0.4);}
::-moz-placeholder {color:rgba(182,0,5,0.4);}
:-ms-input-placeholder {opacity:1 !important;  color:rgba(182,0,5,0.4) !important;}