@charset "UTF-8";

/* 채팅 상담 (cs0001.html) */
.chat-counsel-wrap { height: calc(100% - 80px); display: -webkit-box; display: -ms-flexbox; display: flex; }

.chat-counsel-wrap.full { height: 100%; }

.counsel-list-wrap { -webkit-box-flex: 0; -ms-flex: 0 0 400px; flex: 0 0 400px; width: 400px; height: 100%; border-right: 1px solid #e6e7e8; }

.counsel-list-wrap .counsel-list-header { padding: 0 30px; border-bottom: 2px solid #f1f2f6; }

.counsel-list-wrap .counsel-list-header .top { position: relative; }

.counsel-list-wrap .counsel-list-header .top > p { font-size: 20px; font-weight: 700; color: #222; margin-top: 30px; }

.counsel-list-wrap .counsel-list-header .top > button { font-size: 15px; font-weight: 400; color: #393f49; text-decoration: underline; margin-top: 8px; }

.counsel-list-wrap .counsel-list-header .top .btn-toggle-wrap { position: absolute; top: 0; right: 0; text-align: right; }

.counsel-list-wrap .counsel-list-header .top .btn-toggle-wrap > div { float: right; position: relative; width: 52px; height: 22px; border-radius: 11px; background-color: #424854; }

.counsel-list-wrap .counsel-list-header .top .btn-toggle-wrap > div > button { position: absolute; top: 2px; left: 2px; width: 35px; height: 18px; border-radius: 9px; background-color: #fff; text-align: center; font-size: 11px; font-weight: 700; color: #424854; line-height: 18px; -webkit-transition: left 0.5s; transition: left 0.5s; }

.counsel-list-wrap .counsel-list-header .top .btn-toggle-wrap > p { font-size: 15px; font-weight: 400; color: #222; margin-top: 32px; text-align: center; }

.counsel-list-wrap .counsel-list-header .top .btn-toggle-wrap.on > div { background-color: #4a8fff; }

.counsel-list-wrap .counsel-list-header .top .btn-toggle-wrap.on > div > button { left: 15px; color: #4a8fff; }

.counsel-list-wrap .counsel-list-header .top .btn-toggle-wrap.on > p { color: #4a8fff; }

.counsel-list-wrap .counsel-list-header .bottom { margin-top: 17px; padding-top: 16px; padding-bottom: 22px; border-top: 1px solid #e6e7e8; }

.counsel-list-wrap .counsel-list-header .bottom > p { display: inline-block; float: left; font-size: 15px; font-weight: 400; color: #222; line-height: 25px; }

.counsel-list-wrap .counsel-list-header .bottom > p > button { margin-left: 8px; vertical-align: top; }

.counsel-list-wrap .counsel-list-header .bottom > button { display: inline-block; float: right; padding-right: 11px; font-size: 15px; font-weight: 700; color: #222; line-height: 25px; background: url("/img/arrow-side-10.png") right center no-repeat; }

.counsel-list-wrap .counsel-list-tab { position: relative; height: 60px; padding: 0 30px; }

.counsel-list-wrap .counsel-list-tab > ul > li { float: left; position: relative; font-size: 17px; font-weight: 400; color: #b2b7be; line-height: 60px; cursor: pointer; }

.counsel-list-wrap .counsel-list-tab > ul > li.on { font-weight: 700; color: #222; }

.counsel-list-wrap .counsel-list-tab > ul > li.on:after { position: absolute; display: block; content: ''; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #222; }

.counsel-list-wrap .counsel-list-tab > ul > li.new:before { position: absolute; display: block; content: ''; top: 19px; right: -10px; width: 6px; height: 6px; border-radius: 3px; background-color: #f76252; }

.counsel-list-wrap .counsel-list-tab > ul > li + li { margin-left: 30px; }

.counsel-list-wrap .counsel-list-tab > p { position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 15px; font-weight: 400; color: #b2b7be; }

.counsel-list-wrap .counsel-list { position: relative; height: calc(100% - 228px); background-color: #fafbfc; }

.counsel-list-wrap .counsel-list > p { position: absolute; text-align: center; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 15px; font-weight: 400; color: #b2b7be; }

.counsel-list-wrap .counsel-list > ul > li { position: relative; font-size: 0; padding: 0 30px; cursor: pointer; }

.counsel-list-wrap .counsel-list > ul > li:hover { background-color: rgba(178, 183, 190, 0.08); }

.counsel-list-wrap .counsel-list > ul > li > div { position: relative; padding: 24px 0; }

.counsel-list-wrap .counsel-list > ul > li > div:after { position: absolute; display: block; content: ''; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #e6e7e8; }

.counsel-list-wrap .counsel-list > ul > li > div .status { display: inline-block; width: 50px; height: 50px; border-radius: 16px; text-align: center; font-size: 13px; font-weight: 700; color: #fff; line-height: 50px; vertical-align: top; }

.counsel-list-wrap .counsel-list > ul > li > div .status.asign { background-color: #424854; }

.counsel-list-wrap .counsel-list > ul > li > div .status.ing { background-color: #4a8fff; }

.counsel-list-wrap .counsel-list > ul > li > div .status.hold { background-color: #b2b6b3; }

.counsel-list-wrap .counsel-list > ul > li > div .summary-wrap { position: relative; display: inline-block; width: calc(100% - 64px); margin-left: 14px; vertical-align: top; }

.counsel-list-wrap .counsel-list > ul > li > div .summary-wrap .member-num { font-size: 15px; font-weight: 700; color: #222; }

.counsel-list-wrap .counsel-list > ul > li > div .summary-wrap .member-num .change { display: inline-block; width: 24px; height: 14px; margin-left: 8px; margin-top: -3px; vertical-align: middle; }

.counsel-list-wrap .counsel-list > ul > li > div .summary-wrap .member-num .time { float: right; font-size: 14px; font-weight: 400; color: #b2b7be; }

.counsel-list-wrap .counsel-list > ul > li > div .summary-wrap .summary { width: 230px; font-size: 15px; font-weight: 400; color: #222; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 8px; letter-spacing: -1px; }

.counsel-list-wrap .counsel-list > ul > li > div .summary-wrap .count { position: absolute; bottom: 0; right: 0; display: inline-block; width: 28px; height: 20px; border-radius: 10px; text-align: center; line-height: 20px; font-size: 13px; font-weight: 700; color: #fff; background-color: #f87a6c; }

.counsel-list-wrap .counsel-list > ul > li.on { background-color: #eef3f9; }

.counsel-list-wrap .counsel-list > ul > li.on:before { position: absolute; display: block; content: ''; top: 0; left: 0; width: 100%; height: 1px; background-color: #d7e4f3; }

.counsel-list-wrap .counsel-list > ul > li.on:after { position: absolute; display: block; content: ''; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #d7e4f3; }

.counsel-list-wrap .counsel-list > ul > li.on > div:after { display: none; }

.before-assign { position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; height: 100%; background-color: #f1f4f6; }

.before-assign .asign-start { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; text-align: center; }

.before-assign .asign-start > p { font-size: 15px; font-weight: 400; color: #6b6e73; }

.before-assign .asign-start > button { width: 200px; margin-top: 19px; }

.before-assign .no-chat { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; text-align: center; font-size: 15px; font-weight: 40; color: #6b6e73; padding-top: 82px; background: url("/img/img-no-list.png") center top no-repeat; }

.counsel-contents { position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 0%; flex: 1 1 0%; height: 100%;/* background-color: #f1f4f6; */display: -webkit-box; display: -ms-flexbox; display: flex; }