@charset "utf-8";



/* skip */
#skip {height:0}
#skip dt {overflow:hidden; position:absolute; width:1px; height:1px}
#skip dd a {overflow:hidden; display:block; position:absolute; top:-50px; left:0; z-index:1000; width:100%; text-align:center;}
#skip dd a.on {overflow:hidden; position:absolute;  top:0; left:0; padding:10px 0; background:#4050a7; color:#fff; font-weight:600}


/* header */
header {position:sticky; top:0; left:0; z-index:11; display:flex; justify-content:space-between; align-items:center; width:100%; height:80px; padding:0 30px; border-bottom:1px solid #e1e3ea; background:#fff}
header .logo a {display:block; width:160px; height:49px; background:url("../images/logo.png") no-repeat}



/* gnb */
#gnb {flex:1}
#gnb > ul {display:flex; justify-content:flex-start; align-items:center; margin-left:30px}
#gnb > ul > li > a {display:flex; justify-content:center; align-items:center; position:relative; width:160px; padding:25px 0; font-size:1.9rem; color:#222; font-weight:600; text-decoration:none !important; transition:0.3s}
#gnb > ul > li.admin a {width:210px}
#gnb > ul > li.on > a, #gnb > ul > li.on > a:hover, #gnb > ul > li.on > a:focus, #gnb > ul > li > a.on {color:#4050a7}
#gnb > ul > li > a:after {content:""; position:absolute; left:50%; bottom:0; width:0; height:3px; background:#4050a7; transition:0.3s linear}
#gnb > ul > li > a:hover:after, #gnb > ul > li > a:focus:after, #gnb > ul > li.on > a:after {left:0; width:calc(100% - 0px)}
#gnb .dimmed {display:none; z-index:11; position:fixed; top:80px; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.5); transition:0.3s}
#gnb .gnbBg {display:none; z-index:12; position:absolute; top:80px; left:0; width:100%; margin:auto; border-bottom:1px solid #e1e3ea; background:#fff}
#gnb .submenu {display:none; z-index:13; overflow:hidden; position:absolute; top:79px; padding:10px 0 30px; border-right:1px solid #e1e3ea}
#gnb > ul > li:first-child .submenu {border-left:1px solid #e1e3ea}
#gnb > ul > li.admin .submenu {width:210px !important}
#gnb .submenu li a {display:flex; flex:1; /*justify-content:center;*/ align-items:center; padding:5px 15px; font-size:1.7rem; color:#555; /*text-align:center;*/ letter-spacing:-0.07em; word-break:keep-all; word-wrap:break-word}
#gnb .submenu li.on a, #gnb .submenu li a:hover, #gnb .submenu li a:focus {color:#7f8fdb}
/* @media (max-width: 1710px) {
    #gnb > ul > li > a {width:160px}
} */

.sessionTime {display:flex; justify-content:center; align-items:center; font-size:1.5rem}
.sessionTime span {margin-right:5px}
.sessionTime span strong {color:#222; font-weight:600}

.siteLink {display:flex; justify-content:center; align-items:center}
.siteLink ul {display:flex; justify-content:center; align-items:center; font-size:1.5rem}
.siteLink ul li {display:flex; justify-content:space-between; align-items:center; position:relative; width:100%}
.siteLink li:first-child:before {content:none}
.siteLink li button {margin-left:8px}
.userName {display:flex; justify-content:center; align-items:center; position:relative; margin-left:10px}
.userName:before {content:""; display:inline-flex; justify-content:center; align-items:center; width:16px; height:16px; margin:0; background:url("../images/ico_user.svg") no-repeat; background-size:contain}
.userName:after {content:""; display:inline-flex; justify-content:center; align-items:center; width:5px; height:5px; margin-left:5px; margin-top:-3px; border-top:1px solid #999; border-right:1px solid #999; transform:rotate(135deg); transition:0.3s}
.userName.on:after {transform:rotate(-45deg); margin-top:2px}
.myMenu {display:flex; justify-content:center; align-items:center; flex-direction:column; z-index:13; position:absolute; left:-5px; top:30px; width:100%; margin-left:10px; border-radius:5px; border:1px solid #e1e3ea; background:#fff}
.myMenu li a {display:flex; flex:1; justify-content:center; align-items:center; padding:5px; border-bottom:1px solid #e1e3ea; font-size:1.5rem}
.myMenu li a:hover, .myMenu li a:focus {color:#7f8fdb}






#container {position:relative; width:100%; display:flex; justify-content:space-between}



/* sideNav */
#sideNav {width:220px; min-height:calc(100vh - 160px); border-right:1px solid #e1e3ea; background:#fff}
#sideNav h2 {display:flex; justify-content:center; align-items:center; height:100px; background:url("../images/bg_sideNav.png") left top -15px no-repeat #3b4ca5; font-size:2.4rem; color:#fff; font-weight:600; letter-spacing:-0.03em}
#sideNav > ul > li {border-bottom:1px solid #e1e3ea}
#sideNav > ul > li.on {background:#92a3f3}
#sideNav > ul li a {display:block}
#sideNav > ul > li > a {position:relative; padding:10px 15px; font-size:1.7rem; color:#333; letter-spacing:-0.03em}
#sideNav > ul > li > a:after {content:""; position:absolute; top:calc(50% - 8px); right:15px; width:8px;  height:8px; border-top:2px solid #ccc; border-right:2px solid #ccc; transform:rotate(135deg); transition:0.3s}
#sideNav > ul > li.on > a:after {top:calc(50% - 3px); border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(-45deg)}
#sideNav > ul > li.noDepth a:after{content:none}
#sideNav > ul > li.on > a {color:#fff}
#sideNav > ul > li ul {display:none}
#sideNav > ul > li > ul {padding:10px 0; background:#f2f5fe}
#sideNav > ul > li > ul > li > a {display:flex; align-items:center; padding:3px 15px; font-size:1.5rem; color:#555}
#sideNav > ul > li > ul > li > a:before {content:""; width:5px; height:1px; margin-right:5px; background:#555}
#sideNav > ul > li > ul > li > a:hover:before, #sideNav > ul > li > ul > li > a:focus:before {content:""; width:5px; height:1px; background:#7f8fdb}
#sideNav > ul > li > ul > li > a:hover, #sideNav > ul > li > ul > li > a:focus, #sideNav > ul > li > ul > li.on > a {color:#7f8fdb; text-decoration:underline}

#sideNav .calculator a {display:flex; align-items:center; margin:15px; padding:15px; border-radius:5px; background:linear-gradient(135deg, rgba(0,187,191,1), rgba(0,144,191,1)); font-size:1.5rem; color:#fff; font-weight:600; line-height:1.3; letter-spacing:-0.03em}
#sideNav .calculator a:before {content:""; display:block; width:40px; height:40px; margin-right:5px; background:url("../images/ico_calculator.svg") center center no-repeat; background-size:contain}
#sideNav .calculator a:first-child {background:linear-gradient(135deg, rgba(0,191,184,1), rgba(0,191,136,1))}
#sideNav .calculator a span {flex:1}


#contents {position:relative; width:calc(100% - 220px); /*flex:1;*/ scroll-margin-top:80px;/*헤더 높이에 맞게 설정*/ padding:30px}
#contents.mainWrap, #contents.errorContents, #contents.popContents {flex:1}
h3 {margin-bottom:5px; font-size:3.0rem; color:#222; font-weight:600}
.h3 {font-size:2.4rem; color:#333; font-weight:600}
.h4 {display:flex; position:relative; left:20px; margin-bottom:5px; font-size:1.9rem; color:#333; font-weight:600}
.h4:before {content:""; position:absolute; left:-20px; top:5px; width:15px; height:14px; margin-right:5px; background:url("../images/ico_bullet.png") center center no-repeat}
.h4 ~ .h4, h4.gap {margin-top:30px}
.h5 {display:flex; align-items:center; margin-bottom:5px; font-size:1.9rem; color:#333}
.h5 ~ .h5 {margin-top:30px}

/* breadcrumb */
.breadcrumb {display:flex; align-items:center}
.breadcrumb li {display:flex; align-items:center; font-size:1.5rem; color:#333}
.breadcrumb li > *{font-size:inherit; color:inherit}
.breadcrumb li > a:hover, .breadcrumb li > a:focus {text-decoration:underline}
.breadcrumb li:before {content:""; width:7px; height:7px; margin:0 12px 0 6px; border-top:1px solid #999; border-right:1px solid #999; transform:rotate(45deg);}
.breadcrumb li:first-child:before {content:none}
.breadcrumb li a.home:before {content:""; display:inline-block; width:13px; height:13px; margin-right:6px; background:url("../images/ico_home.png") no-repeat}



.contents {position:relative; min-height:calc(100% - 90px); margin-top:20px; padding:30px; border-radius:15px; border:1px solid #e1e3ea; background:#fff; box-shadow:0 0 5px rgba(0,0,0,0.1)}



/* subTab */
.subTab {width:100%}
.subTab .tabList {display:flex; justify-content:space-between; align-items:center; margin-bottom:30px}
.subTab .tabList a {display:flex; justify-content:center; align-items:center; flex:1; height:45px; margin-left:-1px; padding:0 0; border:1px solid #e1e3ea; background:#f7f7f7; font-size:1.9rem; text-decoration:none}
.subTab .tabList a.curr {border:1px solid #4050a7; background:#4050a7; color:#fff}
.subTab .tabContent > div {display:none; margin-bottom:30px; font-size:1.7rem}
.subTab .tabContent > div:first-child {display:block}
.subTab .tabContent > div h4, .subTab .tabContent > div h4 + .txt {margin-top:30px}
.subTab2 .tabList {margin-bottom:15px}
.subTab2 .tabList a {border-radius:8px; background:#fff}
.subTab2 .tabList a:not(:first-child) {margin-left:15px}


footer {clear:both; display:flex; align-items:center; bottom:0; width:100%; height:80px; padding:15px 30px; background:#191f28}
footer .logo {display:block; width:160px; height:49px; margin-right:30px;background:url("../images/f_logo.png") no-repeat}
footer .info {margin-left:30px; font-size:1.5rem; color:#888f98}

.scrollTop {display:flex; display:none; justify-content:center; align-items:center; z-index:11; position:fixed; right:15px; bottom:15px; width:50px; height:50px; border-radius:50%; background:#7f8fdb; color:#fff; font-weight:600}



/* table */
.table {overflow-x:auto; width:100%; padding-bottom:1px}
.table table {table-layout:fixed; position:relative; width:100%; border-collapse:separate; border-top:2px solid #4050a7; background:#fff}
.table.gap {margin-top:30px}
.table table th, .table table td {padding:10px; border-bottom:1px solid #e1e3ea; font-size:1.7rem; color:#757575; text-align:center}
.table table th {padding:10px; background:#fafafa; color:#555}
.table table .sticky {position:sticky; left:0; background:#fff}
.table table .sticky.stickyR {right:0}
.table table th.sticky {background:#fafafa}
.table table tfoot th, .table table tfoot td{background:#f0f1f4}
.table table tr.fix td, .table table tr td.stress {background:#f2f5fe}
.table table tr td.red {background:#f2f5fe;color:#c72727;    font-weight: 600;}
.table table td.center {text-align:center !important}
.table table td.left {text-align:left !important}
.table table td a {display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:keep-all; vertical-align:middle; max-width:95%; color:#757575}
.table table th.pd0, .table table td.pd0 {padding:0}
.table table td a:hover, .table table td a:focus {color:#7f8fdb; text-decoration:underline}
.table.colTable table tr:nth-child(even) {background:#fcfcfc}
.table th.major, .table td.major {background:#f2f5fe}
.table table th.require:after {content:"*";  top:auto; background:none; color:#e41717}

.table.rowTable table th, .table.rowTable table td {border-left:1px solid #e1e3ea; line-height:1.3}
.table.rowTable table td {text-align:left}
.table.rowTable.center table td {text-align:center}
.table.rowTable table th:first-child, .table.rowTable table td:first-child {border-left:none}
.table table .brd_left {border-left:1px solid #e1e3ea !important}

.table.border table th, .table.border table td {border-left:1px solid #e1e3ea}
.table.border table th:first-child, .table.border table td:first-child {border-left:none}

.hoverTable table tr:hover td, .hoverTable table tr:focus td, .hoverTable table tr.on td {background:#f5f7fc}
.hoverTable table tr td {cursor:pointer}

.tableCntBox {display:inline-flex; align-items:center}
.tableCntBox span:nth-child(even) {margin:0 5px}
.tableCntBox span input {min-width:100px; max-width:100px}



/* addressBox */
.addressBox {position:relative}
.addressBox > li {display:flex; align-items:center; margin-top:5px}
.addressBox > li:first-child {margin-top:0}
.addressBox > li em {display:flex; justify-content:center; align-items:center; margin-right:5px; padding:0 5px; width:60px; border:1px solid #e1e3ea; font-size:1.5rem}

.addressInput {display:flex; justify-content:space-between; align-items:center; width:100%}
.addressInput > li:first-child {flex:1; margin-right:30px}
.addressInput > li p {display:flex; justify-content:flex-end; align-items:center; margin-top:5px}
.addressInput > li p:first-child {margin-top:0}
.addressInput > li p input {flex:1; min-width:200px; max-width:200px; margin:0 5px}



/* login */
.loginWrap {flex:1; width:100%}
.loginWrap ul li {margin-bottom:25px; font-size:1.5rem}
.loginWrap ul li label {display:block; margin-bottom:5px; text-align:left}
.loginWrap ul li input {height:50px; border-radius:10px}
.loginWrap button {width:100%; margin:30px 0}
.loginWrap .findIdPw {display:flex; justify-content:center; align-items:center}
.loginWrap .findIdPw span:nth-child(n+2):before {content:""; display:inline-block; width:1px; height:12px; margin:0 10px; background:#e1e3ea}



/* 레이어 팝업 */
.layerPop {display:none; z-index:9999; position:fixed; top:0; left:0;  width:100%; height:100%; background:rgba(0,0,0,0.5)}
.layerPop .modalWrap {overflow:hidden; position:fixed; top:50%; left:50%; max-width:90%; max-height:90%; transform:translate(-50%, -50%) scale(0); -webkit-transform:translate(-50%, -50%) scale(0); -moz-tansform:translate(-50%, -50%) scale(0); transition:0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;box-sizing:border-box}
.layerPop.on .modalWrap {transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); -moz-transform:translate(-50%, -50%) scale(1)}
.modalWrap .header {display:flex; justify-content:flex-start; align-items:center; position:sticky; top:0; left:0; width:100%; min-height:60px; max-height:60px; padding:0 30px; border-radius:15px 15px 0 0; background:#6e6cfd}
.modalWrap .header h2 {font-size:2.4rem; color:#fff; font-weight:600}
.modalWrap .contsWrap {overflow-y:auto; /*min-height:150px;*/ max-height:calc(100vh - 245px); padding:30px; background:#fff}
#modalLogin .contsWrap {border-radius:0 0 15px 15px}
.modalWrap .footer {display:flex; justify-content:center; align-items:center; position:sticky; bottom:1px; width:100%; padding:0 0 30px; border-radius:0 0 15px 15px; background:#fff}
.modalWrap .conts {display:flex; flex-direction:column; justify-content:space-between; /*align-items:center;*/ width:100%; font-size:1.7rem; color:#555; text-align:center}
.modalWrap .conts.left {align-items:flex-start}
.modalWrap .close {position:absolute; right:30px; top:15px; width:30px; height:30px; background:url("../images/ico_close.png") no-repeat}



/* alert & confirm */
[id*="alert"] .modalWrap .header, [id*="confirm"] .modalWrap .header {background:#7285dd}
[id*="alert"] .modalWrap .contsWrap, [id*="confirm"] .modalWrap .contsWrap {width:100%}
.modalWrap .footer .btnBox, .modalWrap .footer .btnBox {margin-top:0}




/* button */
.btn {height:3.5rem; padding:0 20px; border-radius:3px; border:1px solid #e1e3ea; background:#fff; font-size:1.5rem; color:#555; transition:0.3s}
.btn:hover {border:1px solid #999; /*text-decoration:underline; text-underline-offset:3px*/}
.btn.xxlg {height:5rem; font-size:1.9rem}
.btn.xlg {height:4.5rem; font-size:1.7rem}
.btn.lg {height:4rem; padding:0 10px; min-width:100px; font-size:1.7rem}
.btn.sm {height:3rem; padding:0 15px}
.btn.xsm {height:2.5rem; padding:0 10px}
.btn.rnd {border-radius:10px}
.btn.blue1 {border-color:#4050a7; background:#4050a7; color:#fff}
.btn.blue1:hover {border-color:#2d3c92; background:#2d3c92}
.btn.blue2 {border-color:#7f8fdb; background:#7f8fdb; color:#fff}
.btn.blue2:hover {border-color:#6374c7; background:#6374c7}
.btn.blue3 {border-color:#92a3f3; background:#92a3f3; color:#fff}
.btn.blue3:hover {border-color:#7285dd; background:#7285dd}
.btn.gray3 {border-color:#555; background:#555; color:#fff}
.btn.gray3:hover {border-color:#333; background:#333}
.btn.red {border-color:#e41717; background:#e41717; color:#fff}
.btn.red:hover {border-color:#c71212; background:#c71212}

.btn[class*="step"] {display:inline-flex; justify-content:center; align-items:center}
.btn.step01 {border-color:#999; background:#fff} /* 신청, 배정신청중, 제출완료 */
.btn.step02 {border-color:#4050a7; background:#4050a7; color:#fff} /* 완료(확정전), 배정완료(확정전), 1차승인 */
.btn.step03 {border-color:#e1e3ea; background:#e1e3ea} /* 완료, 의뢰완료, 평가완료 */
.btn.step04 {border-color:#555; background:#555; color:#fff} /* 미신청 */
.btn.step05 {border-color:#e41717; background:#e41717; color:#fff} /* 반려 */

.btn.mw50 {min-width:50px; padding:0 10px}
.btn.mw100 {min-width:100px; padding:0 10px}



/* icon */
.ico {display:flex; align-items:center; width:24px; height:24px; margin:auto}
.ico:before {content:""; width:100%; height:100%; background-position:center center; background-repeat:no-repeat !important}
.file:before {background:url("../images/ico_file.svg"); background-size:contain}
.pdf:before {background:url("../images/ico_pdf.svg"); background-size:contain}
.hng:before {background:url("../images/ico_hng.svg"); background-size:contain}
.xls:before {background:url("../images/ico_xls.svg"); background-size:contain}
.zip:before {background:url("../images/ico_zip.svg"); background-size:contain}
.ppt:before {background:url("../images/ico_ppt.svg"); background-size:contain}
.wrd:before {background:url("../images/ico_wrd.svg"); background-size:contain}
.ai:before {background:url("../images/ico_ai.svg"); background-size:contain}
.image:before {background:url("../images/ico_image.svg"); background-size:contain}
.icoTxt {display:inline-flex !important; align-items:center; width:auto; height:auto}
.icoTxt:before {content:""; width:16px; height:16px; margin-right:5px}
.ico_up, .ico_down {font-size:1.5rem}
.ico_up:after {content:"▲"; color:#e41717}
.ico_down:after {content:"▼"; color:#4050a7}


/* checkbox */
.checkboxWrap {display:flex; align-items:center; flex-wrap:wrap}
.checkbox {display:inline-block; position:relative}
.checkbox input {cursor:pointer; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0}
.checkbox input + label {display:block; padding-left:28px; font-size:inherit; color:inherit; background:left center no-repeat; transition:0.3s}
.checkbox input:focus + label {outline:2px dotted #8b6cfd}
.checkbox input[type=checkbox] + label {background-image:url("../images/ico_checkbox.png"); transition:all 0.3s}
.checkbox input[type=checkbox][readonly] + label {opacity:0.7}
.checkbox input[type=checkbox][disabled] + label {opacity:0.3}
.checkbox input[type=checkbox]:checked + label {background-image:url("../images/ico_checkboxOn.png")}
.checkbox input[type=radio] + label {background-image:url("../images/ico_radio.png")}
.checkbox input[type=radio]:checked + label {background-image:url("../images/ico_radioOn.png")}
.checkbox input[type=radio][readonly] + label {opacity:0.7}
.checkbox input[type=radio][disabled] + label {opacity:0.3}
.checkbox.only input + label {padding:0; width:28px; text-indent:-9999px; background-position:center}
.checkbox ~ .checkbox, .checkboxWrap > div.addendum ~ div.addendum {margin-left:20px}

.checkBoxWrap.column .checkbox {margin:5px 0}
.checkBoxWrap.column2 .checkbox {min-width:calc(50% - 5px); max-width:calc(50% - 5px)}
.checkBoxWrap.column3 .checkbox {min-width:calc(33.3% - 5px); max-width:calc(33.3% - 5px)}
.checkBoxWrap.column4 .checkbox {min-width:calc(25% - 5px); max-width:calc(25% - 5px)}
.checkBoxWrap.column5 .checkbox {min-width:calc(20% - 5px); max-width:calc(20% - 5px)}



/* step */
span.step {display:inline-flex; justify-content:center; align-items:center; min-width:60px; padding:0 10px; border-radius:25px; border:1px solid #e1e3ea; font-size:1.5rem}
span.step01 {border-color:#999; background:#fff} /* 접수 */
span.step02 {border-color:#4050a7; background:#4050a7; color:#fff} /* 접수중, 승인대기중 */
span.step03 {border-color:#e1e3ea; background:#e1e3ea} /* 완료, 승인완료 */
span.step04 {border-color:#555; background:#555; color:#fff} /* 미신청, 취소 */
span.step05 {border-color:#e41717; background:#e41717; color:#fff} /* 반려 */
span.step ~ em {font-size:1.5rem}






/* txtBox */
.txtBox {width:100%; margin:10px 0 30px; padding:15px; border-radius:10px; background:#f2f5fe; font-size:1.5rem; color:#555}
.txtBox ul li {position:relative; width:100%; padding-left:10px}
.txtBox ul li:before {content:""; position:absolute; left:0; top:8px; width:4px; height:4px; border-radius:50%; background:#555}
.txtBox.md ul li:before {top:10px}
.txtBox ul li:not(:first-child) {margin-top:5px}
.txtBox li strong {color:#4050a7; font-weight:600}
.txtBox ol li > p {margin-left:20px; margin-bottom:5px}
.txtBox.none {margin:0; padding:0; border-radius:0; background:none}
.txtBox .require:before {content:"*";  top:auto; background:none; color:#4050a7}

.txtBox.bullet.gap {margin:15px 0}
.txtBox.bullet li:before {content:""; display:flex; align-items:center; top:calc(50% - 1px); width:5px; height:1px; background:#757575 }



/* btnBox */
.btnBox {display:flex; justify-content:space-between; align-items:center; margin-top:30px}
.btnBox li:first-child:nth-last-child(1) {width:100%; text-align:right}
.btnBox li:last-child button {margin-right:0}/* add 24.08.12  */
.btnBox button {margin:0 5px}
.btnBox.cnt {justify-content:center}
.btnBox.end {justify-content:end}
.searchWrap + .btnBox {margin:-20px 0 30px}
.searchWrap + .mixTitle2 {margin:-20px 0 30px}
.searchWrap + .mixTitle2 .btnBox {margin:0}
.btnBox.row {flex-direction:column; align-items:flex-start; margin-top:0}
.btnBox.row li {margin-top:5px}
.btnBox.row li:first-child {margin-top:0}
.btnBox.row li button {min-width:150px}
.authBtnBox {display:flex; justify-content:space-between; align-items:center}
.authBtnBox .btn {margin-left:5px; padding:0 10px}
.btnBox.multi {margin:0 0 30px}
.btnBox.multi:not(:has(> *)) {display:none}
.btnBox.multi li {margin:0 5px}
.btnBox.multi li button {margin:0 2px}
@media (max-width: 768px) {
	.authBtnBox {display:block}
	.authBtnBox .btn {margin-left:0; margin-top:5px}
	.authBtnBox .btn:not(:first-child) {margin-left:5px}
}



/* agreeWrap */
.agreeWrap {width:100%}
.agreeWrap > div {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center}
.agreeWrap > .txtBox.none {margin:5px 0}



/* datepicker */
.ui-datepicker, .ui-datepicker a {font-family:"Pretendard", sans-serif; font-size:1.5rem; color:#555}

html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border:#e1e3ea;
	background:#e1e3ea;
	color:#555;
}

.ui-state-default.ui-state-highlight {border:1px solid #999 !important; background:#fff !important}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {color:#555 !important}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {border:1px solid #4050a7 !important; background:#4050a7 !important; color:#fff !important}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {border:1px solid #cfd1d8; background:#cfd1d8; color:#fff}



.dateBox > span {min-width:calc(50% - 10px); max-width:calc(50% - 10px)}
.dateBox > span ~ span {margin-left:0 !important}
.dateBox > em {width:20px; text-align:center}
.dateBox .date input {width:100%; background:url("../images/ico_calendar.svg") right 7px center no-repeat #fff; background-size:20px auto}



/* 에러페이지 */
.errowWrap {display:flex; justify-content:center; align-items:center; width:100%; min-height:85vh}
.errowWrap:before {content:""; display:flex; width:456px; height:350px; margin-right:70px; background:url("../images/bg_error.svg") no-repeat; background-size:contain}
.errorBox {display:flex; flex-direction:column; align-items:center}
.errorTxt {position:relative; padding-left:15px; font-size:1.7rem; color:#555}
.errorTxt:before {content:""; position:absolute; left:0; top:15px; width:4px; height:calc(100% - 20px); background:#cfd1d8}
.errorTxt > p {font-size:48px; color:#4050a7; font-weight:600}
.errorTxt > strong {display:block; margin-bottom:5px; font-size:1.9rem; color:#333; font-weight:600}
.errorBox .btnBox {justify-content:flex-start; width:100%}
.errorBox .btnBox li:first-child button {margin-left:0}
.errorBox .btnBox li button {padding:0 20px}



/* 로딩 */
.loadingWrap {z-index:99999; position:fixed; left:0; top:0; width:100%; height:100%}
.loadingBox {display:flex; justify-content:center; align-items:center; flex-direction:column; position:relative; width:100%; height:100%; background:#fff}
.loadingBox.loadingBoxWrap {background:none}
.loadingWrap .loadingBox {background:rgba(255,255,255,.8)}
.loadingBar {display:inline-block; width:60px; height:60px; background:url("../images/loading.gif") center center no-repeat; background-size:contain}
.lodingText {margin-top:20px; font-size:1.7rem; color:#555; text-align:center}
.lodingText p {font-size:1.9rem; color:#7f8fdb; font-weight:600}



/* window popup */
.winPop .contents {min-height:100%; margin:0; padding:0; border:none; background:none; box-shadow:none}



/* iframe */
iframe {border:none; width:100%; height:100%}


/* ETC */
.flex {display:flex; align-items:center}
@media (max-width: 768px) {
	.flex {flex-wrap:wrap}
}
.flex span ~ span {flex:1; margin-left:5px}
.flex span.flex1 {flex:1}
.flex span.flex1 ~ span {flex:none}
.flexEnd {justify-content:flex-end !important}
.flex.flex2 {justify-content:space-between; width:100%}
.flex.flex2 .h4 {position:relative; top:5px}
.noData {display:flex; justify-content:center; align-items:center; padding:50px 15px !important; font-size:1.7rem}
.noImage {display:flex; flex:1; flex-direction:column; justify-content:center; align-items:center; background:#f7f7f7; padding: 20px}
.noImage:before {content:""; display:flex; justify-content:center; align-items:center; width:55px; height:55px; background:url("../images/noImage.svg") center center no-repeat; background-size:contain}
.noImage span {font-size:1.5rem; color:#757575}
.mar_top0 {margin-top:0 !important}
.mar_top5 {margin-top:5px !important}
.mar_top30 {margin-top:30px !important}
.mar_bottom0 {margin-bottom:0 !important}
.mar_bottom5 {margin-bottom:5px !important}
.mar_bottom10 {margin-bottom:10px !important}
.mar_bottom15 {margin-bottom:15px !important}
.mw27p {min-width:27% !important; max-width:27% !important}
.mw30p {min-width:30% !important; max-width:30% !important}
.mw33p {min-width:33% !important; max-width:33% !important}
.mw36_5p {min-width:36.5% !important; max-width:36.5% !important}
.mw50p {min-width:50% !important; max-width:50% !important}
.mw100p {min-width:100% !important; max-width:100% !important}
.mw100 {min-width:100px !important; max-width:100px !important}
.mw120 {min-width:120px !important; max-width:120px !important}
.mw150 {min-width:150px !important; max-width:150px !important}
.mw200 {min-width:200px !important; max-width:200px !important}
.mw250 {min-width:250px !important; max-width:250px !important}
.mw300 {min-width:300px !important; max-width:300px !important}
.mw400 {min-width:400px !important; max-width:400px !important}
.cntBox {padding:30px; border:1px solid #e1e3ea; background:#fff}
.left {text-align:left !important}
.center {text-align:center !important}
.right {text-align:right !important}
.md {font-size:1.7rem}
.sm {font-size:1.5rem}
.red {color:#e41717}
.blue {color:#4050a7}