@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 400;
  src: url('../fonts/notosanskr-regular.woff2') format('woff2'),
		url('../fonts/notosanskr-regular.woff') format('woff')
}

@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 500;
  src: url('../fonts/notosanskr-medium.woff2') format('woff2'),
		url('../fonts/notosanskr-medium.woff') format('woff')
}

@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 700;
  src: url('../fonts/notosanskr-bold.woff2') format('woff2'),
		url('../fonts/notosanskr-bold.woff') format('woff')
}

@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 900;
  src: url('../fonts/notosanskr-black.woff2') format('woff2'),
		url('../fonts/notosanskr-black.woff') format('woff')
}

* { margin: 0; padding: 0; box-sizing: border-box; position: relative; font-family: "Noto Sans KR", sans-serif; letter-spacing: -1px; outline: none !important; word-break: break-all; }
*:focus { outline: none; }
*::selection { background-color: #000; color: #FFF; }
*::placeholder { color: #CCC; }
html, body { width: 100%; height: 100%; float: left; color: #333; font-size: 13px; background-color: #F7F7F7; }
#wrap { width: 100%; height: 100%; float: left; }

*::-webkit-scrollbar { width: 6px; height: 6px; background-color: #F7F7F7; }
*::-webkit-scrollbar-thumb { border-radius: 50px; background-color: #AAA; border: 1px solid #F7F7F7; }

/* 버튼 */
.typeBtn { width: 150px; height: 35px; line-height: 33px; float: left; font-weight: bold; font-size: 12px; border: 1px solid #666; background-color: #666; color: #FFF; text-align: center; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; }
.typeBtn.small { width: 120px; font-size: 13px; }
.typeBtn > i { margin-right: 6px; }
.typeBtn.disable { border: 1px solid #DDD; background-color: #FFF; color: #DDD; cursor: default; }

.btnBlack01 { border: 1px solid #000; background-color: #000; color: #FFF; }
.btnBlack02 { border: 1px solid #000; background-color: #FFF; color: #000; }
.btnWhite01 { border: 1px solid #FFF; background-color: #FFF; color: #AAA; }
.btnWhite02 { border: 1px solid #DDD; background-color: #FFF; color: #AAA; }
.btnRed01 { border: 1px solid #DC3333; background-color: #DC3333; color: #FFF; }
.btnRed02 { border: 1px solid #DC3333; background-color: #FFF; color: #DC3333; }
.btnOrange01 { border: 1px solid #FF7818; background-color: #FF7818; color: #FFF; }
.btnOrange02 { border: 1px solid #FF7818; background-color: #FFF; color: #FF7818; }
.btnYellow01 { border: 1px solid #FFD048; background-color: #FFD048; color: #333; }
.btnYellow02 { border: 1px solid #FFD048; background-color: #FFF; color: #FFD048; }
.btnGreen01 { border: 1px solid #207244; background-color: #207244; color: #FFF; }
.btnGreen02 { border: 1px solid #207244; background-color: #FFF; color: #207244; }
.btnGray01 { border: 1px solid #AAA; background-color: #AAA; color: #FFF; }
.btnGray02 { border: 1px solid #AAA; background-color: #FFF; color: #AAA; }
.btnMain01 { border: 1px solid #4B88B5; background-color: #4B88B5; color: #FFF; }
.btnMain02 { border: 1px solid #4B88B5; background-color: #FFF; color: #4B88B5; }

.listBtn { width:75px; }

/* 엘리먼트 초기화 */
a { color: inherit; text-decoration: none; }
img { vertical-align: bottom; max-width:100%; }
ul, li { list-style: none; }
button { border: 0; cursor: pointer; }
label { cursor: pointer; }
table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
tspan { letter-spacing: -0.5px !important; }
input { outline: none; border: 0; letter-spacing: -0.5px; }
input[type="file"] { display: none; }

i.click { cursor: pointer; }
.cp { cursor: pointer; }

.bb-tooltip { table-layout : auto; }

/* 스크롤바 커스텀 */
*::-webkit-scrollbar { width: 8px; height: 8px; background-color: #F5F5F5; }
*::-webkit-scrollbar-thumb { border-radius: 50px; background-color: #AAA; border: 1px solid #F5F5F5; }

/* 체크박스 커스텀 */
label.checkBox { width: 16px; height: 16px; line-height: 14px; display: inline-block; vertical-align: middle; cursor: pointer; background-color: #FFF; border: 1px solid #EBEBEB; }
label.checkBox > input { display: none; }
label.checkBox > i { width: 100%; vertical-align: middle; font-size: 11px !important; color: #CC3333 !important; text-align: center; opacity: 0; }
label.checkBox > input:checked + i { opacity: 1; }
label.checkBox.Y { cursor: default; }

label.radioBox { width: 16px; height: 16px; line-height: 14px; display: inline-block; vertical-align: middle; cursor: pointer; background-color: #FFF; border: 1px solid #DDD; border-radius: 100%; }
label.radioBox > input { display: none; }
label.radioBox > i { width: 100%; vertical-align: middle; font-size: 10px !important; color: #CC3333 !important; text-align: center; opacity: 0; }
label.radioBox > input:checked + i { opacity: 1; }

/* text 정렬 값 */
.tal { text-align: left !important; }
.tac { text-align: center !important; }
.tar { text-align: right !important; }

/* float 값 */
.left { float: left; }
.right { float: right; }

/* se2 */
.se2Plugin { height: 350px; vertical-align: top; }
.se2Plugin > textarea { opacity: 0; }
.se2Plugin > iframe { height: 349px !important; }

/* txtBox */
select.txtBox { min-width: 140px; height: 35px; float: left; color: #666; border: 1px solid #E1E1E1; padding: 0 10px; letter-spacing: -0.5px; }
select.listSet { width: 140px; height: 35px; float: left; color: #666; border: 1px solid #E1E1E1; padding: 0 10px; letter-spacing: -0.5px; }
input.txtBox { width: 100%; height: 35px; float: left; color: #666; border: 1px solid #E1E1E1; padding: 0 10px; letter-spacing: -0.5px; }
textarea.txtBox { width: 100%; height: 150px; float: left; color: #666; border: 1px solid #E1E1E1; padding: 10px; letter-spacing: -0.5px; resize: none; }
input.halfBox { width: 49%; height: 35px; float: left; color: #666; border: 1px solid #E1E1E1; padding: 0 10px; letter-spacing: -0.5px; }
span.tiled { width:2%; height: 35px; float: left; line-height: 35px; text-align: center; }
div.click { cursor:pointer; }
div.click:hover { background-color: #FAFAFA; }

.txtBox::placeholder { color: #CCC; }
.txtBox::-webkit-input-placeholder { color: #CCC; }
.txtBox::-ms-input-placeholder { color: #CCC; }
.txtBox::-mos-input-placeholder { color: #CCC; }
.txtBox:focus { border: 1px solid #CCC; }
.txtBox::-webkit-scrollbar { background-color: #FFF; }

/* 드래그 금지 */
.drag { -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; }
.drag * { -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; }

/* letter spacing */
.e { letter-spacing: -0.5px; }
.e * { letter-spacing: -0.5px; }

/* loading */
#loadingWrap { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999999; display: none; background-color: rgba(0,0,0,0.7); }
#loadingWrap * { -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; }
#loadingWrap > #loadingPercent { position: absolute; width: 50px; height: 50px; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; text-align: center; line-height: 50px; font-size: 11px; font-weight: bold; letter-spacing: -0.5px; color: #333; text-shadow: 0 0 2px #FFF; }
#loadingWrap > #loading { position: absolute; width: 50px; height: 50px; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; border: 3px solid rgba(255, 255, 255, 1); border-top-color: #4B88B5; border-radius: 50%; animation: loading 1s ease-in-out infinite; -webkit-animation: loading 1s ease-in-out infinite; }

@keyframes loading { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes loading { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

/* toggle */
label.toggle { cursor: pointer; background-color: #EEE; width: 60px; height: 30px; float: left; transition: all 0.5s; padding: 5px 7px; border-radius: 25px; }
label.toggle > div { width: 20px; height: 20px; background-color: #FFF; border-radius: 100%; float: left; transition: all 0.5s; left: 0; }
input.toggle { display: none; }
input.toggle:checked + label.toggle { background-color: #2790FF; }
input.toggle:checked + label.toggle > div { left: 26px; }

/* 프레임영역 */
#mainIframeWrap { width: 100%; height: 100%; float: left; }
/*#mainIframeWrap > iframe { width: 100%; height: 100%; float: left; border: 0; }
*/
/* minicolors */
.minicolors-theme-default .minicolors-input { width: 100% !important; height: 35px !important; padding-left: 36px; }
.minicolors-theme-default .minicolors-swatch { top: 50% !important; margin-top: -9px; left: 9px; }
.minicolors-position-bottom .minicolors-panel { top: 100% !important; }

/* datepicker */
.ui-widget.ui-widget-content { border: 0 !important; border-radius: 5px !important; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important; padding: 0 !important; overflow: hidden; margin-top: 5px; width: 220px !important; z-index: 9999999 !important; }
.ui-datepicker .ui-datepicker-header { border: 0 !important; border-radius: 0 !important; background-color: #333 !important; padding: 8px 50px !important; margin: 0 !important; }
.ui-datepicker .ui-datepicker-title { margin: 0 !important; }
.ui-datepicker table { margin: 5px 0 !important; }
.ui-datepicker td a { text-align: center !important; font-weight: 500 !important; border: 0 !important; background: none !important; font-size: 12px !important; color: #333 !important; border-radius: 3px; transition: background-color 0.2s; }
.ui-datepicker td a:hover { background-color: #F2F2F2 !important; }
.ui-datepicker td span { text-align: center !important; font-weight: 500 !important; border: 0 !important; background: none !important; font-size: 12px !important; color: #CCC !important; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight { background-color: #F2F2F2 !important; }
.ui-state-active, .ui-widget-content .ui-state-active { color: #FFF !important; font-weight: bold !important; background-color: #666 !important; }
.ui-state-active:hover, .ui-widget-content .ui-state-active:hover { color: #FFF !important; font-weight: bold !important; background-color: #666 !important; }
.ui-datepicker th { font-size: 12px !important; }

.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev { cursor: pointer; width: 35px !important; height: 35px !important; line-height: 35px !important; text-align: center !important; top: 0 !important; }
.ui-datepicker .ui-datepicker-next { right: 0 !important; }
.ui-datepicker .ui-datepicker-next::after { content: "\f0a9"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #FFF; opacity: 0.2; transition: opacity 0.5s; }
.ui-datepicker .ui-datepicker-next:hover::after { opacity: 1; }
.ui-datepicker .ui-datepicker-next > span { display: none !important; }

.ui-datepicker .ui-datepicker-prev { left: 0 !important; }
.ui-datepicker .ui-datepicker-prev::after { content: "\f0a8"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #FFF; opacity: 0.2; transition: opacity 0.5s; }
.ui-datepicker .ui-datepicker-prev:hover::after { opacity: 1; }
.ui-datepicker .ui-datepicker-prev > span { display: none !important; }

.ui-datepicker .ui-datepicker-next-hover { background-color: #333 !important; border: 0 !important; top: 0 !important; right: 0 !important; }
.ui-datepicker .ui-datepicker-prev-hover { background-color: #333 !important; border: 0 !important; top: 0 !important; left: 0 !important; }

.ui-datepicker select { border: none !important; background-color: #333 !important; font-weight: bold; color: #FFF !important; font-size: 15px !important; cursor: pointer !important; letter-spacing: -0.5px !important; margin: 0 !important; float: left; width: 50% !important; }

.ui-timepicker-standard { z-index: 9999999 !important; border: 0 !important; background: none !important; height: 222px !important; }
.ui-widget.ui-widget-content.ui-timepicker { width: calc(100% - 0.5px) !important; }
.ui-timepicker-standard .ui-state-hover { background-color: #F5F5F5 !important; border: 0 !important; border-radius: 0 !important; }
.ui-timepicker-standard a { font-size: 13px !important; letter-spacing: -0.5px; }
.ui-timepicker-viewport::-webkit-scrollbar { background-color: #FFF; }

/* audio */
.ppq-audio-player { width: 100%; height: 80px !important; line-height: 80px !important; float: left; }
.ppq-audio-player .play-pause-btn { margin: 17px 0 0 20px !important; }
.ppq-audio-player .player-bar { margin-top: 37.5px !important; }
.ppq-audio-player .player-time { width: 100px !important; padding: 0 5px; font-weight: 500; }
.ppq-audio-player .play-pause-btn .play-pause-icon::after { width: 100%; height: 100%; line-height: 41px; font-weight: 900; font-family: "Font Awesome 5 Free"; font-size: 18px; text-align: center; background: none; padding-left: 1px; color: #4B88B5; }
.ppq-audio-player .play-pause-btn .play-pause-icon::after { content: "\f04b"; }
.ppq-audio-player.player-playing .play-pause-icon::after { content: "\f04c"; }
.ppq-audio-player .player-bar .player-bar-played { background-color: #4B88B5; }

/* 공용상단영역 */
#headerTopWrap { position: fixed; width: 100%; height: 135px; top: 0; left: 0; z-index: 100; background-color: #CCC; padding-left: 90px; transition: padding-left 0.5s; }
#headerTopWrap.active { padding-left: 240px; }

#headerTopWrap > .topWrap { width: 100%; height: 80px; float: left; background-color: #4B88B5; }

#headerTopWrap > .topWrap > .callWrap { float: left; padding-left: 35px; }
#headerTopWrap > .topWrap > .callWrap > ul { float: left; }
#headerTopWrap > .topWrap > .callWrap > ul > li { float: left; }
#headerTopWrap > .topWrap > .callWrap > .line { width: 1px; height: 40px; float: left; top: 20px; background-color: #FFF; opacity: 0.12; margin: 0 10px; }

#headerTopWrap > .topWrap > .callWrap > .btnList01 { padding-top: 22.5px; }
#headerTopWrap > .topWrap > .callWrap > .btnList01 > li { min-width: 80px; height: 35px; line-height: 35px; padding: 0 10px; border-radius: 5px; background-color: rgba(0, 0, 0, 0.35); text-align: center; margin-right: 5px; cursor: pointer; color: #FFF; font-weight: bold; }
#headerTopWrap > .topWrap > .callWrap > .btnList01 > li > i { vertical-align: middle; font-size: 16px; margin-right: 7px; }
#headerTopWrap > .topWrap > .callWrap > .btnList01 > li.disable { opacity: 0.5; cursor: default; }

#headerTopWrap > .topWrap > .callWrap > .btnList02 { padding-top: 22.5px; }
#headerTopWrap > .topWrap > .callWrap > .btnList02 > li { min-width: 80px; height: 35px; line-height: 35px; padding: 0 10px; border-radius: 5px; background-color: rgba(255, 255, 255, 0.20); text-align: center; margin-left: 5px; cursor: pointer; color: #FFF; font-weight: bold; }
#headerTopWrap > .topWrap > .callWrap > .btnList02 > li > i { vertical-align: middle; font-size: 16px; margin-right: 7px; }

#headerTopWrap > .topWrap > .callWrap > .btnList01 .disconnectBtn { display: none; }

#headerTopWrap > .topWrap > .callWrap > .callInput { padding: 0 15px; padding-top: 20px; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .button { width: 40px; height: 40px; border-radius: 100%; line-height: 40px; text-align: center; cursor: pointer; background-color: #E74360; margin-right: 15px; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .button > i { color: #FFF; opacity: 0.8; font-size: 20px; vertical-align: middle; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .input { border-radius: 5px; overflow: hidden; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .input.active { border-radius: 5px 5px 5px 0; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .input > input { width: 300px; height: 40px; float: left; background-color: #FFF; font-size: 14px; font-weight: 500; padding: 0 90px 0 15px; color: #AAA; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .input > button { position: absolute; width: 40px; height: 40px; top: 0; right: 0; z-index: 1; background-color: #E2E2E2; color: #4B88B5; font-size: 20px; text-align: center; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .input > .absoluteIcon { position: absolute; cursor: pointer; top: 50%; right: 40px; font-size: 16px; color: #CCC; margin-top: -8px; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .input > .keypadOpenBtn { margin-right: 15px; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .input > .keypadSoundControlBtn{ margin-right: 45px; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .keypad { position: absolute; width: 260px; top: 100%; left: 70px; z-index: 10; padding: 20px 30px; background-color: #EBEBEB; border-radius: 0 0 10px 10px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); display: none; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .keypad > span { width: 31%; height: 40px; line-height: 40px; float: left; margin: 1.75% 0; margin-right: 3.5%; text-align: center; background-color: #FFF; color: #11182D; cursor: pointer; font-weight: bold; font-size: 15px; overflow: hidden; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .keypad > span:nth-of-type(3n) { margin-right: 0; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .keypad > span > audio { position: absolute; width: 1px; height: 1px; left: 100%; right: 100%; opacity: 0; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .keypad > span.btn { color: #AAA; }
#headerTopWrap > .topWrap > .callWrap > .callInput > .keypad > span.active { animation: keypadActive 0.5s; }
@keyframes keypadActive { 0% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 50% { box-shadow: 0 0 8px rgba(51, 102, 204, 0.5); } 100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); } }

#headerTopWrap > .topWrap > .myInfoWrap { height: 100%; float: right; background-color: rgba(0, 0, 0, 0.2); }
#headerTopWrap > .topWrap > .myInfoWrap > .line { width: 1px; height: 50px; float: left; top: 15px; background-color: #FFF; opacity: 0.12; }

#headerTopWrap > .topWrap > .myInfoWrap > .statusWrap { width: 200px; float: left; padding: 0 30px; color:white; text-align:center; line-height:80px; font-size:14px; }
#headerTopWrap > .topWrap > .myInfoWrap > .statusWrap span { float:left; }
#headerTopWrap > .topWrap > .myInfoWrap > .statusWrap p { float:right; }

#headerTopWrap > .topWrap > .myInfoWrap > .statusWrap .connected { display: none; }

/*#headerTopWrap > .topWrap > .myInfoWrap > .statusWrap > .label { width: 100%; float: left; font-weight: 500; color: #FFF; font-size: 12px; margin-bottom: 3px; }
#headerTopWrap > .topWrap > .myInfoWrap > .statusWrap > .value { width: 100%; height: 35px; line-height: 35px; float: left; background-color: #FFF; font-weight: bold; color: #CCC; padding: 0 15px; }
#headerTopWrap > .topWrap > .myInfoWrap > .statusWrap > .value.main { color: #4B88B5; }
#headerTopWrap > .topWrap > .myInfoWrap > .statusWrap > .value.red { color: #DC3333; }
#headerTopWrap > .topWrap > .myInfoWrap > .statusWrap > .value > i { position: absolute; right: 10px; top: 50%; margin-top: -10px; cursor: pointer; color: #4B88B5; font-size: 20px; }*/
#headerTopWrap > .topWrap > .myInfoWrap > .infoWrap { height: 40px; float: left; padding: 0 20px; top: 20px; padding-right: 65px; }
#headerTopWrap > .topWrap > .myInfoWrap > .infoWrap > * { float: left; }
#headerTopWrap > .topWrap > .myInfoWrap > .infoWrap > .userIcon { font-size: 38px; top: 1px; color: #FFF; opacity: 0.3; }
#headerTopWrap > .topWrap > .myInfoWrap > .infoWrap > p { padding-left: 15px; color: #FFF; font-weight: 500; top: 3px; max-width:140px; }
#headerTopWrap > .topWrap > .myInfoWrap > .infoWrap > p > span { width: 100%; float: left; }
#headerTopWrap > .topWrap > .myInfoWrap > .infoWrap > p > span.small { font-size: 12px; }
#headerTopWrap > .topWrap > .myInfoWrap > .infoWrap > p > span.big { font-size: 15px; letter-spacing: -0.5px; margin-top: -4px; }
#headerTopWrap > .topWrap > .myInfoWrap > .infoWrap > .btn { top: 2.5px; }
#headerTopWrap > .topWrap > .myInfoWrap > .infoWrap > .btn > a { width: 35px; height: 35px; line-height: 35px; float: left; border-radius: 100%; color: #FFF; text-align: center; margin-left: 5px; background-color: rgba(0, 0, 0, 0.3); font-size: 15px; }
#headerTopWrap > .topWrap > .myInfoWrap > .infoWrap > .btn > a > .cnt { position: absolute; width: 20px; height: 20px; line-height: 20px; text-align: center; overflow: hidden; color: #FFF; background-color: #DC3333; border-radius: 100%; letter-spacing: -0.5px; font-size: 11px; top: -5px; right: -5px; }

#headerTopWrap > .bottomWrap { width: 100%; float: left; }
#headerTopWrap > .bottomWrap > div > ul { float: left; }
#headerTopWrap > .bottomWrap > div > ul > li { float: left; }

#headerTopWrap > .bottomWrap > .likeWrap { float: left; padding-left: 25px; }
#headerTopWrap > .bottomWrap > .likeWrap > ul > li { height: 55px; line-height: 55px; }
#headerTopWrap > .bottomWrap > .likeWrap > ul > li.icon { height: 20px; line-height: 20px; color: #FFF; font-size: 18px; padding-right: 20px; top: 17px; border-right: 1px solid rgba(255, 255, 255, 0.45); margin-right: 10px; }
#headerTopWrap > .bottomWrap > .likeWrap > ul > li.no { margin: 0 20px; color: #F5F5F5; font-size: 14px; font-weight: bold; opacity: 1; }
#headerTopWrap > .bottomWrap > .likeWrap > ul > li > a { margin: 0 20px; color: #333; font-size: 14px; font-weight: bold; }

#headerTopWrap > .bottomWrap > .etcWrap { float: right; padding-right: 30px; }
#headerTopWrap > .bottomWrap > .etcWrap > ul > li { height: 20px; line-height: 20px; padding: 0 20px; top: 17px; border-right: 1px solid rgba(255, 255, 255, 0.45); }
#headerTopWrap > .bottomWrap > .etcWrap > ul > li:last-of-type { border-right: 0; }
#headerTopWrap > .bottomWrap > .etcWrap > ul > li > a { font-size: 14px; color: #333; font-weight: bold; }
#headerTopWrap > .bottomWrap > .etcWrap > ul > li > a > i { margin-right: 10px; }
#headerTopWrap > .bottomWrap > .etcWrap > ul > li > a > .cnt { width: 20px; height: 20px; line-height: 20px; float: right; text-align: center; overflow: hidden; color: #FFF; background-color: #DC3333; border-radius: 100%; letter-spacing: -0.5px; font-size: 11px; margin-left: 5px; }

/* 공용좌측영역 */
#leftSideWrap { position: fixed; width: 90px; height: 100%; top: 0; left: 0; z-index: 102; background-color: #FFF; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); overflow: hidden; transition: width 0.5s; }

#leftSideWrap > .logoWrap { width: 90px; height: 135px; float: left; background-color: #333; }
#leftSideWrap > .logoWrap > a { width: 100%; height: 100%; float: left; overflow: hidden; opacity: 1; transition: opacity 0.5s; }
#leftSideWrap > .logoWrap > a > img { width: 100%; }

#leftSideWrap > .logoWrap > .leftSideControlBtn { position: absolute; width: 19px; height: 12px; bottom: 15px; left: 50%; z-index: 1; cursor: pointer; margin-left: -10px; }
#leftSideWrap > .logoWrap > .leftSideControlBtn > img { width: 100%; float: left; }
#leftSideWrap > .logoWrap > .leftSideControlBtn > img.on { display: none; }
#leftSideWrap > .logoWrap > .leftSideControlBtn > img.off { display: block; }

#leftSideWrap > .logoWrap > .leftSideControlBtn.active > img.on { display: block; }
#leftSideWrap > .logoWrap > .leftSideControlBtn.active > img.off { display: none; }

#leftSideWrap > .mainMenuListWrap { width: 90px; height: calc(100% - 135px); float: left; overflow-y: auto; background-color: #EDEDED; }
#leftSideWrap > .mainMenuListWrap::-webkit-scrollbar { background-color: #EDEDED; }
#leftSideWrap > .mainMenuListWrap::-webkit-scrollbar-thumb { border: 1px solid #EDEDED; }
#leftSideWrap > .mainMenuListWrap > ul { width: 100%; float: left; }
#leftSideWrap > .mainMenuListWrap > ul > li { width: 100%; height: 80px; float: left; padding: 0 7px; transition: height 0.5s, padding 0.5s; overflow: hidden; }
#leftSideWrap > .mainMenuListWrap > ul > li > a { width: 100%; height: 100%; float: left; border-bottom: 1px solid #EBEBEB; font-size: 14px; color: #333; font-weight: bold; text-align: center; padding-top: 21px; transition: padding-top 0.5s; }
#leftSideWrap > .mainMenuListWrap > ul > li > a > i { width: 100%; height: 20px; float: left; vertical-align: middle; font-size: 18px; text-align: center; margin-bottom: 2px; transition: width 0.5s; }
#leftSideWrap > .mainMenuListWrap > ul > li > a > .name { width: 100%; float: left; opacity: 1; transition: opacity 0.5s; }
#leftSideWrap > .mainMenuListWrap > ul > li > a > .cnt { position: absolute; width: 25px; height: 25px; line-height: 25px; overflow: hidden; color: #FFF; text-align: center; letter-spacing: -0.5px; background-color: #CC3333; font-size: 11px; border-radius: 100%; right: 8px; top: 10px; opacity: 1; transition: opacity 0.5s; }
#leftSideWrap > .mainMenuListWrap > ul > li.active { background-color: #4B88B5; }
#leftSideWrap > .mainMenuListWrap > ul > li.active > a { border-bottom: 1px solid rgba(0, 0, 0, 0); color: #FFF; background-color: #4B88B5; }
#leftSideWrap > .mainMenuListWrap > ul > li.subActive > a { color: #4B88B5; }

/* 공용좌측서브영역 */
#leftSideSubWrap { position: fixed; width: 150px; height: 100%; top: 0; left: 90px; z-index: 101; background-color: #FFF; overflow: hidden; transition: width 0.5s, box-shadow 0.5s; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1); }
#leftSideSubWrap.active { width: 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0); }

#leftSideSubWrap > .logoWrap { width: 150px; height: 135px; float: left; background-color: #E1E1E1; text-align:center; }
#leftSideSubWrap > .logoWrap img { top:50%; transform: translateY(-50%); }

#leftSideSubWrap > .subMenuListWrap { width: 150px; height: calc(100% - 135px); float: left; padding-top: 50px; overflow-y: auto; }
#leftSideSubWrap > .subMenuListWrap::-webkit-scrollbar { background-color: #FFF; }
#leftSideSubWrap > .subMenuListWrap::-webkit-scrollbar-thumb { border: 1px solid #FFF; }
#leftSideSubWrap > .subMenuListWrap > ul { width: 100%; float: left; display: none; }
/*#leftSideSubWrap > .subMenuListWrap > ul > li { width: 100%; float: left; margin-bottom: 10px; }*/
#leftSideSubWrap > .subMenuListWrap > ul > li { width: 100%; float: left; margin-top:-1px; }
#leftSideSubWrap > .subMenuListWrap > ul > li:last-of-type { margin-bottom: 0; }
#leftSideSubWrap > .subMenuListWrap > ul > li > a { width: 100%; height: 40px; line-height: 40px; float: left; font-size: 13px; font-weight: bold; color: #333; padding: 0 15px 0 25px; border-top: 1px solid #4B88B5; }
#leftSideSubWrap > .subMenuListWrap > ul > li.active > a { color: #4B88B5; }
#leftSideSubWrap > .subMenuListWrap > ul > li > a > i { margin-right: 5px; }
#leftSideSubWrap > .subMenuListWrap > ul > li > a > .rightIcon { width: 8px; float: right; text-align: center; }
#leftSideSubWrap > .subMenuListWrap > ul > li > a > .cnt { position: absolute; width: 20px; height: 20px; line-height: 20px; overflow: hidden; color: #FFF; text-align: center; letter-spacing: -0.5px; background-color: #CC3333; font-size: 11px; border-radius: 100%; margin-left: 10px; top: 50%; margin-top: -10px; }

/*#leftSideSubWrap .trdMenuListWrap { width: 100%; float: left; padding: 5px 0; }*/
#leftSideSubWrap .trdMenuListWrap { width: 100%; float: left; }
#leftSideSubWrap .trdMenuListWrap > li { width: 100%; float: left; padding:0 0 0px 30px; line-height:35px; }
#leftSideSubWrap .trdMenuListWrap > li { border-bottom: 1px solid #ccc; }

#leftSideSubWrap .trdMenuListWrap > li > a { width: 100%; float: left; font-size: 12px; color: #333; font-weight: 500; }
#leftSideSubWrap .trdMenuListWrap > li.active > a { color: #4B88B5; }

/* 공용나의현황영역 */
#myDashboardWrap { position: fixed; width: 340px; height: 100%; top: 0; right: -340px; background-color: #FFF; z-index: 110; box-shadow: 0 0 0 rgba(0, 0, 0, 0.26); transition: box-shadow 0.5s, right 0.5s; }
#myDashboardWrap.active { right: 0; box-shadow: 0 0 40px rgba(0, 0, 0, 0.26); }
#myDashboardWrap > #myDashboardBtn { position: absolute; width: 45px; height: 80px; line-height: 80px; background-color: #313131; color: #FFF; text-align: center; left: -45px; font-size: 19px; cursor: pointer; }

#myDashboardWrap > .wrap { width: 100%; height: 100%; float: left; overflow-y: auto; }
#myDashboardWrap > .wrap > .userInfoWrap { width: 100%; height: 150px; float: left; text-align: center; display: table; table-layout: fixed; }
#myDashboardWrap > .wrap > .userInfoWrap > div { width: 100%; display: table-cell; vertical-align: middle; }
#myDashboardWrap > .wrap > .userInfoWrap > div > .iconWrap { width: 100%; float: left; text-align: center; }
#myDashboardWrap > .wrap > .userInfoWrap > div > .iconWrap > i { width: 80px; height: 80px; line-height: 80px; border-radius: 100%; background-color: #D7D7D7; color: #FFF; font-size: 30px; }
#myDashboardWrap > .wrap > .userInfoWrap > div > .nameWrap { width: 100%; float: left; text-align: center; margin-top: 10px; font-size: 15px; color: #333; font-weight: bold; }
#myDashboardWrap > .wrap > .menuListWrap { width: 100%; float: left; }
#myDashboardWrap > .wrap > .menuListWrap > ul { width: 100%; float: left; display: table; table-layout: fixed; }
#myDashboardWrap > .wrap > .menuListWrap > ul > li { width: 33.33%; height: 80px; display: table-cell; vertical-align: middle; border-right: 1px solid #FFF; background-color: #4B88B5; }
#myDashboardWrap > .wrap > .menuListWrap > ul > li:last-of-type { border-right: 0; }
#myDashboardWrap > .wrap > .menuListWrap > ul > li > a { width: 100%; height: 100%; float: left; padding-top: 20px; color: #FFF; }
#myDashboardWrap > .wrap > .menuListWrap > ul > li > a > i { width: 100%; float: left; text-align: center; font-size: 20px; }
#myDashboardWrap > .wrap > .menuListWrap > ul > li > a > span { width: 100%; float: left; text-align: center; font-size: 14px; font-weight: 500; margin-top: 5px; }
#myDashboardWrap > .wrap > .dashboardWrap { width: 100%; float: left; padding: 20px; }
#myDashboardWrap > .wrap > .dashboardWrap > .statusWrap { width: 100%; float: left; }
#myDashboardWrap > .wrap > .dashboardWrap > .statusWrap > div { height: 15px; line-height: 15px; font-size: 12px; }
#myDashboardWrap > .wrap > .dashboardWrap > .statusWrap > .left { color: #CCC; font-weight: 500; }
#myDashboardWrap > .wrap > .dashboardWrap > .statusWrap > .right > .dashboardRefreshBtn { color: #666; font-weight: bold; cursor: pointer; }
#myDashboardWrap > .wrap > .dashboardWrap > .statusWrap > .right > .dashboardRefreshBtn > i { margin-right: 5px; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap { width: 100%; float: left; border-bottom: 1px solid #D7D7D7; padding: 20px 0; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .titleWrap { width: 100%; float: left; font-size: 15px; color: #4B88B5; padding: 0 10px; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .titleWrap > .left > i { width: 21px; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .titleWrap > .left > .title { font-weight: bold; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .titleWrap > .left > .info { color: #999; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .titleWrap > .right { font-weight: bold; padding-right: 10px; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .titleWrap > .right > span { color: #333; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .titleWrap > .right > .point { color: #4B88B5; letter-spacing: -0.5px; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .listWrap { width: 100%; float: left; padding: 0 20px 0 31px; margin-top: 5px; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .listWrap > ul { width: 100%; float: left; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .listWrap > ul > li { width: 100%; float: left; font-size: 14px; color: #000; font-weight: 500; padding: 3px 0; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .listWrap > ul > li > .label { float: left; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .listWrap > ul > li > .value { float: right; letter-spacing: -0.5px; font-weight: bold; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .listWrap > ul > li > .value * { letter-spacing: -0.5px; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .listWrap > ul > li .point { color: #DC3333; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap > .listWrap > ul > li .gray { color: #666; }

#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap.background { border-bottom: 0; padding-bottom: 0; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap.background > .listWrap { border-radius: 5px; background-color: #EBEBEB; padding-top: 10px; padding-bottom: 10px; }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap.background.point > .listWrap { background-color: rgba(75, 136, 181, 0.2); }
#myDashboardWrap > .wrap > .dashboardWrap > .itemWrap.background.point > .listWrap > ul > li { color: #333; }

/* 콘텐츠시작영역 */
#contentsWrap { width: 100%; height: 100%; float: left; padding-top: 135px; padding-left: 90px; transition: padding-left 0.5s; }
#contentsWrap.active { padding-left: 240px; }
/*
#contentsWrap > iframe { width: 100%; height: 100%; float: left; border: 0; }*/

.section { width: 100%; float: left; padding: 40px 50px; background-color: #FFF; margin-bottom: 15px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.section:last-of-type { margin-bottom: 0; }

/* 콘텐츠타이틀영역 */
.contentsTitleWrap { height: 70px; padding: 27.5px 20px !important; }

.contentsTitleWrap > .left > span { height: 15px; line-height: 15px; float: left; }
.contentsTitleWrap > .left > .title { font-size: 17px; font-weight: bold; border-left: 3px solid #4B88B5; padding-left: 10px; }
.contentsTitleWrap > .left > .info { font-size: 13px; font-weight: 500; color: #999; margin-left: 20px; }

.contentsTitleWrap > .right > .rootListWrap { float: left; }
.contentsTitleWrap > .right > .rootListWrap > li { height: 15px; line-height: 15px; float: left; font-size: 13px; font-weight: bold; color: #999; }
.contentsTitleWrap > .right > .rootListWrap > li > i { vertical-align: middle; margin: 0 3px; }
.contentsTitleWrap > .right > .rootListWrap > li.active { color: #333; }

.contentsTitleWrap > .right > .likeBtnWrap { height: 15px; line-height: 15px; float: left; margin-left: 20px; margin-right: 5px; }
.contentsTitleWrap > .right > .likeBtnWrap > .pageLikeBtn { color: #CCC; font-size: 14px; vertical-align: middle; cursor: pointer; }
.contentsTitleWrap > .right > .likeBtnWrap > .pageLikeBtn.active { color: #FFCC33; }

/* 팝업영역 */
iframe { width: 100%; min-height: 100px; max-height: 95vh; }

.popupWrap { position: fixed; width: 100%; height: 100%; left: -100%; top: 0; z-index: 999; background-color: rgba(0, 0, 0, 0.8); display: table; opacity: 0; transition: opacity 0.35s; }
.popupWrap.active { opacity: 1; }
.popupWrap > div { width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; overflow: auto; }

.popupBox { width: 1100px; float: left; background-color: #FFF; left: 50%; margin-left: -550px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.42); }
.popupBox.small { width: 800px; left: 50%; margin-left: -400px; }

.popupBox > .popupTitleWrap { width: 100%; float: left; background-color: #4B88B5; }
.popupBox > .popupTitleWrap > .left { padding-left: 30px; }
.popupBox > .popupTitleWrap > .left > div { height: 60px; line-height: 60px; float: left; color: #FFF; }
.popupBox > .popupTitleWrap > .left > .title { font-size: 18px; font-weight: bold; }
.popupBox > .popupTitleWrap > .left > .info { font-size: 13px; font-weight: 500; margin-left: 15px; opacity: 0.7; }
.popupBox > .popupTitleWrap > .popupCloseBtn { position: absolute; right: 0; top: 0; cursor: pointer; }

.popupBox > .popupContentsWrap { width: 100%; float: left; text-align: left; }
/* .popupBox > .popupContentsWrap > .contentsWrap { width: 100%; height: calc(100% - 60px); max-height: 500px; float: left; padding: 30px; overflow-y: auto; } */
/* .popupBox > .popupContentsWrap > .contentsWrap::-webkit-scrollbar { background-color: #FFF; } */
/* .popupBox > .popupContentsWrap > .contentsWrap::-webkit-scrollbar-thumb { border: 1px solid #FFF; } */
/* .popupBox > .popupContentsWrap > .btnWrap { width: 100%; height: 80px; line-height: 80px; float: left; text-align: center; } */
/* .popupBox > .popupContentsWrap > .btnWrap > .typeBtn { float: none; display: inline-block; margin: 0 2px; } */
/* .popupBox > .popupContentsWrap .pageGuideWrap { margin-top: 30px !important; } */

.popupContainer { width: 100%;  float: left; padding: 30px; overflow-y: auto; background-color: #fff; }
.popupContainer::-webkit-scrollbar { background-color: #FFF; }
.popupContainer::-webkit-scrollbar-thumb { border: 1px solid #FFF; }
.popupContainer > .btnWrap { width: 100%; height: 80px; line-height: 80px; float: left; text-align: center; }
.popupContainer > .btnWrap > .typeBtn { float: none; display: inline-block; margin: 0 2px; }
.popupContainer .pageGuideWrap { margin-top: 30px !important; }

.popupWrap.mini { z-index: 1000; background-color: rgba(0, 0, 0, 0); }
.popupWrap.mini .popupBox { border: 1px solid #EEE; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.26); }
.popupWrap.mini .popupBox > .popupTitleWrap { background-color: #FFF !important; border-bottom: 1px solid #E1E1E1; }
.popupWrap.mini .popupBox > .popupTitleWrap > .left > div { height: 55px; line-height: 55px; color: #333; }

/* 알림영역 */
#notificationWrap { position: fixed; width: 100%; height: 100%; left: -100%; top: 0; z-index: 999999; background-color: rgba(0, 0, 0, 0.8); display: table; opacity: 0; transition: opacity 0.35s; }
#notificationWrap.active { opacity: 1; }
#notificationWrap > div { width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; overflow: auto; }

#notificationWrap .itemWrap { width: 1200px; height: 350px; float: left; left: 50%; margin-left: -600px; }
#notificationWrap .itemWrap > li { position: absolute; width: 380px; height: 350px; top: 0; }
#notificationWrap .itemWrap > li:nth-of-type(1) { left: 0; }
#notificationWrap .itemWrap > li:nth-of-type(2) { left: 50%; margin-left: -190px; z-index: 2; transition: width 0.5s, margin-left 0.5s; }
#notificationWrap .itemWrap > li:nth-of-type(2).active { width: 1200px; margin-left: -600px; }
#notificationWrap .itemWrap > li:nth-of-type(3) { right: 0; }
#notificationWrap .itemWrap > li > .backgroundWrap { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.3); text-align: center; }
#notificationWrap .itemWrap > li > .backgroundWrap > i { font-size: 70px; color: #FFF; opacity: 0.1; top: 50%; margin-top: -35px; }
#notificationWrap .itemWrap > li > .boxWrap { position: absolute; width: 100%; height: 100%; z-index: 2; background-color: #FFF; left: 0; opacity: 0; transition: top 0.5s, opacity 0.5s; }
#notificationWrap .itemWrap > li > .boxWrap:nth-of-type(2) { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.42); }
#notificationWrap .itemWrap > li > .boxWrap.active { top: 0; opacity: 1; }
#notificationWrap .itemWrap > li > .boxWrap > .titleWrap { width: 100%; height: 50px; float: left; background-color: #333; padding: 0 25px; }
#notificationWrap .itemWrap > li > .boxWrap > .titleWrap > .title { height: 50px; line-height: 50px; float: left; font-size: 17px; color: #FFF; font-weight: bold; }
#notificationWrap .itemWrap > li > .boxWrap > .titleWrap > .closeBtn { position: absolute; height: 50px; right: 0; top: 0; cursor: pointer; }
#notificationWrap .itemWrap > li > .boxWrap > .contentsWrap { width: 100%; height: calc(100% - 50px); float: left; padding: 20px 30px; }
#notificationWrap .itemWrap > li > .boxWrap > .contentsWrap > .btnWrap { position: absolute; width: 100%; left: 0; bottom: 20px; text-align: center; }
#notificationWrap .itemWrap > li > .boxWrap > .contentsWrap > .btnWrap > button { display: inline-block; width: 100px; height: 30px; text-align: center; margin: 0 2px; font-weight: 500; font-size: 13px; background-color: #FFF; }
#notificationWrap .itemWrap > li > .boxWrap > .contentsWrap > .btnWrap > button.closeBtn { color: #999; border: 1px solid #DDD; }
#notificationWrap .itemWrap > li > .boxWrap > .contentsWrap > .btnWrap > button.checkBtn { color: #333; border: 1px solid #333; }

#notificationWrap .itemWrap > .scheduleBox > .boxWrap > .titleWrap { background-color: #FF9900; }
#notificationWrap .itemWrap > .scheduleBox > .boxWrap > .contentsWrap > .btnWrap > button.checkBtn { color: #FF9900; border: 1px solid #FF9900; }
#notificationWrap .itemWrap > .scheduleBox > .boxWrap > .contentsWrap > .dateWrap { width: 100%; height: 20px; line-height: 20px; float: left; font-size: 13px; color: #333; letter-spacing: -0.5px; font-weight: bold; text-align: left; }
#notificationWrap .itemWrap > .scheduleBox > .boxWrap > .contentsWrap > .dateWrap > i { margin-right: 5px; }
#notificationWrap .itemWrap > .scheduleBox > .boxWrap > .contentsWrap > .memoWrap { width: 100%; height: calc(100% - 80px); float: left; border-radius: 10px; padding: 20px; background-color: #F3F3F3; color: #666; font-size: 13px; overflow-y: auto; text-align: left; letter-spacing: -0.5px; margin-top: 10px; }
#notificationWrap .itemWrap > .scheduleBox > .boxWrap > .contentsWrap > .memoWrap::-webkit-scrollbar { background-color: #F3F3F3; }

#notificationWrap .itemWrap > .messageBox > .boxWrap > .titleWrap { background-color: #336699; }
#notificationWrap .itemWrap > .messageBox > .boxWrap > .contentsWrap > .btnWrap > button.checkBtn { color: #336699; border: 1px solid #336699; }
#notificationWrap .itemWrap > .messageBox > .boxWrap > .contentsWrap > .btnWrap > button.successBtn { background-color: #336699; border: 1px solid rgba(0, 0, 0, 0); color: #FFF; }
#notificationWrap .itemWrap > .messageBox > .boxWrap > .contentsWrap > .nameWrap { width: 100%; height: 20px; line-height: 20px; float: left; font-size: 15px; color: #333; font-weight: bold; text-align: left; margin-bottom: 2px; }
#notificationWrap .itemWrap > .messageBox > .boxWrap > .contentsWrap > .nameWrap > span { letter-spacing: -0.5px; }
#notificationWrap .itemWrap > .messageBox > .boxWrap > .contentsWrap > .nameWrap > span.point { color: #336699; }
#notificationWrap .itemWrap > .messageBox > .boxWrap > .contentsWrap > .nameWrap > span.sub { color: #666; }
#notificationWrap .itemWrap > .messageBox > .boxWrap > .contentsWrap > .dateWrap { width: 100%; height: 18px; line-height: 20px; float: left; font-size: 12px; color: #B9B8B8; letter-spacing: -0.5px; font-weight: 500; text-align: left; margin-bottom: 10px; }
#notificationWrap .itemWrap > .messageBox > .boxWrap > .contentsWrap > .dateWrap > i { margin-right: 5px; }
#notificationWrap .itemWrap > .messageBox > .boxWrap > .contentsWrap > .memoWrap { width: 100%; height: calc(100% - 100px); float: left; border-radius: 10px; padding: 20px; background-color: #F3F3F3; color: #666; font-size: 13px; overflow-y: auto; text-align: left; letter-spacing: -0.5px; }
#notificationWrap .itemWrap > .messageBox > .boxWrap > .contentsWrap > .memoWrap::-webkit-scrollbar { background-color: #F3F3F3; }
#notificationWrap .itemWrap > .messageBox > .boxWrap > .contentsWrap > .inputWrap { width: 100%; height: calc(100% - 100px); float: left; }
#notificationWrap .itemWrap > .messageBox > .boxWrap > .contentsWrap > .inputWrap > .txtBox { height: 100%; }

#notificationWrap .itemWrap > .callBox > .boxWrap > .titleWrap { background-color: #E74360; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap { opacity: 1; transition: opacity 0.5s; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > .btnWrap > button.checkBtn { color: #E74360; border: 1px solid #E74360; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap { display: table; table-layout: fixed; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > div { width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > div > .tel { width: 100%; float: left; text-align: center; font-weight: bold; color: #333; letter-spacing: -0.5px; font-size: 28px; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > div > .name { width: 100%; float: left; text-align: center; font-weight: 500; color: #666; font-size: 16px; margin-top: 5px; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > div > .name > b { margin-right: 5px; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > div > .callBtn { width: 100%; float: left; text-align: center; margin-top: 35px; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > div > .callBtn > i { display: inline-block; width: 60px; height: 60px; line-height: 60px; border-radius: 100%; font-size: 28px; border: 1px solid #FF0000; margin: 0 5px; cursor: pointer; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > div > .callBtn > .ringing { cursor: default; border: 1px solid #DDD; color: #AAA; display: none; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > div > .callBtn > .rejectionBtn { color: #FF0000; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > div > .callBtn > .receptionBtn { color: #FFF; background-color: #FFFFFF; animation: receptionBtnBGColor 0.2s steps(2) infinite; }
@keyframes receptionBtnBGColor { 0% { background-color: #FF0000; border-color: #FF0000; } 100% { background-color: #FFFFFF; border-color: #FFFFFF; } }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > .dbCsWriteWrap { padding: 0; border-bottom: 0; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > .dbCsWriteWrap > .titleWrap { width: 100%; float: left; text-align: left; font-size: 16px; font-weight: bold; color: #333; margin-bottom: 20px; letter-spacing: -0.5px; border-bottom: 1px solid #EEE; padding-bottom: 15px; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > .dbCsWriteWrap > .titleWrap > i { margin-right: 10px; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > .dbCsWriteWrap > form > .frmWrap > textarea { height: 200px; margin-bottom: 0; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > .dbCsWriteWrap .csSubmitBtn { background-color: #E74360; border: 1px solid #E74360; color: #FFF; }
#notificationWrap .itemWrap > .callBox > .boxWrap > .contentsWrap > .dbCsWriteWrap .rejectionBtn { background-color: #FFF; border: 1px solid #E74360; color: #E74360; }

/* 상담버튼 */
#softPhoneUnconnectBtn { display: none; }
#softPhoneWaitBtn { display: none; }

.elCopyBtn { cursor:pointer; }
.elCopyBtn:hover { color:#DC3333; }
.elCopyBtn > .copySuccessMiniPop { position: absolute; width: 50px; padding: 5px 0; margin-bottom: 5px; font-size: 12px; font-weight: 300; background-color: #FFF; z-index: 10; border-radius: 5px; border: 1px solid #CCC; text-align: center; top: 100%; left: 50%; margin-left: -25px; color: #AAA; }

/* excelDownloadFrm */
#excelDownloadFrm { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -100%; top: -100%; z-index: -1; }

@media (max-width: 1800px){
	#headerTopWrap > .topWrap > .myInfoWrap { right: 45px; }
	#headerTopWrap > .topWrap > .myInfoWrap > .line { display: none; }
	#headerTopWrap > .topWrap > .myInfoWrap > .infoWrap { display: none; }
	#headerTopWrap > .topWrap > .myInfoWrap > .statusWrap { width: 200px; padding: 0 20px; }
}

@media (max-width: 1350px){
	#headerTopWrap > .topWrap > .callWrap > .callInput > .input > input { width: 200px; }
	#headerTopWrap > .topWrap > .callWrap > .callInput > .keypad { width: 160px; padding: 15px; }
	
	#headerTopWrap > .topWrap > .callWrap > .btnList01 > li { min-width: 50px; }
	#headerTopWrap > .topWrap > .callWrap > .btnList01 > li > i { margin: 0; }
	#headerTopWrap > .topWrap > .callWrap > .btnList01 > li > span { display: none; }
	
	#headerTopWrap > .topWrap > .callWrap > .btnList02 > li { min-width: 50px; }
	#headerTopWrap > .topWrap > .callWrap > .btnList02 > li > i { margin: 0; }
	#headerTopWrap > .topWrap > .callWrap > .btnList02 > li > span { display: none; }
}