/***** 공통 클래스 *****/
input[type=text],
input[type=email],
input[type=password],
select{display: block; width: 100%; height: 42px; padding: 10px; font-size: 0.95em; border: 1px solid #ddd; box-sizing: border-box}
.select{position: relative;display: inline-block; min-width: 80px }
select[disabled],
input[disabled] {background-color: #eee;}
textarea{width: 100%; height: 200px; border: 1px solid #ddd; resize: none}
.f:focus{outline: 0; border: 1px solid #38e0eb !important;}


/* 검색박스 */
.board_cmn .search_box{display: flex;justify-content: flex-end; align-items: center; margin-bottom: 1rem; }
.board_cmn .search_box > span{padding-right: 10px; font-weight: 600}
.board_cmn .search_box form{ width: 260px; position: relative;}
.board_cmn .search_box button{position: absolute; right: 10px; top: 50%;transform: translateY(-50%); background: none; border: none;}
.board_cmn .search_box button i{font-size: 1.5rem; color:#bbb;}
.board_cmn .search_box input::placeholder{color:#bbb;}
.board_cmn .sbj span{margin-right: 15px; display: inline-block;  padding: 6px 8px; color: #fff; font-size: 16px; background-color: #42c0af;}



/*버튼*/
.btn_wrap{padding-top: 30px; text-align: center}
.btn_wrap.right{text-align: right}
.btn_wrap.no_pd{padding-top: 0}
.btn{display: inline-block; min-width: 120px; padding:15px 20px; text-align: center; font-size: 0.95em; font-weight:600; background-color: #eee; cursor: pointer; border: 0; border: 1px solid #ddd;}
.btn.primary{background-color: #42c0af; border-color: #42c0af; color: #fff !important;}
.btn.primary.dark{background-color: #3b478b; border-color: #3b478b; color: #fff !important;}
.btn.outline.dark{background-color: #fff; border-color: #3b478b; color: #3b478b;}

/*
.btn.red{background-color: #e74545; color: #fff; border-color: #e74545;}
.btn.dark{background-color: #444; color: #fff;border-color: #444}
.btn.mini{min-width: inherit; padding:7px 10px; font-size: 16px; border-radius: 3px;}
.btn.darkblue{background-color: #4e5ca1; color: #fff;}
.btn.skyblue{background-color:#449db9; border-color: #449db9; color: #fff;}
.btn.outline{background-color: #fff;}
*/

@media only screen and (max-width:768px){
    .btn_wrap.right{text-align: center;}
    .btn{min-width: 100px;}
}

/* board_list */
.board_list ul.list{border-top: 2px solid #222}
.board_list .item{ padding: 20px; border-bottom: 1px solid #ddd;}
.board_list .item a{position: relative; display: flex; align-items: center; padding: 10px 0; color: #222}
.board_list .item .sbj{position: relative;width: 100%; padding: 0 60px; font-size: 1.1em; font-weight: 600}

.board_list .item .item_info{display: flex}
.board_list .item .item_info .u_name{padding-right: 40px;}
/*
.board_list .item .item_info:after{display: block; content: ""; clear: both}
*/
/*.board_list .item .item_info > div{float: left;}*/



/* big thumnail list */
#big_thum.board_list .list{border-bottom: 1px solid #ddd;}
#big_thum.board_list .list:after{display: block; content: ""; clear: both}
#big_thum.board_list .item{width: 33.33%; float: left; padding-bottom: 0; border-bottom: 0}
#big_thum.board_list .item a{flex-wrap: wrap; padding-top: 0}
#big_thum.board_list .thumnail{height: 0; padding-bottom: 70%; overflow: hidden; position: relative; width: 100%;}
#big_thum.board_list .thumnail img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);height:100%}
#big_thum.board_list .txt_box {width: 100%; height: 6.5em; padding:20px 10px 10px}
#big_thum.board_list .txt_box .sbj{display: block; max-height: 3em; line-height: 1.5;padding: 0; overflow: hidden;}
#big_thum.board_list .txt_box .date{padding-top: 10px;}


/* Q&A */
#qna .pw_input{display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(13,13,13,.5); }
#qna .pw_input .modal_header{display: flex; justify-content: space-between;align-items: center; margin-bottom: 15px;}
#qna .pw_input label{font-size: 1.1em; display: block; font-weight: 600;}
#qna .pw_input svg{ width: 35px;height: 35px; padding: 7px; cursor: pointer;}
#qna .pw_input form{width: 350px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px;border-radius: 10px; text-align: left;}

#qna .fa-lock{font-size: 0.85em; padding-left: 6px; color: #2be4f0;}
#qna .item_info{display: flex; flex-wrap: nowrap}
#qna .item_info .count{display: flex; padding-right: 40px;}
#qna .item_info .count span{display: inline-block; padding-left: 5px;}


/* board_view */
#board_view{}
#board_view .wrap > .inner{border-top: 2px solid #222;}
#board_view .sbj_box{padding:30px 20px; border-bottom: 1px solid #e6e6e6}
#board_view .sbj_box .sbj{display: flex; align-items: center; line-height: 1.3; color: #222; font-size: 30px; font-weight: 600;}
#board_view .sbj_box .sbj_info{display: flex; padding-top: 20px}
#board_view .sbj_box .sbj_info .u_name{padding-right: 20px;}
#board_view .sbj_box .sbj_info .date{color: #888;}
#board_view .con_box{min-height: 250px; line-height: 1.5; padding: 60px 20px}
/*#board_view .con_box > div:not(.file_box){min-height: 200px;}*/ /*게시판에 문단간의 높이 때문에 숨김처리*/
#board_view .con_box img{height: inherit !important;margin-bottom:10px}
#board_view .con_box strong{font-weight:bold}


/* 첨부파일 */
.board_cmn .attach{padding-bottom: 20px;}
.board_cmn .attach div{padding:15px 20px; background-color: #f2f3f8}


/* 이전글, 다음글 */
#board_view .prev-next-list{width:100%;border-top: 1px solid #222}
#board_view .prev-next-list ul li{position: relative; padding: 20px; border-bottom: 1px solid #ddd;}
#board_view .prev-next-list ul li .txt{position: absolute;left: 30px; color: #222;font-weight: 500}
#board_view .prev-next-list ul li .txt span{display: inline-block; padding-left: 10px;}
#board_view .prev-next-list ul li .list{padding-left: 130px}
#board_view .prev-next-list ul li div a{width: 100%; display:inline-block; color:#222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* #board .brick .btn{display: inline-block;min-width: 180px; color: #222; background-color: #fff; border: 1px solid #222;} */
#board_view .con_box .file_box{margin-top: 30px; padding: 15px 20px; background-color: #f5fcfb;}



/* 글쓰기 */
#write .wrap{max-width: 1200px; margin: 0 auto}
#write .form_list{ position: relative; margin-bottom: 10px;}
#write .form_list > label{position: absolute;left: 0; top: 11px; font-size: 1.1em;}
#write .form_list .f_box{width: 100%; padding-left: 200px; box-sizing: border-box}


    
#board-pagenation{width:100%; max-width:1200px; margin:30px auto; text-align:center;}
#board-pagenation a{position:relative; display:inline-block;width: 40px; line-height: 1; text-align: center; margin: 0 4px; padding: 11px 0; color:#555;border: 1px solid #e6e6e6;}
#board-pagenation a.on{font-weight:700; background-color: #222; color: #fff}
    
    
    
    
/* 비밀번호 */
#board .check-password{width:620px; background:#eee; margin:50px auto; border:1px solid #333; text-align:center;}
#board .check-password h3{background:#333; color:#fff; padding:20px; font-size:15px; font-weight:700;}
#board .check-password p{font-size:13px; color:#777; padding:25px 0 10px 0; line-height:20px;}
#board .check-password input[type="password"]{width:50%; border:1px solid #ccc; box-sizing:border-box; padding:7px; background:#fff;}
 



/* 댓글 */
.comment_area .wrap{padding-top: 0 !important}
.comment_area .cmt_list li{margin-bottom: 20px; padding: 30px; background-color: #f1feff; border-radius: 30px;}
.comment_area .cmt_list .cb{margin-bottom: 20px;  padding-bottom: 20px; border-bottom: 1px solid #c4e7e9;}
.comment_area .cmt_list .l_box{position: relative; float: left;}
.comment_area .cmt_list .r_box{float: right;}
.comment_area .cmt_list .r_box .btn_wrap{padding-top: 0}
.comment_area .cmt_list .user_info{display: flex; align-items: center;}
.comment_area .cmt_list .user_info > div{padding-left: 20px}
.comment_area .cmt_list .user_info .u_img{display: block;width: 70px; height: 70px; border-radius: 50%; overflow: hidden}
.comment_area .cmt_list .user_info .u_name{padding-bottom: 5px; font-size: 1.05em; font-weight: 600}
.comment_area .cmt_list .content{padding-left: 200px;}

.comment_area .cmt_form .user_info{position: relative;}
.comment_area .cmt_form .user_info .u_img{position: absolute; display: block;width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 1px solid #eee}
.comment_area .cmt_form .user_info .contents{padding-left: 80px;}


/***** 상담예약 *****/
.appoint .sub_tlt{position: absolute; top: 120px; left: 0;}
.appoint .con{padding-left: 500px}
.appoint li{position: relative;padding: 20px 30px; border-top: 1px solid #ddd;}
.appoint li:first-child{border-top: 4px solid #38e0eb}
.appoint li:last-child{border-bottom: 1px solid #ddd;}
.appoint li > label{position: absolute;left: 30px; top: 0;height: 100%; display: flex; align-items: center;}
.appoint li > label span{display: inline-block; padding-left: 5px;}
.appoint li .f_box{max-width: 580px; padding-left: 140px;}
.appoint li .f_box .f,
.appoint li .f_box select{background-color: #f0f0f0; border: 0; border-radius: 50px;}
.appoint li .f_box.num{display: flex;align-items: center;}
.appoint li .f_box.num span{display: inline-block; padding: 0 10px;}

.appoint .privacy{display: flex; align-items: center; padding: 10px 0}
.appoint .privacy > span{display: inline-block; padding-left: 10px; font-weight: 700; cursor: pointer;}

/* 개인정보보호법 모달 */
.bg{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.8); z-index: 1000}
.agree_info {display: none; position: fixed;top: 50%; left: 50%;max-width: 800px; background: #fff; border-radius: 20px; transform: translate(-50%,-50%); padding: 30px; z-index: 1001}
.agree_info .modal_tlt{display: flex; align-content: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #ddd;}
.agree_info .modal_tlt svg{width: 25px;height: 25px; padding: 5px; cursor: pointer}
.agree_info .modal_tlt h4{display: flex; align-items: center; font-weight: 600;}
.agree_info .modal_body{margin-top: 20px; line-height: 1.5;; font-size: 0.9em;}
.agree_info .modal_body > div{}




/*-----Qna-----*/
.sub_qnalist_top .sub_top {
    background-image: url('/assets/images/sub/sub_qnalist_top.png');
}


/*-----공지사항-----*/

.sub_notice_top .sub_top {
    background-image: url('/assets/images/sub/sub_notice_top.png');
}

/*-----상담후기-----*/

.sub_review_top .sub_top {
    background-image: url('/assets/images/sub/sub_review_top.png');
}