@charset "utf-8";
/* CSS Document */

/*

작성자 : 황진규
작성일 : 2017-02-14
버전 : 0.1v

1. 버튼 기본 스타일
 - btn_guide : 일반버튼
 - btn_small : panel이나 view/list 등의 영역 안에 들어있는 버튼

2. 기능에 따른 색상 부여
 - add/update :        pink
 - get/select/search :  blue
 - delete :               black
 - cancel :               gray
 - option1 :             lime
 - option2 :             navy

3. 기능에 따른 아이콘 부여
 - icon_search
 - icon_write
 - icon_edit
 - icon_view
 - icon_delete
 - icon_confirm
 - icon_close
 - icon_attach
 - icon_download

4. 적용 형태
 - <div class="btn_guide pink icon_write">추가/등록</div>
 - <div class="btn_guide blue icon_search">검색</div>
 - <div class="btn_guide black icon_delete">삭제</div>
 - <div class="btn_guide lime icon_view">미리보기</div>

*/



/* DEFAULT */
.btn_guide {
    display: inline-block; min-width: 110px; height:39px; padding: 9px 20px; margin:0px 3px;
    text-align: center; font-size: 13px; font-size:1.3rem; line-height: 19px; line-height:1.9rem; font-weight: bold; color: #000;
    border:2px solid #000; border-radius: 4px; box-sizing: border-box;
    transition: all 0.3s; cursor: pointer;
}
.btn_small {
    display: inline-block; height: 38px; padding: 9px 20px; margin:0px 3px;
    text-align: center; font-size: 13px; font-size:1.3rem; line-height: 19px; line-height:1.9rem; font-weight: bold; color: #000;
    border:1px solid #e6ecee; border-radius: 4px; box-sizing: border-box;
    cursor: pointer;
}


/* ICON */
.btn_guide[class*="icon_"] {padding-left: 40px; background-repeat: no-repeat; background-position: 20px center;}
.btn_small[class*="icon_"] {padding-left: 40px; background-repeat: no-repeat; background-position: 20px center;}
.icon_search {background-image: url("../img/icon_search.png");}
.icon_write {background-image: url("../img/icon_write.png");}
.icon_edit {background-image: url("../img/icon_edit.png");}
.icon_view {background-image: url("../img/icon_view.png");}
.icon_delete {background-image: url("../img/icon_delete.png");}
.icon_confirm {background-image: url("../img/icon_check.png");}
.icon_close {background-image: url("../img/icon_close.png");}
.icon_attach {background-image: url("../img/icon_attach.png");}
.icon_download {background-image: url("../img/icon_download.png");}


/* BACKGROUND-COLOR, COLOR */
.btn_guide.pink  {background-color: #000; color: #fff;}
.btn_guide.blue  {background-color: transparent;}
.btn_guide.black {background-color: #000; color: #fff;}
.btn_guide.gray  {background-color: transparent;}
.btn_guide.lime  {background-color: #666; color: #fff; border-color: #666;}
.btn_guide.navy  {background-color: #aaa; color: #fff; border-color: #aaa;}

.btn_small.pink  {background-color: transparent;}
.btn_small.blue  {background-color: transparent;}
.btn_small.black {background-color: transparent;}
.btn_small.gray  {background-color: transparent;}
.btn_small.lime  {background-color: #666; color: #fff; border-color: #666;}
.btn_small.navy  {background-color: #aaa; color: #fff; border-color: #aaa;}


/* CUSTOMIZING */
.btn_guide.blue.icon_search {background-image: url("../img/icon_search_black.png");}
.btn_guide.gray.icon_close {background-image: url("../img/icon_close_black.png");}

.btn_small.pink.icon_edit {background-image: url("../img/icon_edit_black.png");}
.btn_small.black.icon_delete {background-image: url("../img/icon_delete_black.png");}


/* HOVER - COLOR, ICON */
.btn_guide:hover {background-color: #01a9db; border-color: #01a9db; color: #fff;}
.btn_guide.icon_search:hover {background-image: url("../img/icon_search.png");}
.btn_guide.icon_write:hover  {background-image: url("../img/icon_write.png");}
.btn_guide.icon_edit:hover   {background-image: url("../img/icon_edit.png");}
.btn_guide.icon_view:hover   {background-image: url("../img/icon_view.png");}
.btn_guide.icon_delete:hover   {background-image: url("../img/icon_delete.png");}
.btn_guide.icon_confirm:hover   {background-image: url("../img/icon_confirm.png");}
.btn_guide.icon_close:hover  {background-image: url("../img/icon_close.png");}
.btn_guide.icon_attach:hover  {background-image: url("../img/icon_attach.png");}
.btn_guide.icon_download:hover  {background-image: url("../img/icon_download.png");}