/* 공통 */
.bg-g{background-color: #f5f5f5 !important;}
.bg-g02{background-color: #f8f8fb;}
.bg-g03{background-color: #eef0f3;}
.bg-k{background-color: #333 !important;}
.bg-g04{background-color: #999;}
.bg-w{background-color: #fff !important;}

.bg-o{background-color: #FF6C0F !important;}
.bg-y{background-color: #FFC700;}
.bg-r{background-color: #FD4D35;}
.bg-p{background-color: #B56EFF;}
.bg-b{background-color: #32C4DE;}

.border{border: 1px solid #ddd;}
.fc-gr{color: #8DC63F;}
.fc-o{color: #FF6C0F;}
.fc-y{color: #FFC700;}
.fc-r{color: #FD4D35;}
.fc-p{color: #B56EFF;}
.fc-b{color: #32C4DE;}
.fc-y2{color: #FBFF4E;}
.fc-w{color: #fff;}
.fc-g{color: #999;}
.fc-k{color: #222 !important;}
.f-small{font-size: 0.85em !important;}

.pt-120{padding-top: 120px;}
.pb-120{padding-bottom: 120px;}
.pt-100{padding-top: 100px;}
.pb-100{padding-bottom: 100px;}
.pt-80{padding-top: 80px;}
.pb-80{padding-bottom: 80px !important;}
.pt-32{padding-top: 32px !important;}
.pb-32{padding-bottom: 32px !important;}

.mt-100{margin-top: 100px;}
.mt-170{margin-top: 170px;}
.mt-85{margin-top: 85px;}
.mt-70{margin-top: 70px;}

.cursor{cursor: pointer;}

.bold{font-weight: 600 !important;}
* b{word-break: keep-all;}
* h2{word-break: keep-all;}

.dis-f{display: flex;}
.flex-c{flex-direction: column !important;}
.flex-wrap{flex-wrap: wrap;}
.justi-s-b{justify-content: space-between;}
.justi-f-s{justify-content: flex-start !important;}
.justi-c{justify-content: center !important;}
.align-i-c{align-items: center;}
.align-f-s{align-items: flex-start !important;}
.align-f-e{align-items: flex-end !important;}
.posi-r{position: relative;}
.text-a-l{text-align: left !important;}
.text-a-c{text-align: center !important;}

.gap32{gap: 32px;}
.gap24{gap: 24px;}
.gap16{gap: 16px;}
.gap8{gap: 8px;}
.gap4{gap: 4px;}


.w-100{width: 100% !important;}
.w-20{width: 20%;}
.border-t{border-top: 1px solid #ddd !important;}
.border-b{border-bottom: 1px solid #ddd !important;}
.border-l{border-left: 1px solid #ddd !important;}
.border-r{border-right: 1px solid #ddd !important;}
.border-none{border: 0 !important;}


.insert.relative{position: relative;}

.left_move_btn_container{float:left; width: calc(100% - 112px);}
.right_move_btn_container{float:right; width: 96px;}

/* 디지털 라이브러리 */
.body-container .body-box-gray{background-color: transparent;}
.adm_header .gnb > li{width: 14%;}

.lb-btn-con{text-align: right;}
.lb-btn-con .lb-btn{width: 133px; height: 32px;}

.box-search{display: flex; justify-content: space-between;}
.box-search .box_input{width: 100%;}
.box-search button.button_box{height: 36px; margin-left: 4px; line-height: 36px; width: 80px; border: 1px solid #dcdee1; background-color: #dcdee1;}

.samplelist-select{/* height: 400px;  */border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}
.samplelist-select .sample-list{overflow-y: auto; height:400px;}
.samplelist-select table{ width: 100%; table-layout: fixed;}
.samplelist-select table th{background-color: #f9f9f9; height: 40px; border-bottom: 2px solid #eee; text-align: center; padding: 8px 10px;vertical-align: middle;}
.samplelist-select table td{color:#777;font-weight:300; cursor: pointer; height: 40px;padding: 8px 10px; border-bottom: 1px solid #eee;  font-family: 'Noto Sans KR',sans-serif;}
.samplelist-select table .check{text-align: center; width: 40px;}
.samplelist-select table .p-num{letter-spacing: 1.5px; transition: all .2s;}
.samplelist-select table .p-num:hover{background-color: #f5f7fa; }
.samplelist-select table .sms-name{width: 100px; cursor: pointer; transition: all .2s; }
.samplelist-select table .sms-name:hover{background-color: #f5f7fa;}
.samplelist-select table .sms-name p{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block;}
.samplelist-select table .sms-phone a{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block;}

.samplelist-select table .added-img{width: 80px;}
.samplelist-select table .added-img img{width: 100%;}
.samplelist-select table .added-location{width: 70px;}
.samplelist-select table .added-location span.block{display: block;}
/* .samplelist-select table .p-num p{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block;}
.samplelist-select table .p-num a{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block;} */

.print-box{text-align: right;}
input.btn-print{background-color: #fff;
   cursor: pointer;
   color: #1f6bbb;
   background-image: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/GNG/157340483917304.png);
   background-size: 24px 24px;
   padding-left: 32px;
   padding-right: 8px;
   background-repeat: no-repeat;
   background-position: 6px center;
   background-size: contain;
}



.body-library{min-height: 600px; position: relative;}
.library-gird{display: grid; min-width: 840px; 
    grid-template-columns: [col1-start] 19%  [col2-start] 19%  [col3-start] 19% [col4-start] 19% [col5-start] 19% [col5-end];
    grid-template-rows: [row1-start] auto [row2-start] auto  [row3-start] auto [row4-end];
    /* grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5,180px); */
    gap:10px
 }
.library-gird .grid-box{display: flex; justify-content: center;  padding: 20px;
box-sizing: border-box; position: relative; /* border: 2px solid #777; */}
.library-gird .grid-box.a{grid-column-start: 1; grid-column-end: 5; grid-row-end: 2;}
.library-gird .grid-box.b{grid-row-start: 1; grid-row-end:4; grid-column-start: 5; grid-column-end: 6;}
.library-gird .grid-box.c{grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 1; justify-content: flex-end;}
.library-gird .grid-box.d{grid-row-start: 2; grid-row-end: 3; grid-column-start: 3; grid-column-end: 2;}

.library-gird .grid-box.e{grid-row-start: 2; grid-row-end: 3; grid-column-start: 3; grid-column-end: 4;}
.library-gird .grid-box.f{grid-row-start: 2; grid-row-end: 3; grid-column-start: 4; grid-column-end: 5;}

.library-gird .grid-box.g{grid-column-start: 1; grid-column-end: 5; align-items: flex-end;}


.gird-horizontal ul.step01{width: 100%;}
.gird-horizontal ul.step01>li{width: 20%; float: left; position: relative; }
.gird-horizontal ul.step01>li + li{padding-left: 8px;}
.gird-horizontal ul.step01>li .bookshelf{border-radius:5px;  cursor: pointer; transition: all .4s; padding: 10px 15px; border:1px solid #dcdee1; background-color:#fff; text-align: center; position: relative;}
.gird-horizontal ul.step01>li .bookshelf:hover{background-color: #1f6bbb; color:#fff; border: 1px solid #1f6bbb; box-shadow: 2px 4px 5px rgba(0,0,0,0.2);}
.gird-horizontal ul.step01>li .bookshelf.books_on{background-color: #1f6bbb; color:#fff; border: 1px solid #1f6bbb; box-shadow: 2px 4px 5px rgba(0,0,0,0.2);}
.gird-horizontal ul.step01>li .bookshelf .dot-btn{cursor: pointer;  z-index: 10; width: 4px; height: 4px; border-radius: 100%; background-color: #dcdee1; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
.gird-horizontal ul.step01>li .bookshelf .dot-btn::before{content: ""; width: 4px; height: 4px; border-radius: 100%; background-color: #dcdee1; position: absolute; top: 7px; right: 0;}
.gird-horizontal ul.step01>li .bookshelf .dot-btn::after{content: ""; width: 4px; height: 4px; border-radius: 100%; background-color: #dcdee1; position: absolute; bottom: 7px;  right: 0;}

.bookshefOn{border-radius: 5px;   display: none; padding:15px;  right: 0; min-width: 100px; height: 176px; overflow: hidden; overflow-y: auto;  margin-left: auto; position: absolute; z-index: 99;  box-shadow: 2px 4px 5px rgba(0,0,0,0.2); background-color: #fff;}
.bookshefOn h5{color:#1f6bbb; font-weight: 700; padding:10px; padding-top: 0;}
.bookshefOn .step02 li{padding: 5px 10px; cursor: pointer;  }
.bookshefOn .step02 li span{width: 100%; display: block;}
.bookshefOn .step02 li:hover{background-color: #ddeaf7; border-radius: 5px;}

.gird-column ul.step01{height: 100%;}
.gird-column ul.step01>li{display: block; margin-left: 8px;  position: relative;}
.gird-column ul.step01>li + li{margin-top: 8px; }

.gird-column ul.step01>li .bookshelf{border-radius: 5px; max-width: 60px; width: auto; margin: auto;  cursor: pointer; transition: all .4s;  min-height: 147px; position: relative; display: table; height: 100%; padding: 5px; border: 1px solid #dcdee1;background-color:#fff; text-align: center;}
.gird-column ul.step01>li .bookshelf:hover{background-color: #1f6bbb; color:#fff; border: 1px solid #1f6bbb; box-shadow: 2px 4px 5px rgba(0,0,0,0.2);}
.gird-column ul.step01>li .bookshelf.books_on{background-color: #1f6bbb; color:#fff; border: 1px solid #1f6bbb; box-shadow: 2px 4px 5px rgba(0,0,0,0.2);}
.gird-column ul.step01>li .bookshelf .dot-btn{cursor: pointer; z-index: 10; width: 4px; height: 4px; border-radius: 100%; background-color: #dcdee1; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); }
.gird-column ul.step01>li .bookshelf .dot-btn::before{content: ""; width: 4px; height: 4px; border-radius: 100%; background-color: #dcdee1; position: absolute; top: 0; right: 7px;}
.gird-column ul.step01>li .bookshelf .dot-btn::after{content: ""; width: 4px; height: 4px; border-radius: 100%; background-color: #dcdee1; position: absolute; top: 0px;  left: 7px;}

.f-rotate ul.step01>li .bookshelf span{ display: table-cell; vertical-align: middle;}

.gird-column ul.step01>li .bookshefOn{position: absolute; top: 0; right: 0;}

.library-info{position: relative;}
.library-info .dot-btn{cursor: pointer; z-index: 10; width: 4px; height: 4px; border-radius: 100%; background-color: #dcdee1; position: absolute; right:0; top: 50%; transform: translateY(-50%); }
.library-info .dot-btn::before{content: ""; width: 4px; height: 4px; border-radius: 100%; background-color: #dcdee1; position: absolute; top: 7px; right: 0;}
.library-info .dot-btn::after{content: ""; width: 4px; height: 4px; border-radius: 100%; background-color: #dcdee1; position: absolute; bottom: 7px;  right: 0}

.library-edit{position: absolute;display: block; font-size:14px;  cursor: pointer; transition: all .2s;  background-color:#fff; z-index: 99; border-radius: 5px; border: 1px solid #fff;  display: block; right: 0; padding: 5px 22px; box-shadow: 3px 2px 6px rgba(0,0,0,0.2);}
.library-edit:hover{ color:#fff; background-color: #6398d0; border: 1px solid #6398d0;}

.library-after-wrap{display: flex; justify-content: space-between;}
.library-after-wrap input{width: 100%;}
.library-after-wrap button{width: 80px; margin-left: 4px; border: 1px solid #3e7bbf; background-color: #3e7bbf; color:#fff; }


/* 라이브러리 카테고리별 제고수량 */
.cat-list p{color:#222;}
.cat-list p span{color:#899aae; margin-left: 4px; font-weight: bold;}
.cat-depth01{margin-top: 22px;}
.cat-depth01>p{font-weight: bold; color:#222; position: relative; cursor: pointer;  font-size: 16px;}
.cat-depth01>p i{position: absolute; right: 0; transform: rotate(-90deg); top: 4px; transition: all .2s;}
.cat-depth01.rotate>p i{transform: rotate(0deg);}
.cat-depth02{padding-left: 16px; display: none; }
.cat-depth02 p{padding-top: 6px;}
.cat-depth02>p{position: relative;  font-weight: 700; /* border-top: 1px solid #ddd;margin-top: 16px;padding-top: 14px; */}
.cat-depth02>p>span,.cat-depth01>p span{color:#222; font-weight: bold;}
/* .cat-depth02>p:nth-child(1){   border-top: none;
    margin-top: 0;
    padding-top: 6px; } */
.cat-depth02>p::before{    width: 3px; height: 3px;background-color: #5f5f5f;position: absolute;left: -9px;top: 13px;content: "";}
.cat-tab span{font-weight: bold; cursor: pointer;  font-size: 15px; line-height: 28px; display: inline-block;}
.cat-tab span + span{margin-left: 18px;}
.cat-on{color:#4589d5; border-bottom: 2px solid #4589d5;} 
.cat-depth02 div{margin: 4px 0;}
.cat-depth02 div p{position: relative;}
.cat-depth02>p>div>p{font-size: 13px;}
.cat-depth02 div em.round{position: absolute;  width: 3px; height: 3px; border-radius: 100%; border: 1px solid #333; content: ""; left: -10px; top: 14px;}
.cat-depth02 div em.round.color-round{background-color: #333;  }


.btn-green{background-color: #fff; cursor: pointer;
    border: 1px solid #00c250;
    color: #00c250;  padding: 0 4px; width: 100px; text-align: center;
    background-repeat: no-repeat;
    background-position: 6px center;}

/* 라이브러리 모달창 */
.lib-modal-tableTop  table th:first-child, .lib-modal-tableTop  table td:first-child{width: auto;}
/* .lib-modal-tableTop table{table-layout: fixed;} */

.lib-modal-tableTop table th{background-color:#f5f7fa; height: auto; padding: 5px; font-size:12px; text-align: center; text-transform: uppercase; border-bottom: 1px solid #dcdee1; border-top: 1px solid #dcdee1; border-right: 1px solid #dcdee1;}
.lib-modal-tableTop table th:last-child{border-right: 0;}
.lib-modal-tableTop table td{text-align: center;}
.lib-modal-tableTop table td.qr-code img{width: 60px; height: 60px; display: block; object-fit: contain;  margin: auto;}
.lib-modal-tableTop table td.pr-img img{max-width: 70px; display: block; margin: auto;}

.lib-modal-tableBottom{padding-top: 20px;}
.lib-modal-tableBottom table{width: 100%;} 
.lib-modal-tableBottom table td.pro-img img{max-width: 460px; max-height: 468px; object-fit: contain;}
.lib-modal-tableBottom table td.work-sheet img{max-width: 900px; max-height: 622px; object-fit: contain;} 
.lib-modal-tableBottom table td img{display: block; margin: auto;}
.lib-modal-tableBottom table td{border-top: 1px solid #dcdee1;}

.modal ul.btn-container.lib-eidtbuttn{text-align: center; position: relative; margin: 0; padding-top: 32px;}

.btn-b-primary{border: 1px solid #1f6bbb; color:#1f6bbb; transition: all .2s;}
.btn-b-primary:hover{background-color: #1f6bbb; color:#fff; }

.btn-b-gray{border: 1px solid #d95252; color:#d95252; transition: all .2s;}
.btn-b-gray:hover{background-color: #d95252; color:#fff; }



.lib-center{text-align: center;}
.lib-eidtbuttn .lib-eidtbuttn01{position: absolute; right: 0; top: 0; width: 100%; text-align: right;}
.lib-eidtbuttn .lib-eidtbuttn01 li button{color:#f00; display: block;}


/* 샘플 등록 */
.lb-insert{width: 700px;}
.sample-lb-table table th{background-color: #f5f7fa; border-bottom: 1px solid #dcdee1; text-transform: uppercase;}
.sample-lb-table table td{border-left: 0;}
.sample-lb-table table tr{border-top: 1px solid #dcdee1;}

.filebox{display: inline-block; cursor: pointer; height: 36px; line-height: 36px; vertical-align: middle; border: 1px solid #4589d5; background-color:#4589d5; color:#fff}
.filebox label{width: 100%; display: block;cursor: pointer;} 
.filebox input[type="file"]{position: absolute; width: 1px; height: 1px; padding: 0; overflow:hidden; clip:rect(0,0,0,0); border: 0;}


.lib-firt-book .samplelist-select{height: 393px;}
.lib-firt-book .samplelist-select table .check{text-align: center; width: 14px; padding: 7px;}

.lib-second-book.samplelist-select{height: auto; border: none;}
.lib-second-book .plus-bttn{width: 30px; height:36px; text-align: center; margin-right: 4px; position: relative; border-radius: 0;}
.lib-second-book .plus-bttn span{ width: 26px; height: 26px; line-height: 23px; color:#fff; background-color: #dcdee1; border-radius: 100%; position: absolute; top: 50%; transform: translateY(-50%); display: block; font-size: 20px; font-weight: 600;}
/* .form  .lib-second-book input[type=text]{border: none;} */
.lib-second-book .box-search .box_input{width: 70%;}
.lib-second-book .box-search button.button_box{ width: 50px; }
.sample-lb-table table td .flex-box{display: flex; justify-content: space-between;}
.sample-lb-table table td .search-btttn button.search{width: 80px; color:#1f6bbb; height: 36px; border: 1px solid #1f6bbb; margin-left: 4px;}
.box-table-container table.table01 th{width: 104px;}
.excel-table tbody tr td span.success{color:#4589d5}
.excel-table tbody tr td span.fail{color:#d95252}


/* 지앤지 채팅 css */

.chat-list-wrap{border-top: 2px solid #333; overflow-y: auto; max-height: 600px;}
.chat-list-wrap p.empty-message{padding:50px; text-align: center; color: #888;}
.chat-list-wrap.empty-wrap{border-bottom: 1px solid #ddd;}
.chat-img{width: 70px; height: 70px;}
.chat-img img{width: 100%; height: 100%; max-width: 100%; object-fit: cover;}
.chat-img-info{width: 100%;}
.chat-detail{padding-left: 30px; width: calc(100% - 70px);}
.talk-wrap,.chat-img,.chat-list{display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;}
.chat-list-new-wrap{border-top: 2px solid #333; overflow: hidden;}
.chat-list-n-wrap{border-top: 0;}
.chat-list-n-wrap p.empty-message{padding:50px; text-align: center; color: #888;}
.chat-list-n-wrap.empty-wrap{border-bottom: 1px solid #ddd;}

.check-answer{border-radius: 3px; background-color:#1f6bbb; color:#fff; font-size:14px; text-align: center; padding: 5px 10px;}   
.chat-count{padding: 10px; border-radius: 100%; background-color:#1f6bbb; position: relative; }
.chat-count em{display: block; text-align: center; font-size: 12px; color:#fff; position: absolute; left: 50%; top: 50%;  transform: translate(-50%,-50%);}
.chat-last-talk{position: relative;}
.chat-last-talk p.talking-record{color:#888; font-size: 15px;   font-weight: 500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-top + .chat-last-talk{padding-top: 5px;}
.chat-top-info{position: relative;}
.chat-top-info>span.orderer-name{font-weight: bold; color:#000; padding-bottom: 5px; display: block; font-size: 16px; }
.chat-top-info>span.small{font-size: 12px; padding-right: 10px; }
.chat-top-info>span.small b{padding-right: 10px; display: inline-block; font-weight: bold; color: #000;}
.chat-top-info>span.small i{display: inline-block;}
.chat-top-info .last-time{font-size: 14px; color:#888; position: absolute; right:0; top: 0;}
.chat-top-info .order-p-name{overflow: hidden;  max-width: 300px; text-overflow: ellipsis; white-space: nowrap;}

.chat-deail-2 + .chat-last-talk{padding-top: 15px;}
.chat-deail-2{line-height: 1;}
.chat-detail{transition: all .2s;}
.chat-list{border-bottom: 1px solid #ddd; padding: 10px 12px 10px 0; cursor: pointer; }
.chat-list:hover .chat-detail{opacity: 0.6;}
.talk-wrap{position: relative;}


.chat-header{position: relative; width: 100%; padding-bottom: 20px;}
.chat-header ul li{padding-right: 15px;}
.chat-header ul li b{font-weight: bold;}
.chat-header strong{ font-size: 1.12rem; font-weight: bold; padding-bottom: 10px;}
.chat-header .order-no{font-size: 14px;}
.chat-header .chat-btn-box{width: 40px; height: 40px;  position: absolute; transform: rotate(45deg); cursor: pointer; right: 0; top: 0;}
.chat-header .chat-btn{background-color:#333; height: 20px; width: 2px; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%);}
.chat-header .chat-btn::after{background-color:#333; content: ""; height: 20px; width: 2px; left:0; top: 0; position: absolute; transform: rotate(-90deg);}

.chat-header table.chat-order-info th{height: 32px; width: auto; background-color: #f5f5f5; border-bottom: 1px solid #dcdee1;}
.chat-header table.chat-order-info th, .chat-header table.chat-order-info td{padding: 5px;}
/* .chat-header table.chat-order-info td */
.chat-header table.chat-order-info tr{border-bottom: 1px solid #dcdee1;border-top: 1px solid #dcdee1; }
.chat-header table.chat-order-info{border-top: 1px solid #dcdee1;}

.chat_container{position: relative;}
.chat_container .chat_date_container{padding:8px 0 24px; text-align: center; font-size:12px; border-top:1px solid #efefef;}
.text-center{text-align: center;}
.chat_date_con{position: relative; padding: 16px 0;}
.chat_date_con .chat_date{background-color:#fff; padding: 5px 40px; position: relative; z-index: 2;}
.chat_date_con .chat-line{width: 100%; height: 1px; z-index: 0; background-color: #ddd; position: absolute; left: 0; top: 50%;}


.chat-history .check-read{font-size: 14px; color:#aaa}
.chat-history .time{font-size: 14px;}
.chat-history { padding: 30px 30px 20px;border-bottom: 2px solid #fff; height: 500px; overflow: hidden; overflow-y: auto;}
.chat-history .message-con{margin-bottom: 15px;}
.chat-history .message {color: #333;padding: 18px 20px;line-height: 26px;font-size: 16px;border-radius: 7px; position: relative; max-width: 60%; width: fit-content; word-break: break-all; direction: ltr;}
.chat-history .message:last-child{margin-bottom: 30px;}
.chat-history .message img{width: 100%; border-radius: 5px;}

.chat-history .chat-left-person .msg { background: #f5f7fa;border:1px solid #f5f7fa }
.chat-history .chat-left-person .message-list>.msg::after{bottom: 100%;left: 20px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute;pointer-events: none;border-bottom-color: #f5f5f5;border-width: 10px;margin-left: -10px;}
.chat-history .chat-right-person .message-list>.msg::after{bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute;pointer-events: none;border-bottom-color: #4589d5; right:13px; border-width: 10px;margin-left: -10px;}
.chat-history .chat-right-person .msg{background-color:#4589d5; color:#fff; font-weight: 300; border: 1px solid #4589d5; box-sizing: border-box; margin-left: auto;}
.chat-history .chat-right-person .msg::after {border-bottom-color: #4589d5; right:13px;}
.chat-history .other-name{font-size: 16px;}
.chat-history .text-right{text-align: right;}
.chat-send-message{padding: 25px; background-color:#f5f5f5; bottom: 0; position: relative; }
.chat-send-message textarea{border: none; width: 100%; padding: 10px 20px; font-size: 0.9rem; margin-bottom: 10px; border-radius: 5px; resize: none; ;}
.chat-send-message .chat-send-box{display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    /* align-items: center; */
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 100%}
.chat-send-box button.send{font-size: 1.1rem; font-weight: 600; color:#4589d5}
.chat-send-message .filebox{margin-left: 0; min-width: 60px; height:30px; font-weight: 300;}
.chat-send-message .filebox label{line-height: 30px;}

.message + .message{margin-top: 5px;}

.messages .message.new {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-animation: bounce 500ms linear both;
animation: bounce 500ms linear }

.chat-img-sendBox{ display: none; position: absolute; width: 100%; left: 0; background-color: #f5f5f5; padding:0 25px; top:10px;}
.img-upload-list{width: 72px; height: 72px; position: relative; margin-bottom: 8px; display: inline-block; margin-right: 4px; border: 1px solid #dcdee1;}
.img-upload-list img {width: 100%;height: 100%; display: block;}
.img-upload-list .delete-btn {width: 17px; height: 17px; position: absolute; border-radius: 0;top: 0;
    right: 0; background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/GNG/157593697894351.png)no-repeat center center;z-index: 5;
}

.chat-img-view-wrap{position: fixed;
   z-index: 100;
   left: 0;
   top: 0;
   bottom: 0;
   max-width: 100%;
   width: 100%;
   height: 100%;background-color: rgba(0,0,0,0.9);}
.chat-img-view-wrap .chat-img-view-center{
    max-width:1920px;
    width: 100%;    
    height: calc(100% - 120px);
    position: relative;
    display: inline-block;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    overflow-y: auto;
}


.chat-img-view-wrap .chat-img-view-center img{position: absolute; top:0; left: 50%; transform: translateX(-50%); max-width:1440px; width: 100%; }
.chat-img-view{position: fixed;background-color:  rgba(0,0,0,0.9); width: 100%; left: 0; color:#fff; height: 60px; line-height: 60px;}
.chat-img-view button{color: #fff;}
.chat-img-view-top{text-align: right; top: 0;}
.chat-img-view-top button{padding: 0 20px;}
.chat-img-view-bottom{text-align: center; bottom: 0;}
.chat-img-view-bottom button{position: relative;}
.chat-img-view-bottom button::before{width: 19px; height:22px; background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/GNG/15763532683073.png)no-repeat;  background-size: contain;content: ""; position: absolute; left: -20px; top: 0;}


.table3 .col-tit div p{width: 185px;}
.table3 .col-tit div p span{width: 100%;}


.table3 .col-tit p{width: 450px;}
.table3 .col-tit p span{width: 100%;}
.table3 .col-tit p span{display: inline-block; vertical-align: middle; margin-right: -4px;}
.table3 .col-tit .tit{padding-bottom: 8px; border-bottom: 1px solid #ddd; padding-top: 8px;}
.table3 .col-tit .tit:first-child{padding-top: 0;}
.table3 .col-tit .tit:last-child{padding-bottom: 0; border-bottom: 0;}
.table3 .col-tit .tit_pname{width: 100%;}
 /* ********************************************* *
        지앤지 추가 수정 2021-05-11
 * ********************************************* */

 /* 공지사항 - 간격  */
.spacing-table{display: table; width: 100%;}
.spacing-table dt, .spacing-table dd{display: table-cell; vertical-align:middle;}
.spacing-table .input-box{display: flex; align-items: center; justify-content: space-between;}
.spacing-table .edit-btn button span{width: 7px; display: block; height: 12px; background:url(../img/arr_view.svg)no-repeat;}
.spacing-table .edit-btn button.plus span{transform: rotate(90deg);}
.spacing-table .edit-btn button.minus span{transform: rotate(-90deg);}

/* 상품등록 옵션설정 */
.pd-option-button button{height: 36px; padding: 0 24px; border: 1px solid #dcdee1; transition: all .2s;}
.pd-option-button button:hover{background-color: #4589d5; color:#fff; border-color: #4589d5;}


/* 사이즈 테이블 */
.size-table th{text-align: center;}
.size-table td .insert{display: flex;}
.size-table td .insert label{margin-left: 20px;}
/* .size-table td .insert input{width: 80px;} */
.size-table td.delet-btn{text-align: center;}
.size-table td.delet-btn>div{display: flex;}
.size-table td.delet-btn>div>span{width: 100%;}
.size-table td.delet-btn>div>span+ span{margin-left: 8px;}
.size-table td.delet-btn>div span:nth-child(2){display: none;}
.size-table td.delet-btn button{ height: 18px; width: 18px; position: relative;}
.size-table td.delet-btn button.delet{background-color:#d95252; }
.size-table td.delet-btn button.delet span{width: 10px; height: 2px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.size-table td.delet-btn button.add{background-color:#4589d5; position: relative;}
.size-table td.delet-btn button.add::before{width: 2px; height: 10px; background-color: #fff; position: absolute; content: ""; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.size-table td.delet-btn button.add::after{width: 10px; height: 2px; background-color: #fff; position: absolute; content: ""; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.size-table tbody tr:last-child td.delet-btn span:nth-child(2){display: block;}


/* z-index */
.modal{z-index: 1000;}




.dis-f{display: flex;}
.flex-wrap{flex-wrap: wrap;}
.justi-s-b{justify-content: space-between;}
.justi-f-s{justify-content: flex-start !important;}
.justi-f-e{justify-content: flex-end !important;}

.justi-c{justify-content: center !important;}
.align-i-c{align-items: center;}
.align-f-s{align-items: flex-start !important;}
.align-f-e{align-items: flex-end !important;}
.posi-r{position: relative;}
.text-a-l{text-align: left !important;}
.w-50{width: 50%;}
.padding-0{padding: 0 !important;}


/* 공통 */
.bg-g{background-color: #f5f5f5 !important;}
.bg-g02{background-color: #f8f8fb;}
.bg-g03{background-color: #eef0f3;}
.bg-k{background-color: #333;}
.bg-g04{background-color: #999;}
.bg-w{background-color: #fff !important;}

.bg-o{background-color: #FF6C0F;}
.bg-y{background-color: #FFC700;}
.bg-r{background-color: #FD4D35;}
.bg-p{background-color: #B56EFF;}
.bg-b{background-color: #32C4DE;}

.border{border: 1px solid #ddd;}
.fc-gr{color: #8DC63F;}
.fc-o{color: #FF6C0F;}
.fc-y{color: #FFC700;}
.fc-r{color: #FD4D35;}
.fc-p{color: #B56EFF;}
.fc-b{color: #32C4DE;}
.fc-y2{color: #FBFF4E;}
.fc-w{color: #fff;}
.fc-g{color: #999;}

.f-small{font-size: 0.85em !important;}

.pt-120{padding-top: 120px;}
.pb-120{padding-bottom: 120px;}
.pt-100{padding-top: 100px;}
.pb-100{padding-bottom: 100px;}
.pt-80{padding-top: 80px;}
.pb-80{padding-bottom: 80px !important;}
.pt-32{padding-top: 32px !important;}
.pb-32{padding-bottom: 32px !important;}

.mt-100{margin-top: 100px;}
.mt-170{margin-top: 170px;}
.mt-85{margin-top: 85px;}
.mt-70{margin-top: 70px;}

.cursor{cursor: pointer;}

.bold{font-weight: 600 !important;}
* b{word-break: keep-all;}
* h2{word-break: keep-all;}

.dis-f{display: flex;}
.flex-c{flex-direction: column !important;}
.flex-wrap{flex-wrap: wrap;}
.justi-s-b{justify-content: space-between;}
.justi-f-s{justify-content: flex-start !important;}
.justi-c{justify-content: center !important;}
.align-i-c{align-items: center;}
.align-f-s{align-items: flex-start !important;}
.align-f-e{align-items: flex-end !important;}
.posi-r{position: relative;}
.text-a-l{text-align: left !important;}
.text-a-c{text-align: center !important;}
.gap16{gap: 16px;}
.gap8{gap: 8px;}
.gap4{gap: 4px;}


.w-100{width: 100% !important;}
.w-20{width: 20%;}
.border-t{border-top: 1px solid #ddd !important;}
.border-b{border-bottom: 1px solid #ddd !important;}
.border-l{border-left: 1px solid #ddd !important;}
.border-r{border-right: 1px solid #ddd !important;}
.border-none{border: 0 !important;}

.btn-type02{border: 1px solid #ddd; background-color: #fff;}
.pointer{cursor: pointer;}
.dis-none{display: none;}




.img-load{}
.img-load img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: auto; padding: 8px;}
.box-tbody{border-bottom: 1px solid #ddd; border-top: 0;}
.box-tbody:first-child{border-top: 1px solid #ddd;}
table th{border-bottom: 1px solid #ddd;}
.btn-3{background-color: #d95252 !important; border: 1px solid #d95252 !important; color: #fff;}
.box-search-container input, .box-search-container .select2-container{box-shadow: none;}
.form input[type=text], .form input[type=password]{background-color: #f5f5f5;}

.partner .table-thumb:before{background-color: transparent;}
.partner .table-thumb img{height: auto;}

select{border: 1px solid #ddd; border-radius: 5px; padding: 4px 8px;}


table th{background-color: #f5f5f5;}
.out-tab-container ul li.current a{display: block;}
.out-tab-container ul li.current a{border-color: #1f6bbb; color: #1f6bbb;}


.out-tab-container02 ul {display: flex; flex-wrap: wrap; gap: 8px;}
.out-tab-container02 ul li {position: relative;}
.out-tab-container02 ul li span.x_btn{position: absolute; right: 0; top: 0; width:17px; z-index: 3; line-height: 1; font-size:10px; font-weight: 600; padding-bottom: 4px; height: 17px; cursor: pointer; background-color: #222; color: #fff; display: flex; align-items: center; justify-content: center;}
.out-tab-container02 ul li a{border: 1px solid #ddd; padding: 16px 16px; background-color: #fff; border-radius: 5px; display: block; opacity: 0.6;}
.out-tab-container02 input[type="button"]{height:auto;padding: 0px 17px 5px 17px; font-weight: 800;}
.out-tab-container02 ul li.current a{border-color: #1f6bbb; color: #fff; background-color: #1f6bbb; opacity: 1;}






.top-sub-depth ul{display: flex;}
.top-sub-depth ul li{border: 1px solid #ddd; border-radius: 55px; padding: 8px 16px;}
.top-sub-depth ul li + li{margin-left: 16px;}
.top-sub-depth ul li.current{background-color: #1f6bbb; color: #fff; border: 1px solid #1f6bbb;}
.campaing_detail .width-50 .box-table-container{}
.campaing_detail .width-50 .box-tbody{width: 50%; border-top: 1px solid #ddd; margin-bottom: -1px;}
.campaing_detail .img_area a{position: relative;}
.campaing_detail .img_area a::after{content: ""; width: 100%; height: 1px; background-color: #999; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);}


input[type="date"]{border: 1px solid #ddd; padding: 8px 12px; width: 100%;}
.brand_upload input[type="number"]{border: 1px solid #ddd; padding: 8px 12px;}
.brand_upload input[type="number"]::-webkit-outer-spin-button,
.brand_upload input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.brand_upload .plus{border: 1px solid #ddd;width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer;}
.brand_upload input[type="file"]{display: none;}
.brand_upload .file_list{margin-top: 8px; display: flex; align-items: center;}
.brand_upload .file_list .img{position: relative;border-bottom: 1px solid #ddd; display: flex; align-items: center; padding-right: 24px; }
.brand_upload .file_list .img + .img{margin-left: 12px;}
.brand_upload .file_list .img .x-btn{position: absolute; width: 15px; height: 15px; font-size: 12px; cursor: pointer; padding-bottom: 3px;
     display: flex; align-items: center; justify-content: center; background-color: #4f00cc; color: #fff; right: 0; top: 50%; transform: translateY(-50%);
} 


.icon-input input[type="file"]{display: none;}
.icon-input label span{width: 100%; padding:8px 16px; text-align: center; font-size: 14px; border-radius: 5px; margin-bottom: 8px; font-weight: 600; border: 1px solid #ddd; display: block;}
.icon-input .icon{text-align: center; margin-bottom: 16px; position: relative;}
.icon-input .icon img{margin: 0 auto; text-align: center;}
.icon-input .icon .delete_bttn{display: block; width: 60%;
    padding: 4px 12px; opacity: 0.4;
    background-color: #d95252; color: #fff; text-align: center; 
    display: flex; align-items: center; justify-content: center;
    position: absolute; left: 50%;top: 50%; transform: translate(-50%, -50%);
}
.icon-input .icon:hover .delete_bttn{opacity: 1;}




.border{border: 1px solid #ddd;}

.cursor:hover{text-decoration: underline;}


.box-td.subject ul li + li{margin-top: 8px;}
.box-td.subject ul li .con_wrap{display: flex; align-items: center; gap: 8px;}
.box-td.subject ul li .con_wrap input[type="button"]{ padding-bottom: 8px; padding-left: 14px; padding-right: 14px;}
.box-td.subject ul li .con_wrap input[type="button"].plus{background-color: #1f6bbb; color: #fff;}
.box-td.subject ul li .con_wrap input[type="button"].minus{background-color: #FD4D35; color: #fff;}
.box-td.subject ul li .con_wrap input[type="time"]{border: 1px solid #ddd; cursor: pointer; width:180px;}

.box-td.subject ul li .con_wrap input[type="file"].edu_file{opacity: 0; overflow: hidden;width: 0; height: 0; display: none;}
.box-td.subject ul li + li{margin-top: 16px;}
.box-td.subject ul li .con_wrap .btn-upload{border: 1px solid #ddd; padding: 8px 8px; width: 120px; text-align: center; border-radius: 5px;cursor: pointer;}
.box-td.subject ul li .con_wrap .file_name{display: flex; align-items: center; justify-content: center; margin-right: 16px;}
.box-td.subject ul li .con_wrap .file_name span.x_btn{margin-left: 4px; width: 15px; height: 15px; padding-bottom: 2px; background-color: #222; color: #fff;display: flex; align-items: center; justify-content: center;}
.box-td.subject ul li .con_wrap .file_name a{text-decoration: underline; margin-bottom: 0; font-size: 16px; cursor: pointer;}
.adm_lang ul li{display: inline-block; font-weight: 600; color: #a0a0a0; cursor: pointer; transition: all .2s; background-color: #dae0e1; padding: 12px 30px; border-radius: .25rem; font-size: 16px; }
.adm_lang ul li + li{margin-left: 8px;}
.adm_lang ul li.lang_on{background-color:#fff; color:#1f6bbb; }
.adm_lang ul li span{font-weight: 700; }
.adm_lang ul li:hover{background-color:#fff; color:#1f6bbb}

.box-td.subject ul li .con_wrap .img_file{border: 1px solid #ddd;}
.box-td.subject ul li .con_wrap .img_file img{height: 80px;}

.file_modal .modal-container{overflow-x: hidden; overflow-y: auto;}
.file_modal .x_btn{width: 20px; cursor: pointer; height: 20px; margin-left: 4px; background-color: #111; display: flex; align-items: center; justify-content: center;}
.file_modal .x_btn img{width: 15px;}
.file_upload_custom{cursor: pointer; border: 1px dashed #18b0e2;border-radius: 15px;background-color: #f2fdff;height: 180px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.file_upload_custom span.title{cursor: pointer;font-size: 18px; font-weight: 600; color: #222; text-align: center; display: block; margin-top: 12px;}
.file_upload_custom input[type="file"]{display: none;}
.file_upload_custom i{width: 50px;display: block; margin: 0 auto;cursor: pointer;}


.file_modal .file_list {overflow-x: hidden; overflow-y: auto; max-height:18vh;}

.file_modal .file_list::-webkit-scrollbar {width: 8px; } 
.file_modal .file_list::-webkit-scrollbar-thumb {background: #333;}
.file_modal .file_list::-webkit-scrollbar-track {background:#f5f5f5;}



.file_modal .file_list ul li + li{margin-top: 8px;}
.file_modal .file_list ul li p{text-decoration: underline; word-break: break-all;}
.file_modal .file_list ul li p{max-width: calc(100% - 30px);}
/* ********************************************* *
 * 1400px max
 * ********************************************* */
 @media (max-width:1400px)
 {
    .lib-modal-tableTop{ overflow-x: auto;}
    .lib-modal-tableTop table{width: 1440px;}
    .lib-modal-tableBottom{ overflow-x: auto;}
    .lib-modal-tableBottom table{width: 1440px;}
 }

 /* 버튼 on/off */

.set-switch{/* display: flex */ margin-left: auto; position: relative; }
.switch{position: relative; display: inline-block; width: 30px; height: 16px;}
.main-set-switch:before, .main-set-switch:after {
   
    width: 4rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    bottom: 5px;
    opacity:0.5
}
/* .main-set-switch{margin-left: 100px;} */
.main-set-switch::before{content: "일반 쿠폰"; }
.main-set-switch::after{content: "회원가입 쿠폰";}
.main-set-switch.active::before{opacity: 1; }
.main-set-switch.active::after{opacity: 1; }

.main-set-switch3::before{content: "OFF"; }
.main-set-switch3::after{content: "ON";}
.main-set-switch3.active::before{opacity: 1; }
.main-set-switch3.active::after{opacity: 1; }

.main-set-switch2::before{content: "사용안함"; }
.main-set-switch2::after{content: "사용";}
.main-set-switch2.active::before{opacity: 1; }
.main-set-switch2.active::after{opacity: 1; }

.main-use-switch:before, .main-use-switch:after {
   
    width: 4rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    bottom: 5px;
    opacity:0.5
}
/* .main-set-switch{margin-left: 100px;} */
.main-use-switch::before{content: "미사용"; }
.main-use-switch::after{content: "사용";}
.main-use-switch.active::before{opacity: 1; }
.main-use-switch.active::after{opacity: 1; }

.switch input{opacity: 0; width: 0; height: 0;}
.slide.round{border-radius: 38px;}
.slide.round::before{border-radius: 50%}

input:checked + .slide{background-color: #18b0e2; /* background-image: linear-gradient(to right,#1488cc 0%, #2b32b2 100%); */} 
input:checked + .slide::before { -webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px);}

.slide{position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;background-color: #ddd; transition:.4s; -webkit-transition:.4s;}
.slide:before{position: absolute; content: ""; height: 17px; width: 17px; left: -2px; bottom: 0; background-color:#fff; box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2); transition:.4s; -webkit-transition:.4s;}

.file_sec{min-width: 90px; text-align: center;}

.adm_aside{width: 240px;}

.filter_type button.plus{ height: 36px; background-color: #1f6bbb; color: #fff; display: flex; align-items: center; justify-content: center; margin-left:12px;}
.filter_type button.plus{position: relative; margin-left: 24px;}
.filter_type button.plus::before{content: ""; width: 1px ; height: 18px; background-color: #999; position: absolute;left: -16px; top: 50%; transform: translateY(-50%); }
.filter_type input{border: 1px solid #ddd;}
.filter_type .insert-select {overflow: hidden;}
.filter_type .insert-select + .insert-select {margin-left: 8px;}
.filter_type .insert-select .x-btn{cursor: pointer; position: absolute; padding-bottom: 2px; right: 1px; top: 1px; width: 18px; height: 18px; border-radius: 1px; display: flex; color: #fff; align-items: center; justify-content: center; font-size: 12px; background-color: #18b0e2;}


.filter_type .type_range{ display: flex; align-items: center;}
select{padding: 8px;}

.address_con{width:365px; max-width: 100%;}
.address_con .address{position: relative;}
.address_con .address button{position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-color: #999; color: #fff; padding: 8px 16px;}



.sub-title02{position: relative; padding-left: 12px; margin-bottom:12px; display: block; font-weight: 600;}
.sub-title02::before{content:""; width: 4px; height: 10px; background-color: #1f6bbb; position: absolute; left: 0; top: 5px;}


/* 티쳐스 가이드 */
.week_wrap ul{flex-wrap: wrap;}
.week_wrap ul li{width: calc(100% / 3 - 8px);}
.week_wrap ul li dl{border: 1px solid #ddd; border-radius: 5px; padding: 24px;}
.week_wrap ul li dl dt{border-bottom: 1px solid #ddd; padding-bottom:16px; margin-bottom: 16px;}
.week_wrap ul li dl dd>div{display: flex; gap: 4px;}
.week_wrap ul li dl dd>div input[type="button"]{width: 45px; padding: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center;}
.week_wrap ul li dl dd>div input[type="button"].plus{background-color: #18b0e2; color: #fff;}
.week_wrap ul li dl dd>div input[type="button"].minus{background-color: #FD4D35; color: #fff;}
.week_wrap ul li dl dd>div + div{margin-top: 4px;}
.week_wrap ul li.add_con{cursor: pointer; border: 1px solid #ddd;background-color: #f5f5f5; border-radius: 5px; display: flex; font-size: 40px; font-weight: 100; align-items: center; justify-content: center;}