@charset "utf-8"; #wrapper {width:100%; /*min-width:1920px;*/ /*display:flex; flex-direction:column;*/ /*min-height:100vh;*//*height:100%;*/} #headerWrap {background:#fff; /*background:#fff url(../../images/layout/headerbg.jpg) repeat-x;*/ width:100%; /*z-index:998;*/ border-top:3px solid #bf141a; border-bottom:1px solid #cdcdcd; } #header {/*position:relative;*/ width:1920px; height:52px; margin:0 auto;/*margin:0 auto;*//*min-width:100%;*/ display:flex; align-items:center; justify-content:space-between; padding:0 30px; min-width:1920px;} #header h1 {width:180px;/*float:left;*/ /*padding:11px 0 0 20px;*/} #header .welcome {width:180px; position:relative; font-size:12px;} #header .welcome > p {text-align:right; padding-right:16px; cursor:pointer; background:#fff url(../../images/layout/btn_more.png) no-repeat right center;} #header .welcome > p span {color:#337ab7;} #header .welcome > div {display:none; position:absolute; z-index:10; background:#fff; border:1px solid #cdcdcd; border-radius:4px; top:28px; right:0; width:226px;} #header .welcome > div > p {padding:8px 20px; border-bottom:1px solid #cdcdcd; color:#666;} #header .welcome > div > ul {padding:4px 0;} #header .welcome > div > ul a {padding:4px 20px; display:block;} /* gnb */ #gnbWrap {/*position:absolute; top:21px; left:240px;*/ } #gnbWrap #gnb {} #gnbWrap #gnb > li {float:left; padding:0 10px;} #gnbWrap #gnb > li:first-child {margin-left:0;} #gnbWrap #gnb > li > span {display:block; } #gnbWrap #gnb > li > span > a {font-size:16px; width:120px; text-align:center; font-weight:bold; color:#333333; line-height:52px; letter-spacing:-0.015em; *letter-spacing:-0.08em; text-decoration:none;} #gnbWrap #gnb > li.on > span { /*height:55px;*/} #gnbWrap #gnb > li.on > span > a {color:#bf1419;} #gnb li a:hover {color:#bf1419;} /* gnb 2depth */ .depth2Wrap {display:none; position:absolute; top:55px; width:140px; padding-top:0; z-index:998;} .depth2Wrap .menuWrap {/*padding:3px 0 0; margin-left:-16px; height:35px; background:transparent;*/margin-left:-10px;} li.on .depth2Wrap { display:block; } .depth2Wrap .menuWrap .depth2 {background:#fff; border:2px solid #d3222a; padding:10px 0} .depth2Wrap .menuWrap .depth2:first-child {} .depth2Wrap .menuWrap .depth2 > li {/*float:left;*/padding:0 8px;} .depth2Wrap .menuWrap .depth2 > li:first-child {} .depth2Wrap .menuWrap .depth2 > li > a {font-size:14px; font-weight:bold; color:#333; line-height:16px; text-decoration:none; padding-left:9px;} .depth2Wrap.sub02 {} .depth2Wrap.sub03 {} .depth2Wrap.sub04 {} /* #mainContainer {position:relative; min-width:1200px; background:#f8f7f5 url(../../images/main/bg_container.gif) no-repeat center 0; z-index:1;} #mainContents {width:1200px; height:1196px; margin:0 auto;} */ #container {position:relative; background:#f7f7f7; z-index:1; /*padding:0 30px;*/ margin:0 auto; /*flex:1;*/width:1920px; } #container > .titleWrap {display:flex; align-items:center; justify-content:space-between; padding:10px 30px; height:60px;} #container > .titleWrap h2 {line-height:40px; font-size:20px; font-weight:bold;} #container > .titleWrap .selectWrap {height:40px;} #contentsWrap {/*overflow:hidden;*/ width:1920px; margin:auto;padding:0 30px; display:flex; height:calc(100vh - 141px); padding-bottom:20px;} /*float:left; width:350px; padding:25px 0 80px; margin:0 20px; */ #container > .titleWrap .btnWrap.player {} #container > .titleWrap .btnWrap.player a {width:100px;} #container > .titleWrap .btnWrap.player a + a {margin-left:10px;} #container > .titleWrap .btnWrap.player a:hover {border-color:#5bc0de; background-color:#5bc0de; color:#fff;} #contentsWrap .searchContainer {background:#fff; /*float:left; */flex-basis:310px; flex-shrink:0; margin-right:20px; padding:20px 0; border:1px solid #eaeaea;} #contentsWrap .searchContainer ul {padding:0 20px;} #contentsWrap .searchContainer ul li {margin-bottom:20px;} #contentsWrap .searchContainer ul li > p {font-size:12px; font-weight:bold;margin-bottom:4px;} #contentsWrap .searchContainer ul li .inputTxt {margin-bottom:7px;} #contentsWrap .searchContainer label {margin-bottom:4px;} #contentsWrap .searchContainer .btnWrap {border-top:1px solid #eaeaea; padding:30px 20px;} #contentsWrap .searchContainer .datepickerBox {} #contentsWrap .searchContainer .datepickerBox + .datepickerBox {margin-top:8px;} #contentsWrap .searchContainer .datepickerBox label {text-align:right; width:30px; margin-right:10px; display:inline-block; font-weight:normal; line-height:40px; margin-bottom:0;} #contentsWrap .searchContainer .datepickerBox .inputTxt {width:223px;} #contentsWrap .detailContainer {background:#fff; flex-basis:602px; margin-left:20px; border:1px solid #eaeaea; overflow-y:auto;} #contentsWrap .detailContainer .videoview {height:335px; padding:20px 20px 0; position:relative;} /* #contentsWrap .detailContainer .videoview_small {height:335px; padding:20px 40px 0; position:relative;} */ #contentsWrap .detailContainer .videoview_small {height:335px; padding:10px 40px 0; position:relative;} #contentsWrap .detailContainer .videoview #player {width:100%; height:100%;background-color: #000000;} #contentsWrap .detailContainer .videoview #player_small {width:100%; height:100%!important;} .detailWrap dl {display:flex; flex-wrap:wrap; padding:20px 20px 0;} .detailWrap dl dt {width:70px; font-size:12px; font-weight:bold; line-height:40px;margin-bottom:12px;} .detailWrap dl dt.ml20 {margin-left:20px;} .detailWrap dl dd {height:40px; margin-bottom:12px; width:calc((100% - 160px) /2);} .detailWrap dl dd p {line-height: 38px; height: 40px; width:100%; padding: 0 10px; border: 1px solid #dbdbdb; margin-bottom:7px;} .detailWrap dl .inputTxt {width:100%; margin-bottom:7px;} .detailWrap dl .DivSelectyze, #contentsWrap .detailContainer dl .selectyzeValue {width:100%;} .detailWrap dl dd.full {width:calc(100% - 70px);} .detailWrap dl dd label {display:inline-block; line-height:40px; font-size:14px; font-weight:normal;} .detailWrap dl dd input[type="radio"] {margin-top:14px;} .detailWrap dl dd input[type="radio"] + label {margin-left:4px;} .detailWrap dl dd label + input[type="radio"] {margin-left:10px;} /* 영상검색 테이블만 */ .detailWrap_hits dl {display:flex; flex-wrap:wrap; padding:20px 20px 0;} .detailWrap_hits dl dt {width:70px; font-size:12px; font-weight:bold; line-height:40px;margin-bottom:12px;} .detailWrap_hits dl dt.ml20 {margin-left:20px;} .detailWrap_hits dl dd {/*height:40px;*/ margin-bottom:5px; width:calc((100% - 160px) /2);} .detailWrap_hits dl dd p {line-height: 38px; height: 40px; width:100%; padding: 0 10px; border: 1px solid #dbdbdb; margin-bottom:7px;} .detailWrap_hits dl .inputTxt {width:100%; margin-bottom:7px;} .detailWrap_hits dl .DivSelectyze, #contentsWrap .detailContainer dl .selectyzeValue {width:100%;} .detailWrap_hits dl dd.full {width:calc(100% - 70px);} .detailWrap_hits dl dd label {display:inline-block; line-height:40px; font-size:14px; font-weight:normal;} .detailWrap_hits dl dd input[type="radio"] {margin-top:14px;} .detailWrap_hits dl dd input[type="radio"] + label {margin-left:4px;} .detailWrap_hits dl dd label + input[type="radio"] {margin-left:10px;} .detailWrap h3 {font-weight:bold; border-top:1px solid #eff2f7; padding:20px 20px 0;} .detailWrap.code dl dt {} .detailWrap.code dl dd + dt {margin-left:20px;} .detailContainer.camera {position:relative;} .detailContainer.camera > form {height:100%;} .detailContainer.camera > .btnWrap {/*margin-top:auto;*/ position:absolute; width:100%; bottom:0; left:0; padding:10px 20px;} .detailContainer.camera .detailWrap {display:flex; flex-direction:column; height:100%;} #contentsWrap .detailContainer.camera .videoview {padding-bottom:20px; height:355px; border-bottom:1px solid #eaeaea;} .detailContainer.camera .scrollWrap {overflow-y:scroll; flex:1; margin-bottom:61px; /*height:calc(100% - 335px)*/} .detailContainer.camera .vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:after {display:none;} .detailContainer.camera .vjs-loading-spinner {font-size:0;} /* .detailContainer.camera .scrollContainer .detailWrap {display:flex; flex-direction:column;height:100%;} .detailContainer.camera .scrollContainer .detailWrap .scrollWrap {overflow-y:auto; flex:1;} .detailContainer.camera .scrollContainer .detailWrap .videoview {margin-bottom:auto;}*/ .detailContainer.camera .detailWrap dl dt {width:80px;} .detailContainer.camera .detailWrap dl dd {width:calc((100% - 160px) /2);} .detailContainer.camera .detailWrap dl dd.full {width:calc(100% - 80px);} .detailContainer.camera .detailWrap dl dt.ml20 {width:60px;} .detailContainer .btnWrap {border-top:1px solid #eaeaea; padding:13px 20px;} .detailContainer .btnWrap a {width:95px;} .detailContainer .btnWrap .btnWrap {padding:0; border:none; margin:0; justify-content: flex-end; flex:1;} .detailContainer .btnWrap a + a {margin-left:10px;} #contentsWrap .detailContainer#contents {/*padding:20px 0;*/ margin:0 auto;} #lnbWrap { /*float:left; width:350px; padding: 25px 0 80px; margin: 0 20px;*/ } #lnbWrap.video {/*float:left; width:112px; padding:25px 0 80px; margin-right:20px; margin-left:0px */} #lnbWrap .quickWrap {overflow:hidden;} #lnbWrap .quickWrap a {float:left;} #lnbWrap .lnbWraph2 {height:162px; display:none;} #lnbWrap h2 {height:162px; vertical-align:center; padding-left:14px; font-size:26px; font-weight:bold; color:#ffffff; line-height:162px;} #lnbWrap h2.etcTitle {margin-bottom:40px; border-bottom:1px solid #808080;} #lnbWrap .lnb {border-bottom:1px solid #e5e5e5;} #lnbWrap .lnb > li {} #lnbWrap .lnb > li > a {display:block; height:38px; padding-left:17px; font-size:14px; color:#3e3e3e; line-height:38px; background:url(../../images/layout/bg_lnb_dotline.gif) repeat-x 0 100%;} #lnbWrap .lnb > li.last a {background:none;} #lnbWrap .lnb > li.on > a, #lnbWrap .lnb > li > a:hover {font-weight:bold; color:#fff; text-decoration:none; background:#006dba;} #lnbWrap .lnb > li > .depth3 {display:none; padding:17px 0 21px 28px; border-bottom:1px solid #d9d9d9;} #lnbWrap .lnb > li > .depth3 > ul {} #lnbWrap .lnb > li > .depth3 > ul > li {margin-top:12px;} #lnbWrap .lnb > li > .depth3 > ul > li:first-child {margin-top:0;} #lnbWrap .lnb > li > .depth3 > ul > li > a {display:block; padding-left:12px; font-size:13px; text-decoration:none; background:url(../../images/layout/bul_depth3_off.gif) no-repeat 0 6px;} #lnbWrap .lnb > li > .depth3 > ul > li.on > a, #lnbWrap .lnb > li > .depth3 > ul > li > a:hover {font-weight:bold; color:#006dba; background:url(../../images/layout/bul_depth3_on.gif) no-repeat 0 4px;} #lnbWrap .lnb > li.on > .depth3 {display:block;} #lnbWrapT { /*float:left; width:310px;*/ /*padding:25px 0 80px;*//* margin:0 20px;*/} #lnbWrapT.video {float:left; width:112px; padding:25px 0 80px; margin-right:20px; margin-left:0px } #lnbWrapT .quickWrap {overflow:hidden;} #lnbWrapT .quickWrap a {float:left;} #lnbWrapT .lnbWraph2 {height:162px; display:none;} #lnbWrapT h2 {height:162px; vertical-align:center; padding-left:14px; font-size:26px; font-weight:bold; color:#ffffff; line-height:162px;} #lnbWrapT h2.etcTitle {margin-bottom:40px; border-bottom:1px solid #808080;} #lnbWrapT .lnb {border-bottom:1px solid #e5e5e5;} #lnbWrapT .lnb > li {} #lnbWrapT .lnb > li > a {display:block; height:38px; padding-left:17px; font-size:14px; color:#3e3e3e; line-height:38px; background:url(../../images/layout/bg_lnb_dotline.gif) repeat-x 0 100%;} #lnbWrapT .lnb > li.last a {background:none;} #lnbWrapT .lnb > li.on > a, #lnbWrap .lnb > li > a:hover {font-weight:bold; color:#fff; text-decoration:none; background:#006dba;} #lnbWrapT .lnb > li > .depth3 {display:none; padding:17px 0 21px 28px; border-bottom:1px solid #d9d9d9;} #lnbWrapT .lnb > li > .depth3 > ul {} #lnbWrapT .lnb > li > .depth3 > ul > li {margin-top:12px;} #lnbWrapT .lnb > li > .depth3 > ul > li:first-child {margin-top:0;} #lnbWrapT .lnb > li > .depth3 > ul > li > a {display:block; padding-left:12px; font-size:13px; text-decoration:none; background:url(../../images/layout/bul_depth3_off.gif) no-repeat 0 6px;} #lnbWrapT .lnb > li > .depth3 > ul > li.on > a, #lnbWrap .lnb > li > .depth3 > ul > li > a:hover {font-weight:bold; color:#006dba; background:url(../../images/layout/bul_depth3_on.gif) no-repeat 0 4px;} #lnbWrapT .lnb > li.on > .depth3 {display:block;} #contents {flex:1; flex-grow:1;/* min-width:908px;*//* float:left; */position:relative; /*width:1005px;*//* min-height:450px;*//* padding:25px 0 25px 0px;*/ line-height:1em; *line-height:1.05em; font-size:14px;background:#fff; border:1px solid #eaeaea; /*padding:20px; */} #contents.video{/*width:1265px;*/overflow-y:auto;} #contents.video.exvideo{/*width:100%;*/} #lnbWrap.video {background:#fff; border-right:1px solid #cdcdcd; position:absolute; top:0; width:1px; height:100%; z-index:2; display:flex; flex-direction:column; /*-moz-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; -webkit-transition: all 200ms ease-in;*/ } #lnbWrap.video.menuopen {border-left:1px solid #cdcdcd;} #contents.video {/*background:none;*/ border:none; /*margin-left:104px;*//*padding:10px;*/} #lnbWrap.video > p.toggle {position:absolute; border-radius:0 6px 6px 0; width:24px; height:36px; top:calc(50% - 18px); left:0; cursor:pointer; /*border:1px solid #ccc; */border-left:none; background:#337ab7;} #lnbWrap.video.menuopen > p.toggle {left:330px} #lnbWrap.video > p.toggle:before { content: ""; position: absolute; display: block; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:6px solid #fff; left: calc(50% - 3px); top: calc(50% - 6px); } #lnbWrap.video.menuopen > p.toggle:before { border-right:6px solid #fff; border-left:none; } /* #lnbWrap.video > p.toggle:before { content: ""; position: absolute; display: block; width: 20px; height: 2px; background: #333; left: calc(50% - 10px); top: calc(50% - 3px); -moz-transition: all 100ms ease-in; -ms-transition: all 100ms ease-in; -o-transition: all 100ms ease-in; -webkit-transition: all 100ms ease-in; } #lnbWrap.video > p.toggle:after { content: ""; position: absolute; display: block; width: 20px; height: 2px; background: #333; left: calc(50% - 10px); top: calc(50% + 3px); -moz-transition: all 100ms ease-in; -ms-transition: all 100ms ease-in; -o-transition: all 100ms ease-in; -webkit-transition: all 100ms ease-in; } */ /* #lnbWrap.video.menuopen > p.toggle:before,#lnbWrap.video.menuopen > p.toggle:after {top: 50%;} #lnbWrap.video.menuopen > p.toggle:before {transform: rotate(45deg);} #lnbWrap.video.menuopen > p.toggle:after {transform: rotate(-45deg);} */ #lnbWrap.video .btnContainer {display:none; border-bottom:1px solid #eaeaea;} #lnbWrap.video.menuopen .btnContainer {display:block; } #lnbWrap.video .btnWrap.player {display:flex; width:272px; margin:0 auto;padding:10px 0; } #lnbWrap.video .btnWrap.player .btn {width:auto; flex:1; font-weight:bold;} #lnbWrap.video .btnWrap.player .btn + .btn {margin-left:10px;} #lnbWrap.video .btnWrap.player .btn.rec {color:#d50000; border-color:#d50000;} #lnbWrap.video .btnWrap.player .btn.stop {color:#00297c; border-color:#00297c;} #lnbWrap.video .btnWrap.player .btn.back {} #lnbWrap.video .btnWrap.player .btn.live {color:#05d500; border-color:#05d500;} #lnbWrap.video.menuopen {width:332px; } #lnbWrap.video .selectWrap {display:none;/*position:absolute; top:6px; right:0; */border-bottom:1px solid #eaeaea; padding: 10px 0 3px;/*width: calc(100% - 74px);*/text-align:center;} #lnbWrap.video .selectWrap .selectyzeValue{width:272px;} #lnbWrap.video .selectWrap .UlSelectize{width:272px} #lnbWrap.video.menuopen .selectWrap {display:block; } #lnbWrap.video .canvasBtnWrap {margin-top:auto;} #lnbWrap.video .canvasBtnWrap {} #lnbWrap.video .canvasBtnWrap > div {border-top:1px solid #eaeaea;border-bottom:1px solid #eaeaea;line-height:52px;text-align:center; font-size:12px;} #lnbWrap.video .canvasBtnWrap button {width:100%; text-align:center; /*height:74px;*/ line-height:52px; font-size:10px;} #lnbWrap.video .canvasBtnWrap button + button {border-top:1px solid #eaeaea;} #lnbWrap.video.menuopen .canvasBtnWrap {display:flex; flex-wrap:wrap;} #lnbWrap.video.menuopen .canvasBtnWrap div {flex:1; flex-basis:100%;} #lnbWrap.video.menuopen .canvasBtnWrap button {flex-basis:44px; border-top:none;} #lnbWrap.video.menuopen .canvasBtnWrap button + button {border-left:1px solid #eaeaea;} #contents h3 {display:none; margin-bottom:35px; font-weight:bold; font-size:40px; color:#3e3e3e; line-height:40px;} #footerWrap {margin-top:auto; height:24px; /*display:none; */width:100%; background:#eff2f7; border-top:1px solid #ddd;} #footer {position:relative; text-align:right; width:1920px; margin:0 auto; padding:0 30px;} #footer .copyright {font-size:10px; color:#535353; line-height:24px;} button.fullScreen {position:fixed; z-index: 1; right:60px; bottom:44px; width:80px; height:80px; border-radius:50%; /*border:1px solid #5bc0de;*/ background:rgba(91,192,222,.4) url(../../images/common/btn_fullscreen.png) no-repeat 50% 50%;} button.fullScreen:hover {background-color:#5bc0de} a.addMedia {position:fixed; z-index: 1; right:160px; bottom:44px; width:80px; height:80px; border-radius:50%; font-size:0;background:rgba(211,34,42,.4) url(../../images/common/btn_addmedia.png) no-repeat 50% 50%;} a.addMedia:hover {background-color:#d3222a;} /* select */ .DivSelectyze {position:relative; display:inline-block; *display:inline; height:40px;} .selectyzeValue {font-size:12px; height:40px; position:relative; z-index:10; display:inline-block; width:268px; line-height:38px; padding-left:10px; /*color:#3e3e3e !important; */text-align:left; text-decoration:none !important; background:#fff url(../../images/layout/input_select.png) no-repeat right center; background-position:top 50% right 14px; border:1px solid #dbdbdb; /*border-top:solid 3px #bf1419;*/ } .UlSelectize {display:none; position:absolute; top:39px; left:0; z-index:999999; color:#666; border:1px solid #dbdbdb; background:#fff; width:268px; padding:0 !important;} .UlSelectize li {margin:0 !important; } .UlSelectize li a {display:block; height:30px; padding-left:20px; color:#666; line-height:30px; text-align:left; text-decoration:none !important; font-size:12px; } .UlSelectize li a, .selectyzeValue {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .UlSelectize li a:hover {color:#fff; background:#c9c9c9;} /* select2 */ .ex .DivSelectyze {position:relative; display:inline-block; *display:inline;} .ex .selectyzeValue {font-size:14px; font-weight:bold; height:40px; position:relative; z-index:10; display:inline-block; width:270px; line-height:38px; padding-left:20px; color:#3e3e3e !important; text-align:left; text-decoration:none !important; background: url(../../images/common/bul_arrow.gif) no-repeat 95% 50%; border:1px solid #dbdbdb; } .ex .UlSelectize {display:none; position:absolute; top:40px; left:0; z-index:999999; color:#666; border:1px solid #bdbdbd; border-top:1px solid #d7d6d4; background:#fff; width:270px} .ex .UlSelectize li {margin-top:0 !important; } .ex .UlSelectize li a {display:block; height:30px; padding-left:15px; color:#666; line-height:30px; text-align:left; text-decoration:none !important; font-size:15px; } .ex .UlSelectize li a, .selectyzeValue {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .ex .UlSelectize li a:hover {color:#fff; background:#c9c9c9;} /*���� select*/ /*.video .selectyzeValue{width:112px; padding-left:10px} .video .UlSelectize{width:112px}*/ .fL{float:left} .fR{float:right} /* dashboard */ #container.dashboard {} #container.dashboard .titleWrap {} #container.dashboard .titleWrap dl {line-height:12px;} #container.dashboard .titleWrap dl dt {display:inline-block; font-size:12px;} #container.dashboard .titleWrap dl dd {display:inline-block; color:#333; font-weight:bold; } #container.dashboard .titleWrap dl dd + dt {margin-left:8px; padding-left:12px; border-left:2px solid #ccc;} #container.dashboard #contents {background:none; border:none; display:flex; flex-direction:column;} #container.dashboard .tableContainer {/*padding:20px;*/background: #fff; border: 1px solid #eaeaea; margin-bottom:10px;} #container.dashboard .tableContainer select {width:130px; margin:10px;} #container.dashboard .tableContainer table {width:100%; border-top: 1px solid #eaeaea;} #container.dashboard .tableContainer table th, #container.dashboard .tableContainer table td {text-align:center; line-height:40px; font-size:12px;} #container.dashboard .tableContainer table th {background: rgba(0,0,0,.02); border-bottom: 1px solid rgba(0,0,0,.05);} #container.dashboard .chartContainer {flex:1; display:flex;} #container.dashboard .chartContainer > div {} #container.dashboard .chartContainer .summary {width:300px;} #container.dashboard .chartContainer .summary > dl {font-size:12px; padding:10px 20px; line-height:40px; background: #fff; border: 1px solid #eaeaea;} #container.dashboard .chartContainer .summary > dl:first-of-type {display:flex; border-bottom:none; display:flex; justify-content:space-between;} #container.dashboard .chartContainer .summary > dl:first-of-type dt {} #container.dashboard .chartContainer .summary > dl > dt {font-weight:bold;} #container.dashboard .chartContainer .summary > dl dl {padding-left:12px; overflow:hidden;} #container.dashboard .chartContainer .summary > dl dl dt {float:left; clear:both;} #container.dashboard .chartContainer .summary > dl dl dd {float:right;} #container.dashboard .chartContainer > div[class*="chart"] {display:flex; flex-direction:column; margin-left:10px;background: #fff; border: 1px solid #eaeaea;} #container.dashboard .chartContainer > div[class*="chart"] .title {padding:10px 20px;border-bottom: 1px solid #eaeaea; display:flex; justify-content:space-between; line-height:40px;} #container.dashboard .chartContainer > div[class*="chart"] .title h4 {font-weight:bold; line-height:40px;} #container.dashboard .chartContainer > div[class*="chart"] .title span {font-size:12px;} #container.dashboard .chartContainer > div[class*="chart"] .chartBox {flex:1;} #container.dashboard .chartContainer .chart01 {flex:1;} #container.dashboard .chartContainer .chart01 .chartBox { background:url(../../images/contents/sample01.png) no-repeat 50% 50%; background-size:contain;} #container.dashboard .chartContainer .chart02 {width:603px;} #container.dashboard .chartContainer .chart02 .chartBox { background:url(../../images/contents/sample02.png) no-repeat 50% 50%; background-size:contain;} #container.dashboard .chartContainer .listBox {flex:1;background: #fff; border: 1px solid #eaeaea;} /* paginate */ .paginate {margin-top: 50px;} .paginate {display:flex; align-items:center; justify-content:center;} .paginate a {line-height:40px; font-size:16px; padding:0 10px;} .paginate a.btn {padding:0; margin:0 10px; border:none; width:16px; height:16px; background:url(../../images/common/btn_paginate.png) no-repeat 0% 0%;} .paginate a.btn.none {opacity:0.5; cursor:default;} .paginate a.btn.first {background-position:0 0;} .paginate a.btn.pre {background-position:-16px 0;} .paginate a.btn.next {background-position:-32px 0;} .paginate a.btn.last {background-position:-48px 0;} .paginate a:not(.none).btn.first:hover {background-position:0 -16px;} .paginate a:not(.none).btn.pre:hover {background-position:-16px -16px;} .paginate a:not(.none).btn.next:hover {background-position:-32px -16px;} .paginate a:not(.none).btn.last:hover {background-position:-48px -16px;} .paginate a strong {color:#337ab7; font-weight:bold;} .paginate a:hover {color:#337ab7;} /* new - popup */ body .ui-widget.ui-widget-content {padding:0; border:none;} body .ui-widget-header {border-radius:0; border:none; border-bottom: 3px solid #d9534f; background: none; font-size:16px; color:#666;} body .ui-dialog.ui-draggable .ui-widget-header {border-color:#5bc0de} body .ui-dialog .ui-dialog-title {padding:6px 0;} body .ui-dialog-titlebar .ui-dialog-titlebar-close {right:20px; background:url(../../images/layout/btn_close.png) no-repeat 50% 50%; border:none;} body .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon {background:none;} body .ui-dialog .ui-dialog-content {margin:0; padding:20px; text-align:center;} body .ui-dialog.ui-draggable .ui-dialog-content {padding:0; max-height:calc(100vh - 240px) !important; overflow-y:auto;} body .ui-dialog .ui-dialog-content table { width: 100%; background: #fff; border: 0; border-collapse: collapse; table-layout: fixed; } body .ui-dialog .ui-dialog-content table th { background:rgba(0,0,0,.02);line-height:40px; font-size:12px; font-weight:normal} body .ui-dialog .ui-dialog-content table th label, body .ui-dialog .ui-dialog-content table th > p {line-height:40px; font-size:12px; font-weight:normal} body .ui-dialog .ui-dialog-content table th, body .ui-dialog .ui-dialog-content table td {padding:10px 20px;} body .ui-dialog .ui-dialog-content table td select, body .ui-dialog .ui-dialog-content table td .inputTxt {width:100%;} body .ui-dialog .ui-dialog-content table tr + tr {border-top:1px solid rgba(0,0,0,.05)} body .ui-dialog .ui-dialog-content table td input[type="checkbox"] {margin-top:13px;} body .ui-dialog .ui-dialog-content table + h3 {text-align:left; padding:16px 20px; font-size:14px; font-weight:bold; border-top: 1px solid #ddd; border-bottom: 1px solid #eee;} body .ui-dialog .ui-dialog-content table td.double input {width:211.5px} body .ui-dialog .ui-dialog-content table td.double input + input {margin-left:16px; width:calc(100% - 232.5px);} body .ui-dialog .ui-dialog-buttonpane {margin:0; padding:10px 20px; border:none; border-top:1px solid #ddd;} body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {float:none; display:flex; justify-content:center} body .ui-dialog.ui-draggable .ui-dialog-buttonpane .ui-dialog-buttonset {justify-content:space-between;} body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {margin:0;width: 120px; padding:0; height: 40px; line-height: 38px; text-align: center; border-radius: 4px; border: 1px solid #ccc; background: #fff; color: #666; font-size: 14px; font-weight: bold;} body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button + button {margin-left:20px; color: #fff; border-color: #d9534f; background-color: #d9534f;} body .ui-dialog.ui-draggable .ui-dialog-buttonpane .ui-dialog-buttonset button + button {border-color: #337ab7; background-color: #337ab7;} body .ui-state-error, body .ui-widget-content .ui-state-error {border:none; background:none;border-bottom: 3px solid #d9534f; color:#666;} /* popup */ .popupContainer {background:#fff} .popupContainer header {border-bottom: 3px solid #5bc0de; font-size:16px; color:#666; font-weight:bold;padding:14px 20px;} .popupContainer table {width:100%;} .popupContainer table th {background: rgba(0,0,0,.02);} .popupContainer table th, .popupContainer table td {padding:10px 20px;} .popupContainer table tr {border-bottom: 1px solid rgba(0,0,0,.05);} .popupContainer table th label {line-height: 40px; font-size: 12px;font-weight: normal;} .popupContainer table td input {width:100%;} .popupContainer table + p {padding:9px 20px; border-bottom: 1px solid #ddd;} .popupContainer table + p input {margin:6px 6px 0 0;} .popupContainer table + p label {display:inline-block; line-height:24px;} .popupContainer .infoContainer {padding:10px 20px;font-size:12px;} .popupContainer .infoContainer p {font-weight:bold;} .popupContainer .infoContainer ul {} .popupContainer .infoContainer ul li {line-height:24px; } .popupContainer .infoContainer ul li:before {content:""; display:inline-block; width:2px; height:2px; vertical-align:middle; background:#aaa; margin:-2px 4px 0 0;} .popupContainer .btnWrap {display:flex; justify-content:space-between; padding: 10px 20px; border-top: 1px solid #ddd;} .popupContainer .btnWrap a + a {border-color: #337ab7; background-color: #337ab7; color:#fff;} .loading {position:fixed; z-index:10000; width:100vw; height:100vh; top:0; left:0; background:rgba(0,0,0,.2);} .loading:before {content:""; position: absolute; left: calc(50% - 40px); top:calc(50% - 40px); z-index: 1; width: 80px; height: 80px; border: 16px solid rgba(0,0,0,.2); border-radius: 50%; border-top: 16px solid #5bc0de; -webkit-animation: spin 1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite; animation: spin 1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* calenadr */ body .ui-widget.ui-widget-content.ui-datepicker {background-color:#eef9fc; box-shadow: 0 0 7px 4px rgba(0,0,0,.2); padding:10px;} .ui-datepicker .ui-datepicker-header.ui-widget-header .ui-datepicker-prev,.ui-datepicker .ui-datepicker-header.ui-widget-header .ui-datepicker-next { width:16px; height:16px; background-image:url(../../images/common/btn_paginate.png); border:none ; top:17px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {display:none !important;} .ui-datepicker .ui-datepicker-prev {background-position:-16px 0;} .ui-datepicker .ui-datepicker-next {background-position:-32px 0;} .ui-datepicker .ui-datepicker-prev:hover {background-position:-16px -16px;} .ui-datepicker .ui-datepicker-next:hover {background-position:-32px -16px;} body .ui-datepicker .ui-datepicker-header {background-color:#fff; border-bottom:3px solid #5bc0de; padding:10px 0;} body .ui-datepicker table {margin:0; background-color:#fff;} body .ui-datepicker td {padding:0; border-top:1px solid #eaeaea;} body .ui-datepicker td + td {border-left:1px solid #eaeaea;} body .ui-datepicker td a {border:none !important; font-weight:normal !important; padding:6px !important;} body .ui-datepicker td a.ui-state-active {background-color:rgba(91,192,222,.1) ; color:#337ab7; font-weight:bold !important;} body .ui-datepicker td a.ui-state-highlight {background-color:rgba(211,34,42,.1); color:#d9534f}