html, body {height:100%;}
body {background:#eff1f2;}

#wrap {width:100%; position:relative; margin:0 auto; height:100%; min-width:126rem;}
#wrap::before {content:''; display:block; overflow:hidden;}
.bg-overlay {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:999;}
.skip-nav {font-size:0; overflow:hidden;}
.skip-nav > a {position:absolute; display:block; width:100%; left:0; top:-10rem; padding:1rem; background:#02ade6; font-size:1.6rem; color:#fff; text-align:center; z-index:101; box-sizing:border-box;}
.skip-nav > a:focus {top:0;}




/* -------------------------------- header -------------------------------- */
.header {position:fixed; top:0; left:0; width:100%; z-index:100; min-width:126rem;}
.header .top-bar {display:flex; justify-content:space-between; align-items:center; background:#fff; box-shadow:0 0 1rem rgba(0,0,0,.07); height:6rem; padding-right:3rem;}
.header .top-bar .logo-area {flex:0 0 auto; width:24rem; height:100%; background:#1c2130; display:flex; align-items:center; justify-content:center;}
.header .top-bar .logo-area .main-title {font-size:2rem; color:#fff; font-weight:400;}
.header .top-bar .logo-area .main-title strong {font-weight:900;}
.header .top-bar .top-util {height:100%; display:flex; justify-content:space-between; align-items:center;}
.header .top-bar .top-util > * {padding:0 1rem;}
.header .top-bar .top-util .last-access {color:#999;}
.header .top-bar .top-util .user-area .user-name {color:#999; height:100%;}
.header .top-bar .top-util .user-area .user-name i {color:#ccc; vertical-align:middle;}
.header .top-bar .top-util .user-area .user-name strong {margin-left:0.58rem; color:#000;}
.header .top-bar .top-util .user-area .user-name span {font-size:1.2rem;}
.header .top-bar .top-util .btn-logout i {color:#f1556c;}
.header .top-bar .top-util .btn-logout i {color:#f1556c;}

.side-bar {position:fixed; top:6rem; width:24rem; bottom:0; background:#2a3042; z-index:99;}
.side-bar .side-bar-content {position:relative; height:100%;}
.side-bar .gnb {padding-top:1rem;}
.side-bar .gnb a {display:block; color:#bdc3d2; transition:all .2s;}
.side-bar .gnb a.arrow:after {font-family:xeicon; content:'\e942'; display:block; float:right; transition:transform .3s,-webkit-transform .3s; transform:rotate(0); font-weight:400;}
.side-bar .gnb a.plus:after {font-family:xeicon; content:'\e914'; display:block; float:right; transition:transform .3s,-webkit-transform .3s; font-weight:400;}
.side-bar .gnb a:hover, .side-bar .gnb a:focus {color:#fff; font-weight:700;}
.side-bar .gnb .main-menu ul {display:none;}

.side-bar .gnb .main-menu > li + li {border-top:#798096 0.1rem solid;}
.side-bar .gnb .main-menu > li > a {padding:1rem 2rem; position:relative;}
.side-bar .gnb .main-menu > li > a .menu-text { font-weight:700;}
.side-bar .gnb .main-menu > li > a i {width:2rem;}

.side-bar .gnb .sub-menu > li {margin-left:3.5rem;}
.side-bar .gnb .sub-menu > li + li {border-top:#585f73 0.1rem solid;}
.side-bar .gnb .sub-menu > li > a {padding:0.7rem 2rem 0.7rem 0.5rem; font-size:1.3rem;}

.side-bar .gnb .depth3-menu {background:#181d2b; padding:0.5rem 0;}
.side-bar .gnb .depth3-menu > li {position:relative;}
.side-bar .gnb .depth3-menu > li:before {position:absolute; top:1rem; left:1rem; display:block; content:''; width:0.3rem; height:0.3rem; background:#bdc3d2; border-radius:50%;}
.side-bar .gnb .depth3-menu > li > a {font-size:1.2rem; padding:0.4rem 2rem 0.4rem 2rem;}

.side-bar .gnb .depth4-menu > li {position:relative;}
.side-bar .gnb .depth4-menu > li:before {position:absolute; top:1rem; left:2rem; display:block; content:''; width:0.4rem; border-top:#bdc3d2 0.1rem solid;}
.side-bar .gnb .depth4-menu > li > a {font-size:1.2rem; padding:0.2rem 1rem 0.2rem 3rem;}

/* gnb - active */
.side-bar .gnb li.active > a,
.side-bar .gnb li.open > a {color:#fff; font-weight:700;}
.side-bar .gnb li.active > a.arrow:after,
.side-bar .gnb li.open > a.arrow:after {transform:rotate(-180deg);}
.side-bar .gnb li.active > a.plus:after,
.side-bar .gnb li.open > a.plus:after {content:'\e91b';}
.side-bar .gnb [class$=-menu] > li.active > ul {display:block;}



/* -------------------------------- container -------------------------------- */
.header + .container {margin-left:24rem;}
.container {margin-top:6rem; padding:2rem;}
.container .container-header {display:flex; justify-content:space-between; margin-bottom:1.5rem; align-items:center;}
.container .container-header .title-area .menu-title {font-size:1.8rem; font-weight:900; color:#000; margin-bottom:0;}

.contents-area .title-area .section-title {margin-bottom:1rem; position:relative; padding-left:1.8rem;}
.contents-area .title-area .section-title:before{font-family:xeicon; content:'\e93f'; position:absolute; top:-0.1rem; left:0; color:#666;}
.content-wrap {background:#fff; border-radius:0.5rem; box-shadow:0 0.2rem 0.3rem rgba(0,0,0,.07); margin-bottom:2rem;}
.content-wrap .title-area {flex:1 0 auto;}
.content-wrap .title-area .content-title {color:#000; margin-bottom:0;}
.content-wrap .content-header {display:flex; justify-content:space-between; align-items:center; padding:0.8rem 1.5rem; background: linear-gradient(to bottom, #fff 0%, #f7f8f9 100%); border-radius:0.5rem 0.5rem 0 0;}
.content-wrap .content-header .content-title {color:#000; font-weight:700; margin:0;}
.content-wrap .content-header + .content-body {border-top:#eff1f2 0.1rem solid;}
.content-wrap .content-header .btn-area {flex:1 0 auto;}
.content-wrap .content-body {padding:1.5rem 1.5rem;}
.content-wrap .content-footer {border-top:#e1e5ec 0.1rem solid; padding:1.5rem 1.5rem; display:flex; justify-content:space-between; align-items:center; min-height:6.9rem; background: linear-gradient(to bottom, #fff 0%, #f7f8f9 100%); border-radius:0 0 0.5rem 0.5rem; position:relative;}
.content-wrap .content-footer .btn-area {flex:1 0 auto;}
.content-wrap .content-footer .paging {flex:1 0 auto;}
.content-wrap .content-footer .paging + .btn-area {position:absolute; top:1.5rem; left:0; width:100%; display:block;}
.content-wrap .content-footer .paging + .btn-area .btn-left {position:absolute; top:0; left:1.5rem;}
.content-wrap .content-footer .paging + .btn-area .btn-right {position:absolute; top:0; right:1.5rem;}

.content-wrap.bg-transparent {background:transparent; box-shadow:none; border-radius:0;}
.content-wrap.bg-transparent .content-body {padding:0;}

.content-wrap.height-100 {height:calc(100% - 2rem);}
.content-wrap.height-100 .content-body {height:calc(100% - 4rem);}
 



/* -------------------------------- footer -------------------------------- */
.footer {padding:0 2rem 1rem;}
.footer .copyright {color:#999; text-align:right;}





 



/* -------------------------------- login -------------------------------- */
.pg-type-login {min-height:55rem; padding:4rem 0;}
.pg-type-login .container {margin:0;}
.pg-type-login .footer {position:absolute; width:100%; bottom:0; left:0;}
.pg-type-login .footer .copyright {text-align:center;}
.login-wrap {max-width:50rem; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.login-wrap .content-header {padding:3rem;}
.login-wrap .content-header .title-area {text-align:center;}
.login-wrap .content-header .title-area .logo {width:60%;}
.login-wrap .content-header .title-area .content-title {font-size:medium; text-transform:uppercase;}




/* ---------------------------------------- modal popup ---------------------------------------- */
.modal {position:fixed; left:0; top:0; width:100%; height:100%; text-align:center; z-index:999;}
.modal .modal-wrap {position:relative; width:100%; height:100%; padding:2rem; box-sizing:border-box; overflow-y:auto;}
.modal .modal-wrap:after {content:''; display:inline-block; height:100%; vertical-align:middle;}
.modal .modal-container {position:relative; display:inline-block; vertical-align:middle; margin:0 auto; text-align:left; z-index:1000; min-width:32rem; max-width:90%;}
.modal .modal-container .btn-close {position:absolute; top:0; right:0; font-size:1.6rem; z-index:1; color:#666; height:5.1rem; width:5.1rem;}
.modal .modal-container .contents-area {box-shadow:0 0.5rem 1rem rgba(0,0,0,.2);}
.modal .modal-container .modal-xsm {width:40rem;}
.modal .modal-container .modal-sm {width:56rem;}
.modal .modal-container .modal-md {width:72rem;}
.modal .modal-container .modal-lg {width:90rem;}
.modal .modal-container .modal-xlg {width:108rem;}
.modal .content-wrap {max-width:100%; margin-bottom:0;}
.modal .content-wrap .content-header {background:#eff2f7; padding:1.5rem 6.5rem 1.5rem 1.5rem;}
.modal .content-wrap .content-header + .content-body {border-top-color:#e1e5ec;}
.img-modal .modal-container {min-width:0;}
.img-modal .modal-container .btn-close {right:auto; left:100%; background:rgba(0,0,0,.7); color:#fff; font-size:2rem;}
.img-modal .modal-container .expanded-img-area {background:#fff;}
.img-modal .modal-container .expanded-img-area img {max-height:80vh;}
 




/* -------------------------------- common contents -------------------------------- */

/* breadcrumb */
.ol-breadcrumb {list-style:none; padding-left:0; display:flex; font-size:1.2rem; color:#999;}
.ol-breadcrumb > li + li {margin-left:0.5rem;}
.ol-breadcrumb > li + li:before {font-family:xeicon; content:'\e93f'; float:left; margin-right:0.5rem;}


/* dropdown */
.dropdown-menu {position:relative;}
.dropdown-menu .dropdown-toggle {padding:1rem 3rem 1rem 1rem;}
.dropdown-menu .dropdown-toggle:after {font-family:xeicon; content:'\e942'; float:right; display:block; transform:translateY(-50%) rotate(0); transition:transform .3s,-webkit-transform .3s; margin-left:1rem; position:absolute; top:50%; right:1rem;}
.dropdown-menu .menu {display:none; position:absolute; top:100%; background:#fff; min-width:16rem; max-width:100%; right:0; border-radius:0.5rem; box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.1); margin-top:0.1rem;}
.dropdown-menu .menu .separate {border-top:#eff1f2 0.1rem solid;}
.dropdown-menu .menu .link {display:block; padding:0.7rem 1rem; width:100%;}
.dropdown-menu .menu .link:hover {background:#f7f8f9; border-radius:0.3rem;}
.dropdown-menu .menu .link i {width:2rem; text-align:left; color:#999;}
.dropdown-menu .menu .btn-logout {padding:1rem; text-align:left;}
.dropdown-menu.active .dropdown-toggle:after {transform:translateY(-50%) rotate(-180deg);}


/* toggle content */
.toggle-box.close {overflow:hidden;}


/* expanded img */
.img-expand {position:relative; display:inline-block;}
.img-expand:hover:before,
.img-expand:focus:before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.4);}
.img-expand:hover:after,
.img-expand:focus:after {content:'\e97b'; font-family:xeicon; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff; font-size:2.4rem;}
.expanded-img-area img {display:block;}

 




/* -------------------------------- form -------------------------------- */
.label-margin {margin-top:2.4rem;}

.article-count {margin-bottom:0;}
.form-note1 {font-size:1.2rem; margin-top:0.5rem; color:#999; display:inline-block;}
.icon-attachment {transform:rotate(-90deg);}
.data-order {}
.data-order button {color:#aaa; font-size:1.2rem;}
.data-order button:hover, .data-order button:active, .data-order button:focus {color:#f1556c;}

.search-area .row + .row {margin-top:1rem;}




/* -------------------------------- contents -------------------------------- */


/* error */
.error-content {text-align:center; width:90%; max-width:64rem; margin:0 auto;}
.error-content .icon i {font-size:9.6rem; color:#4fc6e1;}
.error-content .title-area .content-title {font-size:2.4rem; color:#4fc6e1;}
.error-content .btn-area {margin-top:5rem; padding-top:5rem; border-top:#ddd 0.1rem solid;}


/* stat */
.stat-area .stat-box {text-align:center;}
.stat-area .stat-box > * {margin-top:0; margin-bottom:0;}
.stat-area .stat-box > * + * {margin-top:1rem;}
.stat-area .stat-title {font-size:1.8rem; color:#666;}
.stat-area .stat-value {font-size:4rem; color:#000; font-weight:700; letter-spacing:-0.4rem; word-break:break-all; line-height:1;}
.stat-area .stat-sm .stat-title {font-size:1.4rem;}
.stat-area .stat-sm .stat-value {font-size:1.8rem; font-weight:600; letter-spacing:normal;}


/* dashboard */
.dashboard-wrap {min-width:144rem;}
.dashboard-wrap .search-area {border:#e0e0e0 0.1rem solid; background:#fff;}
.dashboard-wrap .search-area ul > li {display:flex; align-items:center;}
.dashboard-wrap .search-area ul > li + li {border-top:#e0e0e0 0.1rem solid;}
.dashboard-wrap .search-area ul > li > div {padding:0.5rem 1rem;}
.dashboard-wrap .search-area ul > li > .label-area {flex-grow:0;}
.dashboard-wrap .search-area ul > li select {width:auto;}
.dashboard-wrap .search-area .btn-area {margin-bottom:0; border-top:#e0e0e0 0.1rem solid; padding:1rem 0;}

.analysis-area .tab-body {background:#fff; padding:4rem 3rem;}
.chart-area + .chart-area {margin-top:4rem;}
.chart-area .title-text {color:#000; font-size:2.2rem; text-align:center; margin-bottom:2rem;}
.chart-area .chart-box {display:flex; justify-content:center; align-items:center;}
.chart-area .chart-box img {max-width:none;}
.chart-area .chart-age {width:68rem; min-height:36rem;}
.chart-area .chart-day {width:65.6rem;}
.chart-area .chart-day .stat-box {padding-top:1.5rem; padding-bottom:1.5rem;}
.chart-area .chart-day .active {background:#ff7e0f;}
.chart-area .chart-day .active .stat-title,
.chart-area .chart-day .active .stat-value {color:#fff;}
.chart-area .chart-time {width:65.6rem; min-height:19rem;}
.chart-area .chart-sex {width:32rem; min-height:36rem;}
.chart-area .chart-season {width:32rem; min-height:36rem;}
.chart-area .chart-think {width:68rem; min-height:36rem;}
.chart-area .chart-brightness-detail {width:68rem; min-height:36rem;}
.chart-area .chart-tone-detail {width:68rem; min-height:36rem;}

.chart-area .chart-ranking {width:100%; padding-bottom:1rem; background:#f5f5f5;}

.tbl_inner_img {position:relative; width:100%; height:80px; overflow:hidden;}
.tbl_inner_img > div {position:absolute; left:50%; top:0; width:300px; height:100%; margin-left:-250px;}
.tbl_inner_img img {display:block; height:100%; margin:0 auto;}