/* 스마트폰 (가로 및 세로) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* 사용자 코드 */
}

/* 스마트폰 (가로 ) ----------- */
@media only screen and (min-width: 321px) {
    /* 사용자 코드 */
}

/* 스마트폰 (세로) ----------- */
@media only screen and (max-width: 320px) {
    /* 사용자 코드 */
}

/* 아이패드 (가로 및 세로) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* 사용자 코드 */
}

/* 아이패드 (가로) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* 사용자 코드 */
}

/* 아이패드 (세로) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* 사용자 코드 */
}

/* PC 및 노트북 ----------- */
@media only screen and (min-width: 1224px) {
    /* 사용자 코드 */
}

/* 대형 스크린 ----------- */
@media only screen and (min-width: 1824px) {
    /* 사용자 코드 */
}

/* 아이폰 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    /* 사용자 코드 */
}

/* 아이폰 5 & 5S 가로 및 세로 */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    /* 사용자 코드 */
}

/* 아이폰 5 & 5S 가로 ------ */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
    /* 사용자 코드 */
}

/* 아이폰 5 & 5S 세로 ------ */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
    /* 사용자 코드 */
}

/* 아이폰 6 세로 및 가로 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
    /* 사용자 코드 */
}

/* 아이폰 6 가로 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {
    /* 사용자 코드 */
}

/* 아이폰 6 세로 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {
    /* 사용자 코드 */
}

/* 아이폰 6 Plus 가로 및 세로 */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
    /* 사용자 코드 */
}

/* 아이폰 6 Plus 가로 */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) {
    /* 사용자 코드 */
}

/* 아이폰 6 Plus 세로 */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) {
    /* 사용자 코드 */
}

/* 아이패드 미니 가로 및 세로 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    /* 사용자 코드 */
}

/* 아이패드 미니 가로 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    /* 사용자 코드 */
}

/* 아이패드 미니 세로 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    /* 사용자 코드 */
}

@font-face {
    font-family: 'Noto Sans Korean';
    font-style: normal;
    font-weight: 350;
    src: local('Noto Sans DemiLight'), local('NotoSans-DemiLight'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-DemiLight-Hestia.eot),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-DemiLight-Hestia.eot?#iefix) format('embedded-opentype'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/woff/NotoSansKR-DemiLight-Hestia.woff) format('woff'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/otf/NotoSansKR-DemiLight-Hestia.otf) format('opentype');
}

/* scroll bar - Internet Explorer */
html {
    scrollbar-3dLight-Color: #efefef;
    scrollbar-arrow-color: #dfdfdf;
    scrollbar-base-color: #efefef;
    scrollbar-Face-Color: #dfdfdf;
    scrollbar-Track-Color: #efefef;
    scrollbar-DarkShadow-Color: #efefef;
    scrollbar-Highlight-Color: #efefef;
    scrollbar-Shadow-Color: #efefef
}

/* scroll bar - Webkit(Safari, Chrome) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border: 3px solid #fff;
}

::-webkit-scrollbar-track {
    background: #efefef;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .2)
}

::-webkit-scrollbar-thumb {
    height: 50px;
    width: 50px;
    background: rgba(0, 0, 0, .2);
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .1)
}

html, body {
    padding: 0;
    font: 14px "Malgun Gothic", "Lucida Grande", Helvetica, Arial, sans-serif;
    color: #666;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

iframe {
    background: transparent;
}

a:link {
    color:  #337ab7;
    text-decoration: none;
    font-size: 11px;
}
a:active{
    color:  white;
    text-decoration: none;
    font-size: 13px;
}
a:visited{
    color: #428bca;
    text-decoration: none;
    font-size: 11px;
}

a:hover {
    color: white;
    text-decoration: none;
}

.container {
    position: relative;
}

nav {
    /*position: absolute;*/
    left: 0px;
    width: 150px;
}

section {
    /* position is static by default */
    margin-left: 5px;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 30px;
    background-color: #3c3c3c;
    color: rgba(255, 255, 255, 0.4);
    width: 100%;
}

.label {
    background-color: #CDCDCD;
}

.jb-container {
    width: 100%;
    height: 100%;
    margin-bottom: 30px;
    border: 0px solid #bcbcbc;
}

.jb-header {
    position: relative;
    top: 0;
    padding: 0px;
    border-bottom: 0px solid #666;
    height: 63px;
    margin-top: -60px;
    background-color: #fa9805;
    text-align: center;
    z-index: 99999;
}

.jb-sidebar-left {
    width: 180px;
    padding: 0;
    margin-top: -6px;
    height: 100%;
    margin-bottom: 55px;
    float: left;
    border-right: 0px solid #666;
    background: url(../images/leftbar_bg.png);
    background-position: 100% 5px;
}

.jb-content {
    height: 100%;
    padding-top: 60px;
    margin-top: -2px;
    margin-bottom: 10px;
    float: left;
    border: 0px solid red;
    background: #FFF;
}

.jb-content-wrap {
    width: 96%;
    margin: 0 auto;
}

.jb-content-wrap .header2 {
    position: relative;
    top: 0;
    width: 100%;
    border: 1px solid #ff8129;
    border-top: 0;
    height: 43px;
    background: url(../images/topbar_bg.png);
    z-index: 99999;
}

.jb-sidebar-right {
    width: 180px;
    height: 100%;
    padding-top: 50px;
    margin-top: -6px;
    margin-bottom: 10px;
    float: left;
    border-left: 0px solid #666;
    background: #cad3e1;
    background: url(../images/rightbar_bg.png);
    background-position: -2px 5px;
}

.jb-footer {
    clear: both;
    padding: 0px;
    height: 10px;
    border: 0px solid #bcbcbc;
}

.title-preview {
    width: 100%;
    margin-top: 30px;
    text-align: center;
    font-size: 17px;
    color: #666;
}

.prevPhone {
    height: 619px;
    background: url(../images/phone_frame.png);
    background-size: 100% 83%;
    background-repeat: no-repeat;
    background-position-x: center;
}

.input-login {
    width: 280px;
    height: 40px;
    padding-left: 20px;
    border: 1px solid #dcdcdc;
    font-size: 16px;
    color: #333;
}

.navi-list {
    margin-left: -30px;
    margin-top: 20px;
    width: 100%;
}

.navi-list ul {
    list-style: none;
    width: 90%;
}

.navi-list ul li {
    height: 30px;
}

.navi-list ul li div {
    margin-top: 2px;
    float: left;
    margin-left: 10px;
    color: #666;
    cursor: pointer;
}

#topbar-title {
    position: relative;
    top: -40px;
    width: 100%;
    height: 40px;
    border: 1px solid #bcbcbc;
    border-top: 0;
    margin-top: -6px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.08);
    z-index: 99;
}

#topbar-title .title {
    position: relative;
    top: 14px;
    left: 50px;
    font-size: 18px;
    font-weight: 200;
}

#divPrevMain {
    position: relative;
    top: 12%;
    left: 8%;
    width: 87%;
    height: 360px;
    overflow-y: auto;
}

.manageScen-middle-wrap {
    width: 90%;
    height: 450px;
    margin-right: auto;
    margin-left: auto;
}

.manageScen-input {
    height: 448px;
    float: left;
}

.manageScen-input input {
    width: 200px;
    height: 26px;
    border: 1px solid #999;
    padding-left: 20px;
}

.manageScen-template {
    width: 450px;
    height: 85%;
    margin-left: 5%;
    padding-left: 5%;
    margin-top: 65px;
    float: left;
    border-left: 1px solid #dcdcdc;
}

.submitref {
    width: 280px;
    height: 45px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #949494;
    font-size: 16px;
    font-weight: 600;
    color: #FFF;
}

.template-upload-input {
    margin: 20px;
    margin-left: 50px;
}

.template-upload-input input {
    width: 300px;
    height: 26px;
    padding-left: 20px;
}

.template-upload-input textarea {
    width: 300px;
    height: 50px;
    border: 1px solid #999;
    padding-left: 20px;
}

.cBtnUIDScen {
    cursor: pointer;
    color: #FFF;
    width: 250px;
    height: 38px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #949494;
    font-weight: 600;
}

.cBtnUIDImage {
    cursor: pointer;
    color: #FFF;
    width: 140px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #949494;
    float: left;
    margin-right: 5px;
    font-weight: 600;
}

.cBtnUIDUser {
    cursor: pointer;
    color: #FFF;
    width: 140px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #949494;
    float: left;
    margin-right: 10px;
    font-weight: 600;
}

.cBtnUserGrantSave {
    cursor: pointer;
    color: #FFF;
    width: 140px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #949494;
    font-weight: 600;
    margin-right: 0px;
}

.cBtnUserMenuSave {
    cursor: pointer;
    color: #FFF;
    width: 140px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #949494;
    margin-right: 0px;
    font-weight: 600;
}

.cBtnGrantAdminUser {
    cursor: pointer;
    color: #FFF;
    width: 120px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #949494;
    float: left;
    margin-right: 20px;
    font-weight: 600;
}

.cBtnUIDSite {
    cursor: pointer;
    color: #FFF;
    width: 120px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #949494;
    float: left;
    margin-right: 5px;
    font-weight: 600;
}

.cBtnUIDService {
    cursor: pointer;
    color: #FFF;
    width: 120px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #949494;
    float: left;
    margin-right: 20px;
    font-weight: 600;
}

.cBtnUIDSiteUser {
    cursor: pointer;
    color: #FFF;
    width: 120px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #949494;
    float: left;
    margin-right: 5px;
    font-weight: 600;
}

.image-list {
    margin-top: 20px;
}

.image-list img {
    width: 200px;
}

.user-input {
    height: 24px;
    border: 1px solid #999;
    padding-left: 5px;
    margin-bottom: 8px;
}

.pop-imageEdit {
    width: 60%;
    height: 100px;
    margin: 50px auto;
}

.close-popup {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: url(../images/close_40x40.png)
}

.wizardSelBox {
    display: inline-block;
    width: 70px;
    height: 50px;
    margin: 1em;
    border: 1px solid #bcbcbc;
}

.file_input_textbox {
    float: left
}

.file_input_div {
    position: relative;
    width: 100px;
    height: 60px;
    overflow: hidden;
}

.file_input_div .btn-search {
    width: 100px;
    height: 37px;
    position: absolute;
    top: -2px;
    background-color: #999;
    color: #FFFFFF;
    border-style: solid;
}

.file_input_div .input-hidden {
    font-size: 45px;
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha(opacity=0)";
    -khtml-opacity: 0;
    -moz-opacity: 0;
}

.cPaging {
    text-align: center;
    width: 100%;
}

.hr-line-dashed {
    border-top: 1px dashed #e7eaec;
    color: #ffffff;
    background-color: #ffffff;
    height: 1px;
    margin: 20px 0;
}

.cDivList {
    width: 80%;
    /* height:170px; */
    text-align: center;
    vertical-align: middle;
    margin: 10px auto;
}

.cDivListTitle {
    height: 30px;
    line-height: 1.5em;
    float: left;
    margin-right: 0px;
    text-align: center;
}

.cDivListRows {
    height: 25px;
    line-height: 2em;
    float: left;
    margin-right: 0px;
    text-align: center;
}

.cScenarioListV2 {
    cursor: pointer;
    height: 20px;
    text-align: center;
    clear: both;
}

.cManageUserList {
    width: 100%;
    cursor: pointer;
    height: 20px;
    text-align: center;
    clear: both;
}

.cManageImageList {
    cursor: pointer;
    height: 40px;
    text-align: center;
    margin-top: 10px;
    clear: both;
}

.cManageTemplateList {
    cursor: pointer;
    height: 40px;
    text-align: center;
    clear: both;
}

.cGrantUserList {
    cursor: pointer;
    height: 20px;
    text-align: center;
    clear: both;
}

.cMenuUserList {
    cursor: pointer;
    height: 20px;
    text-align: center;
    clear: both;
}

.cGrantAdminList {
    cursor: pointer;
    height: 20px;
    text-align: center;
    clear: both;
}

.cManageSiteList {
    cursor: pointer;
    height: 20px;
    text-align: center;
    clear: both;
}

@media (max-width: 1480px) {

    .manageScen-input {
        width: 350px;
    }

    .manageScen-template {
        margin-left: 2%;
        padding-left: 0;
    }

    body {
        overflow-y: auto;
        height: 1500px;
    }

    .cPaging {
        width: 90%;
    }

    .cDivList {
        width: 90%;
    }

    .pop-imageEdit {
        width: 75%
    }

}

.cDivScenElemMain {
    margin-bottom: 20px;
}

.cDivScenElemSub {
    margin-left: 20px;
    margin-top: -10px;
}

.navLogo {
    border: 1px solid #e7e7e7;
    text-align: center;
    height: 90px;
    padding: 0;
    font-size: larger;
}

.navBlank {
    height: 25px;
    background-color: #eeeeee;
}

.navLia {
    font-size: initial;
    padding-top: 15px;
    padding-bottom: 15px;
}

.navIcon {
    padding-right: 30px;
}

.navIconSub {
    padding-right: 10px;
}

.navSub {
    padding-left: 20px;
}

.pagerow {
    /*height: 500px;*/
}

.ut12 {
    padding-bottom: 15px;
    border-bottom: 1px solid #f3f3f3;
    margin-top: 10px;
}

.ut4 {
    font-size: larger;
    font-weight: 500;
    margin-top: 7px;
}

.ut8input01 {
    width: 100%;
    height: 35px;
    padding-left: 10px;
}

.ut8text {
    width: 100%;
    padding-left: 10px;
    height: 175px;
    overflow-y: auto;
}

.ut8input02 {
    width: 100%;
    height: 35px;
}

.ut8input03 {
    background-color: #999;
    color: #FFFFFF;
    width: 80px;
    height: 35px;
}

.utsub {
    width: 140px;
}

.utbtn {
    width: 140px;
    display: none;
}

.ti12 {
    text-align: right;
    margin-bottom: 10px;
}

.ti12_02 {
    margin-top: 10px;
    padding-top: 10px;
    padding-left: 0px;
    text-align: right;
    padding-right: 0px;
}

.tibtn01 {
    float: right;
    display: block;
    height: 40px;
    margin-right: 0px;
}

.tibtn02 {
    float: right;
    display: none;
    height: 40px;
}
.tidef{
    text-align:center; margin-top: 42px;padding-left: 0px;padding-right: 0px;
}
.msubtn{
    float: right; display:none;width:200px; margin-right:0px;
}
.muhead{
    height: 50px;font-weight: bold;font-size: larger;padding-top: 14px;
}
.mu12{
    padding-bottom: 10px; border-bottom: 1px solid #f3f3f3; padding-top: 5px;
}
.mu04{
    font-size: larger;font-weight: 500; margin-top: 7px;
}
.mubtn01{
    float:right; height:40px;display:block;
}
.mubtn02{
    float:right; height:40px;display:none;
}
.mu08input{
    width:100%; height: 35px; padding-left: 10px;
}
.mu08input02{
    display:none; width:100%; height: 35px; margin-bottom:8px;
}
.muselect{
    height:35px;line-height:30px;width:100%;font-size:13px; padding:5px;background: #EBEBEB;text-align:right;margin-right:10px;
}
.muopt{
    font-size:13px; background: #EBEBEB;
}
.mgbody{
    height:300px;overflow-y:auto;overflow-x:hidden;border: 1px solid #f3f3f3;
}
.mgapb{
    height:500px;%;overflow-y:auto;
}
.mga03{
    padding-top:5px;
}
.mga100{
    width:100%;
}
.mgatest{
    width:220px;height:30px;border:0px;color:#ff0000;
}
.mgaselect{
    width:100%; height:25px;
}
.mgaopt{
    font-size:13px; background: #EBEBEB;
}
.magblank{
    margin-bottom:20px;
}
.mgabody{
    border: 1px solid #f3f3f3; height:275px; overflow-y:auto;overflow-x:hidden;
}
.mgabtn01{
    float:right; height:35px; display:block; margin-right:5px;
}
.mgabtn02{
    float:right; height:35px;display:none; margin-right:5px;
}
.ms12{
    padding-bottom:10px; border-bottom: 1px solid #f3f3f3; margin-bottom:5px; margin-top:10px;
}
.ms04{
    padding-top:5px;
}
.wid100{
    width:100%;
}
.widlabel{
    width:100%;
    padding-top: 3px;
}
.msbtn01{
    float:right; display:block; margin-right: 0px;
}
.msbtn02{
    float:right; display:none;
}
.msopt01{
    font-size:15px; background: #ececec;
}
.msopt02{
    font-size:15px; background: #99D9EA;
}
.msopt03{
    font-size:15px; background: #FF7575;
}
.msbtn12{
    margin-top:10px; margin-bottom:10px;
}
.inpset12{
    margin-bottom:30px;
}
.inpset12sub{
    border: 1px solid #e7e7e7;
    height:auto;
}
.inpsmain12{
    border-bottom: 1px solid #e7e7e7;
    padding-top:10px;
    padding-bottom: 10px;
}
.inpstitle{
    width:12.6%; float:left; padding-left: 27px; padding-top:16px;; padding-bottom:10px;
}
.inpsdiv{
    width:18.8%; float:left; padding-top:10px; padding-bottom:10px; margin-right:10px;
}
.inpsinput{
    width:100%; height:30px; padding-left:5px;
}
.inpseldiv{
    width:40%; float:left; padding-top:10px; padding-bottom:10px; margin-right:10px;
}
.inpseldiv2{
    width:20%; float:left; padding-top:10px; padding-bottom:10px;
}
.inpssel{
    height:30px; width:100%; padding-left:5px;
}
.inpssel2{
    height:30px; width:55%; padding-left:5px; background: #EBEBEB;
}
.ui-datepicker-trigger {
    padding-left:3px;
    width: 25px;
}
.btnsearch{
    height: 30px; background:#949494; border: 1px solid rgba(0, 0, 0, 0.15); color:#fff
}
.onoffswitch {
    position: relative;
    width: 78px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #999999;
    border-radius: 20px;
}

.onoffswitch-inner {
    width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
    float: left; width: 50%; height: 24px; padding: 0; line-height: 27px;
    font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.onoffswitch-inner:before {
    content: "YES";
    padding-left: 11px;
    background-color: #3581c2;; color: #FFFFFF;
}

.onoffswitch-inner:after {
    content: "NO";
    padding-right: 11px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}

.onoffswitch-switch {
    width: 26px; margin: 2px;
    background: #FFFFFF;
    border: 2px solid #999999; border-radius: 20px;
    position: absolute; top: 0; bottom: 0; right: 44px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}

.table thead tr{
    background-color: #286090;
    color: white;;
}
.table thead tr th{
    text-align: center;
}
.table tbody tr td{
    text-align: center;
}
.board_list th{
    height: 35px;
    font-weight: bold;
    background-color: #E4EFF7;
    border: 1px solid #b8cfd5;
    padding-left: 5px;
    color:black;
    text-align:center;
}
.statsInput{
    padding-left: 10px; height:30px; width: 100%;
}
.statsLabel{
    padding-left:0px; padding-right:5px; padding-top: 8px;
}
.statsDiv{
    padding-left:0px; padding-right:0px; padding-top: 2px; float:right; width:21%;
}
.statsPaR{
    padding-right:10px;
}