.user-management-body{ min-width: 900px; }
/* login-style */
.login-container{ height: 100vh; justify-content: center; align-items: center; }
.login-box{ 
    background-color: #ffffff; 
    box-shadow: 0px 0px 25px rgba(215,225,241,0.6);
    border-radius: 20px;
    padding: 70px 60px 75px 60px;
    text-align: center;
    min-width: 500px;
}
.login-box h2{ font-weight: 700; text-align: center; padding-bottom: 30px;}
.login-button{ 
    background-color: #0177FB; 
    border-radius: 5px;
    width: 100%; 
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    text-decoration: none; color: #FFFFFF; font-weight: 700; font-size: 18px;
}

.login-input input{ 
    border: 1px solid #d9d9d9;
    height: 50px;
    padding: 0 15px;
    font-size: 16px;
    color: #292929;
    border-radius: 5px;
    width: 100%;
}
.login-input{
    display: flex;
    justify-content: flex-end;
}
.login-input i{ width: 50px; height: 50px; position: absolute; display: flex; align-items: center; justify-content: center; }
.login-input i svg path{ fill: #d9d9d9; }
.login-input input:focus + i svg path{ fill: #292929 !important; }
.input-box{ width: 100%; text-align: left; margin-top: 20px; }
.input-box label{ display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #292929; }
.id-save-box{ padding: 10px 0 10px; text-align: left; }
.id-save-box span{ padding-left: 10px; font-weight: 600; font-size: 14px; }

/* user-management style */
.user-management-container{
    width: calc(100% - 200px);
    height: calc(100vh - 170px); 
    min-height: 850px;
    /* justify-content: center; */ 
    align-items: center; 
    float: right;
    flex-direction: column;
    margin-top: 100px;
}
.user-header{ min-width: 870px !important; }
.user-header i{ display: flex; align-items: center; justify-content: right; }
.user-header i svg path{ fill: #292929 !important; }
.menu-title{ 
    height: 92px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 22px;
    color: #292929;
    font-weight: 600;
    border-bottom: 1px solid #dddddd;
    margin-bottom: 0px;
}
.sideMenu{
    position: absolute;
    width: 200px;
    left: 0;
    top: 70px;
    height: calc(100vh - 70px);
    min-height: 850px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(215,225,241,0.6);
}
.menu-list{ 
    list-style: none; 
    padding: 0px;
    margin: 0px;
}
.menu-list a{ 
    width: 100%;
    display: block;
    text-decoration: none;
    padding: 17px 20px; 
    font-size: 16px; 
    font-weight: 700; 
    color: #292929; 
    border-bottom: 1px solid #dddddd;
}

.user-management-box{ 
    background-color: #ffffff; 
    box-shadow: 0px 0px 25px rgba(215,225,241,0.6);
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 30px;
    text-align: center;
}
.user-management-box>div{ padding: 10px 28px 0; width: 100%; }
.user-management-container h2{ 
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    color: #292929;
    padding-bottom: 25px;
}
.search-box{ margin-bottom: 30px; width: 80%; min-width: 870px; }
.search-tab{ 
    display: flex; 
    align-items: center; 
    padding: 20px 30px; 
    justify-content: center; 
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 25px rgba(215,225,241,0.6);
}
.search-list{ display: flex; align-items: center; margin-right: 20px; }
.search-list label{ 
    display: inline-block; 
    align-items: center;
    position: relative;
    font-size: 18px;
    padding-right: 10px;
}
.search-list input, .search-list select{ 
    border-radius: 5px; 
    border: 1px solid #d4d3d5; 
    height: 46px; 
    padding-left: 10px;
    font-size: 16px;
    color: #494949;
}
.search-btn button{ 
    background-color: #ffffff; 
    border-radius: 5px; 
    border: 1px solid #292929;
    width: 46px;
    height: 46px;
}
.btn-default{ 
    display: flex; 
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    width: 140px;
    height: 46px;
    border-radius: 5px;
    box-shadow: 0px 0px 25px rgba(215,225,241,0.6);
    background-color: #0177FB;
    border: none;
    color: #ffffff;
    margin-bottom: 10px;
}

.btn-white{
    display: flex; 
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    width: 140px;
    height: 46px;
    border-radius: 5px;
    box-shadow: 0px 0px 25px rgba(215,225,241,0.6);
    background-color: #ffffff;
    border: none;
    color: #292929;
    margin-bottom: 10px;
}

.btn-darkgray{ 
    display: flex; 
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    width: 140px;
    height: 46px;
    border-radius: 5px;
    background-color: #3f4355;
    border: none;
    color: #ffffff;
}

.btn-area{
    min-width: 870px;
    width: 80%;
    display: flex;
    justify-content: flex-end;
}
.user-management-box{
    min-width: 870px;
    width: 80%;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-content: center;
}

.boardTable{ border-bottom: 1px solid #e6e8ed; width: 100%; }
.boardTable thead tr th{
    border-top: 1px solid #494949;
    border-bottom: 1px solid #b2b2b2;
    text-align: center;
    padding: 13px 0;
    background-color: #fff;
    font-size: 14px;
    color: #737373;
}
.boardTable tbody tr td{
    border-top: 1px solid #e5e5e5;
    text-align: center;
    padding: 13px 5px;
    font-size: 14px;
    color: #292929;
    transition: all 0.3s ease-out;
}
.boardTable tbody tr:hover td{ background: #f4f5fa; }
.btnBottomArea{ margin:30px 0 25px 0; display: flex; justify-content: center; align-items: center; width: 100%; }
.btnBottomArea button{ margin: 0 5px; }

.pgWrap{ padding:50px 0 20px;}
.paginate{text-align:center;display: flex; justify-content: center;}
.paginate a{
    text-decoration: none;
	display:inline-flex;
	justify-content: center;
	align-items: center;
	width:46px;
    height:46px;
    text-align:center;
    color:#a1a1a1;
    font-size:18px;
    line-height:1;
    border-radius:23px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0,0,0,0.05);
	margin:0 5px;
	transition: all 0.3s;
}
.paginate a span{display:inline-block;padding:0 2px;line-height:1em;}
.paginate a.active,
.paginate a:hover{background:#3f4355;color:#fff;}
.paginate a.active span{ color:#fff;}
.paginate a:hover span{color:#fff;}

.paginate a.prev{
	display: block;
	margin:0 10px 0 5px;text-indent:-9999px;border-left:0;
	background:url(../images/arrow_back.png) no-repeat center; 
	border:1px solid #fff;
}
.paginate a.first{
	display: block;
	margin:0 0 0 0;text-indent:-9999px;
	background:url(../images/double_arrow_back.png) no-repeat center; 
	border:1px solid #fff;
}
.paginate a.next{
	display: block;
	margin:0 5px 0 10px;text-indent:-9999px;border-right:0;
	background:url(../images/arrow_next.png) no-repeat center; 
	border:1px solid #fff;
}
.paginate a.last{
	display: block;
	margin:0 0 0 0;text-indent:-9999px;
	background:url(../images/double_arrow_next.png) no-repeat center; 
	border:1px solid #fff;
}
.paginate a.prev:hover,
.paginate a.first:hover,
.paginate a.next:hover,
.paginate a.last:hover{
	border:1px solid rgba(63,67,85,0.5);
}

.userLayer{ position: absolute; left:0; top:0; z-index: 9999; min-width: 750px; width: 100%; height: 100vh; display: none;}
.userLayer .userWrap{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; min-height: 940px; position: relative; background:rgba(63,67,85,0.7);}
.userLayer .userWrap .userBox{ 
	width: 750px; 
	position: relative;
	height:auto; 
	background:#fff; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	border-radius:10px;
	padding:20px 0 10px;
	position: relative;
}

.userLayer .userWrap .userBox .userHeader{ border-bottom:1px solid #ccc; padding-bottom:15px;}
.userLayer .userWrap .userBox .userHeader h2{
	display: flex; align-items: center;
	width: 100%;
	font-size:26px;
	padding:0 30px;
	font-weight:800;
	line-height:1.3;
	text-align:center; 
    margin-bottom: 0px;
}

.userContTop{ padding:30px 30px 20px ; max-width:890px; margin:0 auto; border-bottom:1px solid #ccc;}
.userContTop .nece{ display: none !important;}

.comUserFlexBox{padding:20px 30px 50px; display: flex; } 
.comFxCenter{ display: flex; justify-content: center; align-items: center;}
.codeCon .boardTable tbody td{ height:auto; height:58px;}
.cuArrow{ position: relative;}
.btnCuArrow{ 
	border-radius:50px; border:1px solid #ccc; background:#fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); width:40px; height:40px; display: flex; justify-content: center; align-items: center; font-size:16px; font-weight:800;
	position: absolute; left:50%; top:50%; 
	transform: translate(-50%,-50%);
}
.btnCuArrow:hover{ background:#f7f7f7;}
.btne{
	display: flex; 
	justify-content: center; align-items: center; 
	font-size:16px; 
	font-weight:500; 
	height:36px;
	border-radius:5px;
}
a.close_x{ display: flex; width:45px; height:45px; position: absolute; right:13px; top:13px; z-index:10; justify-content: center; align-items: center;}
a.close_x i{
	display: block; 
	width:23px; height:23px; 
	background:url(../images/x.png) no-repeat center / 100%;
}


.fxBox{ display: flex; align-items: center; margin-bottom:10px;}
.fxBox label{ flex:0 0 140px;}
.fxBox label strong{ 
	display: inline-block; position: relative; padding-right:5px; 
	font-size:18px; font-weight:800;
}
.fxBox label strong .nece{ 
	position: absolute;
	right:-5px;
	top:0;
	display: block;
	width:6px; height: 6px;
	border-radius:3px;
	background:#d32f2f;
}
.fxBox .inBox{ margin-right:5px; }
.inBoxFlex{ display: flex; align-items: center; }
.inp{ border-radius: 5px; border:1px solid #d4d3d5; height:46px; padding-left:10px; font-size:16px;}
.sel { height:44px; background: none !important; border: none !important; width:100%; appearance: none !important; -webkit-appearance: none !important; font-size:16px; padding-left:10px;}
.selectbox { 
	border-radius: 5px; border:1px solid #d4d3d5; height:46px; 
	position: relative;
}
.selectbox::after { 
	content:"";display:block; position: absolute; right:15px; top:50%; transform: translateY(-50%); 
	background:url(../images/i-select-arrow.png) no-repeat;
	width:10px; height:6px;
}
.texta {
	border-radius: 5px; border:1px solid #d4d3d5; 
	padding:10px;
	font-size:16px;
}
.texta:focus { outline: none;}
.height1 { min-height:200px;}
.height2 { min-height:400px;}

.wd1 { width:290px !important;}
.wd2 { width:230px !important;}
.wd3 { width:180px !important;}
.wd4 { width:525px !important;}
.wd5 { width:450px !important;}
.wd6 { width:330px !important;}

.w40 { width:40px !important;}
.w60 { width:60px !important;}
.w80 { width:80px !important;}
.w100 { width:100px !important;}
.w120 { width:120px !important;}
.w140 { width:140px !important;}
.w150 { width:150px !important;}
.w160 { width:160px !important;}
.w100per { width:100% !important;}

.radioBoxArea { display: flex; align-items: center; margin:10px 0;}
.radioBoxArea > div { margin-right:30px;}

.comFormChk label { height: 18px; cursor: pointer; display: inline-flex; align-items: center; }
.comFormChk label input[type="checkbox"] {display: none; }
.comFormChk label input[type="checkbox"] + i { 
    display: flex; 
    width:23px; height: 23px; 
    cursor: pointer;
	background-repeat:  no-repeat;
    background-size:100%;
}
.comFormChk label input[type="checkbox"]:checked + i { 
	background-repeat:  no-repeat;
    background-size:100%;
}
.comFormChk label span { margin-left:10px; }

.comFormRadio label { height: 18px; cursor: pointer; display: flex; align-items: center; }
.comFormRadio label input[type="radio"] {display: none; }
.comFormRadio label input[type="radio"] + i { 
    display: flex; 
    width:22px; height: 22px; 
    cursor: pointer;
    background: #fff;
	border:1px solid #d4d3d5;
	border-radius:12px;
	position: relative;
}
.comFormRadio label input[type="radio"]:checked + i::after { 
	content:"";display: block;
	width:14px; height:14px;
	border-radius:7.5px;
	background:#0177FB;
	position: absolute;
	left:50%; top:50%;
	transform: translate(-50%,-50%);
}
.comFormRadio label span { margin-left:10px; font-weight:700;}

@media (max-width:1366px){ /* width 1366px 이하*/
    .sideMenu{display: none;}
    .user-management-container{ width: 100%; justify-content: flex-start; margin-top: 20px;}


}
@media (max-width:500px){ /* width 500px 이하*/
	.login-box{ box-shadow: none; background: none; min-width: 100%; }
    .login-container{ background-color: #ffffff; }
}