@charset "utf-8";


/************************************** import **************************************/


@import url("../mapping-style/mapping-style.css");


/************************************** register css **************************************/
.register-wrap {padding-bottom:50px}
.register-wrap table.vertic-table tr th {padding:10px}
.register-wrap .left-img {float:left; margin-right:30px; width:350px;}
.register-wrap .file-input { display: inline-block; text-align: left; width: 100%; position: relative; padding: 7px 30px; line-height: 35px; vertical-align: middle; cursor: pointer; font-weight: 400; height:220px; border:1px solid #e7e7e7; background:#fff;}
.register-wrap .file-input > input[type='file'] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 301; cursor: pointer; }
.register-wrap .file-input > label {position: absolute;top: 50%;left: 48%;transform: translate(-50%, -50%);color: #aaa;}
.register-wrap .file-input > label img {display:block; text-align:center; margin:0 auto 5px}
.register-wrap .left-img .img-box {width:350px; height:220px}
.register-wrap .left-img .img-info {margin-top:20px;}
.register-wrap .left-img .img-info li {position:relative; color:#947bd9; margin-bottom:3px; font-size:1.2rem; padding-left:10px; white-space: normal;}
.register-wrap .left-img .img-info li:before {position:absolute; content:''; top:9px; left:0px; width:2px; height:2px; background:#947bd9; border-radius:50%;}

.register-wrap .right-table {float:left; width:calc(100% - 380px)}
.register-wrap textarea {min-height:95px;}
.register-wrap .right-table .url-info .input-box {width:calc(100% - 70px); float:left;}
.register-wrap ul.checking {position:relative; top:2px; float:right; right:-1px}
.register-wrap ul.checking li {float:left; padding:2px 5px; background:#eeecf2; color:#5c5b8a; border-radius:4px; margin-left:5px; transition:background .3s ease, color .3s ease; cursor:pointer;} 
.register-wrap ul.checking li.on .material-icons {transform: rotate(180deg);}
.register-wrap ul.checking .material-icons {font-size:16px; font-weight:600; position: relative; top: -2px;}
.register-wrap ul.checking li:hover { background: #c3bdd6; color:#fff;}
.register-wrap .row-table {margin-top:10px}
.register-wrap .row-table table.vertic-table {border-color:#c3c2c8}
.register-wrap .row-table table.vertic-table tr th {background:#f2f1f6;font-size:1.2rem;}
.register-wrap .row-table table.vertic-table tr td {font-size:1.2rem;}

.register-wrap .db-category .item { display: inline-block; padding:2px 12px; border-radius: 3px; background: #d4dcf5; color:#1f0042; font-weight: 600; font-size: 1.2rem; margin:2px;  }
/* 차트 정보 */
.register-wrap .db-chart .item { position: relative; display: inline-block; padding: 2px 12px; border-radius: 3px; background: #f0f0f0; color:#1f0042; font-weight: 600; font-size: 1.2rem; margin:2px; }
.register-wrap .db-chart .item .chart-hover  { display: none; position: absolute; top: calc(100% + 6px); left:50%; background:#6f90f6; font-size: 1rem; color:#fff; padding:3px 5px; border-radius: 3px; transform: translateX(-50%); z-index: 99; width:87%; text-align:center;}
.register-wrap .db-chart .item:hover .chart-hover { display: block; }
.register-wrap .db-chart .item .chart-hover:after { content: "";  position: absolute; top: -4px; right: 50%; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #6f90f6; transition: border-top .25s ease; transform: rotate(0); transition: transform .2s; margin-right: -4px;}
.register-wrap .db-chart .etc {display: inline-block;padding: 3px 5px;color: #1f0042;font-weight: 600;font-size: 1.2rem; position: relative; top:2px}
.register-wrap .db-chart .item img { max-width: 18px; height:11px; display: inline-block; vertical-align: middle; }
.register-wrap .db-info .tit { font-size: 1.4rem; font-weight: 600; color:#73789a; padding-bottom:15px;}
.register-wrap .db-info ul li { position: relative; padding: 2px 0 2px 30px; margin-bottom: 15px; font-size: 1.4rem; font-weight: 600; color:#1f0042;text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.register-wrap .db-info ul li:last-child { margin-bottom:0; }
.register-wrap .hashtag { font-size: 1.2rem; color:#4f62ed; }
.register-wrap .hashtag > span { display: inline-block; float: left; border-radius: 3px; padding: 3px 6px; text-align: center; }


/* 회원 대시보드 수정 탭 */
.register-wrap .db-tab {margin-bottom:20px}
.register-wrap .db-tab li {float:left; width:25%; text-align:center; padding:10px;background:#fff; border:1px solid #e7e7e7; cursor:pointer; font-weight:600; color:#888;}
.register-wrap .db-tab li span.count {font-weight:600; color:#c4b7e8; font-size:1.1rem; margin-left:4px}
.register-wrap .db-tab li:not(:last-child) {border-right:0}
.register-wrap .db-tab li.select {background:#642eff; color:#fff}
.register-wrap .db-tab li.select span.count {color:#fff;}
.register-wrap .db-tab li:not(.select, .disabled):hover {background:#fafafa;}
.register-wrap .db-tab li.disabled {color:#ccc; cursor:no-drop}
.register-wrap .db-tab li.disabled span.count {color:#ddd}


.register-wrap .input-wrap {margin-bottom:8px;}
.register-wrap .input-wrap .btn-wrap {float:right; top:1px}
.register-wrap .input-box { position: relative; }
.register-wrap .input-wrap .input-box {float:left; width: calc(100% - 60px)}
.register-wrap .input-wrap .input-box input[type="text"].text-input { position: relative; padding: 0 20px;width: 100%;}
.register-wrap .hashtag-wrap .input-box:after { content: '#'; position: absolute; top: 3px; left: 10px; color: #000; font-weight: 600; font-size: 1.2rem; }
.register-wrap .author-wrap {margin-top:8px}
.register-wrap .author-wrap .input-wrap .input-box input[type="text"].text-input {padding:0 10px}

.register-wrap .added-item .item { position: relative; display: inline-block; padding: 3px 30px 3px 7px; font-size: 1.2rem; font-weight: 600;margin-right: 3px; background:#fff; margin-bottom: 5px; border-radius:5px;}
.register-wrap .added-item .item .del-btn { position: absolute; top: 3px; right: 4px; width: 17px; height: 17px; text-align: center; border-radius: 50%;  cursor: pointer; }
.register-wrap .added-item .item .del-btn:hover { background-color: #eae7fd; }
.register-wrap .added-item .item .del-btn .material-icons { font-size: 13px; color: #642eff;line-height:17px }
.register-wrap .added-item .item { border: 1px solid #642eff  ; color: #642eff; }

.register-wrap .author-wrap .added-item { padding: 10px; background-color: #f4f4f4; border-radius: 5px; height: 80px;}
.register-wrap .author-wrap .added-item .item.sucess { border: 1px solid #76c1a3; color: #76c1a3; }
.register-wrap .author-wrap .added-item .item.sucess .del-btn:hover { background: #e9f5f0; }
.register-wrap .author-wrap .added-item .item.sucess .del-btn .material-icons { color: #76c1a3; }
.register-wrap .author-wrap .added-item .item.fail { border: 1px solid #da7676; color: #da7676; }
.register-wrap .author-wrap .added-item .item.fail .del-btn:hover { background: #fcf1f1; }
.register-wrap .author-wrap .added-item .item.fail .del-btn .material-icons { color: #da7676; }


/* 카테고리탭 차트데이터 */
.data-wrap {max-height:400px}
.data-wrap ul li {margin-bottom:8px; background:#f2f1f6; padding:10px 10px 12px; border-radius:3px; position:relative;}
.data-wrap ul li .data-btn {float:right;}
.data-wrap .data p.img-txt {font-size:1.1rem; font-weight:600; float:left; position:relative; top:3px}
.data-wrap .data p.tit {font-size:1.3rem; color:#000; float:left; width:calc(100% - 108px)}
.data-wrap .data.url p.tit {width:calc(100% - 75px)}
.data-wrap .data.url p.img-txt span.material-icons {background:#6894ff;color:#fff; padding:3px; font-size:1rem;border-radius: 4px; margin-right:5px}
.data-wrap .data.img p.img-txt span.material-icons {padding:0;border-radius: 0; font-size:2rem;margin-right:2px}
.data-wrap .data.url > p.img-txt {color:#6894ff;}
.data-wrap .data.img > p.img-txt {color:#f09a9a; left:-2px; top:1px }
.data-wrap .data-btn button {font-size:1rem; padding:2px 4px 2px 5px; height:auto; line-height:normal; min-width:auto; border-radius:5px;  }
.data-wrap .data .data-btn span.material-icons {font-size:17px;}
.data-wrap .data .data-btn button:last-child span.material-icons {font-size:15px}
.data-wrap .data-btn button.img-btn {padding:1px 4px 2px 5px}
/* 차트탭 */
.btn-wrap.top-btn {margin-bottom:5px}
.chart-tab table.normal-table tr td .tit {cursor:pointer;}
.chart-tab table.normal-table tr td .tit.on {font-weight:600; text-decoration: underline;}
.chart-tab table.normal-table tr td .tit:hover {text-decoration: underline;}
.chart-tab table.normal-table tr td .btn-wrap button {height:20px; font-size:1.1rem; line-height:18px; width:90px}

.register-wrap .chart-tab .row-table table.vertic-table {border-color:#e5e5e5; margin-bottom:10px}
.register-wrap .chart-tab .row-table > h3 {text-align:left; font-size:1.3rem; padding-bottom:10px;}
.register-wrap .chart-tab .row-table table.vertic-table tr th {background:#f0eff3;}
.register-wrap .chart-tab .row-table table.vertic-table tr td {text-align:left; background:transparent; padding:0 10px}
.chart-tab table.normal-table tr.row-tr td {padding:20px;background:#f1f1f1;}
.register-wrap .chart-tab .row-table {margin-top:0; margin-bottom:10px; padding:20px;background:#fff; border:1px solid #dee3eb;}
.chart-tab .tb-input-wrap .input-box{float:left; width:calc(100% - 220px); margin-right:5px}
.chart-tab table.normal-table tr td .tb-input-wrap .btn-wrap {float:left;}
.chart-tab table.normal-table tr td .tb-input-wrap .btn-wrap button {height:25px; line-height:24px;}

/* 디자인 탭 */
.design-tab .theme-btn-wrap .theme-btn {float:left; margin-right:40px}
.design-tab .theme-btn-wrap .theme-img {padding-top:5px; width:90px; }
.design-tab .theme-btn-wrap .theme-img > img {max-width:100%; max-height:100%;}


/* 관리자 대시보드 단일 등록 (disabled) */
.register-wrap.disabled .file-input {cursor:no-drop; background:#f8f8f8; }
.register-wrap.disabled .file-input > input[type='file'] {cursor:no-drop}
.register-wrap.disabled .file-input > label {color:#bbb;}

/* 관리자 대시보드 URL */
.register-wrap .db-url-wrap {margin-bottom:20px; padding:10px; background:#fff; border:1px solid #e5e5e5;}
.register-wrap .db-url-wrap p {float:left; font-size:1.4rem; font-weight:600; margin-right:15px; line-height:29px}
.register-wrap .db-url-wrap p .material-icons {font-size:13px; margin-right:5px; background:#642eff; color:#fff; padding:4px; border-radius:5px;}
.register-wrap .db-url-wrap .input-box {float:left; width:calc(100% - 382px)}
.register-wrap .db-url-wrap .btn-wrap {float:right; margin:0;}
.register-wrap .db-url-wrap .input-box input[type="text"].text-input {height:30px;}