@charset "utf-8";

/* header */
header {position:fixed;top:0;left:0;z-index:10;width:100%;background:#fff;border-bottom:1px solid #ebebeb;}
header h1 {display: flex; align-items: center; color: #1a88cd; font-size: 20px;}
header .header-line {display:flex;justify-content:space-between;align-items:center;width:90%;margin:0 auto;padding:12px 0;}
header .header-line .user {position:relative;}
header .header-line .user .name {display:flex;justify-content:space-between;align-items:center;color:#444;cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}
header .header-line .user .name i {width:12px;height:6px;margin-left:12px;}
header .header-line .user .name.on i {transform:rotate(180deg);-webkit-transform:rotate(180deg);}
header .header-line .user .detail {position:absolute;top:30px;right:0;width:200px;border:1px solid #000;text-align:center;}
header .header-line .user .detail li a {display:block;padding:6px 0;background:#fff;}

#wrap {overflow-x:hidden;min-height:100vh;}
#container #content {position:relative;}
#container #content section {}
section aside {position:fixed;top:101px;left:0;width:240px;height:calc(100vh - 101px);padding:50px 20px;border-right:1px solid #ebebeb;}
section aside ul li a {display:block;padding:8px 12px;}
section aside .depth01 {}
section aside .depth01 > li {transition:all 0.8s;}
section aside .depth01 > li > a {display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #bbb;}
section aside .depth01 > li > a i {width:12px;height:6px;}
section aside .depth01 > li.on > a i {transform:rotate(180deg);-webkit-transform:rotate(180deg);}
section aside .depth02 {padding-left:12px;}
section aside .depth02 li a {color:#606060;}
section aside .depth02 li.on a {color:#000;}
section article {position:relative;top:0;left:240px;width:calc(100% - 240px);padding:125px 24px 24px;}

.layout-flex {display:flex;justify-content:space-between;align-items:center;}
.layout-flex.start .modify {margin-left:12px;}

/* table */
.tbl {width:100%;text-align:center;}
.tbl thead th {}
.tbl tbody td {}
.tbl tbody td .btn {padding:4px 8px;border-radius:14px;}

.tbl.type01 thead th {padding:20px 0;background:#b1b1b1;color:#fff;}
.tbl.type01 tbody td {padding:12px 0;border-bottom:1px solid #bbb;font-size:14px;}
.tbl.type01 tbody td .img {width:120px;margin:0 auto;}
.tbl.type01 tbody td.tit-td {max-width:200px;}
.tbl.type01 tbody td.tit-td .tit {display:-webkit-box;overflow:hidden;white-space:initial;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;}

.tbl.type02 tbody th {width:250px;background:#f1f1f1;font-size:14px;}
.tbl.type02 tbody td {padding:16px 14px;border-bottom:1px solid #bbb;font-size:14px;text-align:left;}
.tbl.type02 tbody td .flex-align {display:flex;align-items:center;}
.tbl.type02 tbody td .flex-align.fastart {justify-content:start;}
.tbl.type02 tbody td .flex-align.quantity {align-items:start;flex-direction:column;}
.tbl.type02 tbody td input {padding:12px 8px;border:1px solid #bbb;}
.tbl.type02 tbody td p {padding-top:4px;color:#8b8b8b;font-size:12px;}
.tbl.type02 tbody td select {width:100%;background:#fff url('../images/common/bg_select.png') no-repeat 98% 60%/12px;}
.tbl.type02 tbody td label {cursor:pointer;}
.tbl.type02 tbody td .ipt.ipt-raradio {display:inline-block;width:40px;cursor:pointer;appearance:auto;-webkit-appearance:auto;}
.tbl.type02 tbody td .ipt.ipt-tel:nth-child(1) {width:20%;}
.tbl.type02 tbody td .ipt.ipt-tel:nth-child(2) {width:calc(100% - 40% - 20% - 20px);margin:0 10px;}
.tbl.type02 tbody td .ipt.ipt-tel:nth-child(3) {width:40%;}
.tbl.type02 tbody td .img {width:120px;height:80px;}
.tbl.type02 tbody td .add-file {position:relative;}
.tbl.type02 tbody td .add-file .ipt-file {width:80%;margin-left:12px;border:0;}
.tbl.type02 tbody td .btn-close {position:absolute;top:50%;right:20px;width:20px;height:20px;transform:translateY(-50%);}
.tbl.type02 tbody td .btn-close span {display:inline-block;position:absolute;top:50%;left:0;width:20px;height:2px;background:#000;transform:rotate(45deg);-webkit-transform:rotate(45deg);text-indent:-9999px;}
.tbl.type02 tbody td .btn-close span::before {content:"";position:absolute;top:50%;left:0;width:20px;height:2px;background:#000;transform:rotate(-90deg);-webkit-transform:rotate(-90deg);}
.tbl.type02 tbody td textarea {width:100%;min-height:200px;}

/* button */
.btn.btn-cancel {background:#ccc;}
.btn.btn-delete {background:#dc3545;}
.btn.btn-edit,
.btn-register {background:#000;}

/* .pagination */
.pagination {display:flex;justify-content:center;align-items:center;padding-top:65px;}
.pagination li {}
.pagination li a {display:block;padding:0 8px;color:#888;}
.pagination li.on a {color:#000;}
.pagination li.front a {width:21px;height:21px;background:url('../images/common/btn_front.png') no-repeat 0 0/21px;text-indent:-9999px;}
.pagination li.end a {width:21px;height:21px;background:url('../images/common/btn_end.png') no-repeat 0 0/21px;text-indent:-9999px;}
.pagination li.prev a {width:21px;height:21px;margin:0 10px;background:url('../images/common/btn_prev.png') no-repeat 0 0/21px;text-indent:-9999px;}
.pagination li.next a {width:21px;height:21px;margin:0 10px;background:url('../images/common/btn_next.png') no-repeat 0 0/21px;text-indent:-9999px;}
.pagination li.prev:hover a {background:url('../images/common/btn_prev_on.png') no-repeat 0 0/21px;}
.pagination li.next:hover a {background:url('../images/common/btn_next_on.png') no-repeat 0 0/21px;}
.pagination li.prev.disable a {background:url('../images/common/btn_prev_disable.png') no-repeat 0 0/21px;cursor:initial;}
.pagination li.next.disable a {background:url('../images/common/btn_next_disable.png') no-repeat 0 0/21px;cursor:initial;}


/* popup */
.modal {position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:rgba(0,0,0,0.35);}
.popup {position:fixed;top:50%;left:50%;z-index:30;min-width:340px;text-align:center;transform:translate(-50%, -50%);}
.popup h3 {padding:12px 0;border-bottom:1px solid #bbb;border-radius:12px 12px 0 0;background:#fff;}
.popup .content {padding:38px 0 34px;background:#fff;}
.popup .btn-area {padding:12px 0 24px;border-radius:0 0 12px 12px;background:#fff;}
.popup .btn-area .btn {padding:8px 20px;}
.popup .btn-area .btn + .btn {margin-left:8px;}
.popup .btn-area .btn.btn-confirm {background:#1a88cd;}

.popup.type01 {width:900px;}
.popup.type01 .content {overflow-y:scroll;height:85vh;padding:16px;}

/* ipt */
.ipt-radio,
.ipt-check {width:20px;-webkit-appearance:auto;}
.ipt-file {border:0;}