/***********************************************************************************
* Copyright (C)RFLOGIX since 2010.08.24 (rflogix@rflogix.com)
************************************************************************************
* ● 프로젝트	: 크로닉-관리자
* ○ 파일명		: index.css
************************************************************************************/


.articleWrap {width:90%; margin:0 auto;}


/***********************************************************************************
* 공지사항
***********************************************************************************/
.board_list::-webkit-scrollbar {
    display: none; /* 크롬, 사파리, 오페라, 엣지 */
}
.board_list {width:100%; max-height:1000px; overflow:scroll; margin:20px auto 30px auto; min-height: 120px;}

.board_list .no-item {width:100%; padding:30px 0; text-align:center; color:#636363;}

.board_list .caption {width:100%; position:relative; overflow:hidden; margin-top:10px;  border-top:1px solid #3f2d1e; border-bottom:1px solid #3f2d1e;}
.board_list .caption>div {width:10%; height:30px; line-height:30px; text-align:center; font-size:12px; font-weight:normal; color:#61442b; font-family:"Dosis","NotoSans"; letter-spacing:5px; text-transform:uppercase; float:left; overflow:hidden;}
.board_list .caption>div:nth-child(2) {width:70%;}

.board_list .title_wrap {height:30px; text-align:center; font-size:10px; font-weight:normal; color:#666; font-family:'Dosis'; border-bottom:1px solid #292929;}
.board_list .title_wrap>div {width:10%; height:30px; line-height:30px; text-align:center; font-size:10px; font-weight:normal; color:#666; font-family:"Roboto","NotoSans"; float:left; overflow:hidden;}
.board_list .title_wrap>div:nth-child(2) {width:70%;}
.board_list .title_wrap .board_title {text-align:left; letter-spacing:1px; cursor: pointer;}
.board_list .title_wrap .board_title a {width:auto; height:100%; transition:color 0.5s ease; color:#666; overflow:hidden; display:inline-block;}
.board_list .title_wrap .board_title.notice a {color:black;}
.board_list .title_wrap .board_title a:hover {color:#7bcfdb; font-weight:bold;}
.board_list .title_wrap .board_title a span {width:auto; float:left;}
.board_list .title_wrap .board_title a .TitleURL {width:auto; height:200px; margin-right:10px; float:left; background-size:cover;}
.board_list .title_wrap .board_title a .CommentCNT {font-size:10px; font-weight:bold; letter-spacing:1px;}

.board_list .title_wrap.newarrival {height:200px;}
.board_list .title_wrap.newarrival>div {height:200px; line-height:200px;}

.board_list .content_wrap {border-bottom:1px solid #292929; max-height:0px; transition:max-height 0.5s, opacity 0.5s; overflow:hidden; position:relative; opacity:0;}
.board_list .content_wrap.show {max-height:100%; opacity:1;}
.board_list .content_wrap .content {width:80%; padding:20px 10%; position:relative; float:left;}
.board_list .content_wrap .content img {width:auto;}
.board_list .content_wrap .content a {color:#aa6f3b; transition:color 0.3s;}
.board_list .content_wrap .content a:hover {color:white;}

.board_list .content_wrap .content .board_img_wrap {width:100%; overflow:hidden; position:relative;}
.board_list .content_wrap .content .board_img {width:227px; border:1px solid #333; margin-left:4px; overflow:hidden; float:left; position:relative; cursor:pointer;}
.board_list .content_wrap .content .board_img:first-child {margin-left:0;}
.board_list .content_wrap .content .board_img img {width:calc(100% - 10px); margin:5px; background-position:center; background-repeat:no-repeat; background-size:contain;}

.board_list .content_wrap .content .content_html {width:100%; min-height:100px; overflow:hidden; position:relative;}

.board_list .content_wrap .content .edit_wrap {width:10%; height:100%; position:absolute; right:0; top:0; display:flex; align-items:center; justify-content:center;}
.board_list .content_wrap .content .edit_wrap .btn_wrap {width:60%; display:flex; flex-direction:column; align-content:space-between;}
.board_list .content_wrap .content .edit_wrap .btn	{width:100%; color:#666; padding:5px 0; border:1px solid #61442b; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.3s;}
.board_list .content_wrap .content .edit_wrap .btn:hover {background-color:#61442b; color:white;}
.board_list .content_wrap .content .edit_wrap .btn.delete {margin-top:10px;}



/***********************************************************************************
* 예약현황
***********************************************************************************/

.appointment_list {width:100%; overflow:hidden; margin:20px auto 30px auto;}
.appointment_list .listDetail {width:100%; position:relative; overflow:hidden; margin-top:20px; }

.appointment_list .listDetail .CntWrap {width:calc(33.3% - 20px); height: 200px;  margin:5px 10px; background: var(--page-content-blockColor); border-radius: var(--border-radius); box-shadow: var(--box-shadow); float:left;}
.CntWrap .cntTitle {padding:10px 0 0 10px; font-size:15px; font-weight:bold;}
.CntWrap .cntContent {width:100%; height:150px; text-align:center;}
.CntWrap .cntContent .cntNow {width:100%; float:left; color:#666666; font-size:100px;}
.CntWrap .cntContent .cntList {width:50%; height:300px; float:left;  overflow-y:auto;}
.CntWrap .cntContent .cntList .listnm {font-size:20px;}



/***********************************************************************************
* 사용자 팝업
***********************************************************************************/

/*.popup_user .popup_top {width:1080px;}
.popup_user .popup_content {width:1080px; display:flex; flex-direction:row;} */
.page_user_setting{display:flex;justify-content:center;}
.page_user_setting .popup_top {width:600px; margin-top:100px;}
.page_user_setting .popup_content {width:600px; height:500px; display:flex; flex-direction:row; justify-content:center;}
.page_user_setting .img_wrap {width:570px;}
.page_user_setting .user_company_wrap {width:100%; height:calc(100% - 70px);  border-left:1px solid rgba(99,99,99,0.2); overflow-y:auto; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;}
.page_user_setting .user_wrap {width:calc(100% - 20px); margin:10px; border:1px solid #ccc;}
.page_user_setting .user_wrap .caption {width:30px; height:100%; border-right:1px solid #ccc; font-size:14px; line-height:25px; text-align:center; color:#666; font-weight:bold; background-color:#eee;}
.page_user_setting .user_wrap .content_wrap {flex:1; padding:10px;}
.page_user_setting .user_wrap .content_wrap > div {width:100%; margin-top:10px; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.page_user_setting .user_wrap .content_wrap > div:first-child {margin-top:0;}
.page_user_setting .user_wrap .content_wrap .title {width:130px; color:#292F36; font-size:15px; letter-spacing:1px; display:flex; align-items:center; justify-content:flex-start;}
.page_user_setting .user_wrap .content_wrap .content {flex:1; display:flex; align-items:center; justify-content:flex-end;}
.page_user_setting .user_wrap .content_wrap .content input {width:calc(100% - 20px); height:calc(34px - 13px); padding:5px 10px 5px 10px; color:#292F36; font-size:16px; text-align:left; box-sizing:content-box; border:1px solid #ccc; border-radius:3px;}
.page_user_setting .user_wrap .content_wrap .content input::-webkit-input-placeholder {color:#ccc;}
.page_user_setting .user_wrap .content_wrap .content input:-moz-placeholder {color:#ccc;}
.page_user_setting .user_wrap .content_wrap .content select {width:100%; height:36px; border:1px solid #ddd; padding:5px 10px 8px 10px; color:#292F36; font-size:16px; background-color:white; border:1px solid #ccc; border-radius:3px;}
.page_user_setting .user_wrap .content_wrap .content select:focus {border:2px dotted #888; background-color:#51c5d2;}
.page_user_setting .company_wrap {width:calc(100% - 20px); margin:10px; border:1px solid #ccc;}
.page_user_setting .company_wrap.active {border:1px solid #ef7070;}
.page_user_setting .company_wrap .caption {width:30px; height:100%; border-right:1px solid #ccc; color:#aaa; font-size:14px; line-height:25px; text-align:center; color:#666; font-weight:bold; background-color:#eee;}
.page_user_setting .company_wrap.active .caption {color:#e62324; background:#fff6f6; border-right:1px solid #ef7070;}
.page_user_setting .company_wrap .content_wrap {flex:1;}
.page_user_setting .company_wrap .content_wrap > div {height:35px; border-bottom:1px solid #ccc; display:flex; flex-direction:row; align-items:center; justify-content:flex-start;}
.page_user_setting .company_wrap .content_wrap > div:last-child {border-bottom:0 !important;}
.page_user_setting .company_wrap.active .content_wrap > div {height:35px; border-bottom:1px solid #efc7c7;}
.page_user_setting .company_wrap .content_wrap > div > div:last-child {width:auto; flex:1;}
.page_user_setting .company_wrap .title {width:60px; height:100%; font-size:13px; color:#292F36; text-align:center; border-left:1px solid #ccc; border-right:1px solid #ccc; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.page_user_setting .content_wrap .title.vertical {width:25px; writing-mode:vertical-rl; text-orientation:upright;}
.page_user_setting .company_wrap .title:first-child {border-left:0 !important;}
.page_user_setting .company_wrap.active .title {color:#e62324; background-color:#fff6f6; border-left:1px solid #efc7c7; border-right:1px solid #efc7c7;}
.page_user_setting .company_wrap .content {width:calc(50% - 62px); height:100%; font-size:13px;}
.page_user_setting .company_wrap .content.full {width:calc(100% - 61px);}
.page_user_setting .company_wrap .content.name {width:250px;}
.page_user_setting .company_wrap .content input {width:calc(100% - 10px); height:100%; padding:0 5px; font-size:16px;}
.page_user_setting .company_wrap .content input[name='CompanyNO'] {font-size:18px; font-weight:bold; letter-spacing:1px;}
.page_user_setting .etc_wrap {width:calc(100% - 20px); margin:10px; border:1px solid #ccc;}
.page_user_setting .etc_wrap .caption {width:30px; height:100%; border-right:1px solid #ccc; font-size:14px; line-height:25px; text-align:center; color:#666; font-weight:bold; background-color:#eee;}
.page_user_setting .etc_wrap .content_wrap {flex:1; padding:10px;}
.page_user_setting .etc_wrap .content_wrap > div {width:100%; margin-top:10px; display:flex; flex-direction:row; align-items:center; justify-content:center;}
.page_user_setting .etc_wrap .content_wrap > div:first-child {margin-top:0;}
.page_user_setting .etc_wrap .content_wrap .title {width:130px; color:#292F36; font-size:15px; letter-spacing:1px; display:flex; align-items:center; justify-content:flex-start;}
.page_user_setting .etc_wrap .content_wrap .content {flex:1; display:flex; align-items:center; justify-content:flex-end;}
.page_user_setting .etc_wrap .content_wrap .content input {width:calc(100% - 20px); height:calc(34px - 13px); padding:5px 10px 5px 10px; color:#292F36; font-size:16px; text-align:left; border:1px solid #ccc; border-radius:3px;}
.page_user_setting .etc_wrap .content_wrap .content input::-webkit-input-placeholder {color:#ccc;}
.page_user_setting .etc_wrap .content_wrap .content input:-moz-placeholder {color:#ccc;}
.page_user_setting .etc_wrap .content_wrap .content select {width:100%; height:36px; border:1px solid #ddd; padding:5px 10px 8px 10px; color:#292F36; font-size:16px; background-color:white; border:1px solid #ccc; border-radius:3px;}
.page_user_setting .etc_wrap .content_wrap .content select:focus {border:2px dotted #888; background-color:#51c5d2;}
.page_user_setting .btn_wrap {width:calc(100% - 20px); height:60px; margin:0 10px; overflow:hidden; display:flex; flex-direction:row; align-items:center; justify-content:space-between; right:0; bottom:0; position:absolute;}
.page_user_setting .btn_wrap .btn_delete {width:calc((100% - 20px)/2); padding:10px 0; font-size:16px; letter-spacing:3px; background-color:white; color:#bbb; box-sizing:content-box; border:1px solid #bbb; border-radius:3px; overflow:hidden; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0.7; transition:opacity 0.3s, background 0.3s, color 0.3s, border 0.3s;}
.page_user_setting .btn_wrap .btn_delete:hover {background-color:#bbb; border-color:#bbb; color:white;}
.page_user_setting .btn_wrap .btn_update {width:calc((100% - 20px)/2); padding:10px 0; font-size:16px; letter-spacing:3px; background-color:white; color:#bbb; box-sizing:content-box; border:1px solid #bbb; border-radius:3px; overflow:hidden; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0.7; transition:opacity 0.3s, background 0.3s, color 0.3s, border 0.3s;}
.page_user_setting .btn_wrap .btn_update:hover {background-color:#51c5d2; border-color:#51c5d2; color:white; opacity:1;}
.page_user_setting .btn_wrap .btn_update:focus {padding:8px 0; background-color:#51c5d2; border:2px dotted #888; color:white; opacity:1;}

.box-radio-input input[type="radio"]{display:none;}
.box-radio-input input[type="radio"] + span{display:inline-block; background:none; border:1px solid #dfdfdf; padding:0px 10px; text-align:center; height:35px; line-height:33px; font-weight:500; cursor:pointer;}
.box-radio-input input[type="radio"]:checked + span{  border:1px solid #51c5d2; background:#51c5d2; color:#fff;}