/***********************************************************************************
* Copyright (C)RFLOGIX since 2010.08.24 (rflogix@rflogix.com)
************************************************************************************
* ● 프로젝트	: 크로닉-관리자
* ○ 파일		: common.css
* ○ 생성		: 2017.02.01(수요일)
* ○ 최종변경	: 2017.02.01(수요일)
************************************************************************************/




/***********************************************************************************
* 폰트 관련
***********************************************************************************/

/* @import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css'); */
/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans');*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');



/***********************************************************************************
* 기본
***********************************************************************************/

/* 텍스트컬러 #292F36 / 메인컬러 #4ECDC4 / 배경컬러 #F7FFF7 / 등록보류컬러 #FF6B6B / 에러컬러 #FFE66D */
html, body, iframe, div, form, img, ul, li, span, a, textarea, input, select, button {font-family: 'Noto Sans KR', sans-serif; font-size:12px; color:#666666; border:0px; margin:0px; padding:0px; outline-style:none; resize:none;}
html, body {height:100%; width:100%; min-width:1405px;  max-width:1600px; background-color:#f0f1f6; z-index:0;}/* font-family:Arial, 'Nanum Gothic', sans-serif; */

/* html, body {height:100%; width:100%; min-width:1405px; max-width:1600px; background-color:#f0f1f6; z-index:0;}font-family:Arial, 'Nanum Gothic', sans-serif; */


body {overflow:auto;}

div		{position:relative; background-repeat:no-repeat; background-size:contain; background-position:center;}
form	{position:relative;}

img		{width:100%; vertical-align:middle; background-position:center top; background-size:cover;} /* vertical-align:middle; 이거 안주면 밑에 3px 정도 뜸 */
iframe, form {width:100%; height:100%;}
ul		{width:100%; list-style:none; clear:both; overflow:hidden;}
/* li		{float:left;} */
input::-webkit-input-placeholder {color:#ccc;}
input:-moz-placeholder {color:#ccc;}
textarea::-webkit-input-placeholder {color:#ccc;}
textarea:-moz-placeholder {color:#ccc;}

a:link, a:visited, a:active, a:hover {text-decoration:none;}

table {border-collapse:collapse;}

select {height:30px; color:#333; padding:0 30px 0 5px; border:1px solid #aaa; border-radius:3px; background:url("../image/button/select_arrow.png") no-repeat; background-position:calc(100% - 10px) center; background-color:white; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none; transition:border-color 0.3s;}
select:hover {border:1px solid #333;}
select::-ms-expand {display:none;}

.fa, .fas, .far, .fal, .fad, .fab {line-height:unset !important;}

.flex-row {display:flex; flex-direction:row; align-items:center; justify-content:center;}
.flex-row-start {display:flex; flex-direction:row; align-items:center; justify-content:flex-start;}
.flex-row-end {display:flex; flex-direction:row; align-items:center; justify-content:flex-end;}
.flex-row-between {display:flex; flex-direction:row; align-items:center; justify-content:space-between;}

.flex-col {display:flex; flex-direction:column; align-items:center; justify-content:center;}
.flex-col-start {display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;}
.flex-col-between {display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;}




/***********************************************************************************
* page_header
***********************************************************************************/

.page_header {min-width:1000px; background:url(../image/topmenu/top_bg.gif) 0 0 repeat-x; clear:both; z-index:2;}

.page_header .logo {width:auto; height:65px; margin-left:40px; float:left; display:flex; align-items:center;}
.page_header .logo img {width:32px;}
.page_header .logo span {width:auto; font-size:20px; color:#4ECDC4; font-weight:bold; letter-spacing:2px; margin-left:6px;}

.page_header .login_info {width:auto; height:65px; font-size:11px; display:flex; align-items:center; float:right;}
.page_header .login_info .intro, .page_header .spot_menu a {display:inline-block; height:25px; line-height:25px;}
.page_header .login_info .intro {background:url(../image/topmenu/ico_user.png) 0 4px no-repeat; color:#fffdc8; padding-left:16px; margin-right:20px;}
.page_header .login_info a {color:#fff; background:url(../image/topmenu/bull_dot1.png) 0 center no-repeat; padding-left:10px; margin-right:18px; cursor:pointer;}

.page_header .topmenu {clear:both; background:#2a407c; border-top:1px solid #4a4e81; border-bottom:1px solid #1e1e9a; box-shadow:0 0 8px black; width:95%; padding-left:5%;}
.page_header .topmenu li {float:left; display:inline-block;}
.page_header .topmenu li a {color:#fff; display:inline-block; padding:0 10px; height:35px; line-height:35px; letter-spacing:-1px;}
.page_header .topmenu li.choice a {font-weight:bold; background:#626e93;}
.page_header .topmenu:after {content:""; display:block; clear:both; font-size:0; width:0; height:0; line-height:0; overflow:hidden; visibility:hidden;}






/***********************************************************************************
* page_content
***********************************************************************************/

.page_content {width:calc(100% - 140px); min-height:600px; min-width:1000px; margin-left:140px; z-index:1;}
.page_content.active {width:calc(100% - 140px); min-height:600px; min-width:1000px; margin-left:140px;}

.search_title		{width:calc(100% - 40px); height:30px; line-height:30px; margin:15px 20px 0 20px; font-size:18px; letter-spacing:1px; display:flex; flex-direction:row; align-items:center; justify-content:flex-start;}
.search_title > i	{color:#e6652e;}
.search_title span	{font-size:18px; color:#333; margin-left:8px; padding:0 0 3px 0;}
.search_title select	{font-size:14px; margin-left:8px; padding:0 30px 3px 5px;}
.search_title .hidden {display:none;}
.search_title .btn_search {height:100%; padding:0 20px; position:absolute; right:0; top:0;}
.search_title .btn_notice {height:100%; padding:0 20px; position:absolute; left:0; top:0;}
.search_title .btn_detail {color:#999; background:white; border:1px solid #ccc; border-radius:3px;}
.search_title .btn_detail div {color:#999;}
.search_title .btn_detail:hover {color:#666; border:1px solid #999; background:#eee;}
.search_title .btn_detail:hover div {color:#666;}

.search_param				{width:calc(100% - 40px); margin:10px 20px 0 20px; padding-bottom:30px; border-top:1px solid #ccc;}
.search_param table			{width:100%;}
.search_param table tr.hidden {display:none;}
.search_param table th		{font-size:20px; font-weight:bold; background:#eee; border-bottom:1px solid #ccc; border-left:1px solid #ccc; padding:5px 0; text-align:center;}
.search_param table td		{font-size:13px; font-weight:normal; border-bottom:1px solid #ccc; border-left:1px solid #ccc; padding:5px 0 5px 20px; text-align:left;}
.search_param table td:last-child {border-right:1px solid #ccc;}
.search_param table td > input.start {width:80px; text-align:center;}
.search_param table td > input.end {width:80px; text-align:center;}
.search_param table td > img {width:auto; cursor:pointer;}
.search_param input			{width:calc(100% - 32px); height:28px; padding:0 5px; border:1px solid #ccc; border-radius:3px; color:#333; transition:border-color 0.3s;}
.search_param input:hover	{border-color:#333;}
.search_param input.error	{border-color:red;}
.search_param label 		{height:18px; line-height:18px; display:inline-block; cursor:pointer;}
.search_param label input	{width:auto; height:auto; position:relative; top:3px; padding:0; margin:0; border:0;}
.search_param select		{width:calc(100% - 20px); padding:0 5px; border:1px solid #aaa;}

.search_action				{width:calc(100% - 40px); padding:7px; margin:15px 20px 0 20px; border:1px solid #ccc; border-bottom:0; display:flex; flex-direction:row; align-items:center; justify-content:flex-start;}
.search_action .blank		{flex:1; display:flex; flex-direction:row; align-items:center; justify-content:flex-start;}
.search_action .button i	{font-size:16px;}
.search_action.hidden		{border:0; padding:0;}

.search_result				{width:calc(100% - 40px); margin:0 20px 0 20px; padding-bottom: 20px;}
.search_result .GRID		{width:100%; height:510px; border-bottom:1px solid #ccc; border-left:1px solid #ccc;; border-right:1px solid #ccc;}
.search_result .GRID_pager	{width:100%; height:45px; padding:7px; border:1px solid #ccc; border-top:0; display:none;}
.search_result .GRID_pager.show {display:flex;}
.search_result .GRID_pager .total_cnt {height:100%; position:absolute; left:10px; top:0; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.search_result .GRID_pager .page_list {width:100%; height:100%; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.search_result .GRID_pager .page {width:28px; height:28px; padding:0; margin-left:10px; border:1px solid #aaa; color:#999; background:white; user-select:none;}
.search_result .GRID_pager .page:hover {color:white; background:#38626b;}
.search_result .GRID_pager .page.selected {color:white; background:#38626b;}
.search_result .GRID_pager .page:first-child {margin-left:0;}
.search_result .GRID_pager .blank {padding:0 10px;}
.search_result .GRID_msg	{width:100%; height:100%; font-size:25px; letter-spacing:1px; user-select:none; z-index:-1 !important; position:absolute; left:0; top:0; background:rgba(99,99,99,0.2); opacity:0; transition:opacity 0.2s; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.search_result .GRID_msg.show {opacity:1; z-index:3 !important;}

.search_result_HOSP				{width:calc(100% - 40px); margin:0 20px 0 20px; padding-bottom: 20px;}
.search_result_HOSP .GRID_HOSP		{width:100%; height:250px; border-bottom:1px solid #ccc; border-left:1px solid #ccc;; border-right:1px solid #ccc;}
.search_result_HOSP .GRID_HOSP_pager	{width:100%; height:45px; padding:7px; border:1px solid #ccc; border-top:0; display:none;}
.search_result_HOSP .GRID_HOSP_pager.show {display:flex;}
.search_result_HOSP .GRID_HOSP_pager .total_cnt {height:100%; position:absolute; left:10px; top:0; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.search_result_HOSP .GRID_HOSP_pager .page_list {width:100%; height:100%; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.search_result_HOSP .GRID_HOSP_pager .page {width:28px; height:28px; padding:0; margin-left:10px; border:1px solid #aaa; color:#999; background:white; user-select:none;}
.search_result_HOSP .GRID_HOSP_pager .page:hover {color:white; background:#38626b;}
.search_result_HOSP .GRID_HOSP_pager .page.selected {color:white; background:#38626b;}
.search_result_HOSP .GRID_HOSP_pager .page:first-child {margin-left:0;}
.search_result_HOSP .GRID_HOSP_pager .blank {padding:0 10px;}
.search_result_HOSP .GRID_HOSP_msg	{width:100%; height:100%; font-size:25px; letter-spacing:1px; user-select:none; z-index:-1 !important; position:absolute; left:0; top:0; background:rgba(99,99,99,0.2); opacity:0; transition:opacity 0.2s; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.search_result_HOSP .GRID_HOSP_msg.show {opacity:1; z-index:3 !important;}

.search_result_USER_RANK				{width:calc(100% - 40px); margin:0 20px 0 20px; padding-bottom: 20px;}
.search_result_USER_RANK .GRID_USER_RANK		{width:100%; height:250px; border-bottom:1px solid #ccc; border-left:1px solid #ccc;; border-right:1px solid #ccc;}
.search_result_USER_RANK .GRID_USER_RANK_pager	{width:100%; height:45px; padding:7px; border:1px solid #ccc; border-top:0; display:none;}
.search_result_USER_RANK .GRID_USER_RANK_pager.show {display:flex;}
.search_result_USER_RANK .GRID_USER_RANK_pager .total_cnt {height:100%; position:absolute; left:10px; top:0; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.search_result_USER_RANK .GRID_USER_RANK_pager .page_list {width:100%; height:100%; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.search_result_USER_RANK .GRID_USER_RANK_pager .page {width:28px; height:28px; padding:0; margin-left:10px; border:1px solid #aaa; color:#999; background:white; user-select:none;}
.search_result_USER_RANK .GRID_USER_RANK_pager .page:hover {color:white; background:#38626b;}
.search_result_USER_RANK .GRID_USER_RANK_pager .page.selected {color:white; background:#38626b;}
.search_result_USER_RANK .GRID_USER_RANK_pager .page:first-child {margin-left:0;}
.search_result_USER_RANK .GRID_USER_RANK_pager .blank {padding:0 10px;}
.search_result_USER_RANK .GRID_USER_RANK_msg	{width:100%; height:100%; font-size:25px; letter-spacing:1px; user-select:none; z-index:-1 !important; position:absolute; left:0; top:0; background:rgba(99,99,99,0.2); opacity:0; transition:opacity 0.2s; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.search_result_USER_RANK .GRID_USER_RANK_msg.show {opacity:1; z-index:3 !important;}


.grid_cell_hidden{
	display:none!important;
}



/***********************************************************************************
* page_left
***********************************************************************************/

.page_left {width:140px; left:0; top:105px; color:#505050; background-color:#eee; position:absolute; z-index:2;}

.page_left .leftmenu {overflow:hidden; border-bottom:1px solid #ccc;}
.page_left .leftmenu .level2 {border-top:1px solid #ccc; width:100%; overflow:hidden;}
.page_left .leftmenu .level2 a {font-weight:bold; background:url(../image/leftmenu/left_menu_arr2.gif) right 18px no-repeat; display:block; height:40px; line-height:40px; padding-left:13px;}
.page_left .leftmenu .level2 a:hover {font-weight:bold; background:url(../image/leftmenu/left_menu_arr2.gif) right -17px no-repeat; color:red;}
.page_left .leftmenu .level2.choice a {background:url(../image/leftmenu/left_menu_arr2.gif) right 18px no-repeat #2a407c; color:#fff;}
.page_left .leftmenu .level2.fold a {background:url(../image/leftmenu/left_menu_arr1.gif) right 18px no-repeat; }
.page_left .leftmenu .level2.fold a:hover {background:url(../image/leftmenu/left_menu_arr1.gif) right -17px no-repeat; }
.page_left .leftmenu .level2.choice.fold a {background:url(../image/leftmenu/left_menu_arr2.gif) right -48px no-repeat #2a407c; color:#fff;}

.page_left .leftmenu .level3 {width:175px; margin-left:15px; overflow:hidden;}
.page_left .leftmenu .level3 a {background:url(../image/leftmenu/left_menu_arr2.gif) right 18px no-repeat; display:block; height:40px; line-height:40px; padding-left:13px;}
.page_left .leftmenu .level3 a:hover,
.page_left .leftmenu .level3 a:active,
.page_left .leftmenu .level3 a:focus {font-weight:bold; background:url(../image/leftmenu/left_menu_arr2.gif) right -17px no-repeat; color:#cc2928;}
.page_left .leftmenu .level3.choice a {font-weight:bold; color:#cc2928; font-weight:bold; background:url(../image/leftmenu/left_menu_arr2.gif) right -17px no-repeat;}



/***********************************************************************************
* page_footer
***********************************************************************************/

.page_footer				{width:100%; margin:25px auto 15px auto;}
.page_footer div			{width:100%; text-align:center; font-size:12px; color:#999; letter-spacing:0.7px;}
.page_footer .copyright		{margin-top:5px;}
.page_footer .copyright a	{font-weight:bold;}




/***********************************************************************************
* slick 그리드
***********************************************************************************/

.slick-pane-header {box-shadow: 0px -1px 8px 0px rgba(50,50,50,0.5); z-index:2;}
.slick-pane-header .slick-header {border-bottom:1px solid #bbb;}
.slick-pane-header .slick-header .slick-header-columns {height:30px !important; background-image:-webkit-linear-gradient(top,#fafafa 0,#dadada 75%);}
.slick-pane-header .slick-header .slick-header-columns .slick-header-column {height:30px !important; padding:0 !important; white-space:normal !important; background-image:-webkit-linear-gradient(top,#fafafa 0,#dadada 75%); display:flex !important; align-items:center; justify-content:center; text-align:center;}
.slick-pane-header .slick-header .slick-header-columns .slick-header-column.hidden {display:none !important;}

.slick-pane-top {z-index:1;}
.slick-pane-top .slick-viewport {z-index:1;}
.slick-pane-top .slick-viewport {overflow-y:scroll !important;}
.slick-pane-top .slick-viewport::-webkit-scrollbar {width:12px; height:12px;}
.slick-pane-top .slick-viewport::-webkit-scrollbar-thumb {background:#c8c8c8; border:1px solid #b8b8b8; border-radius:5px;}
.slick-pane-top .slick-viewport::-webkit-scrollbar-track {background-color:#f2f2f2; background-image:-webkit-linear-gradient(left,#f2f2f2 0,#fff 100%); border:1px solid #e6e6e6; border-radius:5px;}
.slick-pane-top .slick-viewport .slick-cell {font-size:12px; line-height:16px !important; display:flex; align-items:center; justify-content:center; text-align:center;}
.slick-pane-top .slick-viewport .slick-cell.selected {background-color:rgba(49, 86, 94, 0.25); -webkit-transition:background 0.1s;}
.slick-pane-top .slick-viewport .slick-cell.copied {background:rgba(49, 86, 94, 0.7); -webkit-transition:background 0.2s;}
.slick-pane-top .slick-viewport .slick-cell.align-left {justify-content:flex-start; text-align:left; padding-left:8px;}
.slick-pane-top .slick-viewport .slick-cell.align-right {justify-content:flex-end; text-align:right; padding-right:8px;}
.slick-pane-top .slick-viewport .slick-cell.hidden {display:none !important;}

.slick-pane-top .slick-footerrow {z-index:2;}
.slick-pane-top .slick-footerrow .slick-footerrow-column {height:100%; padding:0 8px 0 0; background-image:-webkit-linear-gradient(top,#fafafa 0,#ddd 100%); display:flex; align-items:center; justify-content:flex-end; text-align:right;}
.slick-pane-top .slick-footerrow .slick-footerrow-column.align-left {padding:0 0 0 8px; justify-content:flex-start; text-align:left;}
.slick-pane-top .slick-footerrow .slick-footerrow-column.align-center {padding:0; justify-content:center; text-align:center;}

.slick-range-decorator {border:2px dashed black !important;}
.slick-column-name {display:inline-flex;}
.slick-sort-indicator {display:none;}
.slick-sort-indicator.slick-sort-indicator-asc {display:inline-block;}
.slick-sort-indicator.slick-sort-indicator-desc {display:inline-block;}

.ui-state-default {border-top:1px solid #ccc;}
.ui-state-hover {background-image:-webkit-linear-gradient(top,#fafafa 0,#f9d390 75%) !important;}



/***********************************************************************************
* 버튼
***********************************************************************************/

.button			{height:29px; line-height:26px; padding:0 15px 2px 15px; font-size:14px; color:white; background:#38626b; border-radius:6px; cursor:pointer; user-select:none; transition:all 0.3s; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.button.margin-left {margin-left:10px;}
.button.margin-right {margin-right:10px;}
.button:hover	{background:#e6652e;}
.button > i		{font-size:12px; margin:2px 6px 0 0;}




/***********************************************************************************
* 파일업로드 (이미지, 파일)
***********************************************************************************/

input[type='file'] {display:none;}
.IMG_URL, .IMG_URL_ORIGIN {display:none;}
.FILE_URL, .FILE_URL_ORIGIN {display:none;}




/***********************************************************************************
* CK 에디터
***********************************************************************************/

.cke_upload_img_wrap {max-width:100%; border:5px dashed #eee;}
.cke_upload_img {max-width:100%;}




/***********************************************************************************
* date picker
***********************************************************************************/

.ui-datepicker-year		{width:70px !important;}
.ui-datepicker-month	{width:55px !important; margin-left:10px !important;}
.ui-datepicker-prev		{height:90% !important;}
.ui-datepicker-next		{height:90% !important;}
.ui_datepicker {width:135px !important; background-color:#efefef; text-align:center; cursor:pointer; position:relative;}
.datepicker.fa-times {cursor:pointer; padding-left:5px;}




/***********************************************************************************
* 버튼
***********************************************************************************/

.button.basic		{width:auto; height:32px; line-height:34px; padding:0 20px 0 15px; text-align:center; position:relative; overflow:hidden; display:inline-block; border-top:1px solid #c7c8ca; border-right:1px solid #c6c6c6; border-bottom:1px solid #b1b1b1; border-left:1px solid #c6c6c6; border-radius:3px; background:linear-gradient(180deg, #ffffff, #f0f0f0); cursor:pointer;  transition:all 0.3s;}
.button.basic:hover	{background:linear-gradient(180deg, #e0e0e0, #b0b0b0);}
.button.basic i		{width:20px; height:100%; display:inline-block; position:relative; overflow:hidden; background-position:center; background-size:contain; background-repeat:no-repeat; background-image:url('../image/button/ico_submit.png');}
.button.basic span	{color:#444; font-size:12px; font-weight:bold; margin-left:10px; display:inline-block; position:relative; overflow:hidden; transition:color 0.3s;}




/***********************************************************************************
* 조회관련
***********************************************************************************/

.search_button		{width:100%; margin-top:15px; position:relative; overflow:hidden; text-align:center;}
.search_button .button i	{width:16px; background-image:url('../image/button/ico_search.png');}

.search_list		{width:calc(100% - 40px); margin:0px 20px; margin-top:20px; position:relative; overflow:hidden;}
.search_list .search_cnt {color:#999;}

.search_action input {height:30px; color:#333; padding:0 30px 0 5px; border:1px solid #aaa; border-radius:3px; transition:border-color 0.3s;}




/***********************************************************************************
* popup_wrap 관련
***********************************************************************************/

.popup_wrap {width:100%; height:100%; top:0; left:0; position:fixed; overflow:hidden; background-color:rgba(0,0,0,0.7); opacity:0; z-index:-1; transition:opacity 0.3s, z-index 0s 0.3s; display:none; flex-direction:column; align-items:center; justify-content:flex-start;}
.popup_wrap.active {opacity:1; z-index:2; transition:opacity 0.3s, z-index 0s;}

.popup_top {width:100%; max-width:calc(100% - 20px); height:45px; margin-top:20px; background:white; border-bottom:1px solid #ddd; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.popup_top .btn_close {width:45px; height:45px; color:#ccc; font-size:25px; background-size:24px 24px; position:absolute; right:0; top:0; z-index:1; display:flex; flex-direction:row; align-items:center; justify-content:center; cursor:pointer; transition:transform 0.3s;}
.popup_top .btn_close:hover {color:#2f2f2f; transform:rotate(90deg);}
.popup_top .btn_prev {width:24px; height:24px; padding:10px 15px; color:#2f2f2f; background-image:url('../image/common/ico_prev.png'); background-size:24px 24px; position:absolute; left:0; top:0; z-index:1; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.popup_top .title {color:#2f2f2f; font-size:18px; font-weight:bold; letter-spacing:1px; text-align:center; display:flex; flex-direction:row; align-items:center; justify-content:center;}

.popup_content {width:100%; max-width:calc(100% - 20px); height:calc(100% - 46px - 40px); margin-bottom:20px; background:white; overflow-y:auto; overflow-x:hidden;}
.popup_content .input {width:calc(100% - 48px); height:40px; margin:5px 24px 0 24px; padding-bottom:6px; display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
background-image:linear-gradient(0deg,#cacaca 1px,hsla(0,0%,82%,0) 0);
/*background-size:0 100%,100% 100%; background-image:linear-gradient(0deg,#1ac7c7 2px,rgba(156,39,176,0) 0),linear-gradient(0deg,#cacaca 1px,hsla(0,0%,82%,0) 0); transition:background 0.2s;*/ 
}
.popup_content .input.focus {background-image:linear-gradient(0deg,#1ac7c7 2px,rgba(156,39,176,0) 0)/*background-size:100% 100%,100% 100%;*/}
.popup_content .input:first-child {margin-top:13px;}
.popup_content .input .title {width:107px; color:#2f2f2f; font-size:16px; font-weight:bold; letter-spacing:1px;}
.popup_content .input input {width:calc(100% - 107px); height:100%; color:#333333; font-size:16px; text-align:left;}




/***********************************************************************************
* 비번변경 팝업창
***********************************************************************************/

.popup_userpw {width:100%; height:100%; top:0; left:0; position:fixed; background:rgba(0,0,0,0.6); z-index:-1; opacity:0; transition:opacity 0.3s; display:flex; align-items:center; justify-content:center;}
.popup_userpw.active {z-index:11;}
.popup_userpw.show {opacity:1;}
.popup_userpw .close_bg {width:100%; height:100%; left:0; top:0; position:absolute; z-index:1;}
.popup_userpw .content_wrap {width:300px; padding:35px 40px; background-color:white; border:1px solid #ddd; border-radius:3px; z-index:2; margin-bottom:100%; transition:margin 0.2s 0.2s;}
.popup_userpw.active .content_wrap {margin-bottom:0;}
.popup_userpw .content_wrap .title {font-size:17px; font-weight:bold; color:#666; letter-spacing:2px;}
.popup_userpw .content_wrap .content {margin-top:15px; line-height:24px; font-size:13px; color:#999;}
.popup_userpw .content_wrap .UserPW {width:calc(100% - 42px); padding:15px 20px 13px 20px; margin-top:15px; border:1px solid #ddd; border-radius:3px; font-size:17px;}
.popup_userpw .content_wrap .UserPW_Check {width:calc(100% - 42px); padding:15px 20px 13px 20px; margin-top:15px; border:1px solid #ddd; border-radius:3px; font-size:17px;}
.popup_userpw .content_wrap .btn_wrap {margin-top:15px; display:flex; flex-direction:row; justify-content:flex-end;}
.popup_userpw .content_wrap .btn_wrap .btn_send {width:auto; padding:15px 25px; background-color:#4ECDC4; border-radius:3px; color:white; font-size:15px; font-weight:bold; display:flex; align-items:center; justify-content:center; transition:background-color 0.3s, box-shadow 0.3s; box-shadow:inset 0px 0px 5px 0 rgba(0,0,0,0.2); cursor:pointer;}
.popup_userpw .content_wrap .btn_wrap .btn_send:hover {background-color:#26afaa; box-shadow:inset 0px 0px 5px 0 rgba(0,0,0,0.3);}
.popup_userpw .content_wrap .btn_close {width:auto; top:0; right:0; position:absolute; font-size:25px; color:#ccc; padding:7px; cursor:pointer; transition:color 0.3s; display:flex;}
.popup_userpw .content_wrap .btn_close:hover {color:#333;}

/***********************************************************************************
* 예약 팝업창
***********************************************************************************/

.popup_appointment_modify {width:100%; height:100%; top:0; left:0; position:fixed; background:rgba(0,0,0,0.6); z-index:-1; opacity:0; transition:opacity 0.3s; display:flex; align-items:center; justify-content:center;}
.popup_appointment_modify.active {z-index:11;}
.popup_appointment_modify.show {opacity:1;}
.popup_appointment_modify .close_bg {width:100%; height:100%; left:0; top:0; position:absolute; z-index:1;}
.popup_appointment_modify .content_wrap {width:300px; padding:35px 40px; background-color:white; border:1px solid #ddd; border-radius:3px; z-index:2; margin-bottom:100%; transition:margin 0.2s 0.2s;}
.popup_appointment_modify.active .content_wrap {margin-bottom:0;}
.popup_appointment_modify .content_wrap .title {font-size:17px; font-weight:bold; color:#666; letter-spacing:2px;}
.popup_appointment_modify .content_wrap .content {margin-top:15px; line-height:24px; font-size:13px; color:#999;}
.popup_appointment_modify .content_wrap .UserPW {width:calc(100% - 42px); padding:15px 20px 13px 20px; margin-top:15px; border:1px solid #ddd; border-radius:3px; font-size:17px;}
.popup_appointment_modify .content_wrap .UserPW_Check {width:calc(100% - 42px); padding:15px 20px 13px 20px; margin-top:15px; border:1px solid #ddd; border-radius:3px; font-size:17px;}
.popup_appointment_modify .content_wrap .btn_wrap {margin-top:15px; display:flex; flex-direction:row; justify-content:flex-end;}
.popup_appointment_modify .content_wrap .btn_wrap .btn_send {width:auto; padding:15px 25px; background-color:#4ECDC4; border-radius:3px; color:white; font-size:15px; font-weight:bold; display:flex; align-items:center; justify-content:center; transition:background-color 0.3s, box-shadow 0.3s; box-shadow:inset 0px 0px 5px 0 rgba(0,0,0,0.2); cursor:pointer;}
.popup_appointment_modify .content_wrap .btn_wrap .btn_send:hover {background-color:#26afaa; box-shadow:inset 0px 0px 5px 0 rgba(0,0,0,0.3);}
.popup_appointment_modify .content_wrap .btn_close {width:auto; top:0; right:0; position:absolute; font-size:25px; color:#ccc; padding:7px; cursor:pointer; transition:color 0.3s; display:flex;}
.popup_appointment_modify .content_wrap .btn_close:hover {color:#333;}



/***********************************************************************************
* 이미지 팝업
***********************************************************************************/

.popup_image img {width:100%;}
.popup_image .popup_top {width:550px; margin:20px auto 0 auto;}
.popup_image .popup_content {width:550px; margin:0 auto 20px auto;}




/***********************************************************************************
* 공통 팝업창
***********************************************************************************/

/* popup_loading */
.popup_loading {background-color:rgba(0,0,0,0.7); align-items:center; justify-content:center;}
.popup_loading.active {z-index:80;}
.popup_loading #loader {
	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 20px);
}
@keyframes loader {
	0% { left: -100px }
	100% { left: 110%; }
}
.popup_loading #box {
	width: 50px;
	height: 50px;
	background: white;
	animation: animate .5s linear infinite;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 3px;
}   

@keyframes animate {
	17% { border-bottom-right-radius: 3px; }
	25% { transform: translateY(9px) rotate(22.5deg); }
	50% {
		transform: translateY(18px) scale(1,.9) rotate(45deg) ;
		border-bottom-right-radius: 40px;
	}
	75% { transform: translateY(9px) rotate(67.5deg); }
	100% { transform: translateY(0) rotate(90deg); }
} 
.popup_loading #shadow { 
	width: 50px;
	height: 5px;
	background: #000;
	opacity: 0.1;
	position: absolute;
	top: 59px;
	left: 0;
	border-radius: 50%;
	animation: shadow .5s linear infinite;
}
@keyframes shadow {
	50% {
		transform: scale(1.2,1);
	}
}
.popup_loading .loading_text {padding-top:100px; font-size:18px; line-height:24px; letter-spacing:2px; color:white; text-align:center; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:center;}

/* popup_alert */
.popup_alert {background-color:rgba(0,0,0,0.7); align-items:center; justify-content:center;}
.popup_alert.active {z-index:92;}
.popup_alert .content_wrap {min-width:250px; max-width:80%; max-height:80%; background-color:white; border-radius:5px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.popup_alert .content_wrap .content	{width:calc(100% - 40px); padding:20px 20px 0 20px; overflow-x:hidden; overflow-y:auto; flex:1; font-size:15px; line-height:25px; color:#404040; text-align:left; word-break:break-all;}
.popup_alert .content_wrap .content img {width:48px; height:48px; padding:20px calc(50% - 24px);}
.popup_alert .content_wrap .content b {font-size:17px; padding-bottom:5px; display:inline-block;}
.popup_alert .content_wrap .btn_close {width:100%; height:60px; line-height:60px; font-size:15px; font-weight:bold; color:#4ECDC4; background:white; text-align:center; word-break:keep-all; white-space:nowrap; letter-spacing:1px; overflow:hidden;}

/* popup_confirm */
.popup_confirm {background-color:rgba(0,0,0,0.7); align-items:center; justify-content:center;}
.popup_confirm.active {z-index:91;}
.popup_confirm .content_wrap {min-width:250px; max-width:80%; max-height:80%; background-color:white; border-radius:5px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.popup_confirm .content_wrap .content	{width:calc(100% - 40px); padding:20px 20px 0 20px; overflow-x:hidden; overflow-y:auto; flex:1; font-size:15px; line-height:25px; color:#404040; text-align:left; word-break:break-all;}
.popup_confirm .content_wrap .content b {font-size:17px; padding-bottom:5px;}
.popup_confirm .content_wrap .btn_wrap {width:80%; overflow:hidden; display:flex; flex-direction:row;}
.popup_confirm .content_wrap .btn_wrap .btn_ok {width:50%; height:60px; line-height:60px; background:white; font-size:15px; font-weight:bold; color:#4ECDC4; text-align:center; word-break:keep-all; white-space:nowrap; letter-spacing:1px; overflow:hidden;}
.popup_confirm .content_wrap .btn_wrap .btn_close {width:50%; height:60px; line-height:60px; background:white; font-size:15px; font-weight:bold; color:#aaa; text-align:center; word-break:keep-all; white-space:nowrap; letter-spacing:1px; overflow:hidden;}