@charset "utf-8";
@import url(initialize.css);

html,body{height:100%;background:#f4f4f4}
.fL{float:left}
.fR{float:right}
.txt-link{display:block;text-decoration:underline;text-underline-position:under;color:#0063bf;font-weight:400;text-align:left}
.txt-link:hover{color:#097ce7}
.txt-org{color:#ff753e}
.tC{text-align:center !important}
.tL{text-align:left !important}

#wrapper{min-height:calc(100vh - 50px);position:relative}

#loginBox{width:350px;margin:0 auto;border-radius:20px;background:#fff url('../images/layout/bg-loginBox.png') no-repeat 50% 0;padding:12em 2em 4em;box-shadow:1px 1px 17px rgba(0,0,0,.03);box-sizing:border-box}
#loginBox .logo{text-align:center}
#loginBox .txt-label{margin-top:3em;font-size:11px;font-weight:600;color:#666}
#loginBox input{max-width:100%;width:100%;border:none;border-bottom:1px solid #e5e5e5;font-size:.95em;letter-spacing:-.5px}
#loginBox input:focus{border-bottom-color:#000}
#loginBox .btn{width:100%;margin-top:30px;}
.login#wrapper{background:#fff4e3;padding-top:16vh}

#top-area{height:50px;padding-right:15px;background:#fff}
#top-area .title-box{position:fixed;width:170px;height:50px;background:#fff4e3;text-align:center}
.title-box .logo{display:inline-block;line-height:50px}
.logo img{vertical-align:baseline}
.logo span{display:inline-block;margin-left:3px;font-size:12px;font-weight:500;color:#ff753e;vertical-align:super}
#top-area .util {float:right;padding-top:10px}
#top-area .util a{font-family:'Noto Sans KR';font-size:14px;font-weight:500;color:#222}

#contents-area{background:#f4f4f4}
#nav{position:fixed;top:50px;bottom:0;width:170px;background:#f56f5d}
#nav .gnb a{display:block;padding:13px 15px;color:#fff;font-size:14px;font-weight:400}
#nav .lnb{display:none;background:#de5b4a}
#nav .menu a{cursor:pointer}
#nav .menu .lnb{display:none}
#nav .active > a{font-weight:700;color:#fecc31}
#nav .active .lnb{display:block;border-top:1px solid #d05140}
#nav .lnb > li{border-top:1px solid #cd5242}
#nav .lnb > li:first-child{border-top:none}
#nav .lnb > li a{position:relative;padding-left:25px}
#nav .lnb .on{background:#d55443}
#nav .lnb .on:after{content:"";position:absolute;top:50%;right:15px;display:block;width:5px;height:5px;background:#fecc31;border-radius:50%;transform:translateY(-50%)}
#main{position:relative;top:0;bottom:0;padding:20px 20px 20px 20px;margin-left:170px;background:#f4f4f4;box-sizing:border-box}
#main h2.tit{font-size:22px;font-weight:500;color:#222;line-height:1}
h3.tit{margin-top:30px;font-size:17px;font-weight:500;color:#222;line-height:1}

.section{overflow:hidden;margin-top:20px;background:#fff;border-radius:10px;box-shadow:1px 1px 1px rgba(0,0,0,.1);box-sizing:border-box}
.section .section-inner{padding:15px}
.section .section-label{padding:5px 15px;font-size:13px;font-weight:400;color:#fff;background:#6e6e6e}

.section-wrap{display:flex}
.section-wrap .section{display:flex;flex-grow:1;align-items:center;margin-left:15px;padding:25px;text-align:center}
.section-wrap .section strong{display:inline-block;border-radius:25px;padding:5px 15px;color:#fff;font-size:14px;font-weight:500;text-align:center;line-height:1}
.section-wrap .section:nth-child(1) strong{background:#ff753e}
.section-wrap .section:nth-child(2) strong{background:#6fc132}
.section-wrap .section:nth-child(3) strong{background:#09b1e7}
.section-wrap .section .num{margin-left:20px;font-size:25px;font-weight:600;color:#222;letter-spacing:-1px;text-align:center}
.section-wrap .section:first-child{margin-left:0}

.box-search{display:flex;align-items:center}
.box-search > *{margin-left:10px}
.box-search > *:first-child{margin-left:0}
.box-search .box-label{margin-right:15px;padding:0 30px;font-size:15px;font-weight:500;color:#222}
.box-search .search-wrap{flex:1}

.ipt-search{display:flex;align-items:center}
.ipt-search input{min-width:30%;font-weight:400;background:transparent;border:none;border-bottom:1px solid #222;transition:border .1s}
.ipt-search .btn{margin-left:10px}
.ipt-search .btn .ico-mag{margin-left:5px}
.ico-mag{display:inline-block;width:16px;height:22px;background:url('../images/icon/ico-mag.png') no-repeat 50% 50%;background-size:contain;vertical-align:text-top}

.btn{display:inline-block;padding:0 15px;border-radius:5px;color:#fff;text-align:center;text-decoration:none;box-sizing:border-box;transition:all .1s}
.btn:hover,.btn:focus,.btn:active{transition:all .1s}
.btn.size-basic{font-size:14px;font-weight:400;height:35px;line-height:35px}
.btn.size-big{min-width:100px;font-size:16px;font-weight:500;height:40px;line-height:40px}
.btn.color-black{background:#222}
.btn.color-black:hover{background:#000}
.btn.color-green{background:#6fc132}
.btn.color-green:hover{background:#60a929}
.btn.color-orange{background:#ff753e}
.btn.color-orange:hover{background:#f2662e}
.btn.color-gray{background:#999}
.btn.color-gray:hover{background:#7a7a7a}

.list-top{overflow:hidden}
.tbl-wrap .tbl-list tr{border-top:1px solid #f4f4f4}
.tbl-wrap .tbl-list:not(.view) tr:not(:first-child):hover{background:#f4f4f4}
.tbl-wrap .tbl-list th{border-bottom:1px solid #dadada;padding:5px 10px;background:#ececec;font-size:14px;font-weight:500;color:#222}
.tbl-wrap .tbl-list td{padding:10px;font-size:15px;font-weight:400;color:#222;text-align:center;word-break:break-all}
.tbl-wrap .tbl-list th:first-child,.tbl-wrap .tbl-list td:first-child{border-left:none}
.tbl-wrap .tbl-list.view th{background:#ededed}
.tbl-wrap .tbl-list.view td{min-height:100px;padding:7px 10px;text-align:left}
.tbl-wrap .tbl-list.view th:before{content:"";position:relative;left:-1px;display:inline-block;min-height:40px;vertical-align:middle}
.tbl-wrap .tbl-list .tbl-smtit{background:;font-size:13px;font-weight:400}
.tbl-wrap .tbl-list .tbl-smtit:before{content:"";position:relative;top:1px;display:inline-block;width:2px;height:12px;margin-right:5px;background:#ff753e}
.tbl-wrap .tbl-list th.td-dark{background:#c3cbe7}
.tbl-wrap .tbl-list td.td-dark{background:#dce4ff}
.tbl-wrap .tbl-list.border th,
.tbl-wrap .tbl-list.border td{border-left:1px solid #ececec}
.tbl-wrap .tbl-list input[type="checkbox"]{background-color:transparent;border:0px}
.tbl-wrap .tbl-list input[readonly]{background-color:transparent;border:0px}

.ipt-con input{flex:1;width:auto;border:none;border-bottom:1px solid #999}
.ipt-con{display:flex;align-items:center}

.bt-pagination{overflow:hidden;margin:30px 0 0;padding:20px 0;text-align:center}
.bt-pagination a, .bt-pagination strong{display:inline-block;margin:0 2px;width:27px;height:27px;line-height:27px;font-size:.9em;color:#999;font-weight:400;}
.bt-pagination strong{border-radius:30px;background:#09b1e7;color:#fff}
.bt-pagination a:hover{color:#6b53a2}
.bt-pagination a.first{transform:rotate(180deg);background:url(../images/icon/ico-pageArrow2.png)50%/8px no-repeat;text-indent:-999em}
.bt-pagination a.prev{transform:rotate(180deg);background:url(../images/icon/ico-pageArrow.png)50%/4px no-repeat;text-indent:-999em}
.bt-pagination a.prev:hover, .bt-pagination a.next:hover{border-bottom:none;background-color:#f6f4f9;border-radius:5px;}
.bt-pagination a.next{background:url(../images/icon/ico-pageArrow.png)50%/4px no-repeat;text-indent:-999em}
.bt-pagination a.last{background:url(../images/icon/ico-pageArrow2.png)50%/8px no-repeat;text-indent:-999em}

.checkbox{vertical-align:top;margin:0}
.checkbox input[type=checkbox]:checked + i{background-position-x:-22px}
label{position:relative;margin-left:10px;font-weight:400;cursor:pointer}
label:first-child{margin-left:0}
.checkbox{overflow:hidden;position:relative;display:inline-block;width:20px;height:20px;margin-right:7px;vertical-align:bottom;cursor:pointer}
label:after {content: '';position:absolute;right:100%;bottom:-2px;left:20px;display:block;height:1px;background:#2e3092;transition: .1s}
.checkbox input[type=checkbox]{position:relative;width:20px;height:20px;margin:0;padding:0;cursor:pointer;opacity:0}
input[type=checkbox]{width:20px;height:20px;vertical-align:top;cursor:pointer}
.checkbox i{position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/icon/ico-check.png) no-repeat 0 0}

.bt-btn{overflow:hidden;margin-top:20px;text-align:center}
.btn-group{margin-top:30px}
.btn-group .btn + .btn{margin-left:10px}

.selectbox{position:relative;min-width:150px;height:35px;border-radius:4px;border:1px solid #222}
.selectbox .select{width:100%;height:inherit;background: transparent;border: 0 none;outline: 0 none;padding:0 5px;position:relative;z-index:3}
.selectbox .select option{background:#fff;color:#000;padding:3px 0;font-size:16px}
.selectbox .icoArrow{position:absolute;top:0;right:0;z-index:1;width:35px;height:35px;background:url('../images/icon/ico-arrow.png') no-repeat 50% 50%;border-left:1px solid #222;display:flex;justify-content:center;align-items:center}

.txt-area{padding:15px 0;line-height:1.7}

.write input[type='text']{width:100%;border:1px solid #dbdbdb;border-radius:5px}
.write textarea{border:1px solid #dbdbdb;border-radius:5px}

.pop{display:none;position:absolute;top:50%;left:50%;border-radius:10px;padding:20px 0;background:#fff;transform:translate(-50%, -50%);box-shadow:1px 1px 15px rgba(0,0,0,.15);box-sizing:border-box}
.pop.show{display:block}
.pop .pop-contents{padding:30px 0;font-size:15px;font-weight:400;color:#222}

.pop-sm{max-width:300px;width:100%;text-align:center}