/* - 버튼 css */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* 기본 BTN */
button { border-radius: 0; outline: none; font-size: 1.5rem; color: #676673; min-width: 15rem; height: 4.5rem; padding: 0 2rem;
	cursor: pointer; transition: all 0.3s; vertical-align: middle; border: 2px solid transparent;
}
button span { /*vertical-align: middle;*/ vertical-align: -0.1rem; }

/* BTN selected */
button.selected { background: rgba(80, 99, 247, 0.8); color: #FFF; border-color: #7E8DFF; }

/* thick BTN */
button.thick { font-size: 1.8rem; min-width: 15.0rem; height: 4.6rem; }
button.has_icon.thick::after { width: 2.4rem; height: 2.4rem; }

/* disabled BTN */
button.disabled, button:disabled { background:#E0E0E0; border-color: #B1B0BC; color:#777; cursor: default; }
button.disabled::hover, button:disabled::hover { background:#E0E0E0; border-color: #B1B0BC; color:#777; }
button.has_icon.disabled::after, button.has_icon:disabled::after,
button.has_icon.disabled:hover::after, button.has_icon:disabled:hover::after { background: #777; }

/* Primary BTN */
button.pri { background: #5063F7; color: #fff; border: 2px solid #7E8DFF; }
button.pri:hover { background: #9BA4EE; border-color: #6E7CE7; }

/* line BTN */
button.line_btn { border: 2px solid #6BDB8B; color: #6BDB8B; background: rgba(107, 219, 139, 0.2); }
button.line_btn:hover { border-color: #AED8BA; text-shadow: 0 0 0.1rem #fff; }
button.line_btn.pri { border:2px solid #5063F7; color: #5063F7; background: rgba(80, 99, 247, 0.2); }
button.line_btn.pri:hover { border-color: #9BA4EE; }
button.line_btn.red { border:2px solid #EB7978; color: #EB7978; background: rgba(235, 121, 120, 0.2); }
button.line_btn.red:hover { border-color: #E4ACAB; }

/* 텍스트 btn */
button.text_btn { font-size:1.8rem; color: #D3D3D4; border: none; outline: none; background: none; box-shadow: none; }
button.text_btn:hover { color: #fff; }
button.text_btn:hover span { text-shadow: 0 0 0.1rem #bbb; }
button.text_btn.disable { color:#777; }

/* rounded btn */
button.rounded_btn { position: relative; min-width: 0; width: 4rem; height: 4.2rem; border-radius: 100%; text-align: center; vertical-align: middle; cursor: default; }
button.rounded_btn:after { vertical-align: middle; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	content: ''; mask: url('../1_image/04_icon/ico_search_v1.svg') no-repeat center center; mask-size: contain; width: 1.6rem; height: 1.6rem; display: block;
  -webkit-mask: url('../1_image/04_icon/ico_search_v1.svg') no-repeat center center; -webkit-mask-size: contain; pointer-events: none; background: #D3D3D4; }
button.rounded_btn.d_blue { border:2px solid #6E84FE; background: #3D5BFD; }
button.rounded_btn.d_green { border:2px solid #64DD97; background: #00C853; }
button.rounded_btn.d_purple { border:2px solid #8C57FF; background: #651FFF; }
button.rounded_btn.d_orange { border:2px solid #FFAD40; background: #FF9100; }
button.rounded_btn.d_red { border:2px solid rgba(255, 255, 255, 0.25); background: #F44336; }
button.rounded_btn.blue { border:3px solid #fff; background: #E6E9F9; }
button.rounded_btn.blue:after { background: #3D5BFD; }
button.rounded_btn.green { border:3px solid #fff; background: #C8F0D9; }
button.rounded_btn.green:after { background: #00C853; }
button.rounded_btn.purple { border:3px solid #fff; background: #EAE3FA; }
button.rounded_btn.purple:after { background: #651FFF; }
button.rounded_btn.orange { border:3px solid #fff; background: #FAEFE0; }
button.rounded_btn.orange:after { background: #EF8D47; }

/* nav btn */
button.nav_btn { position: relative; min-width: 3rem; width: 3rem; height: 3rem; text-align: center; vertical-align: middle; border: none; background: none; box-shadow: none; padding: 0; }
button.nav_btn:after { vertical-align: middle; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	content: ''; mask: url('../1_image/04_icon/ico_user_v1.svg') no-repeat center center; mask-size: contain;  width: 2.8rem; height: 2.8rem; display: block;
  -webkit-mask: url('../1_image/04_icon/ico_user_v1.svg') no-repeat center center; -webkit-mask-size: contain; pointer-events: none; background: #909093; }
button.nav_btn:hover::after { background: #7786fd; }
button.nav_btn.active::after { background: #5063F7; border: 1px solid #fff; }
button.nav_btn:disabled { cursor: default; }
button.nav_btn:disabled::after { background: rgba(0, 0, 0, 0.4); }

/* 아이콘 btn */
button.icon_btn { min-width: fit-content; }

/* 아이콘 */
button.has_icon { text-align: left; }
button.has_icon::after {
  content: ''; vertical-align:text-top; float: right; width: 2.4rem; height: 2.4rem; background: #D3D3D4;
  mask: url('../1_image/04_icon/ico_search_v1.svg') no-repeat center center; mask-size: contain;
  -webkit-mask: url('../1_image/04_icon/ico_search_v1.svg') no-repeat center center; -webkit-mask-size: contain; pointer-events: none; }
button.has_icon:hover::after { background: #fff; }

/* 뒤로가기 */
button.back::before {
  content: ''; vertical-align:text-top; float: left; width: 2.4rem; height: 2.4rem; background: #D3D3D4; margin-right: 0.7rem;
  mask: url('../1_image/04_icon/arrow_backward.svg') no-repeat center center; mask-size: contain;
  -webkit-mask: url('../1_image/04_icon/arrow_backward.svg') no-repeat center center; -webkit-mask-size: contain; pointer-events: none; 
}
button.back::after { display: none; }

/* 종료 버튼 */
button.program_close_btn { position: relative; min-width: 3.6rem; width: 3.6rem; height: 3.6rem; text-align: center; vertical-align: middle; border: none; background: none; box-shadow: none; padding: 0; }
button.program_close_btn::after {
  content: ''; display: block; width: 3.6rem; height: 3.6rem; background: #D3D3D4;
  mask: url('../1_image/04_icon/logout.svg') no-repeat center center; mask-size: contain;
  -webkit-mask: url('../1_image/04_icon/logout.svg') no-repeat center center; -webkit-mask-size: contain; pointer-events: none;
}

/* 팝업 닫기 버튼 */
button.popup_close_btn {
  min-width: 0; width: 2.6rem; height: 2.6rem; background: #fff;
  mask: url('../1_image/04_icon/ico_close.svg') no-repeat center center; mask-size: contain;
  -webkit-mask: url('../1_image/04_icon/ico_close.svg') no-repeat center center; -webkit-mask-size: contain; }


/* 페이지네이션 버튼 */
button.page_btn { /*flex: 0 0 2.4rem;*/ width: 2.4rem; height: 2rem; background: transparent; border: none; box-shadow: none; min-width: 0; border-radius: 0; padding: 0; }
button.page_btn:disabled { color: #141414; background: transparent; }
button.page_btn.num { font-size: 1.4rem; color: #fff; }
button.page_btn.num.current { font-weight: 700; color: #000; }

button.page_btn::after { content : ''; display: none; width: 2.4rem; height: 2.4rem; margin: 0 auto; background: #fff; mask-size: contain; -webkit-mask-size: contain; } 
button.page_btn.prev_all::after { display: block; mask: url('../1_image/05_button/btn_prev_all.svg') no-repeat center center; -webkit-mask: url('../1_image/05_button/btn_prev_all.svg') no-repeat center center; }
button.page_btn.prev::after { display: block; mask: url('../1_image/05_button/btn_prev.svg') no-repeat center center; -webkit-mask: url('../1_image/05_button/btn_prev.svg') no-repeat center center; }
button.page_btn.next_all::after { display: block; mask: url('../1_image/05_button/btn_next_all.svg') no-repeat center center; -webkit-mask: url('../1_image/05_button/btn_next_all.svg') no-repeat center center; }
button.page_btn.next::after { display: block; mask: url('../1_image/05_button/btn_next.svg') no-repeat center center; -webkit-mask: url('../1_image/05_button/btn_next.svg') no-repeat center center; }
div.pagination_area > button.page_btn::after { background: #b7b5b5; }
/* - 버튼 css END */