@charset "utf-8";

body {width: 100%;}
button {color: inherit;}
#wrap {width: 100%; max-width: 720px; margin: 0 auto; padding: 120px 16px 64px; min-height: 100vh; background: #fff; overflow: hidden;}
#body_temp {position: fixed; width: 100%; margin: 0 auto; left: 0; right: 0; padding: 96px 16px 64px; overflow: hidden; width: 100%; max-width: 720px; margin: 0 auto;}


/* gnb */
#gnb {position: fixed; left: 0; right: 0; top: 0; width: 100%; max-width: 720px; margin: 0 auto; background: #fff; z-index: 1000; display: flex; justify-content: space-between;}
.gnb-logo {flex-grow: 1; font-size: 20px; text-align: center; display: flex; height: 54px; align-items: center; justify-content: center; text-indent: -9999px; background: url('../img/gnb_logo.png')no-repeat center center / 100px auto;}
.gnb-sch {flex-shrink: 0; display: block; width: 54px; height: 54px; position: relative; text-indent: -9999px; font-size: 0;}
.gnb-sch:before {content: ''; display: block; width: 16px; height: 16px; border: solid 2px #333; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -8px; box-sizing: border-box;}
.gnb-sch:after {content: ''; display: block; width: 6px; height: 2px; background: #333; margin-top: 4px; margin-left: 4px; position: absolute; left: 50%; top: 50%; transform-origin: left top; -webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
.gnb-toggle {flex-shrink: 0; display: block; background: none; border: none; width: 54px; height: 54px; position: relative; -webkit-appearance:none; -moz-appearance:none;}
.gnb-toggle span {display: block; text-indent: -9999px;}
.gnb-toggle:before,
.gnb-toggle:after,
.gnb-toggle span:before {content: ''; display: block; width: 20px; height: 2px; background: #333; position: absolute; left: 50%; top: 50%; margin-left: -10px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;}
.gnb-toggle:before {margin-top: -8px;}
.gnb-toggle:after {margin-top: 6px;}
.gnb-toggle span:before {margin-top: -1px;}
.gnb-toggle.on:before {margin-top: -1px; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.gnb-toggle.on:after {opacity:0;}
.gnb-toggle.on span:before {transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}

.gnb-menu {height: 0; overflow: hidden; position: fixed; top: 54px; left: 0; right: 0; width: 100%; max-width: 720px; margin: 0 auto; z-index: 1001; background: #fff; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;}
.gnb-menu.on {height: calc(100% - 54px); padding-top: 48px;}
.gnb-menu > ul {overflow-y: auto; height: 100%;}
.gnb-menu > ul > li {border-bottom: solid 1px #e5e5e5;}
.gnb-menu > ul > li > button {display: block; width: 100%; text-align: left; position: relative; height: 48px; font-size: 14px; padding: 0 16px; font-weight: 400; background: none; border: none; -webkit-appearance:none; -moz-appearance:none;}
.gnb-menu > ul > li > button:after {content: ''; display: block; box-sizing: border-box; width: 8px; height: 8px; position: absolute; right: 16px; top: 50%; margin-top: -6px; border-bottom: solid 1px #333; border-right: solid 1px #333; -webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
.gnb-menu > ul > li > button.on:after {-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg); margin-top: -4px;}
.gnb-menu > ul > li > ul {border-top: solid 1px #e5e5e5; padding: 8px 16px; background: #f5f5f5; display: none;}
.gnb-menu > ul > li > ul > li {padding: 4px 0;}
.gnb-menu > ul > li > ul > li > a {display: block; font-size: 13px; position: relative; padding-left: 10px;}
.gnb-menu > ul > li > ul > li > a:before {content: ''; display: block; width: 4px; height: 1px; background: #333; position: absolute; left: 0; top: 50%; margin-top: -1px;}
.gnb-logout {text-align: center; padding: 30px 0;}
.gnb-logout a {display: inline-flex; height: 34px; border: solid 1px #ddd; align-items: center; padding: 0 15px; -webkit-border-radius: 4px; border-radius: 4px;}

.gnb-profile {padding: 8px 16px; background: #f5f5f5; border-top: solid 1px #e5e5e5; border-bottom: solid 1px #e5e5e5; position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between;}
.gnb-profile dt {}
.gnb-profile dd {display: flex; align-items: center;}
.gnb-profile dd a {display: flex; height: 30px; border: solid 1px #ddd; background: #fff; color: #333; align-items: center; padding: 0 10px; margin-right: 3px; -webkit-border-radius: 4px; border-radius: 4px;}
.gnb-profile dd a:last-child {margin-right: 0;}

.gnb-sub {display: flex; position: fixed; left: 0; right: 0; top: 54px; z-index: 900; width: 100%; max-width: 720px; margin: 0 auto; background: #fff; border-top: solid 1px #e5e5e5; border-bottom: solid 1px #e5e5e5;}
.gnb-sub li {flex: auto; display: flex; align-items: center;}
.gnb-sub li:after {content: ''; display: block; width: 1px; height: 10px; background: #e5e5e5;}
.gnb-sub li:last-child:after {display: none;}
.gnb-sub li a {display: flex; align-items: center; justify-content: center; width: 100%; height: 38px;}


#footer {margin-top: 40px;}
.ft-copy {text-align: center; font-size: 10px; font-weight: 300; letter-spacing: 0rem;}
.sub-title {font-size: 26px; font-weight: 300; padding-bottom: 12px;}


/* 메인 */
.main-list {display: flex; flex-wrap: wrap; margin: -8px -4px;}
.main-list > div {padding: 8px 4px; width: 50%;}
.main-list__item {background: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column;}
.main-list__item dt {background: #555554;}
.main-list__item dt a {font-size: 15px; font-weight: 600; padding: 0 16px; color: #fff; height: 40px; padding-top: 4px; display: flex; justify-content: space-between; align-items: center;}
.main-list__item dt a:after {content: ''; display: block; width: 6px; height: 6px; margin-top: -4px; border-top: solid 1px #fff; border-right: solid 1px #fff; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.main-list__item dd {border: solid 1px #aaa; border-top: none;}
.main-list__item dd ul {display: flex; align-items: center; padding: 4px;}
.main-list__item dd ul li {width: 33.3333%; position: relative;}
.main-list__item dd ul li:after {content: ''; display: block; width: 1px; height: 10px; background: #ccc; position: absolute; right: 0; top: 50%; margin-top: -5px;}
.main-list__item dd ul li:last-child:after {display: none;}
.main-list__item dd ul li a {display: flex; align-items: center; justify-content: center; height: 32px; font-size: 12px;}
.main-excel {display: flex; margin: 0 -2px; padding-bottom: 10px;}
.main-excel li {padding: 0 2px;}
.main-excel li:nth-child(1),
.main-excel li:nth-child(2) {width: calc(50% - 40px);}
.main-excel li:nth-child(3) {flex-shrink: 0; width: 80px;}
.main-excel li input[type="text"] {width: 100%; height: 40px; border-color: #ddd;}
.main-excel li select {border: solid 1px #ddd !important;}
.main-excel li input[type="submit"] {display: block; width: 100%; height: 40px; background: #453f3f; color: #fff;}


/* 로그인 */
.lgn-wrap {width: 100%; max-width: 480px; margin: 0 auto; padding-left: 16px; padding-right: 16px; min-height: 100vh; display: flex; align-items: center; position: relative;}
.lgn-intro {position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1000; background: #555554 url('../img/intro_logo.png')no-repeat center center / auto 40px;}
.lgn-box {width: 100%; padding: 0 32px;}
.lgn-title {text-indent: -9999px; height: 32px; margin-bottom: 32px; background: url('../img/login_logo.png')no-repeat center center / auto 100%;}


/* 리스트 */
#bdl {}
.bdl-title {padding-bottom: 12px; display: flex; justify-content: space-between; align-items: flex-end;}
.bdl-title .sub-title {padding-bottom: 0;}
.bdl-title .bdl-user {margin-top: 0;}

.bdl-cate {display: flex;}
.bdl-cate li {flex: auto;}
.bdl-cate li a {display: flex; align-items: center; justify-content: center; height: 40px; border: solid 1px #e3e3e3; margin-right: -1px;}
.bdl-cate li a#bo_cate_on {background: #555554; border-color: #555554; color: #fff; position: relative;}

.bdl-top__sch {margin-top: 16px; padding: 6px; background: #f5f5f5; border: solid 1px #eee;}
.bdl-top__group {display: flex;}
.bdl-top__group > li {flex-shrink: 0;}
.bdl-top__group > li:nth-child(2) {padding: 0 4px; flex-grow: 1; flex-shrink: 1;}
.bdl-top__group > li select {}
.bdl-top__group > li input[type="text"] {}
.bdl-top__group > li button {display: block; width: 40px; height: 40px; background: #453f3f; position: relative;}
.bdl-top__group > li button:before {content: ''; display: block; width: 16px; height: 16px; border: solid 2px #fff; box-sizing: border-box; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -8px; margin-top: -10px;}
.bdl-top__group > li button:after {content: ''; display: block; width: 6px; height: 2px; background: #fff; margin-top: 3px; margin-left: 5px; position: absolute; left: 50%; top: 50%; transform-origin: left top; -webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}

.sch_chk {}
.sch_chk p {height: 40px; border: solid 1px #e3e3e3; background: #fff; color: #bbb; padding: 0 8px; display: flex; align-items: center;}
.sch_chk ul {margin-left: -92px; margin-right: -44px; margin-top: 8px; display: flex; flex-wrap: wrap;}
.sch_chk ul li {padding: 2px 0; margin-right: 16px;}
.sch_chk ul li:last-child {margin-right: 0;}

.bdl-adm {display: flex; justify-content: center; margin-top: 32px;}
.bdl-adm li {margin-right: 4px;}
.bdl-adm li:last-child {margin-right: 0;}
.bdl-adm li a {display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 8px; border: solid 1px #e3e3e3; font-size: 12px;}
.bdl-user {display: flex; justify-content: flex-end; margin-top: 16px;}
.bdl-user li {margin-right: 4px;}
.bdl-user li:last-child {margin-right: 0;}
.bdl-user li button,
.bdl-user li a {display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border: solid 1px #e3e3e3;}

.bdl-top {margin-top: 16px; display: flex; align-items: center; justify-content: space-between;}
.bdl-top__total {}
.bdl-top__total strong {}
.bdl-all {display: flex; align-items: center;}
.bdl-list {border-top: solid 1px #333; margin-top: 8px;}
.bdl-list > li {border-bottom: solid 1px #e3e3e3; display: flex; padding: 8px;}
.bdl-list > li > a {flex-grow: 1; display: flex;}
.bdl-list > li.none {padding: 24px 0; justify-content: center;}
.bdl-list__chk {flex-shrink: 0; margin-right: 8px;}
.bdl-list__chk input[type="checkbox"] {display: block;}
.bdl-list__cont {flex-grow: 1; display: block;}
.bdl-list__no {display: inline-flex; height: 16px; font-style: normal; background: #aaa; color: #fff; padding: 0 6px; font-size: 11px; -webkit-border-radius: 10px; border-radius: 10px;}
.bdl-list__no:before {content: 'no. ';}
.bdl-list__title {font-size: 16px; vertical-align: middle; margin-top: 4px;}
.bdl-list__title em {display: inline-flex; width: 12px; height: 12px; font-size: 9px; font-style: normal; line-height: 1.0; margin-top: -3px; margin-left: 3px; background: #333; color: #fff; vertical-align: middle; align-items: center; justify-content: center; -webkit-border-radius: 2px; border-radius: 2px;}
.bdl-list__info {display: flex; margin-top: 4px;}
.bdl-list__info span {display: flex; align-items: center; font-size: 11px; color: #666;}
.bdl-list__info span:after {content: ''; display: block; width: 1px; height: 8px; background: #aaa; margin: -2px 8px 0;}
.bdl-list__info span:last-child:after {display: none;}
.bdl-list__info span.user {}
.bdl-list__info span.date {}
.bdl-list__status {display: flex; flex-shrink: 0; margin-left: 16px;}
.bdl-list__status li {width: 60px; padding: 0 5px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.bdl-list__status li em {display: block; width: 12px; height: 12px; background: #eee; border: solid 1px #ddd; -webkit-border-radius: 50%; border-radius: 50%;}
.bdl-list__status li em.on {background: #21c10e; border-color: #189509;}
.bdl-list__status li strong {display: block; font-size: 11px; line-height: 1.3; margin-top: 8px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2; height: 1.2em; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.bdl-list__status li span {display: block; font-size: 11px; line-height: 1.3; color: #666;}

.bdl-all__btn {position: relative;}
.bdl-all__btn span {background: #e60013; color: #fff; line-height: 1.0; padding: 2px 6px; font-size: 11px; text-align: center; position: absolute; left: 100%; bottom: 100%; -webkit-border-radius: 10px; border-radius: 10px; white-space: nowrap; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%);}



/* 글쓰기 */
#bdw {}
.bdw-group {margin-top: 16px;}
.bdw-group.mt0 {margin-top: 0;}
.bdw-group > label {display: block; margin-bottom: 4px; font-size: 15px; font-weight: 600;}
.bdw-date {position: relative; width: 160px;}
.bdw-date button {display: block; width: 100%; height: 40px; position: absolute; left: 0; top: 0; text-align: left; text-indent: -9999px;}
.bdw-date button:after {content: ''; display: block; width: 40px; height: 40px; position: absolute; right: 0; top: 0; opacity: 0.7; background: url('../img/datepicker.png')no-repeat center center / 20px auto;}
.bdw-date input[type="text"] {background: #f5f5f5; padding-right: 40px;}
.bdw-chk {display: flex; flex-wrap: wrap;}
.bdw-chk li {padding: 5px 0; margin-right: 20px;}
.bdw-chk li:last-child {margin-right: 0;}
.bdw-chk.col4 li {margin-right: 0; width: 25%;}
.bdw-add {}
.bdw-add > li {margin-bottom: 4px;}
.bdw-add > li:last-child {margin-bottom: 0;}
.bdw-add > li > ul {display: flex;}
.bdw-add > li > ul > li:nth-child(1) {flex-shrink: 0;}
.bdw-add > li > ul > li:nth-child(2) {flex-grow: 1; padding: 0 4px;}
.bdw-add > li > ul > li:nth-child(3) {flex-shrink: 0;}
.bdw-add > li > ul > li a {width: 40px; height: 40px; font-size: 16px; font-weight: 500; border: solid 1px #e3e3e3; display: flex; align-items: center; justify-content: center;}
.bdw-add.other > li > ul > li:nth-child(1) {flex-grow: 1; flex-shrink: 1;}
.bdw-add.other > li > ul > li:nth-child(2) {flex-shrink: 0; flex-grow: 0; padding-right: 0;}
#uploader .placeholder {min-height: auto;}
#uploader .placeholder .webuploader-pick {font-size: 14px; background: #453f3f;}
.bdw-btn {display: flex; margin: 0 -4px; padding-top: 16px;}
.bdw-btn li {padding: 0 4px; width: 50%;}
.bdw-btn li a,
.bdw-btn li button,
.bdw-btn li input[type="submit"] {display: flex; width: 100%; height: 48px; font-size: 15px; font-weight: 500; border: solid 1px #ddd; align-items: center; justify-content: center;}
.bdw-btn li a.red,
.bdw-btn li button.red,
.bdw-btn li input[type="submit"].red {background: #555554; border-color: #555554; color: #fff;}


/* 상세 */
#bdv {}
.bdv-detail {border-top: solid 1px #333;}
.bdv-detail th,
.bdv-detail td {border-bottom: solid 1px #e3e3e3; padding: 8px;}
.bdv-detail th {border-right: solid 1px #e3e3e3; width: 30%; background: #fafafa; font-weight: 500;}
.bdv-detail td {}
.bdv-list {}
.bdv-list li {}
.bdv-list li strong {margin-right: 4px; font-weight: 500;}
.bdv-decimal {padding-left: 16px;}
.bdv-decimal li {list-style: decimal;}
.bdv-top {display: flex; justify-content: space-between;}
.bdv-top h5 {font-size: 16px; font-weight: 600;}
.bdv-top button,
.bdv-top a {display: flex; align-items: center; justify-content: center; height: 30px; background: #444; border: solid 1px #111; color: #fff; padding: 0 12px;}
.bdv-top button.disabled,
.bdv-top a.disabled {background: #ccc; border-color: #ccc;}
.bdv-bot {display: flex; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: solid 1px #333;}
.bdv-bot ul {display: flex;}
.bdv-bot ul li {margin-right: 4px;}
.bdv-bot ul li:last-child {margin-right: 0;}
.bdv-bot ul li button,
.bdv-bot ul li a {display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border: solid 1px #e3e3e3;}
.bdv-title {padding-bottom: 4px; margin-bottom: 12px; margin-top: 24px; border-bottom: solid 1px #333; font-size: 16px; font-weight: 600;}

.bdv_confirm {margin-top: 10px; display: flex; align-items: center; justify-content: space-between;}
.bdv_confirm button {height: 36px !important;}
.bdv_confirm button.btn_submit {background: #444; font-weight: 500;}
.bdv_confirm > span {display: flex; align-items: center; justify-content: center; padding: 0 20px; height: 36px; background: #ddd; color: #aaa; font-size: 1.083em; font-weight: 400; -webkit-border-radius: 3px; border-radius: 3px;}
.bdv-tgl {display: flex; align-items: center;}
.bdv-tgl span {font-size: 14px; margin-right: 5px;}
.bdv-tgl input[type="checkbox"] {height: 0; width: 0; visibility: hidden;}
.bdv-tgl input[type="checkbox"] + label {cursor: pointer; text-indent: -9999px; width: 60px; height: 30px; background: grey; display: block; border-radius: 30px; position: relative;}
.bdv-tgl input[type="checkbox"] + label:after {content: ''; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; background: #fff; border-radius: 26px; transition: 0.3s;}
.bdv-tgl input[type="checkbox"]:checked + label {background: #555554;}
.bdv-tgl input[type="checkbox"]:checked + label:after {left: calc(50% + 2px);}
.bdv-tgl button {display: block; padding: 0 20px; background: #555554; color: #fff; font-size: 1.083em; font-weight: 500; -webkit-border-radius: 3px; border-radius: 3px;}

.bdv-pic {display: flex; flex-wrap: wrap; margin: -2px;}
.bdv-pic li {width: 25%; padding: 6px 2px;}
.bdv-pic li div {position: relative; border: solid 1px #333;}
.bdv-pic li img {display: block; width: 100%;}
.bdv-pic__pop {display: block; width: 30px; height: 30px; text-indent: -9999px; background: rgba(0,0,0,0.5); position: absolute; right: -1px; top: -1px; border: solid 1px #000;}
.bdv-pic__pop:before {content: ''; display: block; box-sizing: border-box; width: 16px; height: 16px; border: solid 2px #fff; position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; -webkit-border-radius: 50%; border-radius: 50%;}
.bdv-pic__pop:after {content: ''; display: block; width: 6px; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; margin-top: 4px; margin-left: 3px; -webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
.bdv-pic__down {height: 30px; background: #333; display: flex; align-items: center; justify-content: center; color: #fff;}
.bdv-pic__down em {width: 12px; height: 10px; margin-right: 5px; margin-top: -2px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.bdv-pic__down em:before {content: ''; display: block; width: 6px; height: 4px; background: #fff;}
.bdv-pic__down em:after {content: ''; display: block; width: 0px; height: 0px; border-style: solid; border-width: 6px 6px 0 6px; border-color: #fff transparent transparent transparent; transform: rotate(0deg);}

.bdv-share {display: flex; margin: 0 -3px; padding-top: 10px;}
.bdv-share li {width: 50%; padding: 0 3px;}
.bdv-share li button {display: flex; align-items: center; justify-content: center; width: 100%; height: 40px;}
.bdv-share li button:before {content: ''; display: block; width: 20px; height: 20px; margin-right: 5px;}
.bdv-share__copy {background: #444; color: #fff;}
.bdv-share__kakao {background: #fee500; color: #000;}
.bdv-share__copy:before {background: url('../img/share_link.png')no-repeat center center / cover;}
.bdv-share__kakao:before {background: url('../img/share_kakao.png')no-repeat center center / cover;}




/* 검색 */
#sch-box {padding: 6px; background: #f5f5f5; border: solid 1px #eee;}
.sch-box__form {}
.sch-box__form dt {}
.sch-box__form dt ul {display: flex; margin: 0 -2px;}
.sch-box__form dt ul li {width: 50%; padding: 0 2px;}
.sch-box__form dd {margin-top: 4px;}
.sch-box__form dd ul {display: flex;}
.sch-box__form dd ul li {}
.sch-box__form dd ul li:first-child {flex-grow: 1;}
.sch-box__form dd ul li:last-child {flex-shrink: 0;}
.sch-box__form dd ul li:last-child button {display: block; width: 40px; height: 40px; background: #453f3f; position: relative; text-indent: -9999px;}
.sch-box__form dd ul li:last-child button:before {content: ''; display: block; width: 16px; height: 16px; border: solid 2px #fff; box-sizing: border-box; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -8px; margin-top: -10px;}
.sch-box__form dd ul li:last-child button:after {content: ''; display: block; width: 6px; height: 2px; background: #fff; margin-top: 3px; margin-left: 5px; position: absolute; left: 50%; top: 50%; transform-origin: left top; -webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}


.auto-save {align-items: flex-end; margin-bottom: 5px;}
.auto-save__btn {display: flex;}
.auto-save__btn > li {margin-right: 2px; position: relative;}
.auto-save__btn > li:last-child {margin-right: 0;}
.auto-save__btn > li > button {height: 28px; padding: 0 10px; background: #333; border: solid 1px #111; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center;}