@charset "utf-8";
/* CSS Document */

#wrap {/* max-width:1100px; margin:0 auto; */ height:100%;}
#wrap::before {content:''; background:#fff; position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1;}

/* page_tit */
h3 {font-size:27px;}
h4 {font-size:20px; color:#161a24; margin-bottom:10px;}

/* sidebar ------------------------------- */
#sidebar {background:#f3f3f3; /* box-shadow:0px 4px 12px rgba(0,0,0,0.07); */ width:250px; height:100%; margin-top:-57px; padding-top:57px; position:absolute; overflow:auto; box-sizing:border-box;}

#container {height:100%; margin-left:250px; margin-top:-57px; padding:90px 40px 57px; box-sizing:border-box; overflow:auto;}
#content {margin-top:2em;}
section, .section {margin-top:40px;}
section:first-child, .section:first-child, .search_box + section {margin-top:0;}

.cmtxt {background:none; border:0; font-size:15px; position:relative; padding:0 0 0 13px; margin:5px 0;}
.cmtxt::before {content:'※'; position:absolute; top:0; left:0;}
.emtxt {color:#e63312;}
.info_txt {position:relative; padding-left:22px; margin:10px 0; font-size:12px; color:#dc3545; text-align:left;}
.info_txt::before {background-position:-70px -50px; width:18px; height:18px; position:absolute; top:1px; left:0;}

/* tabs */
.tabs > ul {display:flex; margin:0 -3px;}
.tabs li {flex:1; padding:3px; box-sizing:border-box;}
.tabs button {display:block; background:#eee; border:1px solid #c4c4c4; border-radius:3px; color:#465171; font-size:16px; font-weight:600; height:42px; width:100%; padding:0 5px; text-align:center;}
.tabs button.active {background:#13a4cc; border-color:transparent; color:#fff;}

.tit_group {border-bottom:1px solid #333; display:flex; align-items:center;}
.tit_group h4 {flex:1;}
.tit_group .chktoggle {justify-content: center;}
.input_con {border-top:1px solid #333;}
.input_con dl {border-bottom:1px solid #e5e5e5; font-size:16px; position:relative; padding:12px 10px; display: flex; align-items: center;}
.input_con dl dt {color:#111; font-weight:600; display: flex; align-items: center; width:130px;}
.input_con dl dd {flex:1;}
.input_con dl dd .wr_con textarea {height:300px;}
.input_con dl.dates dt {width:170px;}
.img_list > ul {display:flex; flex-flow: row wrap; margin:20px -1% 0;}
.img_list > ul > li {width:18%; margin:1%; position:relative;}
.img_list > ul > li .upload_btn {position:absolute; top:0; left:0; background:rgba(0,0,0,0.25); border:0; color:#fff; font-size:36px; width:100%; height:100%;}
/* 이미지 높이값 조정 */
.thumb_wrap {display:block; position:relative; overflow:hidden;}
.thumb_wrap::after {content:''; display:block; padding-bottom:75%;}
.thumb_wrap > img {display:block; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}

/* 반배치 */
.arrange {display:flex; align-items: center;}
.arrange select {border-color:#ccc; color:#111; font-size:16px; margin-bottom:10px;}
.arrange > div {width:calc(50% - 35px);}
.arrange > div.btn_func {width:70px; text-align:center;}
.arrange .list {position:relative; border:1px solid #ccc; height:500px; overflow:auto;}
.arrange .list li {padding:0 10px; position:relative;}
.arrange .list li + li {border-top:1px solid #ccc;}
.arrange .list li label {display:block; font-size:16px; padding:10px 5px; padding-left:35px;}
.arrange .list li input[type="checkbox"] {position:absolute; top:12px; left:15px; width:20px; height:20px;}
.arrange .list li input:checked + label {}
.arrange button {display:inline-block; background:#F45050; border:0; color:#fff; width:40px; height:40px; margin:5px 0; padding:0; text-align:center; transition:all 0.2s;}
.arrange button:hover {background:#3C486B;}
.arrange button > span::after {content:''; display:block; font-size:24px; font-family: 'Material Icons'; -webkit-font-feature-settings: 'liga';}
.arrange button.ban_right > span::after {content:'\e5c8';}
.arrange button.ban_left > span::after {content:'\e5c4';}

/* list */
.prd_list {max-width:1400px; margin:-2.5em -1% 0 -1%; display:flex; flex-wrap:wrap;}
.prd_list + .prd_list {margin-top:2em;}
.prd_list > li {width:18%; margin:2.5em 1% 0 1%; font-size:18px;}
.prd_list a {display:block;}
.prd_list .imgs {border:1px solid #ededed; position:relative; overflow:hidden;}
.prd_list .img_thumb {display:block; position:relative; width:100%; padding-top:140%; background-image:url(../images/no_img.gif); background-repeat:no-repeat; background-position:50%; background-size:cover; transition:all .2s linear; transform:scale(1);}
.prd_list a:hover .img_thumb {transform:scale(1.1);}
.prd_list .info {margin-top:10px;}
.prd_list .info dl {display:flex; align-items:center;}
.prd_list .info dl + dl {margin-top:10px;}
.prd_list .info dt {font-size:14px; width:35px; margin-right:5px;}
.prd_list .info dd {width:calc(100% - 40px);}
.prd_list .info dd input {background:#fff; border-color:#cacaca; height:30px;}
.set_tag {background:#ea742d; color:#fff; font-size:14px; width:40px; height:40px; text-align:center; position:absolute; top:0; left:0; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}

/* 증가감소 */
.count_wrap {background:#fff; border:1px solid #cacaca; width:100%; padding:0 30px; position:relative; box-sizing:border-box;}
.count_wrap .bt_count {width:25px; height:100%; background:#fff; border:0; padding:0; position:absolute; top:0; cursor:pointer;}
.count_wrap .bt_count.countup {right:0; border-left:1px solid #cacaca;}
.count_wrap .bt_count.countdown {left:0; border-right:1px solid #cacaca;}
.count_wrap .countupdown {display:block; font-size:14px; font-weight:700; height:28px; line-height:26px; overflow:hidden; white-space:nowrap; margin:0 auto; text-align:center;}
/* 주문금액 */
.opt_wrap {border-top:1px solid #cbcbcb; padding-top:1em; margin-top:4em; display:flex;}
.opt_wrap > div {flex:1;}
.total_price > span {display:block; color:#111; font-size:15px; font-weight:700;}
.total_price > div {color:#ff3737;}
.total_price > div strong {font-size:30px;}

/* 테이블 스타일 ------------------------------- */
.tb, h4 + .scroll_in {margin-top:15px;}
.tb {width:100%; border:1px solid #e4e9eb; border-top:1px solid #454545; table-layout:fixed;}
.tb:first-child {margin-top:0;}
.tb th, .tb td {border-bottom:1px solid #e4e9eb; padding:12px 5px; box-sizing:border-box;}
.tb th {color:#555; font-weight:600;}

.tb_col {border:0;}
.tb_col tr {position:relative;}
.tb_col td {text-align:center;}
.tb_col thead th {background:#8897aa; border:0; color:#fff; text-align:center;}
.tb_col tbody tr {background:#fff;}
.tb_col tbody a:hover {text-decoration:underline;}
.tb_col tbody tr:nth-child(even) {background:#f9fafc;}
.tb_col tfoot th, .tb_col tfoot td {background:rgba(88,106,125,0.4); color:#fff;}
.tb_col .no_data_msg {padding:50px 0;} /* 게시글이 없을때 */
.data_tb {border:1px solid rgba(0,0,0,0.15);}
.data_tb th, .data_tb td {padding:7px 5px; border:1px solid rgba(0,0,0,0.15) !important;}
.data_tb thead th {background:#f6f8f9; color:#111; font-size:13px;}
.cut_string {display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tb_col .tr_link {position:absolute; top:0; left:0; width:100%; height:100%;}
.tb_col .tr_link:hover {background:rgba(0,0,0,0.02);}
.tb_col .del_btn {position:relative; top:0; right:0;}
.tb_col input[type="checkbox"] {width:17px; height:17px;}
.no_data_msg {width:100% !important; text-align:center; padding:20px; margin-left:0 !important;} /* 게시글 없을때 */

.scroll_in {display:block; max-width:100%; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;}
.scroll_in table {table-layout:inherit;}
.scroll_in .tb th, .scroll_in .tb td {padding-left:10px; padding-right:10px;}
.scroll_in .bon {max-width:100%; min-width:200px; white-space:normal;}

.tb_row {border:0;}
.tb_row th, .tb_row td {border-left:0; padding:7px 12px; height:45px;}
.tb_row th {background:#8897aa; border-color:#7b8a9e; color:#fff; text-align:left;}
.tb_row td {background:#fff; height:40px;}
.tb_row tr:first-child td {border-top:1px solid #e4e9eb;}
.tb_row .btns {height:32px; line-height:30px; vertical-align:top;}
.tb_row .btns.primary {border-color:#586a7d; color:#586a7d;}
.viewcon {min-height:100px;}
.viewcon img {max-width:100%; height:auto !important;}

/* 유튜브를 소스로 하는 iframe이 있다면 youtubeWrap을 클래스 값을 가지는 div로 */
.youtubeWrap {position:relative; max-width:1080px; padding-bottom:52.25%;}
.youtubeWrap iframe {position:absolute; width:100%; height:100%;}

/* 게시글정보 */
.add_info > span {position:relative; display:inline-block; padding:0 10px; color:#999;}
.add_info > span:first-child {padding-left:0;}
.add_info > span i {position:relative; display:inline-block; margin-right:3px;}
/* 첨부파일 다운로드 */
.file_down {border:1px solid #e0e0e0; border-radius:5px; overflow:hidden;}
.file_down > strong {display:block; border-bottom:1px solid #e0e0e0; color:#333; font-size:13px; font-weight:400; padding:7px 10px;}
.file_down .cont {background:#f9f9f9; padding:4px 0;}
.file_down .cont > a {display:block; padding:4px 10px; padding-left:40px; min-height:23px; font-size:13px; position:relative;}
.file_down .cont > a > span {display:flex; align-items:center; justify-content:center; background:#aaa; color:#fff; width:23px; height:23px; border-radius:100%; position:absolute; top:3px; left:10px; text-align:center;}

.work {margin-top:0;}
.selwrap {display:flex; align-items:center;}
.selwrap select {width:100%;}
.selwrap select + select {margin-left:3px;}
.selwrap .hyphen {width:30px; text-align:center;}
.part {display:flex; align-items:center;}
.part + .part {margin-top:0.5em;}
.part > span {width:65px;}
.part > div {flex:1;}
#examset.popLayer {max-width:1000px;}
.popLayer .input_con dl dt {font-size:14px;}
#examset .input_con dl dt {width:90px;}
/* bbs_calendar */
#calendar_box {position:relative;}
.calendar_year_box {display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.calendar_year_box button {cursor:pointer; background:none; border:0; border-radius:0; color:#aaa; font-size:36px; width:40px; padding:0; position:relative;}
.calendar_year_box .years {font-size:24px; line-height:1.2; color:#111; font-family:Arial, Helvetica, sans-serif; font-weight:bold; margin:0 10px;}
#calendar_box .month_list {overflow:hidden; text-align:center; margin:15px 0;}
#calendar_box .month_list button, #calendar_box .calendar_wrap .weekdays, #calendar_box .calendar_wrap > ul.days > li .date {font-size:15px;}
#calendar_box .month_list button {cursor:pointer; border:1px solid #2a2b2b; border-radius:2px; background:#fff; font-family:Arial, Helvetica, sans-serif; font-weight:bold; width:32px; height:32px; line-height:32px; text-align:center; padding:0; margin-left:4px;}
#calendar_box .month_list button.current {border-color:#135fae; color:#135fae;}
#calendar_box .calendar_wrap {border:1px solid #c9c9c9; border-top:2px solid #6f8294;}
#calendar_box .calendar_wrap > ul {display:table; table-layout:fixed; width:100%; border-top:1px solid #c9c9c9;}
#calendar_box .calendar_wrap > ul > li {display:table-cell; width:14.285714%; border-left:1px solid #c9c9c9; position:relative;}
#calendar_box .calendar_wrap > ul > li:first-child {border-left:0;}
#calendar_box .calendar_wrap .weekdays {text-align:center; border-top:0; background:#6f8294; font-size:14px; color:#fff;}
#calendar_box .calendar_wrap .weekdays > li {padding:5px 0; border-color:rgba(255,255,255,0.2);}
#calendar_box .calendar_wrap > ul.days > li {height:90px;}
#calendar_box .calendar_wrap > ul.days > li .date {border-bottom:1px dashed #c9c9c9; font-size:14px; padding:2px 5px; text-align:right;}
#calendar_box .calendar_wrap > ul.days > li .date a {padding:0 5px;}
#calendar_box .calendar_wrap > ul.days > li:first-child .date {color:#c00;}
#calendar_box .calendar_wrap > ul.days > li:nth-child(7) .date {color:#135fae;}
#calendar_box .calendar_wrap > ul.days > li .cont {padding:8px 5px;}
#calendar_box .calendar_wrap > ul.days > li .cont button {background:#709efb; border:0; color:#fff; font-size:12px; letter-spacing:-0.2px; padding:2px; display:block; width:100%;}
#calendar_box .calendar_wrap > ul.days > li .cont button + button {margin-top:5px;}
#calendar_box .calendar_wrap > ul.days > li.other-month {background:#f5f5f5;}
#calendar_box .calendar_wrap > ul.days > li .cont .itemb {background:#60dbba;}
#calendar_box .calendar_wrap > ul.days > li .cont .itemc {background:#da5ad6;}
#calendar_box .calendar_wrap > ul.days > li.wk_all {background:#eff9ff;}
#calendar_box .calendar_wrap > ul.days > li.wk_ing {background:#fff9e7;}
#calendar_box .calendar_wrap > ul.days > li.wk_none {background:#fff1f8;}

/* table-scroll */
.scroll_btn {margin-bottom:10px; text-align:right;}
.table-scroll {position:relative; margin:auto; overflow:hidden; border:1px solid #000;}
.table-wrap {width:100%; overflow:auto;}
.table-scroll table {width:100%; margin:auto;}
.table-scroll th, .table-scroll td {padding:5px 8px; border:1px solid #000; background:#fff; white-space:nowrap; text-align:center;}
.table-scroll .wrap {min-width:100px; white-space:normal;}
.clone {position:absolute; top:0; left:0; pointer-events:none;}
.clone th, .clone td {border-color:transparent; visibility:hidden;}
.clone thead, .clone tfoot {background:transparent;}
.clone tbody th {visibility:visible;}
.clone .fixed-side {border:1px solid #000; background:#eee; visibility:visible; pointer-events:auto;}
.scroll_tb_top {display:flex;}
.scroll_tb_top .colorbox {width:calc(100% - 90px); padding-right:10px;}
.scroll_tb_top .eduper {width:120px; text-align:right;}
.eduper {color:#111; font-size:18px; font-weight:600;}
td .status {margin:0 auto;}
.status {display:flex; align-items:center; justify-content:center; border-color:transparent; color:#fff; font-size:12px; width:22px; height:22px; padding:0;}
.status.t01 {background:#237fd5;}
.status.t02 {background:#de941f;}
.status.t03 {background:#d42f22;}
.status.t04 {color:#d34141; font-weight:bold;}

.toggleopt {position:relative;}
.viewmore {background:#fff; box-shadow:0px 2px 12px rgba(0,0,0,0.2); padding:35px 1.5em 1em; margin-top:40px; position:absolute; z-index:1; display:none;}
.viewmore .radios {display:block;}
.viewmore.on {display:block;}
.toggle_close {background:none; border:0; position:absolute; top:0; right:0;}

/* search */
h4 + .search_box {margin-top:10px;}
.search_box:first-child {margin-top:0;}
.search_box.v2 {background:none; border:0; padding:0; max-width:360px;}
.search_box.v2 select:focus {box-shadow:none;}
.search_box {background:#d8e2ec; border:1px solid #c5d4e2; padding:10px; margin:25px 0; text-align:center;}
.search_box .bt_search {background:#586a7d; border:0; color:#fff; font-weight:bold; min-width:50px; line-height:34px; vertical-align:top;}
.search_box input[type="text"], .search_box input[type="number"], .search_box input[type="date"], .search_box input[type="month"], .search_box select, .search_box button {height:35px; margin:3px 2px;}
.search_box input[type="text"], .search_box input[type="number"], .search_box input[type="date"], .search_box input[type="month"], .search_box select {padding:0 5px; background:#fff; border:0; border-radius:0;}
.search_box input#sDate {margin-right:3px !important;}
.sch_group {display:flex; flex-wrap:wrap; text-align:left;}

/* paging ------------------------------- */
.paging * {box-sizing:border-box;}
.paging {text-align:center; margin:30px 0 0;}
.paging > ul > li {display:inline-block;}
.paging > ul > li > a > span, .paging > ul > li > span > a {background:none; border:0; width:28px; height:28px; line-height:210%;}
.paging a, .paging span, .paging button {display:inline-block; width:30px; height:30px; line-height:250%; background-color:transparent; border:0; color:#999; font-size:12px; cursor:pointer;}
.paging a:hover {color:#333;}
.paging .on, .paging .on:hover {background:#666; border-color:transparent; border-radius:4px; color:#fff; cursor:inherit;}
.paging .count_num {width:auto; margin:0 10px;}
.paging .page_bt {width:24px; text-indent:-9999px; position:relative;}
.paging .page_bt::after {background-position:-15px -20px; width:6px; height:11px; position:absolute; top:50%; left:50%; margin:-5px 0 0 -3px;}
.paging .first::after {background-position:0 -20px; width:12px; margin-left:-6px;}
.paging .next::after {background-position:-25px -20px;}
.paging .last::after {background-position:-34px -20px; width:12px; margin-left:-6px;}
.paging .prev, .paging .last {margin-left:-1px;}

/* 필수입력표시 */
.es {display:inline-block; background-position:-50px -21px; width:7px; height:7px; margin-left:3px; vertical-align:middle; position:relative; top:-2px; text-indent:-9999px;}

/* input 정의 */
input[type="text"], input[type="password"], input[type="button"], input[type="image"], input[type="submit"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="tel"], input[type="date"], input[type="month"], select {width:100%; height:40px; border-radius:3px; padding:0 8px; margin-bottom:2px; font-size:14px; color:#999; box-sizing:border-box;}
input[type="checkbox"], input[type="radio"] {width:auto;}
select {padding:0 0 0 5px;}
textarea {border-radius:3px; padding:7px 8px; font-size:14px;}
input[readonly], select[readonly], textarea[readonly], .readonly, input[disabled], select[disabled], textarea[disabled], .disabled {background:#f4f4f4;} /* 입력불가 */
.input_tel, .email_in, .birth_in {overflow:hidden;}
.input_tel > span {display:block; float:left; width:32%; margin-left:2%;}
.input_tel > span:first-child {width:32%; margin-left:0;}
.email_in {overflow:hidden; max-width:700px;}
.email_in > span {display:block; float:left; width:32%;}
.email_in > span:first-child {width:25%;}
.email_in > span.txt {width:6%; text-align:center; padding-top:7px;}
.email_in > span.email_domain {width:36%; margin-left:1%;}
.addr_in p {margin-top:5px;}
.addr_in input[readonly] {background:#fff;}
.addr_post {max-width:300px;}
.addr_post.add_in {padding-right:105px;}
.addr_post.add_in .btns {width:100px;}
.add_in {position:relative; padding-right:90px;}
.add_in .btns {position:absolute; top:0; right:0; width:85px; padding:0 5px; height:40px; line-height:40px; border-radius:3px;}
/* checkbox */
.chkbox > span {position:relative; padding-left:25px; display:inline-block; min-width:25px; margin-right:3px; font-size:14px;}
.chkbox input[type="checkbox"], .chkbox i {position:absolute; top:2px; left:0px; width:16px; height:16px;}
.chkbox input[type="checkbox"] {width:18px; height:18px; opacity:0; cursor:pointer; z-index:1;}
.chkbox i {display:inline-block; background:#fff; border:1px solid #ddd; border-radius:2px;}
.chkbox input:checked+i {}
.chkbox input:checked+i::before {content:''; background:#4876f0; width:8px; height:8px; position:absolute; top:50%; left:50%; margin:-4px 0 0 -4px;}
/* radio */
.radio_group {overflow:hidden;}
.radio_group.v2 .radios {display:block;}
.radios {position:relative; display:inline-block; margin-right:15px;}
.radios input[type=radio] {position:absolute; overflow:hidden; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0);}
.radios label {display:block; position:relative; color:#bbb; padding:0px; padding-left:23px; line-height:25px; z-index:2; cursor:pointer; -webkit-transition:all 0.25s linear;}
.radios .check {display:block; position:absolute; background:#fff; border:1px solid #ddd; border-radius:100%; width:16px; height:16px; top:4px; left:0px; z-index:1; transition:border .25s linear; -webkit-transition:border .25s linear;}
.radios .check::before {content:''; display:block; position:absolute; border-radius:100%; width:8px; height:8px; top:4px; left:4px; margin:auto; transition:background 0.25s linear; -webkit-transition:background 0.25s linear;}
.radios input[type=radio]:checked ~ .check {border-color:#4876f0;}
.radios input[type=radio]:checked ~ .check::before {background:#4876f0;}
.radios input[type=radio]:checked ~ label {color:#333;}
.radios.readonly {background:none;}
.radios.readonly input[type=radio]:checked ~ .check {border-color:#ccc;}
.radios.readonly input[type=radio]:checked ~ .check::before {background:#ccc;}
/* radio 버튼타입 */
.type_chk {overflow:hidden; display:flex; margin:0 -2px;}
.type_chk > span {position:relative; margin:2px; flex:1;}
.type_chk > span input[type=radio], .type_chk > span input[type=checkbox] {position:absolute; overflow:hidden; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0);}
.type_chk > span label {display:block; position:relative; height:43px; line-height:43px; background:#fff; border:1px solid #ddd; padding:0 5px; margin-bottom:0; border-radius:3px; box-sizing:border-box; text-align:center; cursor:pointer;}
.type_chk > span input[type=radio]:checked + label, .type_chk > span input[type=checkbox]:checked + label {background:#586a7d; border-color:transparent; color:#fff;}
/* 토글타입 */
.chktoggle {position:relative; display:inline-block; margin-bottom:10px;}
.chktoggle input[type=checkbox] {position:absolute; left:0; width:100%; height:100%; visibility:hidden;}
.chktoggle label {display:block; position:relative; height:40px; line-height:40px; font-size:15px; background:#f3f3f3; border:1px solid #ddd; padding:0 15px; min-width:95px; margin-bottom:0; border-radius:50px; box-sizing:border-box; text-align:right; cursor:pointer;}
.chktoggle label::before {content:''; display:block; background:#fff; border-radius:100%; width:28px; height:28px; position:absolute; top:50%; left:7px; margin-top:-14px; transition:all 0.2s ease;}
.chktoggle input[type=checkbox]:checked + label {background:#61ccd3; border-color:transparent; color:#fff; text-align:left;}
.chktoggle input[type=checkbox]:checked + label::before {transform:translateX(52px);}
.toggle01 label::after {content:'미사용';}
.toggle01 input[type=checkbox]:checked + label::after {content:'사용';}
.toggle02 label::after {content:'정지';}
.toggle02 input[type=checkbox]:checked + label::after {content:'진행';}
/* 첨부파일 스타일 */
.file_input {margin:2px 0; overflow:hidden; position:relative; padding-right:90px; max-width:800px; box-sizing:border-box;}
.file_input label {vertical-align:middle; position:absolute; top:0; right:0; cursor:pointer; border-radius:3px; display:inline-block; overflow:hidden; width:85px; height:40px; line-height:40px; background:#aaa; color:#fff; text-align:center; box-sizing:border-box;}
.file_input label input {position:absolute; width:0; height:0; overflow:hidden; padding:0; border:0;}
.file_input input[type=text] {color:#737070; background:#fff; border:1px solid #ccc;}
/* 첨부파일 미리보기 */
.file_preview {display:flex; align-items: center;}
.file_preview .imgs {background:url(../images/no_img.gif) 0 0 no-repeat; border:1px solid #ddd; width:80px; margin-right:20px; position:relative;}
.file_preview .file_input {width:calc(100% - 100px);}
/* 달력 */
.calgroup {overflow:hidden;}
.calgroup > span {float:left;}
.calgroup .hyphen {width:4%; line-height:28px; text-align:center;}
.calgroup.one > span {float:none; width:100%;}
.calgroup.date_select {position:relative; padding-right:45px; box-sizing:border-box;}
.calgroup.date_select .bt_search {background:#fff; border:1px solid #4876f0; padding:0; color:#4876f0; width:40px; line-height:32px; border-radius:3px; position:absolute; bottom:2px; right:0; vertical-align:top;}
.date_select.keywordwr {max-width:480px;}
.date_select.keywordwr .kwordinput {width:34%; margin-left:2%;}
.date_select.keywordwr .icon_cal {width:30%; max-width:none;}
.icon_cal {display:inline-block; position:relative; width:48%; max-width:120px; box-sizing:border-box;}
.icon_cal input[type="text"] {background:#fff; width:100%; height:35px; padding-right:30px;}
.icon_cal img {max-width:27px; cursor:pointer; position:absolute; top:50%; right:5px; margin-top:-12px;}
.caldate_wrap {overflow:hidden;}
.caldate_wrap > div {float:left; width:46%;}
.caldate_wrap > div + div {width:25%; margin-left:2%;}
.caldate_wrap .icon_cal {max-width:none;}
/* input_txt */
.input_txt {position:relative;}
.input_txt input {padding-right:30px;}
.input_txt .txt {position:absolute; top:50%; right:10px; margin-top:-10px; color:#999;}
/* 달력레이어 */
.ui-widget-content {z-index:10 !important;}

/* placeholder style (placeholder는 ie10 이상에서만 적용) */
input::-webkit-input-placeholder {color:#aaa; font-weight:300;}/* Webkit */
input:-moz-input-placeholder {color:#aaa; font-weight:300;}/* moz */
input:-ms-input-placeholder {color:#aaa; font-weight:300;}/* IE10+ */
textarea::-webkit-input-placeholder {color:#aaa; font-weight:300;}
textarea:-moz-input-placeholder {color:#aaa; font-weight:300;}
textarea:-ms-input-placeholder {color:#aaa; font-weight:300;}

/* 버튼 기본 스타일 ------------------------------- */
.btns {display:inline-block; padding:0 8px; height:25px; line-height:24px; font-size:14px; text-align:center; vertical-align:middle; border-radius:3px; border:1px solid transparent; overflow:hidden; white-space:nowrap;}
.btns:hover, .btns:focus {opacity:0.9;}

/* 버튼 그룹 */
.btn_set {display:flex; flex-wrap:wrap; justify-content:center; text-align:center; margin:20px 0 0;}
.btn_set.tl {justify-content:flex-start;}
.btn_set.tr {justify-content:flex-end;}
.btn_set button {margin:2px;}

.btns.primary {background:linear-gradient(to bottom, #fff, #f0f0f0); border-color:#b8b8b8; border-top-color:#ddd; border-left-color:#ddd; box-shadow: 1px 1px 0 rgba(0,0,0,0.07); border-radius:3px; color:#666; font-size:13px;}

.btn_mid {height:38px; line-height:36px; padding:0 1em;}

/* 스타일 */
.btn_st {background:#359ddc; color:#fff;}
.btn_st1 {background:#dc3545; color:#fff;}
.btn_st2 {background:#b4b4b4; color:#fff;} /* 그레이 */
.btn_st3 {background:#74b816; color:#fff;} /* 그린 */
.btn_st4 {background:#375a7f; color:#fff;} /* 네이비 */

.btn_bdr {background:#fff; border:1px solid #359ddc; color:#359ddc;}
.btn_bdr1 {background:#fff; border:1px solid #dc3545; color:#dc3545;}
.btn_bdr2 {background:#fff; border:1px solid #b4b4b4; color:#666;} /* 그레이 */
.btn_bdr3 {background:#fff; border:1px solid #74b816; color:#74b816;} /* 그린 */
.btn_bdr4 {background:#fff; border:1px solid #375a7f; color:#375a7f;} /* 네이비 */

.add_btn {background:#aaa; border-color:transparent; color:#fff; padding:0 5px;}
.del_btn {background:#fff; border:0; border-radius:100%; color:#aaa; font-size:24px; width:24px; height:24px; padding:0; position:absolute; top:-10px; right:-12px; z-index:1;}
.del_btn > i {display:inline-block; text-indent:-9999px;}

.icons {position:relative; display:inline-block;}

/* popup ------------------------------- */
#pop_wrap h2 {background:#49b5dc; padding:10px 15px; color:#fff; font-size:16px; font-weight:bold;}
#pop_wrap .close_btns {position:absolute; top:10px; right:5px;}
#pop_wrap .close_btns button {background-color:transparent; border:0; padding:0; width:24px; height:24px; text-indent:-9999px;}
#pop_wrap .close_btns button::after {background-position:-186px -20px; width:14px; height:14px; position:absolute; top:50%; left:0; right:0; margin:-7px auto 0; text-align:center;}
#pop_wrap .pop_con {padding:20px;}
.agree_con textarea {height:390px; background:#fff; border:0; color:#777; padding:0; font-size:14px; overflow-x:hidden;}
.agree_con textarea:focus {box-shadow:none;}
.agree_con.v2 textarea {height:340px;}

/* 레이어팝업 */
.pop_close {display:flex; align-items: center; justify-content: center; background-color:transparent; border:0; color:#555; font-size:24px; width:25px; height:25px; padding:0; position:absolute; top:11px; right:10px;}
.overlay_t {position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%; overflow:auto; padding:15px; box-sizing:border-box; background-color:rgba(0,0,0,0.6); text-align:center; z-index:99;}
.overlay_t:before {content:""; display:inline-block; height:100%; vertical-align:middle;}
.popLayer {vertical-align:middle; position:relative; z-index:100; width:100%; max-width:720px; margin:0 auto; letter-spacing:0; background:#fff; overflow:hidden; box-shadow:0px 1px 7px rgba(0,0,0,0.4); display:none;}
.popLayer h3 {background:#f4f4f4; border-bottom:1px solid #e5e5e5; color:#111; font-size:18px; padding:12px 35px 12px 15px; line-height:1.3; text-align:left;}
.popLayer h3 em {color:#888;}
.popLayer h4 {font-size:20px;}
.popLayer em {font-style:normal;}
.popLayer .pop_container {padding:30px 5%; max-height:700px; overflow:auto; text-align:left;}
.maxw {max-width:1000px;}
.popmsg {border-radius:15px; max-width:380px;}
.popmsg .pop_container {color:#000; font-size:20px; font-weight:500; padding-top:60px; text-align:center;}
.popmsg .pop_container .imgs {margin-bottom:15px;}
.popmsg .pop_container .imgs img {max-height:70px;}
.popmsg .pop_container .imgs .material-icons, .popmsg .pop_container .imgs .material-icons-outlined {color:#e52f42; font-size:60px;}

@media screen and (min-width:1281px) {
/* list */
.prd_list.set > li.set_item {padding-right:10%;}

.work {display:flex; margin:0 -1%;}
.work > div  {flex: 0 0 44%; max-width: 44%; padding: 0 1%; box-sizing:border-box;}
.work > div#calendar_box {flex: 0 0 56%; max-width: 56%;}
.calendar_year_box {max-width: 55%;}

.scroll_btn {display:none;}
}

@media screen and (min-width:981px) {
header {height:67px;}
header h1 {font-size:24px;}
#container {margin-top:-67px; padding:100px 40px 57px;}
#sidebar {margin-top:-67px; padding-top:67px;}
#sidebar::before {content:''; background:#22345e; width:100%; height:50px; position:absolute; top:57px; left:0;}
#sidebar::after {content:''; background:#ddd; width:1px; height:100%; position:absolute; top:0; right:0;}
.user_info {border-top-left-radius:45px;}

.sch_group input, .sch_group select {}
}

@media screen and (min-width:769px) {
.trgroup {display:flex;}
.trgroup > dl {width:49%;}
.trgroup > dl + dl {padding-left:2%;}

.search_box input[type="text"], .search_box input[type="number"], .search_box input[type="date"], .search_box input[type="month"], .search_box select {}
.sch_group {max-width:600px;}
.sch_group.maxno {max-width:none;}
.sch_group > div {display:flex; flex:1; min-width:300px; vertical-align:top;}
.sch_group .btn_group {justify-content:flex-end;}

.colorbox {display:flex; flex-wrap:wrap; margin:0 -10px 15px;}
.colorbox > li {display:flex; align-items:center; padding:3px 10px; box-sizing:border-box;}
.colorbox > li span {width:calc(100% - 23px)}
.colorbox > li .status {width:15px; height:15px; margin-right:8px;}
}

@media screen and (min-width: 769px) and (max-width: 1280px) {
/* list */
.prd_list > li, .prd_list.set > li.set_item .imgs, .prd_list.set > li.set_item .info {width:31.33%;}
.prd_list.set > li.set_item {width:100%;}
}

@media screen and (max-width:1280px) {
/* bbs_calendar */
.calendar_year_box {justify-content:center;}
.work > div + div {margin-top:2em;}
}

@media screen and (max-width:980px) {
h3 {font-size:23px;}

/* sidebar ------------------------------- */
#container::after, .navbar::before, .menu_toggle {display:none;}
#sidebar {background:none; width:100%; height:auto; margin-top:0; padding-top:0; position:inherit;}
#container {margin-left:0; padding:80px 20px 50px;}

/* 레이어팝업 */
.popLayer .pop_container {max-height:420px;}
}

@media screen and (max-width:768px) {
/* list */
.prd_list {margin-left:-2%; margin-right:-2%;}
.prd_list > li {width:46%; margin-left:2%; margin-right:2%; font-size:15px;}
.prd_list.set > li.set_item {width:100%;}
.prd_list.set > li.set_item .imgs, .prd_list.set > li.set_item .info {width:46%;}
/* 주문금액 */
.opt_wrap {flex-wrap:wrap;}
.opt_wrap > div {flex: 1 0 100%; max-width: 100%;}

/* search */
.sch_group, .sch_group > div {display:flex;}
.sch_group {flex-wrap:wrap;}
.sch_group > div {width:100%;}
.sch_group > div + div {margin-top:2px;}
.se1 .dates {display:flex; min-width:120px; width:50%; margin-top:2px;}
.sch_group .btn_group {margin-left:0; justify-content: flex-end;}

.input_con dl {font-size:15px; flex-wrap:wrap;}
.input_con dl dt, .input_con dl dd {flex: 1 0 100%; max-width: 100%;}
.input_con dl dt {margin-bottom:10px;}

.colorbox {display:none;}
.colorbox > li {width:50%; margin:2px 0; font-size:12px; align-items:flex-start;}
.colorbox > li .status {margin-top:1px;}

.tb th, .tb td {font-size:13px;}
}

@media screen and (max-width:640px) {
/* tabs */
.tabs > ul {flex-wrap:wrap;}
.tabs li {flex: 1 0 25%; width:25%;}
.tabs button {font-size:15px;}

/* 반배치 */
.arrange {flex-wrap:wrap;}
.arrange > div {width:100%;}
.arrange > div.btn_func {width:100%; margin:15px 0;}
.arrange .list {height:300px;}
.arrange button.ban_right > span::after {content:'\e5d8';}
.arrange button.ban_left > span::after {content:'\e5db';}

.img_list > ul > li {width:31.33%;}

.tb_row, .tb_row tbody, .tb_row tr, .tb_row th, .tb_row td {display:block; border:0 !important; width:100%; height:auto;}
.tb_row th {background:#fff; color:#8897aa; position:relative; padding-left:10px;}
.tb_row th::before {content:''; background:#8897aa; width:3px; height:3px; position:absolute; top:16px; left:0;}
.tb_row td {min-height:40px;}

/* 첨부파일 미리보기 */
.file_preview .imgs {width:65px; margin-right:15px;}
.file_preview .file_input {width:calc(100% - 80px);}
}

@media screen and (max-width:480px) {
.work .tb_col colgroup, .tb_col .mnone {display:none;}
.skiptxt {display:none;}

/* table-scroll */
.table-scroll th, .table-scroll td {padding:5px;}

/* view ----- */
.bbs_view .dates .icon_cal {display:block; width:100%;}
}