@charset "utf-8"; 

.btnGroup, .btnArea {display: flex; flex-wrap: wrap; justify-content: center; text-align: center; margin-top:40px;}
.btnGroup + .tblWrap {margin-top: 40px;}
.btnWrap {padding:30px 0 0 0;}

.btn {position: relative; display: inline-flex; align-items: center; justify-content: center; height: 60px; min-width:150px; padding: 0 20px; line-height: 1.1; color: #fff; text-align: center; box-sizing: border-box; background-color: #444; border: 2px solid #444; border-radius: 2px; font-weight:500;}

.btnGroup .btn + .btn, .btnArea .btn + .btn {margin-left: 10px;}

/* button type - size */
.btn.large {height: 56px; padding: 0 20px; font-size: 1.059em;}
.btn.small {height: 36px; padding: 0 10px; font-size: 0.882em; font-weight: normal !important; border-width: 1px;}
.btn.mini {height: 28px; padding: 0 6px; font-size: 0.882em; font-weight: normal !important; border-width: 1px;}
.btn.wide {min-width: 190px;}
.btn.free {min-width: auto;}
.btn.full {display: flex;}
.btn.input {min-width: 70px;}
.btn.short {width:120px; min-width:120px; height:60px; font-weight:normal;}
.btn.apply {width:100px; min-width:100px; height:40px; font-weight:normal;}

/* button type - color */
.btn.theme {color: #1d5493 !important; background-color: #fff !important; border-color: #1d5493 !important;}
.btn.theme:hover {color: #fff !important; background-color: #1d5493 !important;}
.btn.white {color: #222 !important; background-color: #fff !important; border-color: #444 !important;}
.btn.white:hover {color: #fff !important; background-color: #444 !important;}
.btn.cncl, .btn.list {color: #222 !important; background-color: #fff !important; border-color: #ccc !important;}
.btn.del, .btn.print, .btn.reset {color: #222 !important; background-color: #f4f4f4 !important; border-color: #ccc !important;}

/* button type - icon */
.btn.viewT, .btn.viewB {justify-content: flex-start; padding-right: 45px;}
.btn.viewT::after, .btn.viewB::after {content: ""; position: absolute; right: 15px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: url("/oasis/include/image/button/ico_viewTheme.png") 0 0 no-repeat;}
.btn.viewB::after {background-image: url("/oasis/include/image/button/ico_viewBlack.png");}
.btn.viewB:hover::after, .btn.viewT:hover::after {background-image: url("/oasis/include/image/button/ico_viewWhite.png");}

.btn.popup {background-color: #6b6b6b !important; border-color: #6b6b6b !important;}
.btn.popup::after {content: ""; padding: 0 26px 20px 0; background: url("/oasis/include/image/button/ico_popupView.png") 100% 2px no-repeat;}

.btn.search::before {content: ""; padding: 0 0 19px 25px; background: url("/oasis/include/image/button/ico_search.png") 0 2px no-repeat;}
.btn.searchB::before {content: ""; display: inline; padding: 1px 0 2px 25px; background: url("/oasis/include/image/button/ico_searchB.png") 0 2px no-repeat;}

.btn.arrow::before {content: ""; padding: 0 0 0 20px; background: url("/oasis/include/image/button/ico_arrow.png") 0 50% no-repeat;}

.btn.basket::before {content: ""; display: inline; padding: 0 0 0 26px; background: url("/oasis/include/image/button/ico_basket.png") 0 50% no-repeat;}
.btn.basketB::before {content: ""; display: inline; padding: 0 0 0 26px; background: url("/oasis/include/image/button/ico_basketB.png") 0 50% no-repeat;}
.btn.down::before, .tblBtn.down::before {content: ""; display: inline; padding: 0 0 0 23px; background: url("/oasis/include/image/button/ico_down.png") 0 50% no-repeat;}
.btn.downB::before {content: ""; display: inline; padding: 0 0 0 23px; background: url("/oasis/include/image/button/ico_downB.png") 0 50% no-repeat;}
.btn.write::before {content: ""; display: inline; padding: 2px 0 3px 27px; background: url("/oasis/include/image/button/ico_write.png") 0 50% no-repeat;}
.btn.commit::before {content: ""; display: inline; padding-left: 30px; background: url("/oasis/include/image/button/ico_commit.png") 0 50% no-repeat;}
.btn.back::after {content: ""; display: inline; padding-left: 30px; background: url("/oasis/include/image/button/ico_back.png") 100% 50% no-repeat;}
.btn.new::after {content: ""; display: inline; padding-left: 20px; background: url("/oasis/include/image/button/ico_blank.png") 100% 50% no-repeat;}
.btn.xlsx::before {content: ""; display: inline; padding-left: 18px; background: url("/oasis/include/image/button/ico_xls.png") 0 50% no-repeat;}
.btn.text::before {content: ""; display: inline; padding-left: 18px; background: url("/oasis/include/image/button/ico_txt.png") 0 50% no-repeat;}

.btn.link::before {content: ""; display: inline; padding-left: 30px; background: url("/oasis/include/image/button/ico_link.png") 0 50% no-repeat;}
.btn.linkB::after {content: ""; display: inline; padding-right: 30px; background: url("/oasis/include/image/button/ico_linkB.png") 100% 50% no-repeat;}
.btn.read1::before {content: ""; display: inline; padding-left: 26px; background: url("/oasis/include/image/button/ico_read_1.png") 0 50% no-repeat;}
.btn.read2::before {content: ""; display: inline; padding-left: 26px; background: url("/oasis/include/image/button/ico_read_2.png") 0 50% no-repeat;}
.btn.agree::before {content: ""; display: inline; padding: 0 0 1px 28px; background: url("/oasis/include/image/button/ico_agree.png") 0 50% no-repeat;}

.btn.arrowB::after {content: ""; display: inline; padding: 0 0 1px 20px; background: url("/oasis/include/image/button/ico_arrowB.png") 100% 50% no-repeat;}
/* .attach a::before {content: ""; display: inline; padding-left: 26px; background: url("/oasis/include/image/board/ico_attach.png") 0 50% no-repeat;} */

/* table text Button or status buttton. use a or span*/
.tblBtn {display: inline-block; width: 80px; line-height: 28px; color: #fff; text-align: center; vertical-align: 0px; box-sizing: border-box; background-color: #666; border: 1px solid #666; font-style: normal;}
.tblBtn + .tblBtn {margin-top: 3px;}
.goBtn {color: #646464 !important; background-color: #e8e8e8 !important; border-color: #e8e8e8 !important; border-radius: 0;}
.resultView .tblBtn {font-size: 0.941em;}

/* 상태값 */
.sIng, .sOk {color: #fff !important; background-color: #1459b6 !important; border-color: #1459b6 !important;}
.sReady, .sNo {color: #fff !important; background-color: #a9a9a9 !important; border-color: #a9a9a9 !important;}
.sWait {color: #fff !important; background-color: #388ce1 !important; border-color: #388ce1 !important;}
.sFinish {color: #fff !important; background-color: #777 !important; border-color: #777 !important;}
.sEnd {color: #646464 !important; background-color: #fff !important; border-color: #c8c8c8 !important;}

.sCncl {color: #646464 !important; background-color: #fff !important; border-color: #c8c8c8 !important;}
.sOver {color: #e12323 !important; background-color: #fff !important; border-color: #c8c8c8 !important;}

/* input 첨부파일 디자인변경 */
.attachBox {position: relative;}
.filebox {position: relative; display:inline-flex; padding-right: 120px; box-sizing: border-box;}
.filebox + .filebox {margin-top: 5px;}
.filebox + .ref {margin-left: 0 !important; margin-top: 5px;}
.filebox input[type="file"] {width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.filebox label {display: inline-block; position: absolute; right: 0; top: 0; padding: 0 20px; width: 70px; text-align: center; color: #222; line-height: 40px; background-color: #fff; border: 1px solid #d8d8d8; cursor: pointer; border-radius: 2px;}
.filebox input[disabled] + label {cursor: default;}
.filebox label:focus {border: 1px dotted #000;}
/* named upload */
.filebox .upload-name { display: inline-block; height: 42px; padding: 0 20px; /* label의 패딩값과 일치 */ font-size: inherit; font-family: inherit; line-height: normal; vertical-align: middle; background-color: #fff; border: 1px solid #a3a3a3; -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; }
.filetxt {width: 100%; font-size: 0.947em; margin-bottom: 5px;}
.filetxt a {display: inline-block; width: 23px; height: 23px; margin-left: 6px; border: 1px solid #d6d6d6; background: url("/oasis/include/image/board/file_close.png") no-repeat 50% 50%; border-radius: 3px; vertical-align: middle; margin-top: -1px;}
.filetxt a:hover, .filetxt a:focus {text-decoration: underline;}
.filetxt a + a {margin-left: 5px; vertical-align: 1px;}

/* custom */
a.submit {display:flex; justify-content:center; align-items:center; background-color:#444; color:#fff; width:60px; height:40px;}

.magnifierBtn {position: relative; padding: 0 0 0 15px; background: url("/oasis/include/image/button/magnifier.png") 100% 45% no-repeat; background-size: 38px; justify-content:initial;  }

@media screen and (max-width: 768px){
	.btnGroup, .btnArea {margin: 30px auto 0;}
	.btnGroup + .tblWrap {margin-top: 30px;}

	.btn {min-width: 160px; height: 40px; padding: 0 10px;}
	.btn.short {height:40px;}
	a.submit {display:inline-flex; height:36px;}
	
	.magnifierBtn {padding: 0 0 0 15px; min-width: 140px;}

	/* button type - size */
	.btn.large {height: 50px; padding: 0 15px;}
	.btn.small {height: 30px; padding: 0 5px; line-height: 32px;}
	.btn.wide {min-width: 160px;}
	.btn.input {min-width: 50px;}
	.btn.apply {height:36px;}

	.filebox {padding-right: 75px;}
	.filebox label {width: 68px; line-height: 34px; padding:0;}
	.filebox .upload-name {height: 36px; padding: 0 10px; width:100%;}
}
@media screen and (max-width: 640px){
	.btn {min-width: 120px; padding: 0 10px;}

	/* button type - size */
	.btn.large {height: 46px; padding: 0 10px;}
	.btn.small {padding: 0 5px;}
	.btn.wide {min-width: 130px;}
	.magnifierBtn {padding: 0 0 0 15px; min-width: 135px;}

	/* button type - icon */
	.btn.viewT, .btn.viewB {padding-right: 32px;}
	.btn.viewT::after, .btn.viewB::after  {right: 10px;}

	.btn.popup::after {padding: 0; background: none}

	/* 버튼 개수에 따른 가로값 */
	.btnGroup.num2, .btnGroup.num3, .btnGroup.num4, .btnArea.num2, .btnArea.num3, .btnArea.num4 {justify-content: space-between;}
	.btnGroup.num2 .btn, .btnGroup.num4 .btn, .btnArea.num2 .btn, .btnArea.num4 .btn {width:calc(50% - 5.5px);}
	.btnGroup.num3 .btn, .btnArea.num3 .btn {min-width: auto; width: calc(33.33% - 7.5px);}
}
@media screen and (max-width: 480px){
	.btnGroup, .btnArea {margin: 25px auto 0;}
	.btnGroup + .tblWrap {margin-top: 25px;}
	
}
@media screen and (max-width: 375px){
	.btn.wide {min-width: inherit;}
}