/* basic */
.mgt0 {margin-top:0 !important;}
.mgt05 {margin-top:5px !important;}
.mgt10 {margin-top:10px !important;}
.mgt15 {margin-top:15px !important;}
.mgt20 {margin-top:20px !important;}
.mgt25 {margin-top:25px !important;}
.mgt30 {margin-top:30px !important;}
.mgt50 {margin-top:100px !important;}
.mgt55 {margin-top:55px !important;}
.mgr05 {margin-right:5px !important;}
.mgl05 {margin-left:5px !important;}
.fr {float:right !important;}
.fl {float:left;}
#mask {position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,.9); display:none;}

.fcWhite {color:#fff !important;}
.fcBlue {color:#1d4ed8;}
.fcRed {color:#e6334a;}
.bPink {background:#fdf4f6; color:#000 !important;}
.bRed {background:#e6334a;}
.bBlue {background:#1d4ed8;}
.w20 {width:20%;}
.w25 {width:25%;}
.w33 {width:33.3%;}
.w35 {width:35%;}
.w40 {width:40%;}
.w50 {width:50%;}
.w60 {width:60%;}
.w65 {width:65%;}
.borT0 {border-top:0 !important;}
.wi100 {width:100%; padding:10px 20px; overflow:hidden;}
.pdT20 {padding-top:20px !important;}
.pd0 {padding:0 !important;}
.spaceH10 {clear:both; width:100%; height:10px;}
.overh {overflow:hidden;}
.backWhite {background:#fff !important;}
.small {font-size:12px; color:rgba(0,0,0,.6); font-weight:400;}

.caption {font-size:13px; color:#cd3d3d;}
.posiR {position:relative;}
.btnS {position:absolute; right:0; top:0; height:100%; background:#475569; padding:0 15px; color:#fff; font-size:13px; line-height:2.5; border-radius:3px; cursor:pointer;}

.th {padding:25px 0 0 0; font-size:15px; font-weight:500;}
.td {width:100%; font-size:16px;}
.td input {width:100%; height:50px; background:#fff; font-size:16px; border:1px solid rgba(0,0,0,.1); border-radius:5px;}
input.trans {background:none !important;}
.td select {width:100%; height:50px; background:#fff; font-size:16px; border:1px solid rgba(0,0,0,.1); border-radius:5px;}
.td.phone {display:flex;}
.td.phone strong {line-height:50px; padding:0 5px;}
.td:hover input {border:1px solid #464951; transition:all .5s;}
.td.basic {height:35px; background:#f5f5f5; line-height:35px; border:1px solid rgba(0,0,0,.1); border-radius:3px;}
input::placeholder {color:rgba(0,0,0,.3);}

.btnBasic {background:#475569; height:26px; padding:0 10px; line-height:28px; color:#fff; border-radius:3px; display:inline-block; cursor:pointer;}
.btnBasic.on {background:#2563eb;}

@media all and (max-width: 520px) {
	.btnBasic {padding:0 5px; font-size:12px;}
}

/* 로그인 */
.loginTitle {padding:5% 0 30px 0; text-align:center; font-size:45px; font-weight:600; color:#1d4ed8;}
.loginWrap {width:520px; margin:0 auto; padding:50px; border:1px solid #e5e5e5; border-radius:20px;}
.loginWrap input {width:100%; height:45px; background:#fff; border-top:0 !important; border-left:0 !important; border-right:0 !important; border-radius:0 !important; border-bottom:1px solid #e5e5e5;}
.loginWrap input:hover {border-bottom:1px solid #2563eb;}
.btnJoin {width:100%; height:60px; background:#1d4ed8; margin:30px 0 0 0; color:#fff; font-size:17px; font-weight:600; line-height:60px; text-align:center; border-radius:4px; cursor:pointer;}

@media all and (max-width: 520px) {
	.loginWrap {width:90%; padding:30px;}
}


/* layout */
.leftWrap {position:fixed; top:0px; left:0; width:250px; height:100%; background:#fff; border-right:1px solid #e5e5e5;}
.leftWrap .logo {background:#0f172a; padding:28px 40px; color:#fff; font-weight:600; font-size:22px;}
.leftWrap .close {position:absolute; top:10px; right:10px; width:30px; height:30px; background:url(/image/icon_x_w.png) no-repeat center; display:none;}

.leftWrap .menu {width:85%; margin:50px auto 0;}
.leftWrap .menu ul {padding:10px; overflow:hidden;}
.leftWrap .menu ul li {float:left;}
.leftWrap .menu .icon {width:38px; height:38px; background-color:#ececec; background-position:top center; margin-right:10px; text-align:center; line-height:38px; border-radius:50%; display:inline-block;}
.leftWrap .menu .mName {font-size:15px; line-height:1.2;}
.leftWrap .menu .mName .small {font-size:12px; color:rgba(0,0,0,.5);}

.leftWrap .menu ul:hover {background:#1d4ed8; border-radius:7px;}
.leftWrap .menu ul.on .icon {background-color:#1d4ed8; background-position:bottom center;}
.leftWrap .menu ul.on .mName {color:#1d4ed8; font-weight:600;}
.leftWrap .menu ul.on .mName .small {color:#5595f6;}
.leftWrap .menu ul:hover .icon {background-color:rgba(255,255,255,.1); background-position:bottom center;}
.leftWrap .menu ul:hover .mName {color:#fff;}
.leftWrap .menu ul:hover .mName .small {color:rgba(255,255,255,.4);}

.mIcon01 {background-image:url(/image/icon01.png);}
.mIcon02 {background-image:url(/image/icon02.png);}
.mIcon03 {background-image:url(/image/icon03.png);}
.mIcon04 {background-image:url(/image/icon04.png);}
.mIcon05 {background-image:url(/image/icon05.png);}


@media all and (max-width: 1500px) {
	.leftWrap {width:220px;}
}

@media all and (max-width: 1200px) {
	.leftWrap {left:-250px; width:250px; border-right:0;}
	.leftWrap .close {display:block;}
}


.topTop {position:fixed; top:0; left:250px; width:calc(100% - 250px); height:50px; background:#fff; padding:0 2%; border-bottom:1px solid #e5e5e5;}
.topTop .topSearch {float:right; width:200px; height:28px; background:#f6f6f6; margin:10px 7px 0 0; border:1px solid #e5e5e5; border-radius:14px;}
input.search {float:left; width:calc(100% - 40px); height:28px; background:transparent; padding-left:10px; border:0;}
.btnSear {float:right; width:40px; height:28px; background:url(/image/icon_search.svg) no-repeat center; background-size:14px; cursor:pointer;}
.btnSearB {float:right; width:30px; height:27px; background:url(/image/icon_search_w.svg) no-repeat center #475569; background-size:14px; border-radius:3px; cursor:pointer;}
select.sort {height:28px;}

.topTop .mNav {float:left; width:30px; height:30px; background:url(/image/icon_nav.png) no-repeat center #e9ecef; background-size:15px; margin:10px 10px 0 0; border-radius:50%; display:none; }
.topTop .logo {float:left; padding:12px 0 0 0; font-weight:600; font-size:20px; display:none;}

.topTop .topMy {position:relative; float:right; height:28px; background:url(/image/icon_down.png) no-repeat 92% center #f6f6f6; margin:10px 0 0 0; padding:0 20px 0 10px; font-size:13px; line-height:28px; border:1px solid #e5e5e5; border-radius:14px; cursor:pointer;}
.topTop .topMy img {margin:5px 3px 0 0;}
.topTop .topMy .mySub {position:absolute; top:29px; right:0; width:calc(100% + 10px); background:#fff; padding:10px 15px; font-size:13px; line-height:1.4; border-radius:10px; box-shadow:0 0 5px rgba(0,0,0,.07); display:none;}
.topTop .topMy .mySub a {padding:4px 0; display:block;}
/* .topTop .topMy .mySub a:last-child {border-top:1px solid #e5e5e5;} */
.topTop .out {float:right; height:28px; background:#f6f6f6; margin:10px 0 0 0; padding:0 10px; font-size:13px; line-height:28px; border:1px solid #e5e5e5; border-radius:14px; cursor:pointer;}


@media all and (max-width: 1500px) {
	.topTop {left:220px; width:calc(100% - 220px);}
}

@media all and (max-width: 1200px) {
	.topTop {left:0; width:100%;}
	.topTop .mNav {display:inline-block;}
	.topTop .logo {display:inline-block;}
}

@media all and (max-width: 380px) {
	.topTop .logo {padding:15px 0 0 0; font-size:17px; }
}


.mainWrap {width:75%; margin:90px 0 0 350px; }
.mainTitle {height:38px; line-height:38px;}
.mainTitle .mainIcon {float:left; width:38px; height:38px; background-position:top center; background-size:100% auto; display:inline-block;}
.mainTitle .subject {padding:0 5px 0 0; font-weight:600; font-size:20px;}
.mainTitle .small {font-size:14px; color:rgba(0,0,0,.7);}

.mainTop {width:100%; padding:10px 0;}

@media all and (max-width: 1500px) {
	.mainWrap {width:75%; margin:90px 0 0 270px;}
}

@media all and (max-width: 1200px) {
	.mainWrap {width:95%; margin:80px auto;}
}

@media all and (max-width: 768px) {
	.mainWrap {margin:70px auto;}
	.mainTitle {height:30px; line-height:30px;}
	.mainTitle .mainIcon {width:30px; height:30px;}
	.mainTitle .subject {font-size:17px;}
	.mainTitle .small {font-size:13px;}
}


.radioWrap {float:left; background:#fff; height:30px; border-radius:15px; border:1px solid #e5e5e5; display:inline-block;}
.radioWrap ul {overflow:hidden;}
.radioWrap ul li {float:left; padding:0 12px; line-height:30px; font-size:13px; cursor:pointer; transition:none;}
.radioWrap ul li.on {background:#1d4ed8; color:#fff; border-radius:15px; transition:none;}

.selectBar {position:relative; float:right; background:url(/image/icon_down.png) no-repeat 92% center #fff; width:130px; height:30px; margin-right:5px; padding:0 10px; line-height:30px; border-radius:5px; border:1px solid #e5e5e5; cursor:pointer;}
.selSub {position:absolute; top:30px; left:0; width:100%; background:#fff; padding:10px 15px; font-size:13px; line-height:1.4; border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,.07); display:none;}
.selSub p {padding:3px 0;}

.downBtn {float:right; background:#fff; width:130px; height:30px; padding:0 10px; text-align:center; line-height:30px; border-radius:5px; border:1px solid #e5e5e5; cursor:pointer;}
.downBtn img {margin:7px 3px 0 0;}

.mBoxWrap {width:100%; margin:15px 0 0 0; display:flex; justify-content:space-between; align-content:space-between; flex-wrap:wrap;}
.mBox {background:#fff; padding:20px 30px; border-radius:7px; border:1px solid #e5e5e5;}
.mBox .tit {padding-bottom:10px; font-weight:600; font-size:16px;}
.mBox .name {font-size:13px;}
.mBox .price {padding-top:5px; font-weight:600; font-size:25px;}
.mBox .price .won {font-size:17px;}
.mBox .number {font-weight:600; font-size:25px;}
.mBox .text {font-size:12px;}

.mBox .titRight {float:right; margin:10px 0 0 0;}

.mBox .btnDetail {position:absolute; top:15px; right:20px; width:30px; height:30px; background:url(/image/icon_search.svg) no-repeat center #e5e5e5; background-size:14px; border-radius:50%;}

@media all and (max-width: 860px) {
	.mBoxWrap {margin:5px 0 0 0;}
	.mBox {padding:15px;}
	.mBox .tit {font-size:14px;}
	.mBox .name {font-size:12px;}
	.mBox .price {font-size:20px;}
	.mBox .price .won {font-size:15px;}
	.mBox .number {font-size:20px;}
}

@media all and (max-width: 620px) {
	.mBox .btnDetail {top:10px; right:10px; width:22px; height:22px; background-size:13px;}
}

@media all and (max-width: 550px) {
	.mBox .titRight {float:left;}
}

@media all and (max-width: 400px) {
	.mBox {padding:10px;}
	.mBox .price {font-size:17px;}
	.mBox .price .won {font-size:13px;}
	.mBox .number {font-size:17px;}
	
	.mBox .btnDetail {top:5px; right:5px; width:20px; height:20px;}
}


.mw01 {width:100%;}
.mw02 {width:calc(50% - 5px);}
.mw03 {width:calc(33.3% - 5px);}
.mw03.fix03 {width:calc(33.3% - 5px);}
.mw03_1 {width:calc(66.7% - 5px);}
.mw03_2 {width:calc(33.3% - 5px);}

.mw04 {width:calc(25% - 5px);}
.mw04_1 {width:calc(75% - 5px);}
.mw05 {width:calc(20% - 5px);}
.mw07 {width:calc(14% - 5px);}


@media all and (max-width: 660px) {
	.mw04 {width:calc(50% - 5px);}
	.mw03_1 {width:100%;}
	.mw03_2 {width:100%;}
}

@media all and (max-width: 400px) {
	.mw02 {width:calc(50% - 3px);}
	.mw03 {width:calc(33.3% - 3px);}
}


.barGraph {overflow:hidden;}
.barGraph ul {margin:12px 0; overflow:hidden;}
.barGraph ul li {float:left; overflow:hidden;}
.barGraph .gnumber {width:25px; height:25px; background:#808a97; margin-top:7px; font-size:14px; color:#fff; line-height:25px; text-align:center; border-radius:5px; display:inline-block;}
.barGraph .cont {float:right; width:calc(100% - 35px);}
.barGraph .name {float:left; font-size:15px;}
.barGraph .gprice {float:right; font-size:15px; font-weight:600;}
.barGraph .bar {position:relative; width:100%; height:6px; background:rgba(0,0,0,.1); border-radius:3px; }
.barGraph .barLine {position:absolute; top:0; left:0; height:6px; background:#2563eb; border-radius:3px; }
.barGraph .txt {padding-top:5px; color:rgba(0,0,0,.5);}

.workWrap {overflow:hidden;}
.workWrap ul {margin:12px 0; overflow:hidden;}
.workWrap ul li {float:left; overflow:hidden;}
.workWrap .wicon {width:25px; height:25px; background:#e5e5e5; margin-top:7px; line-height:25px;} 

.inTop {background:#fff; padding:10px; border-radius:5px; overflow:hidden;}
.inTop .inRight {float:right; overflow:hidden;}
.inSearch {float:left; width:200px; height:28px; background:#f6f6f6; margin:0 5px 0 0; border:1px solid #e5e5e5; border-radius:3px;}
.inSelect {float:left; height:28px; background:#f6f6f6; border:1px solid #e5e5e5; border-radius:3px;}

.inTable {width:100%;}
.inTable table {width:100%;}
.inTable table tr:hover {background:#f7f7f7;}
.inTable table th {background:#f5f5f5; padding:10px; text-align:left; border-bottom:1px solid #e5e5e5;}
.inTable table td {padding:10px; text-align:left; border-bottom:1px solid #e5e5e5;}

@media all and (max-width: 890px) {
	.inTable {overflow-x:auto;}
	.inTable table {width:880px;}
}


.bottomWrap {width:100%; padding:7px; overflow:hidden;}
.bottomWrap .total {float:left;}
.bottomWrap .page {float:right; }
.bottomWrap .page .num {height:24px; padding:0 7px; line-height:24px; display:inline-block;}
.bottomWrap .page .pLeft {float:left; width:24px; height:24px; background:url(/image/left.jpg) no-repeat center; border:1px solid #e5e5e5; border-radius:3px; display:inline-block;}
.bottomWrap .page .pRight {float:right; width:24px; height:24px; background:url(/image/right.jpg) no-repeat center; border:1px solid #e5e5e5; border-radius:3px; display:inline-block;}

.treeWrap {overflow:hidden; display: flex; align-items: center;}
.treeWrap ul {float:left;}
.treeWrap .arrow {width:20px; height:29px; text-align:center; border:0px solid red;}
.treeWrap .arrow { width: 24px; height: 24px; text-align: center; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; color: #666; user-select: none; font-size: 12px; margin-right: 2px; cursor: pointer; transition: transform 0.2s; }
.treeWrap .nameTag {width:32px;height: 32px; background: #e9ecef; border-radius:5px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #495057; margin: 0 10px 0 5px; padding: 0; list-style: none; font-size: 13px; flex-shrink: 0;}
.treeWrap .name { list-style: none; padding-left: 0; margin: 0; }
.treeWrap .name li { list-style: none; line-height: 1.4; }
.treeWrap .name .small { color: rgba(0,0,0,0.5); font-size: 12px; }
.treeWrap ul li {}

.tagName {background:#f5f5f5; width:24px; height:24px; text-align:center; line-height:24px; border-radius:3px; display:inline-block;}
.tagGreen {background:#e4e7d9; height:20px; padding:0 7px; color:#153b1d; border-radius:9px; display:inline-block;}
.tagMint {background:#d6ecd9; height:20px; padding:0 7px; border-radius:10px; display:inline-block;}
.tagOrange {background:#f8e1c8; height:20px; padding:0 7px; border-radius:10px; display:inline-block;}
.tagRed {background:#FFB4B4; height:20px; padding:0 7px; border-radius:10px; display:inline-block;}
.tagBlue {background:#d6ddea; height:20px; padding:0 7px; border-radius:10px; display:inline-block;}
.flagGreen {background:url(/image/cir_green.png) no-repeat 7px center #d6ecd9; height:20px; padding:0 7px 0 14px; line-height:20px; color:#153b1d; border:1px solid #add8b4; border-radius:10px; display:inline-block;}
.flagGray {background:url(/image/cir_gray.png) no-repeat 7px center #ebe7de; height:20px; padding:0 7px 0 14px; line-height:20px; color:#666; border:1px solid #ddd8cc; border-radius:10px; display:inline-block;}
.flagBlue {background:url(/image/cir_blue.png) no-repeat 7px center #d6ddea; height:20px; padding:0 7px 0 14px; line-height:20px; color:#566e9a; border:1px solid #b0bfda; border-radius:10px; display:inline-block;}
.flagOrange {background:url(/image/cir_orange.png) no-repeat 7px center #f8e1c8; height:20px; padding:0 7px 0 14px; line-height:20px; color:#552e09; border:1px solid #efcfad; border-radius:10px; display:inline-block;}

.graWrap {overflow:hidden;}
.barWrap {float:left; width:60%; padding:18px 12px;}
.barWrap .bar {position:relative; width:100%; height:6px; background:rgba(0,0,0,.1); border-radius:4px; }
.barWrap .barLine {position:absolute; top:-1px; left:0; height:8px; background:#2563eb; border-radius:5px; }
.barWrap .barLine .barCir {position:absolute; top:-2px; right:0px; width:12px; height:12px; background:#2563eb; border-radius:8px; display:inline-block;}

.percent {float:left; width:40%; margin:7px 0 0 0;}
.percent input {float:left; width:30px; height:30px; text-align:center; border-radius:3px;}
.percent .count {float:left; width:15px;}
.percent .count .up {width:17px; height:15px; background:url(/image/btn_up.png) no-repeat center #fff; border:1px solid #e5e5e5; border-radius:3px; cursor:pointer;}
.percent .count .down {width:17px; height:15px; background:url(/image/btn_down.png) no-repeat center #fff; border:1px solid #e5e5e5; border-radius:3px; cursor:pointer;}
.percent .per {float:left; padding:7px 0 0 7px; font-size:16px;}


.popupBack {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:100; display:none;}
.popupList {position:absolute; top:50%; left:50%; max-width:400px; width:95%; background:#fff; transform:translate(-50%, -50%); /* padding:35px; */ border-radius:10px; overflow:hidden; box-shadow:0 10px 10px rgba(0,0,0,.5);}
.popupList .close {position:absolute; top:15px; right:15px; width:20px; height:20px; background:url(/image/icon_x.png) no-repeat center; border-radius:50%; display:inline-block; cursor:pointer;}
.popupList .title {background:rgba(0,0,0,.07); padding:15px; font-size:17px; font-weight:600; border-bottom:1px solid #e5e5e5;}
.popupList .pList {background:#fff; padding:10px 20px; font-size:14px; }
.popupList .pList .search {height:30px; background:rgba(0, 0, 0, 0.02); border:1px solid rgba(0, 0, 0, 0.2);}
.popupList .pList .selOK {height:30px; padding:0 15px; background:#41518f; color:#fff; border:0;}
.popupList .pList .tableList {height:180px; margin-top:15px; overflow-y:auto; }
.popupList .pList ul {width:100%; display:flex; justify-content:space-around;}
.popupList .pList ul li {padding:8px; text-align:center; }
.popupList .pList ul li:nth-child(1) {width:10%;}
.popupList .pList ul li:nth-child(2) {width:30%;}
.popupList .pList ul li:nth-child(3) {width:25%;}
.popupList .pList ul li:nth-child(4) {width:35%;}
.popupList .pList .th {background:rgba(0,0,0,.02);  border-top:1px solid #41518f; border-bottom:1px solid rgba(0,0,0,.1);}
.popupList .pList .td {border-bottom:1px dashed rgba(0,0,0,.1); }
.popupList .pList .name {padding:10px 0 3px 0; font-size:14px;}
.popupList .pList .input input {width:100%; height:35px; background:#f5f5f5; border-radius:3px;}
.popupList .pList .input select {width:100%; height:35px; background:#f5f5f5; border: 1px solid #ececec; border-radius:3px;}
.popupList .btnWrap {clear:both; width:100%; margin-top:25px; text-align:center; }
.popupList .btnWrap .bOk {background:#2563eb; padding:7px 35px; color:#fff; border-radius:3px; display:inline-block; cursor:pointer;}
.popupList .btnWrap .bCa {background:#eee; padding:7px 35px; border-radius:3px; display:inline-block; cursor:pointer;}


.bankWrap {overflow:hidden;}
.bankWrap .th {padding:20px 0 3px 0; font-size:13px;}
.bankWrap .td {}
.bankWrap .td input {height:35px; background:#f5f5f5; font-size:13px; border-radius:3px;}
.bankWrap .td input:active {outline:0 !important;}
.bankWrap .td input:hover {outline:0 !important; border:1px solid rgba(0,0,0,.1);}
.bankWrap .td input:focus {outline:0 !important;}
.bankWrap .td select {height:35px; background:#f5f5f5; font-size:13px; border-radius:3px;}
.bankWrap .td textarea {width:100%; height:80px; background:#f5f5f5; font-size:13px; border:1px solid rgba(0,0,0,.1); border-radius:3px;}
.bankWrap .td textarea:active {outline:0 !important;}
.bankWrap .td textarea:hover {outline:0 !important;}
.bankWrap .td textarea:focus {outline:0 !important;}
.bankWrap .secWrap {overflow:hidden;}
.bankWrap .sec {float:left; width:20%; height:35px; line-height:35px; text-align:center; border:1px solid rgba(0,0,0,.1); cursor:pointer;}
.bankWrap .sec:nth-child(1) {border-radius:5px 0 0 5px;}
.bankWrap .sec:nth-child(5) {border-radius:0 5px 5px 0;}
.bankWrap .btnWrap {clear:both; width:100%; margin:10px 0 0 0;}
.bankWrap .btnWrap .bOk {background:#1d4ed8; padding:5px 15px; color:#fff; border-radius:5px; display:inline-block;}
.bankWrap .btnWrap .bCa {background:#9199a5; padding:5px 15px; color:#fff; border-radius:5px; display:inline-block;}

.checkList {line-height:2;}
.checkList img {width:15px; height:auto; vertical-align:middle;}