/*달력 컨트롤 연월 콤보 넓이 조정*/
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 40%;
}

@charset "utf-8";
/* CSS Document */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    min-width: 1280px;
    /* min-height: 450px; */
    overflow-y: hidden;
    overflow-x: auto; /*min값보다 줄었을 때 컨텐츠 확인 불가능하여 삽입*/
}

html, body, div, article, section, nav, input, textarea, p, span, ul, li, h1, dt, dd, select, option, label {
    margin: 0;
    padding: 0;
    font-family: Meiryo UI, Malgun Gothic, Dotum;
    font-weight: normal;
}


    input[type="checkbox"] {
        vertical-align: middle;
    }

    input[type="radio"] {
        vertical-align: middle;
    }

    input[type="text"]::-webkit-input-placeholder {
        color: #aeb8be;
    }

    input[type="text"]::-moz-placeholder {
        color: #aeb8be;
    }

    input[type="text"]:-ms-input-placeholder {
        color: #aeb8be;
    }

input, textarea {
    outline-style: none;
}

select {
    padding: 0px;
}

ul, ol, dl, li, dt, dd {
    padding: 0;
    margin: 0;
    list-style: none;
}

img {
    border: 0px;
    margin: 0;
}

p {
    padding: 0px;
    margin: 0;
}

a {
    text-decoration: none;
    color: #464646;
}

    a:hover {
        color: #96c159;
    }

input[type="checkbox"] {
    vertical-align: middle;
}

input[type="radio"] {
    vertical-align: middle;
}

input[type="text"]::-webkit-input-placeholder {
    color: #aeb8be;
}

input[type="text"]::-moz-placeholder {
    color: #aeb8be;
}

input[type="text"]::-ms-input-placeholder {
    color: #aeb8be;
}

input {
    outline-style: none;
}

select {
    padding: 0px;
}

ul, ol, dl, li, dt, dd {
    padding: 0;
    margin: 0;
    list-style: none;
}

img {
    border: 0px;
    margin: 0;
}

p {
    padding: 0px;
    margin: 0;
}

a {
    text-decoration: none;
    color: #464646;
}

    a:hover {
        color: #96c159;
    }

.clear {
    clear: both;
    height: 0px;
}

.hiddenControl {
    display: none;
}

.tbtnOnOff {
    display: inline-flex;
    padding: 4px 8px;
    margin-left: 20px;
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    border-radius: 3px;
    background-color: #485967;
    cursor: pointer; /*181030 김슬기 추사*/
    position: absolute;
    right: 10px;
    top: 4px;
}

    .tbtnOnOff.On {
        color: #fff;
        background-color: #15a4fa;
        cursor: pointer; /*181030 김슬기 추사*/
    }
/*ToggleButton추가*/
.toggleButton .caption {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-right: 5px;
    font-size: 11px;
    flex-shrink: 0;
}

    .toggleButton .caption > span {
        color: #999;
        display: inline-block;
    }

.toggleButton .value {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 28px;
    cursor: pointer; /*180905 김슬기 추가*/
}

.toggleButton .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    transition: ease-in .3s;
}

    .toggleButton .switch > .dot {
        position: absolute;
        left: -1px;
        top: -1px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: rgba(0,0,0,0.4) 0 0 3px;
        transition: ease-in .5s;
    }

    .toggleButton .switch.On > .dot {
        left: auto;
        right: -1px;
    }

    .toggleButton .switch.On {
        background-color: #eb5252;
    }

        .toggleButton .switch.On.Blue {
            background-color: #15a4fa;
        }

        .toggleButton .switch.On.Dis {
            background-color: #999 !important;
        }
/*MessageBox*/
.divMessageBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
}

    .divMessageBox > .bgMessageBox {
        background-color: black;
        width: 100%;
        height: 100%;
        opacity: 0.4;
    }

    .divMessageBox > .boxMessage {
        position: absolute;
        display: flex;
        align-items: center;
        text-align: center;
        top: 50%;
        margin-top: -115px;
        width: 100%;
        height: 230px;
        background-color: #15a4fa;
        text-align: center;
        vertical-align: middle;
    }

        .divMessageBox > .boxMessage > .messageArea {
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }

            .divMessageBox > .boxMessage > .messageArea > .txtTitle {
                font-size: 21px;
                color: #fff;
                text-align: center;
                margin: 8px 0;
            }

            .divMessageBox > .boxMessage > .messageArea > .btnLineWhite {
                border: 1px solid #fff;
                padding: 8px 16px;
                margin: 20px 5px;
                background-color: #15a4fa;
                font-size: 16px;
                letter-spacing: -1px;
                color: #fff;
            }
                /*160222 김슬기 추가*/
                .divMessageBox > .boxMessage > .messageArea > .btnLineWhite:hover {
                    cursor: pointer;
                }

/*0. 공통 컨트롤 ############################################################################# */
/*TEXT*/
.txtHighlight {
    color: #fff !important;
    background-color: #15a4fa !important;
}
/*입력스타일*/
.infoInputWrap > dl {
    width: 100%;
    display: inline-flex;
    align-items: center;
}

    .infoInputWrap > dl > dt {
        flex-shrink: 0;
        min-width: 60px;
        font-size: 13px;
    }

    .infoInputWrap > dl > dd {
        width: 100%;
        padding: 0 30px 0 5px;
    }

        .infoInputWrap > dl > dd > input {
            width: 100%;
            height: 100%;
            border: 0px;
            border-bottom: 1px solid #ccc;
        }

        .infoInputWrap > dl > dd > select {
            width: 100%;
            height: 100%;
        }
/*조회 스타일 - Dark - Row*/
.QueryAreaDarkRow {
    height: 50px;
    display: flex;
    background-color: #222b32;
    z-index: 9;
}

    .QueryAreaDarkRow dl {
        /* flex-shrink: 0; */
        display: inline-flex;
        flex-direction: column;
        height: 100%;
        border-right: 1px solid rgba(255,255,255,.2);
    }

        .QueryAreaDarkRow dl > dt {
            flex-shrink: 0;
            padding: 8px 0 0 10px;
            font-size: 12px;
            color: #fff;
            opacity: .6;
        }

        .QueryAreaDarkRow dl > dd {
            display: inline-flex;
            height: 100%;
            padding: 0 5px 0 5px;
        }

    .QueryAreaDarkRow input,
    .QueryAreaDarkRow select {
        height: 100%;
        width: 100%;
        background-color: #222b32;
        border: 2px solid transparent;
        color: #fff;
        /* padding: 4px 0; */
    }

    .QueryAreaDarkRow .queryOptionCategoty {
        width: 150px;
        height: 60px;
    }


    .QueryAreaDarkRow > .defaultWrap {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

        .QueryAreaDarkRow > .defaultWrap .queryOptionInput {
            display: flex;
            width: 100%;
        }

            .QueryAreaDarkRow > .defaultWrap .queryOptionInput select {
                width: 95px;
            }

            .QueryAreaDarkRow > .defaultWrap .queryOptionInput .btnQuery {
                flex-shrink: 0;
                width: 45px;
                height: 100%;
                background-color: #222b32;
                border: 0px;
                background-image: url('../Images/common/btnQuery.png');
                background-repeat: no-repeat;
                background-position: center;
            }

    .QueryAreaDarkRow .btnqueryOption {
        display: inline-flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 100%;
        background-color: #222b32;
        border-right: 1px solid rgba(255,255,255,.2);
    }

        .QueryAreaDarkRow .btnqueryOption > i {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(135deg);
        }

        .QueryAreaDarkRow .btnqueryOption:hover {
            cursor: pointer;
            background-color: #466379;
        }


    .QueryAreaDarkRow > .defaultWrap .btn {
        margin: 10px;
        height: 30px;
        border-radius: 15px;
        border: 1px solid #fff;
        background-color: transparent;
        color: #fff;
        width: auto;
        padding: 0 20px;
    }

        .QueryAreaDarkRow > .defaultWrap .btn:hover,
        .QueryAreaDarkRow > .defaultWrap .btnQuery:hover {
            cursor: pointer;
            background-color: #15a4fa;
        }

    .QueryAreaDarkRow > .optionWrap {
        display: none;
    }

    .QueryAreaDarkRow.ExpandMode {
        height: 120px;
        flex-wrap: wrap;
    }

        .QueryAreaDarkRow.ExpandMode > .optionWrap {
            display: flex;
            width: 100%;
            height: 60px;
            background-color: #23385a;
            border-top: 1px solid rgba(255,255,255,0.2);
        }

        .QueryAreaDarkRow.ExpandMode .optionWrap > dl {
            width: 100%;
            /* flex-shrink: unset; */
        }

        .QueryAreaDarkRow.ExpandMode .optionWrap .queryOptionDate {
            min-width: 95px;
        }

        .QueryAreaDarkRow.ExpandMode .optionWrap dd > select,
        .QueryAreaDarkRow.ExpandMode .optionWrap dd > input {
            background-color: #23385a; /*optionList가 흰색으로 나오기 때문에 색상지정*/
        }

        .QueryAreaDarkRow.ExpandMode .btnqueryOption {
            margin-bottom: -1px;
            border-top: 1px solid rgba(255,255,255,.3);
            background-color: #23385a;
            height: 52px;
            z-index: 1;
        }

            .QueryAreaDarkRow.ExpandMode .btnqueryOption > i {
                transform: rotate(-45deg);
            }
/*첨부파일*/
.divAttachedfileArea {
    position: relative;
    border: 2px dashed #dbdbdb;
    background-color: #eff2f4;
    border-radius: 5px;
    margin: 10px 0;
    height: 90px;
}

    .divAttachedfileArea.viewType {
        background-color: #fff;
        border-radius: 0px;
        margin: 10px 0 0 0;
        height: auto;
        border: 0px;
        border-top: 1px solid #eee;
    }

    .divAttachedfileArea .divFileAddArea {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -25px;
        margin-top: -35px;
        background-image: url('../Images/common/iconGroup.png');
        background-repeat: no-repeat;
        background-position: -15px -150px;
        width: 50px;
        height: 70px;
    }

    .divAttachedfileArea .divFileListArea {
        position: relative;
        text-align: left;
        margin: 0;
        padding: 10px 130px 10px 10px;
    }

        .divAttachedfileArea .divFileListArea .divFilelistScroll {
            height: 70px;
            overflow: auto;
        }

    .divAttachedfileArea.viewType .divFileListArea .divFilelistScroll {
        height: auto;
    }

    .divAttachedfileArea .divFileListArea .ulFileList {
        margin: 0;
    }

        .divAttachedfileArea .divFileListArea .ulFileList::after {
            clear: both;
        }

        .divAttachedfileArea .divFileListArea .ulFileList li {
            position: relative;
            display: inline-flex;
            align-items: center;
            margin: 0 10px 5px 0;
        }

            .divAttachedfileArea .divFileListArea .ulFileList li > .iconFile {
                display: inline-flex;
                align-items: center;
                padding: 0 5px;
                height: 20px;
                border-radius: 10px;
                color: #fff;
                font-weight: bold;
                font-size: 11px;
            }
/*FileType*/
.ulFileList li .type0 {
    /*none*/
    background-color: #aaa;
}

.ulFileList li .type1 {
    /*엑셀*/
    background-color: #52b11e;
}

.ulFileList li .type2 {
    /*워드*/
    background-color: #1e4eb1;
}

.ulFileList li .type3 {
    /*파워포인트*/
    background-color: #d64949;
}

.ulFileList li .type4 {
    /*이미지 gif,png,jpg,bmp*/
    background-color: #9b51b6;
}

.ulFileList li .type5 {
    /*텍스트*/
    background-color: #15a4fa;
}

.ulFileList li .type6 {
    /*zip*/
    background-color: #fa9615;
}

.divAttachedfileArea .divFileListArea .ulFileList li:hover {
    cursor: pointer;
}

.divAttachedfileArea .divFileListArea .ulFileList li > .txtFileTitle {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #4e5960;
    padding-left: 4px;
    max-width: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    word-break: break-all;
}

    .divAttachedfileArea .divFileListArea .ulFileList li > .txtFileTitle:hover span {
        color: #15a4fa;
    }

.divAttachedfileArea .divFileListArea .ulFileList li > .btnDel {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url('../Images/common/iconGroup.png');
    background-repeat: no-repeat;
    background-position: -18px -228px;
    cursor: pointer;
}

.divAttachedfileArea .divFileListArea .ulFileList li > .txtFileSize,
.divAttachedfileArea .txtDescription { /*180913 김슬기 추가*/
    display: inline-block;
    padding-left: 4px;
    font-size: 11px;
    color: #4e5960;
}

.divAttachedfileArea .divFileListArea .ulFileList li .btn {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    background-image: url('../Images/common/iconGroup.png');
    background-repeat: no-repeat;
    cursor: pointer;
}

    .divAttachedfileArea .divFileListArea .ulFileList li .btn.Del {
        background-position: -21px -230px;
    }

    .divAttachedfileArea .divFileListArea .ulFileList li .btn.Edit {
        background-position: 0px -230px;
    }

.divAttachedfileArea .divFileListArea .ulFileList li .txtSize {
    display: inline-block;
    padding-left: 4px;
    font-size: 11px;
    color: #4e5960;
}

.divAttachedfileArea .divFileListArea .fileUploadAction {
    position: absolute;
    right: 0;
    top: 12px;
    width: 130px; /*181029 김슬기 수정 / 120 -> 130 / 파일 사이즈가 커질 경우 사이즈만 밑으로 떨어져서 width를 늘림.*/
    text-align: right;
    padding: 10px 10px 0 0; /*181023 김슬기 추가 / 첨부파일 버튼 우측 여백을 위함*/
}

    .divAttachedfileArea .divFileListArea .fileUploadAction devTotalAttechedInfo .txtName {
        font-size: 13px;
        color: #4e5960;
    }

    .divAttachedfileArea .divFileListArea .fileUploadAction devTotalAttechedInfo .txtSize {
        font-size: 13px;
        color: #5c7284;
    }

    .divAttachedfileArea .divFileListArea .fileUploadAction .btnUpload {
        border: 1px solid #15a4fa;
        padding: 2px 8px;
        color: #15a4fa;
        text-align: center;
        font-size: 12px;
        background-color: #fff;
        margin-top: 4px;
    }

        .divAttachedfileArea .divFileListArea .fileUploadAction .btnUpload:hover {
            color: #fff;
            background-color: #15a4fa;
            cursor: pointer;
        }
/*첨부파일보기*/
.divAttachedfileArea > .viewMode .fileUploadAction {
    display: none;
}

.divAttachedfileArea > .viewMode .btnDel {
    display: none;
}

.divAttachedfileArea > .viewMode {
    padding-right: 0px !important;
}
/*Submin Button*/
.divSubmitArea {
    width: 100%;
    text-align: center;
    padding: 20px;
}

    .divSubmitArea > .btnFill {
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        letter-spacing: -1px;
        text-align: center;
        border: 0px;
        border-radius: 2px;
        margin: 2px;
        padding: 12px 36px;
    }

        .divSubmitArea > .btnFill:hover {
            cursor: pointer;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        }

    .divSubmitArea > .Ok {
        background-color: #15a4fa;
    }

    .divSubmitArea > .Cancel {
        background-color: #5c7284;
    }
/*comboItem*/
.ulComboItem {
    position: absolute;
    left: 0;
    top: 29px;
    bottom: auto; /**/
    display: none;
    width: 100%;
    max-height: 152px; /*181207 김슬기 수정 / 150 -> 152 / 리스트 개수가 늘어나면 스크롤이 생겨서 2 증가 시킴*/
    border: 1px solid #dbdbdb;
    overflow-y: auto;
    z-index: 99999;
    box-shadow: rgba(0,0,0,0.3) 0px 5px 5px;
}

.comboboxArea > .ulComboItem {
    left: 10px;
    width: calc(100% - 20px); /*query영역 내의 콤보박스 넓이조정*/
}

.ulComboItem li {
    display: flex;
    align-items: center;
    color: #4e5960;
    font-size: 14px;
    background-color: #fff;
    /*background-image: url('../Images/common/iconCheck.png');
    background-repeat: no-repeat;*/
    padding: 5px; /*181102 김슬기 수정 / 0 5px -> 5px / 상단에 텍스트가 너무 붙어 나와서 padding을 넣음*/
    min-height: 30px;
    text-align: left;
}

    .ulComboItem li:hover {
        background-color: #999;
        color: #fff;
        cursor: pointer;
    }

    .ulComboItem li.selected {
        background-color: #15a4fa;
        color: #fff;
        font-weight: bold;
    }

.ulComboItem.searchCombo /*검색폼에 붙는 콤보박스*/ {
    position: absolute;
    /*left: 100px;*/ /*200924 김슬기 수정 / 콤보박스가 우측으로 쏠려서 주석처리함.*/
    /*top: 0;*/
    display: none;
    width: calc(100% - 20px);
    max-height: 300px;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid #dbdbdb;
    margin-bottom: 30px;
    z-index: 99999;
}

/*1. Layout ############################################################################# */
.LoginWrap {
    height: 100%;
    overflow: hidden;
}

.wrap {
    display: flex;
    position: relative;
    width: 100%;
    height: calc(100% - 50px);
}

/*TopArea*/
.MembersCenter {
    height: 150px;
    display: flex;
    position: relative;
}

    .MembersCenter > .topArea {
        display: flex;
        align-items: center;
        position: static;
        width: 100%;
        background-color: #344052;
    }

        .MembersCenter > .topArea > .logoArea {
            display: flex;
            align-items: center;
            margin: 0 auto;
            padding: 0;
        }

            .MembersCenter > .topArea > .logoArea > .icon {
                display: inline-block;
                width: 40px;
                height: 45px;
                background-image: url('../Images/common/iconMembers.png');
                background-position: 0 -273px;
                background-repeat: no-repeat;
                margin-right: 20px;
            }

            .MembersCenter > .topArea > .logoArea > .txtTitle {
                font-size: 36px;
                color: #fff;
                font-weight: bold;
            }


        .MembersCenter > .topArea > .btnLanguage {
            position: absolute;
            right: 30px;
            cursor: pointer;
        }

            .MembersCenter > .topArea > .btnLanguage > span {
                padding: 0 40px 0 0;
                background-image: url('../Images/common/imgComboArrowWhite.png');
                background-position: right center;
                background-repeat: no-repeat;
                color: #fff;
            }


            /*header.MembersCenter > .topArea > .btnLanguage:hover > .divLanguage {
                display: block;
            }*/


            .MembersCenter > .topArea > .btnLanguage > .divLanguage {
                display: none;
                position: absolute;
                right: 0px; /*190920 김슬기 수정 / 10 -> 0 / 좌측으로 치우쳐져서 0으로 수정함.*/
                top: 30px;
                background-color: #fff;
                border: 1px solid #dbdbdb;
                z-index: 1; /*171211 김슬기 추가*/
            }

                .MembersCenter > .topArea > .btnLanguage > .divLanguage > .ulLanguage {
                    padding: 0;
                }

                    .MembersCenter > .topArea > .btnLanguage > .divLanguage > .ulLanguage > li {
                        margin: 0;
                        padding: 8px 20px 8px 30px;
                        color: #999;
                        font-weight: normal;
                    }

                        .MembersCenter > .topArea > .btnLanguage > .divLanguage > .ulLanguage > li:hover {
                            cursor: pointer;
                            background-color: #35aff8;
                            color: #fff;
                        }

                        .MembersCenter > .topArea > .btnLanguage > .divLanguage > .ulLanguage > li.selected {
                            color: #fff;
                            background-image: url('../Images/common/iconLanguage.png');
                            background-repeat: no-repeat;
                            background-position: 2px -32px;
                            background-color: #15a4fa;
                        }


header {
    display: flex;
    width: 100%;
    height: 50px;
    background: #354052;
}

    header > .topArea {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: relative;
        width: 100%;
        padding: 0 20px;
        /*min-width: 1000px;*/
    }

        header > .topArea > .logoArea {
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
        }

            header > .topArea > .logoArea > img {
                margin-right: 10px;
            }

            header > .topArea > .logoArea > .txtTitle {
                display: inline-block;
                color: #fff;
                font-weight: bold;
                font-size: 21px;
                letter-spacing: -1px;
            }

        header > .topArea > .ulTopMenu {
            /* padding-left: 80px; */
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            margin: 0 20px;
        }

            header > .topArea > .ulTopMenu li {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0px 30px;
                color: rgba(255,255,255,0.5);
                font-size: 16px;
                height: 100%;
                border-top: 5px solid rgba(255,255,255,0);
            }

                header > .topArea > .ulTopMenu li:hover {
                    color: #15a4fa;
                    cursor: pointer;
                }

                header > .topArea > .ulTopMenu li.selected {
                    color: #fff;
                    font-weight: bold;
                    border-top: 5px solid #15a4fa;
                }

        header > .topArea > .userInfoArea {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-left: auto;
        }

            header > .topArea > .userInfoArea > .divUserInfo {
                display: inline-block;
                position: relative;
                margin-left: auto;
                margin-right: 10px;
            }

                header > .topArea > .userInfoArea > .divUserInfo > p > span {
                    color: rgba(255,255,255,.5);
                    font-size: 13px;
                    letter-spacing: -1px;
                    line-height: 15px;
                }

                header > .topArea > .userInfoArea > .divUserInfo > p {
                    color: #5c7284;
                    font-size: 13px;
                    line-height: 18px;
                }

            header > .topArea > .userInfoArea > .imgUser {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                background-color: #222b32;
            }

            header > .topArea > .userInfoArea > .imgUser {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                width: 35px;
                height: 35px;
                margin-right: 5px;
                background-image: url('../Images/common/iconUserType.png');
                background-repeat: no-repeat;
                background-color: #7c8390;
            }

                header > .topArea > .userInfoArea > .imgUser.ASManager {
                    background-color: #4CC6AE;
                    background-position: -13px -59px;
                }

                header > .topArea > .userInfoArea > .imgUser.YLWASManager {
                    background-color: #06754a;
                    background-position: -13px -6px;
                }

                header > .topArea > .userInfoArea > .imgUser.ASSystem {
                    background-color: #181e29;
                    background-position: -13px -177px;
                }

                header > .topArea > .userInfoArea > .imgUser.CustomerManager,
                header > .topArea > .userInfoArea > .imgUser.CustomerUser {
                    background-color: #15a4fa;
                    background-position: -13px -121px;
                }

        header > .topArea .btn {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-image: url('../Images/common/iconTopArea.png');
            background-repeat: no-repeat;
            border-radius: 50%;
            cursor: pointer;
        }

            header > .topArea .btn.Logout {
                background-position: 8px 6px;
            }

            header > .topArea .btn.Manual {
                background-position: 5px -38px;
            }

    header > .topAre .btn:hover {
        background-color: #5c7284;
        cursor: pointer;
    }

/*1-1. As Register*/
.AsRegister {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 800px;
    min-height: 670px;
}

    .AsRegister .MessageWrap {
        position: relative;
        display: inline-flex;
        width: 980px;
        height: 650px;
    }

        .AsRegister .MessageWrap > .informationArea {
            position: relative;
            display: inline-block;
            width: 250px;
            padding: 10px 20px;
            background-color: #fff;
            height: 100%;
            box-shadow: rgba(0,0,0,0.3) 0px 0px 5px;
        }

            .AsRegister .MessageWrap > .informationArea > .divYLW {
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.1);
                top: 0;
                left: 0;
                display: none;
                justify-content: center;
                align-items: flex-end;
                padding: 10px;
                font-size: 13px;
                color: #fff;
            }

                .AsRegister .MessageWrap > .informationArea > .divYLW > span {
                    display: inline-block;
                    background-color: #666;
                    padding: 6px 10px;
                }

            .AsRegister .MessageWrap > .informationArea h2.txtTitle {
                font-size: 12px;
                color: #5c7284;
            }

        .AsRegister .MessageWrap > .messageArea {
            /* position:absolute; */
            /* left:300px; */
            /* top:-50px; */
            width: calc(100% - 310px);
            height: 100%;
            padding: 20px;
            background-color: #fff;
            box-shadow: rgba(0,0,0,0.3) 3px 0px 5px;
        }

    .AsRegister > .FrmASRequestRegist .contents1Area {
        text-align: left;
    }

    .AsRegister .ulStack {
        margin: 0 auto;
    }


        .AsRegister .ulStack > li {
            position: relative;
            word-break: break-all;
            display: block;
            /* align-items:center; */
            /* height: 40px; */
            margin-top: 10px;
        }

            /*Normal*/
            .AsRegister .ulStack > li > .caption {
                display: block;
                position: relative;
                width: 100px;
                font-size: 11px;
            }

            .AsRegister .ulStack > li.toggleButton {
                display: flex;
            }

                .AsRegister .ulStack > li.toggleButton > .caption {
                    display: inline-flex;
                    flex-shrink: 0;
                    width: auto;
                    padding-right: 4px;
                }

            .AsRegister .ulStack > li > .caption > span {
                color: #999;
                display: inline-block;
            }

            .AsRegister .ulStack > li > .value {
                display: block;
                position: relative;
                width: 100%;
                height: 28px;
                cursor: pointer; /*180905 김슬기 추가*/
            }

            .AsRegister .ulStack > li .caption .iconImg {
                display: none;
                background-image: url('../Images/common/iconGroup.png');
                background-repeat: no-repeat;
                width: 20px;
                height: 20px;
                background-size: 300px;
            }

            .AsRegister .ulStack > li > .caption .imgCategory {
                background-position: -15px -14px;
            }

            .AsRegister .ulStack > li > .caption .imgModel {
                background-position: -3px -252px;
            }

            .AsRegister .ulStack > li > .caption .imgModule {
                background-position: -61px -14px;
            }

            .AsRegister .ulStack > li > .caption .imgProgram {
                background-position: -105px -14px;
            }

            .AsRegister .ulStack > li > .caption .imgEmergency {
                background-position: -148px -14px;
            }

            .AsRegister .ulStack > li > .caption .imgPartner {
                background-position: -249px -60px;
            }

            .AsRegister .ulStack > li > .caption .imgCompany {
                background-position: -11px -47px;
            }

            .AsRegister .ulStack > li > .caption .imgUser {
                background-position: -59px -47px;
            }

            .AsRegister .ulStack > li > .caption .imgTel {
                background-position: -105px -47px;
            }

            .AsRegister .ulStack > li > .caption .imgEmail {
                background-position: -148px -47px;
            }
            /*긴급여부*/
            .AsRegister .ulStack > li.On > .imgEmergency {
                background-position: -248px -15px;
            }

            .AsRegister .ulStack > li.On > .txtValue {
                color: #fff;
                font-weight: bold;
            }

            /*value*/
            .AsRegister .ulStack > li > .value {
                position: relative;
                display: block;
            }

            .AsRegister .ulStack > li.combo > .value > .txtValue {
                display: flex;
                align-items: center;
                width: 100%;
                height: 100%;
                padding: 0 15px 0 0;
                font-size: 13px;
                border-bottom: 1px solid #eee;
            }

                .AsRegister .ulStack > li.combo > .value > .txtValue > span {
                    font-weight: bold;
                    color: #333;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .AsRegister .ulStack > li.combo > .value > .txtValue > i {
                    position: absolute;
                    right: 0;
                    top: 0px;
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    background-image: url('../Images/common/imgComboArrowGray.png');
                    background-size: 20px;
                }

            .AsRegister .ulStack > li.combo > .value > .ulComboItem {
                top: 26px;
                bottom: auto;
            }

.wrap.AsReport {
    overflow: hidden;
    display:flex;
}

.contentsGroup {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
}

.AsReport .AsListArea > .dashboardArea .divSort .combobox .ulComboItem {
    top: 45px; /*181106 김슬기 수정 / 38 -> 45 / item리스트가 너무 위로 붙어서 늘림*/
    bottom: auto;
    left: -3px; /*181108 김슬기 추가*/
}

.AsRegister .ulStack > li > .value > input[type=text] {
    width: 100%;
    height: 100%;
    padding: 0px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: -1px;
    color: #4e5960;
    border: 0px;
    border-bottom: 1px solid #eee;
    background-color: transparent;
}

    .AsRegister .ulStack > li > .value > input[type=text]:focus {
        color: #15a4fa;
        font-weight: bold;
        background-color: #fff;
        border-bottom: 2px solid #15a4fa;
    }

.AsRegister .ulStack > li > .value > input.Dis {
    color: #999;
    background-color: #f9f9f9;
}

.AsRegister .ulStack > li .txtDescription {
    margin-top: -5px;
    font-size: 11px;
    color: #999;
}

.AsRegister > .FrmASRequestRegist .contents2Area {
    margin: 0 auto;
    text-align: center;
}

    .AsRegister > .FrmASRequestRegist .contents2Area > .inputTitle {
        display: block;
        width: 100%;
        border: 0px;
        border-bottom: 1px solid #dbdbdb;
        font-size: 16px;
        font-weight: bold;
        color: #4e5960;
        letter-spacing: -1px;
        padding: 8px;
        margin-top: 10px;
    }

        .AsRegister > .FrmASRequestRegist .contents2Area > .inputTitle:focus {
            border-bottom: 2px solid #15a4fa;
        }

    .AsRegister > .FrmASRequestRegist .contents2Area > .textareaContents {
        display: block;
        width: 100%;
        height: 370px;
        border: 0px;
        border-bottom: 1px solid #dbdbdb;
        font-size: 16px;
        color: #4e5960;
        letter-spacing: -1px;
        padding: 8px;
        margin-top: 10px;
        resize: none; /*181029 김슬기 추가 / 서비스 신청시 내용 textarea 사이즈 조절을 막기 위함*/
    }

    .AsRegister > .FrmASRequestRegist .contents2Area .txtDescription {
        padding-left: 5px;
        text-align: left;
        font-size: 11px;
        color: #666;
        letter-spacing: -.5px;
        margin-top: -5px;
    }

.AsRegister > .FrmASRequestRegist .contents3Area {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px);
    text-align: left;
}

    .AsRegister > .FrmASRequestRegist .contents3Area > .titleArea {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .AsRegister > .FrmASRequestRegist .contents3Area .partnerCheckArea {
        display: inline-flex;
    }

        .AsRegister > .FrmASRequestRegist .contents3Area .partnerCheckArea > input[type=checkbox] {
            margin-top: 1px;
        }

        .AsRegister > .FrmASRequestRegist .contents3Area .partnerCheckArea > span {
            display: inline-flex;
            padding-left: 5px;
            font-size: 12px;
            color: #666;
            line-height: 12px;
            max-width: 65px;
        }
/*Drawing*/
.popupDrawingArea {
    position: absolute;
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.9);
    text-align: center;
    z-index: 1;
}

    .popupDrawingArea > .topArea {
        position: absolute;
        width: 100%;
        min-width: 950px;
        top: 0px;
        height: 60px;
        background-color: #000;
        text-align: center;
    }

        .popupDrawingArea > .topArea > .txtProgramName {
            position: absolute;
            height: 40px;
            top: 20px;
            left: 60px;
            color: #fff;
            font-size: 16px;
            letter-spacing: -2px;
            font-weight: bold;
        }

        .popupDrawingArea > .topArea > .btn {
            position: absolute;
            width: 50px;
            height: 50px;
            top: 5px;
            background-image: url('../Images/common/iconDrawing.png');
            background-repeat: no-repeat;
        }

            .popupDrawingArea > .topArea > .btn:hover {
                cursor: pointer;
                background-color: rgba(255,255,255,0.3);
            }

        .popupDrawingArea > .topArea > .Back {
            left: 5px;
            background-position: 10px 10px;
        }

        .popupDrawingArea > .topArea > .Clear {
            right: 5px;
            background-position: -31px 3px;
            color: #fff;
            font-size: 12px;
            letter-spacing: -1px;
            line-height: 78px;
        }

        .popupDrawingArea > .topArea > .toolbarArea {
            display: inline-block;
            padding: 10px 0;
        }

            .popupDrawingArea > .topArea > .toolbarArea > .ulColor {
                float: left;
                display: inline-block;
                margin: 10px 20px 0 0;
            }

                .popupDrawingArea > .topArea > .toolbarArea > .ulColor > li {
                    float: left;
                    width: 20px;
                    height: 20px;
                    margin-right: 15px;
                    border: 1px solid rgba(255,255,255,0.5);
                    border-radius: 50%;
                }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulColor > li:hover {
                        cursor: pointer;
                        transform: scale(1.2);
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulColor > li.Selected {
                        border: 2px solid rgba(255,255,255,0.2);
                        transform: scale(1.5);
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulColor > li.color1 {
                        background-color: #000;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulColor > li.color2 {
                        background-color: #afabab;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulColor > li.color3 {
                        background-color: #ff3c3c;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulColor > li.color4 {
                        background-color: #ffc000;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulColor > li.color5 {
                        background-color: #ff6700;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulColor > li.color6 {
                        background-color: #843c0c;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulColor > li.color7 {
                        background-color: #00a651;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulColor > li.color8 {
                        background-color: #14a2e7;
                    }

            .popupDrawingArea > .topArea > .toolbarArea > .ulTool {
                float: left;
                position: relative;
                display: inline-block;
                margin: 0 20px 0 0;
            }

                .popupDrawingArea > .topArea > .toolbarArea > .ulTool > li {
                    position: relative;
                    float: left;
                    margin: -10px 20px 0 0;
                    width: 40px;
                    height: 60px;
                    background-image: url('../Images/common/iconDrawing.png');
                    background-repeat: no-repeat;
                    opacity: 0.3;
                }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulTool > li:hover {
                        cursor: pointer;
                        margin-top: -5px;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulTool > li > p {
                        margin-top: 20px;
                        width: 40px;
                        color: #fff;
                        font-size: 11px;
                        letter-spacing: -1px;
                        background-color: #000;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulTool > li.marker {
                        background-position: 4px -58px;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulTool > li.pen {
                        background-position: -58px -58px;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulTool > li.eraser {
                        background-position: -117px -58px;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulTool > li.text {
                        background-position: -178px -58px;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulTool > li.rectangle {
                        background-position: 0px 58px;
                    }

                        .popupDrawingArea > .topArea > .toolbarArea > .ulTool > li.rectangle > div {
                            position: absolute;
                            left: 0px;
                            top: 10px;
                            width: 40px;
                            height: 40px;
                            border: 2px solid #fff;
                        }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulTool > li.circle {
                        background-position: 0px 58px;
                    }

                        .popupDrawingArea > .topArea > .toolbarArea > .ulTool > li.circle > div {
                            position: absolute;
                            left: 0px;
                            top: 10px;
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            border: 2px solid #fff;
                        }

                    .popupDrawingArea > .topArea > .toolbarArea > .ulTool > li.Selected {
                        opacity: 1;
                    }

            .popupDrawingArea > .topArea > .toolbarArea > .divThickness {
                float: left;
                position: relative;
                display: inline-block;
                margin-top: -5px;
                width: 120px;
                text-align: left;
            }

                .popupDrawingArea > .topArea > .toolbarArea > .divThickness > .btnThickness {
                    position: relative;
                    display: inline-block;
                    padding: 10px;
                    width: 120px;
                }

                    .popupDrawingArea > .topArea > .toolbarArea > .divThickness > .btnThickness:hover {
                        cursor: pointer;
                        background-color: #5c7284;
                    }

                    .popupDrawingArea > .topArea > .toolbarArea > .divThickness > .btnThickness > span.iconArrow {
                        position: absolute;
                        top: 10px;
                        right: 13px;
                        width: 20px;
                        height: 20px;
                        background-image: url('../Images/common/iconDrawing.png');
                        background-repeat: no-repeat;
                        background-position: -80px 0px;
                    }

                .popupDrawingArea > .topArea > .toolbarArea > .divThickness .txtName {
                    display: inline-block;
                    font-size: 12px;
                    color: #fff;
                    height: 20px;
                }

                .popupDrawingArea > .topArea > .toolbarArea > .divThickness > .ulThickness {
                    display: none;
                    padding: 20px 0px;
                    background-color: #000;
                }

                    .popupDrawingArea > .topArea > .toolbarArea > .divThickness > .ulThickness > li {
                        padding: 20px 10px;
                    }

                        .popupDrawingArea > .topArea > .toolbarArea > .divThickness > .ulThickness > li:hover {
                            cursor: pointer;
                            background-color: #5c7284;
                        }

                        .popupDrawingArea > .topArea > .toolbarArea > .divThickness > .ulThickness > li.Selected {
                            background-color: #15a4fa;
                        }

                .popupDrawingArea > .topArea > .toolbarArea > .divThickness .line {
                    width: 100px;
                    background-color: #fff;
                }

                .popupDrawingArea > .topArea > .toolbarArea > .divThickness .Thickness1 {
                    height: 4px;
                }

                .popupDrawingArea > .topArea > .toolbarArea > .divThickness .Thickness2 {
                    height: 6px;
                }

                .popupDrawingArea > .topArea > .toolbarArea > .divThickness .Thickness3 {
                    height: 10px;
                }

                .popupDrawingArea > .topArea > .toolbarArea > .divThickness .Thickness4 {
                    height: 16px;
                }

    .popupDrawingArea > .divDrawingArea {
        margin-top: 60px;
        display: inline-flex;
        align-items: center;
        width: 100%;
        height: calc(100% - 60px);
        text-align: center;
        overflow-x: auto;
        overflow-y: auto;
    }

        .popupDrawingArea > .divDrawingArea > canvas {
            margin: 0 auto;
        }
/*1-2. As Report*/
.ASSearchAreaOpen {
    animation: aniLeftAreaOpen 0.5s ease 1 forwards;
}

.ASSearchAreaClose {
    animation: aniLeftAreaClose 0.5s ease 1 forwards;
}

@keyframes aniLeftAreaOpen {
    0% {
        opacity: 0;
        width: 0px;
    }

    100% {
        opacity: 1;
        width: 250px;
        visibility: visible;
    }
}

@keyframes aniLeftAreaClose {
    0% {
        opacity: 1;
        width: 250px;
    }

    100% {
        opacity: 0;
        width: 0px;
        visibility: collapse;
    }
}

/*1. 검색영역*/
.leftQueryArea {
    height: 100%;
    flex-shrink: 0;
}

form.ASSearchOptionForm {
    display: none; /*180905 김슬기 수정*/
    width: 260px;
    height: 100%;
    float: left;
    background-color: #222b32;
    /*overflow-y: auto;*/
}

.AsReport form .queryArea {
    background-color: #222b32;
    /*height:calc(100%);*/
    width: 100%;
    float: left;
    border-right: 1px solid #394147;
    height: 100%;
    text-align: center;
    /*overflow-y: auto;*/
}

    .AsReport form .queryArea .btnReset {
        display: inline-block;
        margin: 10px 0 0 0;
        width: 90%;
        height: 30px;
        color: #aaa;
        text-align: center;
        font-size: 12px;
        border-radius: 15px;
        border: 1px solid #aaa;
        background-color: transparent;
        cursor: pointer; /*180913 김슬기 추가*/
    }

    /*@media only screen and (max-width : 1130px) {
    .AsReport form > .queryArea {
        background-color: #222b32;
        height:calc(100%);
        width: 250px;
        float: left;
        border-right: 1px solid #394147;
    }
}
@media only screen and (min-width : 1130px) {
    .AsReport form > .queryArea {
        background-color: #222b32;
        height: 100%;
        width: 250px;
        float: left;
        border-right: 1px solid #394147;
    }
}*/
    /*.AsReport form > .queryArea{
    background-color:#222b32;    
    height:100%;
    width:250px;
    float:left;
    border-right:1px solid #394147;
}*/

    .AsReport form .queryArea .queryInputArea {
        position: relative;
        height: 55px;
        text-align: left;
        border-bottom: 1px solid #394147;
    }

        .AsReport form .queryArea .queryInputArea.Date:after {
            content: '';
            position: absolute;
            right: 20px;
            top: 22px;
            width: 17px;
            height: 16px;
            background-image: url('../Images/common/imgDateWhite.png');
            background-repeat: no-repeat;
            opacity: .7
        }

.AsReport .AsListArea .dashboardArea .queryInputArea {
    float: left;
    height: 60px;
    position: relative;
    border-right: 1px solid rgba(255,255,255,0.3);
    width: 240px; /*181106 김슬기 추가*/
}

    .AsReport form .queryArea .queryInputArea > .inputQuery,
    .AsReport .AsListArea .dashboardArea .queryInputArea > .inputQuery {
        width: calc(100% - 45px); /*181029 김슬기 수정 / calc(100% - 43px) -> calc(100% - 45px) / 우측이 조금 잘려서 width를 줄여줌.*/
        height: 100%;
        padding: 0px 8px; /*190103 김슬기 수정 / 0 45 0 8 -> 0 8 / 우측에 여백이 너무 많아서 좌측과 동일하게 수정*/
        color: #fff;
        font-size: 16px;
        letter-spacing: -1px;
        background-color: #222b32;
        border: 0px;
    }

        .AsReport form .queryArea .queryInputArea > .inputQuery:focus,
        .AsReport .AsListArea .dashboardArea .queryInputArea > .inputQuery:focus {
            border: 2px solid #15a4fa;
        }

        .AsReport form .queryArea .queryInputArea > .inputQuery.width100 {
            width: 100%;
            padding-left: 10px;
        }

    .AsReport form .queryArea .queryInputArea > .btnQuery,
    .AsReport .AsListArea .dashboardArea .queryInputArea > .btnQuery {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 45px;
        height: 54px;
        background-color: #222b32;
        border: 0px;
        background-image: url('../Images/common/btnQuery.png');
        background-repeat: no-repeat;
        background-position: center;
    }

    .AsReport .AsListArea .dashboardArea .queryInputArea > .btnQuery {
        height: 60px;
    }

        .AsReport form .queryArea .queryInputArea > .btnQuery:hover,
        .AsReport .AsListArea .dashboardArea .queryInputArea > .btnQuery:hover {
            cursor: pointer;
            background-color: #15a4fa;
        }

.AsReport form .queryArea .stateArea {
    height: 55px;
    border-bottom: 1px solid #394147;
}

    .AsReport form .queryArea .stateArea > .ulState {
    }

        .AsReport form .queryArea .stateArea > .ulState::after {
            clear: both;
        }

        .AsReport form .queryArea .stateArea > .ulState > li {
            float: left;
            height: 55px;
            width: 33.333%;
            color: #5c7284;
            font-size: 16px;
            letter-spacing: -1px;
            text-align: center;
            padding-top: 16px;
        }

            .AsReport form .queryArea .stateArea > .ulState > li:hover {
                cursor: pointer;
                background-color: #2b3a46;
            }

            .AsReport form .queryArea .stateArea > .ulState > li.selected {
                background-color: #15a4fa;
                color: #fff;
            }

                .AsReport form .queryArea .stateArea > .ulState > li.selected:hover {
                    background-color: #15a4fa;
                    color: #fff;
                }

.AsReport form .queryArea .comboboxArea {
    position: relative;
    height: 55px;
    text-align: left;
    border-bottom: 1px solid #394147;
    padding: 3px 5px;
    background: url(../Images/common/imgComboArrowWhite.png) no-repeat top 15px right 10px;
    cursor: default; /*181030 김슬기 수정 / cursor: pointer -> default / cursor를 txtValue로 옮김*/
}

    .AsReport form .queryArea .comboboxArea > .btnArrow {
        cursor: pointer;
        position: absolute;
        right: 12px;
        bottom: 5px;
        width: 35px;
        height: 35px;
        background-color: rgba(0,0,0,0);
    }

        .AsReport form .queryArea .comboboxArea > .btnArrow:hover {
            background-color: rgba(255,255,255,0.1);
        }

    .AsReport form .queryArea .comboboxArea > .ulComboItem {
        top: 50px; /*200924 김슬기 수정 / 60 -> 50 / 콤보박스가 밑으로 떨어져서 수정함. */
        bottom: auto;
    }

        .AsReport form .queryArea .comboboxArea > .ulComboItem.DirectionTop {
            top: auto;
            bottom: 15px;
        }

    .AsReport form .queryArea .comboboxArea:last-child {
        margin-bottom: 30px;
    }

    .AsReport form .queryArea .comboboxArea p {
        /* display: flex; */
        /* justify-content: space-between; */
        /* padding-left: 5px; */
    }

    .AsReport form .queryArea .comboboxArea .txtCaption {
        display: flex;
        justify-content: space-between;
        padding-left: 3px;
        font-size: 13px;
        letter-spacing: -1px;
        color: #5c7284;
    }

    .AsReport form .queryArea .comboboxArea > .txtValue {
        font-size: 16px;
        letter-spacing: -1px;
        color: #fff;
        padding: 7px 0 0 8px;
    }

    .AsReport form .queryArea .comboboxArea > input.txtValue {
        font-size: 16px;
        letter-spacing: -1px;
        padding: 0 0 0 5px; /*181029 김슬기 수정 / 0 30px 0 5px > 0 0 0 5px / 우측이 짤려서 우측 padding 제거*/
        display: block;
        background-color: transparent;
        border: 1px solid rgba(255,255,255,.0);
        width: calc(100% - 35px);
        height: 30px;
        cursor: pointer; /*181030 김슬기 추가*/
    }

        .AsReport form .queryArea .comboboxArea > input.txtValue:focus {
            border: 2px solid #15a4fa;
        }


.AsReport form .queryArea .comboboxAreaDisable {
    position: relative;
    height: 65px;
    border-bottom: 1px solid #394147;
}

    .AsReport form .queryArea .comboboxAreaDisable > .txtCaption {
        display: inline-block;
        font-size: 13px;
        letter-spacing: -1px;
        color: #5c7284;
        padding: 10px 0 0 8px;
    }

    .AsReport form .queryArea .comboboxAreaDisable > .txtValue {
        font-size: 16px;
        letter-spacing: -1px;
        color: #fff;
        padding: 5px 0 0 8px;
    }


/*2. AS 리스트 영역*/
/*.AsReport .AsListArea {
    width: 750px;
    height:100%;
    height:calc(100% - 70px);
    float:left;
    background-color:#f7f7f7;
}*/

.AsReport .AsListArea {
    flex-shrink: 0;
    position: relative;
    width: 625px; /*181106 김슬기 수정 / 660 -> 625 / 상단에 정보 영역이 남아서 사이즈를 줄임*/
    /*min-width:270px;*/
    height: 100%;
    float: left;
    border-right: 1px solid #aec2d2;
    background-color: #f7f7f7;
}

    .AsReport .AsListArea > .AsListAreaWarp {
        height: calc(100% - 60px);
        width: calc(100% - 4px);
        overflow-y: auto;
    }

    .AsReport .AsListArea > .dashboardArea.Partner {
        background-color: #12d0be;
    }

        .AsReport .AsListArea > .dashboardArea.Partner > .ulCount > li:first-child > .txtValue {
            color: #fff;
        }

        .AsReport .AsListArea > .dashboardArea.Partner .btnQARequst {
            /*position: absolute;*/
            /*right: 10px;*/
            /*top: 14px;*/
            height: 30px;
            padding: 0 20px;
            color: #fff;
            font-size: 13px;
            letter-spacing: -.8px;
            font-weight: bold;
            border: 1px solid #fff;
            border-radius: 15px;
            background-color: #12d0be;
        }

        .AsReport .AsListArea > .dashboardArea.Partner .btnQARequst { /*191127 김슬기 추가 / 컨설팅 문의 화면에도 검색 버튼 추가로 인해 질문 등록 버튼을 하단으로 내리기 위해 태블릿 css를 가져옴.*/
            position: fixed;
            left: 10px;
            bottom: 10px;
            top: auto;
            right: auto;
            z-index: 10;
        }

            .AsReport .AsListArea > .dashboardArea.Partner .btnQARequst:hover {
                cursor: pointer;
                color: #12d0be;
                background-color: #fff;
            }

    .AsReport .AsListArea > .dashboardArea {
        position: relative;
        background-color: #222b32;
        height: 60px; /*181106 김슬기 수정 / 55 -> 60 / 하단에 여백이 너무 없어서 수정*/
    }

        .AsReport .AsListArea > .dashboardArea > .btnExpander {
            float: left;
            display: flex;
            align-items: center;
            width: 30px;
            height: 100%;
            border-right: 1px solid rgba(255,255,255,0.3);
        }

            .AsReport .AsListArea > .dashboardArea > .btnExpander > i {
                display: inline-block;
                width: 30px;
                height: 30px;
                background-image: url("../Images/common/iconGroup.png");
                background-repeat: no-repeat;
            }

            .AsReport .AsListArea > .dashboardArea > .btnExpander.Close > i {
                background-position: -102px -297px;
            }

            .AsReport .AsListArea > .dashboardArea > .btnExpander.Open > i {
                background-position: -139px -297px;
            }

            .AsReport .AsListArea > .dashboardArea > .btnExpander:hover {
                cursor: pointer;
                background-color: rgba(0,0,0,0.2);
            }


    .AsReport .AsListArea .dashboardArea .dateArea {
        display: inline-flex;
        align-items: center;
        float: left;
        height: 100%;
        border-right: 1px solid rgba(255,255,255,0.3);
    }

        .AsReport .AsListArea .dashboardArea .dateArea > .txtDescription {
            display: inline-block;
            color: #fff;
            height: 100%;
            padding-top: 26px;
        }

        .AsReport .AsListArea .dashboardArea .dateArea > .dateInput {
            display: inline-block;
            width: 100px;
        }

            .AsReport .AsListArea .dashboardArea .dateArea > .dateInput > dt {
                font-size: 12px;
                letter-spacing: -1px;
                color: rgba(255,255,255,0.5);
                padding-left: 8px;
            }

            .AsReport .AsListArea .dashboardArea .dateArea > .dateInput > dd > .inputDate {
                border: 0px;
                font-size: 16px;
                width: 100%;
                color: #fff;
                padding: 0 8px;
                background-color: transparent;
                cursor: pointer;
            }

        .AsReport .AsListArea .dashboardArea .dateArea > .txtCaption {
            display: inline-block;
            /*padding-top: 30px;*/ /*180905 김슬기 주석*/
            width: 20px;
            float: left;
            color: #fff;
            text-align: center;
        }

    .AsReport .AsListArea > .dashboardArea > .checkTransferred {
        display: none; /*이관건 처리상태 정렬항목으로 추가 됨*/
        position: absolute;
        right: 10px;
        top: 12px;
        color: #5c7284;
        font-size: 13px;
        cursor: pointer;
    }

        .AsReport .AsListArea > .dashboardArea > .checkTransferred > span {
            display: inline-block;
            width: 18px;
            height: 11px;
            background-image: url("../Images/common/iconGroup.png");
            background-repeat: no-repeat;
            background-position: -151px -234px;
            margin-right: 6px;
        }

        .AsReport .AsListArea > .dashboardArea > .checkTransferred.selected {
            color: #15a4fa;
        }

            .AsReport .AsListArea > .dashboardArea > .checkTransferred.selected > span {
                background-position: -199px -234px;
            }

    .AsReport .AsListArea > .dashboardArea > .ulCount {
        display: inline-block;
        height: 100%;
        /*width:calc(100% - 260px);*/
        overflow: hidden;
    }

        .AsReport .AsListArea > .dashboardArea > .ulCount::after {
            clear: both;
        }

        .AsReport .AsListArea > .dashboardArea > .ulCount > li {
            float: left;
            height: 100%;
            min-width: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
            /*cursor: pointer;*/ /*181204 김슬기 주석 / 해당 영역에 click 이벤트 제거함*/
        }

            .AsReport .AsListArea > .dashboardArea > .ulCount > li:hover {
                cursor: pointer;
                background-color: rgba(255,255,255,0.2);
            }

            .AsReport .AsListArea > .dashboardArea > .ulCount > li.line {
                border-left: 1px solid rgba(255,255,255,0.2);
            }

            .AsReport .AsListArea > .dashboardArea > .ulCount > li > .txtCaption {
                text-align: center;
                font-size: 12px;
                color: rgba(255,255,255,0.7);
            }

            .AsReport .AsListArea > .dashboardArea > .ulCount > li > .txtValue {
                text-align: center;
                font-size: 21px;
                line-height: 24px;
                font-weight: bold;
                color: #fff;
            }

            .AsReport .AsListArea > .dashboardArea > .ulCount > li.Selected {
                background-color: #15a4fa;
            }

            .AsReport .AsListArea > .dashboardArea > .ulCount > li.Partner > p {
                color: #59968a;
            }

            .AsReport .AsListArea > .dashboardArea > .ulCount > li[data-code="ERPEscalation"] > p {
                color: #b060ff;
            }

            .AsReport .AsListArea > .dashboardArea > .ulCount > li.Partner.Selected {
                background-color: #4CC6AE;
            }

            .AsReport .AsListArea > .dashboardArea > .ulCount > li[data-code="ERPEscalation"].Selected {
                background-color: #b060ff;
            }

                .AsReport .AsListArea > .dashboardArea > .ulCount > li.Partner.Selected > p,
                .AsReport .AsListArea > .dashboardArea > .ulCount > li[data-code="ERPEscalation"].Selected > p {
                    color: #fff;
                }

    .AsReport .AsListArea > .dashboardArea .divSort {
        /*position:absolute;
            right:3px;
            top: 0px;*/
        display: inline-block;
        border-left: 1px solid rgba(255,255,255,0.3);
        height: 100%;
        padding: 8px 0 0 8px;
        margin-right: 5px;
    }

        .AsReport .AsListArea > .dashboardArea .divSort > .txtCaption {
            color: #fff;
            font-size: 12px;
        }

        .AsReport .AsListArea > .dashboardArea .divSort .tbtnSort {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 37px;
            background-color: #15a4fa;
            background-image: url("../Images/common/iconGroup.png");
            background-repeat: no-repeat;
        }

            .AsReport .AsListArea > .dashboardArea .divSort .tbtnSort.Ascend {
                background-position: -8px -257px;
            }

    .AsReport .AsListArea > .dashboardArea .tbtnSort.Descend {
        background-position: -50px -257px;
    }

    .AsReport .AsListArea > .dashboardArea .divSort .tbtnSort:hover {
        cursor: pointer;
        background-color: #5c7284;
    }

    .AsReport .AsListArea > .dashboardArea .divSort .combobox {
        position: relative;
        display: inline-block;
        float: left;
    }

        .AsReport .AsListArea > .dashboardArea .divSort .combobox > .txtCaption { /*181106 김슬기 추가*/
            text-align: left;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
            padding: 2px 0 0 0px;
        }

        .AsReport .AsListArea > .dashboardArea .divSort .combobox > .ValueArea {
            cursor: pointer;
            /*display:inline-flex;
                align-items:center;*/
            width: 100px;
            background: url('../Images/common/imgComboArrowWhite.png') no-repeat center right;
            padding: 2px 35px 0px 6px;
            color: #fff;
            font-size: 12px;
            padding: 2px 0 0 0;
            height: 25px;
        }

            .AsReport .AsListArea > .dashboardArea .divSort .combobox > .ValueArea:hover {
                color: #15a4fa;
            }

            .AsReport .AsListArea > .dashboardArea .divSort .combobox > .ValueArea > .txtCaption {
                display: block;
                opacity: 0.5;
            }

            .AsReport .AsListArea > .dashboardArea .divSort .combobox > .ValueArea > .txtValue {
                font-size: 16px;
                font-weight: bold;
                vertical-align: middle;
            }

    .AsReport .AsListArea > .AsListAreaWarp .ulAsList {
        margin: 0px;
    }

        .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            position: relative;
            padding: 16px 10px 16px 30px;
            border: 0px solid #15a4fa;
            border-bottom: 1px solid #fff;
        }

            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.on {
                background-color: #fff !important;
            }

            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li:hover {
                cursor: pointer;
                background-color: #e7f3fb;
            }

            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li > .txtTitle {
                width: 100%;
                padding-right: 70px;
                font-size: 16px;
                letter-spacing: -1px;
                /*font-weight:bold;*/
            }

                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li > .txtTitle > .txtNo {
                    display: block;
                    font-size: 13px;
                    letter-spacing: -.5px;
                }

                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li > .txtTitle > .iconReply {
                    display: inline-block;
                    margin-left: 8px;
                    padding: 4px 12px;
                    height: 24px;
                    border-radius: 12px;
                    background-color: #15a4fa;
                    color: #fff;
                    font-size: 12px;
                    /*font-weight:bold;*/
                    text-align: center;
                }

            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li > .txtDescription {
                width: 100%;
                padding-right: 100px;
            }

                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li > .txtDescription.txtDetailContent { /*181023 김슬기 추가 / 검색 후 상세보기는 한줄에 보여주기 위함*/
                    width: 80%;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li > .txtDescription > span {
                    font-size: 12px;
                    letter-spacing: -.5px;
                    color: #4e5960;
                }

            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li > .divDate {
            }

            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li > .divDate {
                position: absolute;
                right: 12px;
                top: 50%;
                transform: translateY(-50%);
                text-align: right;
            }

                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li > .divDate > .txtEmergency {
                    display: inline-block;
                    padding: 0 6px;
                    height: 20px;
                    color: #fff;
                    font-size: 11px;
                    border: 1px solid #eb5252;
                    border-radius: 10px;
                    background-color: #eb5252;
                }


                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li > .divDate > .txtDate {
                    display: block;
                    font-size: 12px;
                    color: #4e5960;
                    line-height: 16px;
                }

            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.selected {
                background-color: #fff;
                margin-right: -10px;
            }
            /*완료*/
            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.complate {
                background: #f7f7f7 url('../Images/common/iconCheckGray.png') no-repeat 0px 10px;
            }

                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.complate > .txtTitle {
                    color: #5c7284;
                }

                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.complate > .txtCanceled {
                    text-decoration: line-through;
                }

                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.complate > .divDate > .txtDate,
                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.complate > .txtDescription > span {
                    color: #5c7284;
                }
            /*답변완료*/
            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.replyComplate {
                opacity: 0.6;
            }
            /*대기*/
            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.standby {
                border-left-width: 5px;
            }

                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.standby > .txtDescription > span,
                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.standby > .divDate > .txtDate {
                    color: #15a4fa;
                }

            /*긴급*/
            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.emergency {
                border-left-color: #ff6e40;
            }

                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.emergency > .txtDescription > span,
                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.emergency > .divDate > .txtDate {
                    color: #ff6e40;
                }
            /*이관, 파트너Q&A*/
            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.partner {
                border-left-color: #4CC6AE;
            }

                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.partner > .divDate > .txtTransfer {
                    display: inline-block;
                }

                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.partner > .txtDescription > span,
                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.partner > .divDate > .txtDate {
                    color: #4CC6AE;
                }

                .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li.partner > .txtTitle > .iconReply {
                    background-color: #4CC6AE;
                }

            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li > .divDate > .txtConsulting {
                display: inline-block; /*181123 김슬기 수정*/
                padding: 0 6px;
                height: 20px;
                color: #4CC6AE;
                font-size: 11px;
                border: 1px solid #4CC6AE;
                border-radius: 10px;
            }

            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li > .divDate > .txtTransfer {
                display: inline-block;
                padding: 0 6px;
                height: 20px;
                color: #fff;
                background-color: #4CC6AE;
                font-size: 11px;
                border: 1px solid #4CC6AE;
                border-radius: 10px;
            }

            .AsReport .AsListArea > .AsListAreaWarp .ulAsList > li > .divDate > .txtShare {
                display: inline-block;
                padding: 0 6px;
                height: 20px;
                color: #15a4fa;
                background-color: #fff;
                font-size: 11px;
                border: 1px solid #15a4fa;
                border-radius: 10px;
            }

/*3.AS Datail*/
/*.AsReport.AsDatailArea {
    width: calc(100% - 1000px);
    min-width : 100px;
    height:calc(100% - 70px);
    float:left;
    background-color:#fff;
    overflow:hidden;

}*/


.AsReport .AsDatailAreaArticle {
    position: relative;
    width: 100%; /*181106 김슬기 수정*/
    min-width: 460px;   /*210202 김슬기 추가 / 혜진님 대신 추가함.*/
    height: 100%;
    float: left;
    background-color: #fff;
    overflow: auto;
    /*cursor: default;*/
}

.AsReport .AsDatailArea {
    height: 100%;
    overflow: hidden;
}
    /*.AsReport.AsDatailArea:hover {
overflow:auto;}*/
    .AsReport .AsDatailArea > .asMessageArea {
        /*min-width: 750px;*/
        padding: 0 15px;
        height: 410px;
        position: relative;
    }

        .AsReport .AsDatailArea > .asMessageArea > .titleArea {
            position: relative;
            padding-top: 25px;
            height: 80px;
            /* width: calc(100% - 200px); */
        }

            .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtReOpenAs {
                position: absolute;
                display: inline-block;
                top: 0px;
                padding: 4px 8px;
                font-size: 13px;
                letter-spacing: -1px;
                background-color: #354052;
                border-radius: 0 0 5px 5px;
                color: #bbb;
            }

                .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtReOpenAs > .txtReServiceNo {
                    color: rgba(255,255,255,0.5);
                }

                    .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtReOpenAs > .txtReServiceNo:hover {
                        cursor: pointer;
                        color: #15a4fa;
                    }

                .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtReOpenAs > .txtServiceNo {
                    color: #fff;
                }

                .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtReOpenAs > .txtDate {
                    display: inline-block;
                    color: #fff;
                }

                .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtReOpenAs > span + span:before {
                    content: ' ㅣ ';
                }

            .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtDescription {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                font-size: 13px;
                letter-spacing: -1px;
                color: #5c7284;
                margin-bottom: 5px;
            }

                .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtDescription .iconServicemodel {
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0 5px;
                    height: 20px;
                    border-radius: 10px;
                    font-size: 11px;
                    background-color: #E0F3FF;
                    color: #15A4FA;
                }

                    .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtDescription .iconServicemodel.Ace {
                        background-color: #CAE8D5;
                        color: #0A8C38;
                    }

                .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtDescription > span {
                    font-size: 13px;
                    letter-spacing: -.6px;
                    color: #5c7284;
                    margin-right: 5px;
                }

                    .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtDescription > span + span {
                        border-left: 1px solid #ccc;
                        padding-left: 5px;
                    }

                    .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtDescription > span.txtPartner {
                        color: #4CC6AE;
                    }

                .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtDescription .iconEmail,
                .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtDescription .iconArrow {
                    display: inline-block;
                    margin-right: 5px;
                    width: 16px;
                    height: 10px;
                    background-image: url('../../Images/common/iconReply.png');
                    background-position: 0 -54px;
                }

                    .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtDescription .iconEmail.Partner {
                        background-position: -22px -54px;
                    }

                .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtDescription .iconArrow {
                    background-position: -47px -54px;
                }

            .AsReport .AsDatailArea > .asMessageArea > .titleArea > .btnServiceActionArea {
                position: absolute;
                right: 0;
                top: 5px;
            }

                .AsReport .AsDatailArea > .asMessageArea > .titleArea > .btnServiceActionArea > .btn {
                    display: inline-block;
                    padding: 0 10px;
                    height: 20px;
                    font-size: 12px;
                    color: #15a4fa;
                    border: 1px solid #15a4fa;
                    border-radius: 10px;
                    background-color: #fff;
                }

                    .AsReport .AsDatailArea > .asMessageArea > .titleArea > .btnServiceActionArea > .btn:hover {
                        cursor: pointer;
                        box-shadow: rgba(0,0,0,0.2)3px 3px 3px;
                    }

                    .AsReport .AsDatailArea > .asMessageArea > .titleArea > .btnServiceActionArea > .btn.Del {
                        color: #eb5252;
                        border: 1px solid #eb5252;
                    }

                    .AsReport .AsDatailArea > .asMessageArea > .titleArea > .btnServiceActionArea > .btn.On { /*190612 김슬기 추가 / 이미 이관됐을 경우 구분하기 위해 On 스타일 추가*/
                        background-color: #15a4fa;
                        color: #fff;
                    }

            .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtTitle {
                position: relative;
                width: 100%;
                margin: 5px 0;
            }

                .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtTitle > .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: #4e5960;
                    letter-spacing: -1px;
                    word-break: break-all;
                }

                .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtTitle > .iconState {
                    display: inline-block;
                    height: 20px;
                    padding: 0 8px;
                    margin-right: 4px;
                    font-size: 12px;
                    letter-spacing: -1px;
                    text-align: center;
                    line-height: 20px;
                    color: #fff;
                    background-color: #15a4fa;
                    border: 1px solid #15a4fa;
                    border-radius: 10px;
                }

                    .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtTitle > .iconState.standby {
                    }

                    .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtTitle > .iconState.replyComplate {
                        border: 1px solid #aaa;
                        color: #333;
                        background-color: #fff;
                    }

                    .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtTitle > .iconState.complate {
                        background-color: #aaa;
                        border: 1px solid #aaa;
                    }

                    .AsReport .AsDatailArea > .asMessageArea > .titleArea > .txtTitle > .iconState.transfer {
                        border: 1px solid #4CC6AE;
                        color: #4cc6ae;
                        background-color: #fff;
                    }

        /*AS컨텐츠 접기*/
        .AsReport .AsDatailArea > .asMessageArea > .contentsArea.Open {
            /*animation: aniAsContentsOpen 0.5s ease 1 forwards;*/
        }

        .AsReport .AsDatailArea > .asMessageArea > .contentsArea.Close {
            /*animation: aniAsContentsClose 0.5s ease 1 forwards;*/
        }

@keyframes aniAsContentsOpen {
    0% {
        opacity: 0;
        visibility: visible;
        height: 0px;
    }

    100% {
        opacity: 1;
        height: Auto;
    }
}

@keyframes aniAsContentsClose {
    0% {
        opacity: 1;
        height: 100px;
    }

    100% {
        opacity: 0;
        height: 0px;
        visibility: collapse;
    }
}

.AsReport .AsDatailArea > .asMessageArea > .contentsArea {
    width: calc(100% - 200px);
    padding: 20px 0 0 0;
    height: calc(100% - 85px);
    border-top: 1px solid #dfdfdf;
    /* border-bottom: 1px solid #dfdfdf; */
    display: inline-flex;
    flex-direction: column;
}

    .AsReport .AsDatailArea > .asMessageArea > .contentsArea > .txtAsMessage {
        height: 100%;
        overflow-y: auto;
        font-size: 13px;
        line-height: 24px;
        word-break: break-all;
        white-space: pre-wrap; 
        /* 2024.12.04 김경훈 : 띄어쓰기를 통해 들여쓰기를 하려고 하는데, 설정하지 않으면 구분이 되지않는다하여 수정- 와이이 윤삼혁님-> 주혜정님 요청*/
    }

.AsReport .AsDatailArea > .asMessageArea .btnContentsExpander {
    position: relative;
    float: right;
    background-color: #b9c1c6;
    padding: 4px 8px 4px 8px;
    color: #fff;
    font-size: 12px;
    letter-spacing: -1px;
}

    .AsReport .AsDatailArea > .asMessageArea .btnContentsExpander > .arrow {
        display: inline-block;
        width: 15px;
        height: 15px;
        margin-left: 6px;
        background-image: url('../Images/common/iconGroup.png');
        background-repeat: no-repeat;
    }

    .AsReport .AsDatailArea > .asMessageArea .btnContentsExpander.Open > .arrow {
        background-position: -63px -302px;
    }

    .AsReport .AsDatailArea > .asMessageArea .btnContentsExpander.Close > .arrow {
        background-position: -20px -302px;
    }

    .AsReport .AsDatailArea > .asMessageArea .btnContentsExpander:hover {
        cursor: pointer;
        background-color: #15a4fa;
    }

.AsReport .AsDatailArea > .asMessageArea > .ulTerms {
    position: absolute;
    display: inline-block;
    right: 0;
    top: 80px;
    padding: 0px 10px;
    width: 215px;
    height: calc(100% - 78px);
    background-color: #fff;
    border-left: 1px solid #dfdfdf;
    border-top: 1px solid #dfdfdf;
}

    .AsReport .AsDatailArea > .asMessageArea > .ulTerms ::after {
        clear: both;
    }

    .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li {
        /* float: left; */
        padding: 4px 10px 0 0;
        width: 100%;
    }

        .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li:last-child {
            margin-right: 0px;
        }

        .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li .txtCaption {
            font-size: 12px;
            color: #666;
            letter-spacing: -1px;
        }

        .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li > .combobox {
            position: relative;
        }

            .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li > .combobox > .txtValue {
                cursor: pointer;
                text-align: left;
                margin: 4px 0px 0 0;
                border: 1px solid #dbdbdb;
                background: #fff url('../Images/common/imgComboArrowGray.png') no-repeat center right;
                padding: 3px 27px 0px 5px;
                height: 25px;
                color: #333;
                font-size: 13px;
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis; /*200323 김슬기 추가 / 글씨가 넘쳐보여서 추가함.*/
            }

                .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li > .combobox > .txtValue:hover {
                    cursor: pointer;
                    color: #15a4fa;
                }

            .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li > .combobox.Dis > .txtValue {
                cursor: not-allowed !important;
                color: #888;
                background-color: #eee;
            }

        .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li .inputText {
            padding: 2px 5px 4px 5px;
            height: 26px;
            color: #333;
            font-size: 13px;
            width: 100%;
            border: 1px solid #dbdbdb;
            margin: 3px 0px 0 0;
            letter-spacing: -1px;
        }

            .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li .inputText:hover {
                border: 2px solid #15a4fa;
            }

            .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li .inputText.Dis,
            .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li .inputText:disabled { /*190418 김슬기 추가*/
                cursor: not-allowed;
                color: #888;
                background-color: #eee;
                border: 1px solid #dbdbdb;
            }

        .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li.btn {
            text-align: center;
            padding: 3px;
        }

        .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li > .btn {
            display: inline-block;
            padding: 0 10px;
            height: 20px;
            font-size: 12px;
            color: #5c7284;
            border: 1px solid #5c7284;
            border-radius: 10px;
            background-color: #fff;
        }

            .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li > .btn:hover {
                cursor: pointer;
                box-shadow: rgba(0,0,0,0.2)3px 3px 3px;
            }

        .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li.dateArea {
            display: flex;
            align-items: flex-end;
        }

            .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li.dateArea > div {
                width: 100%
            }

                .AsReport .AsDatailArea > .asMessageArea > .ulTerms > li.dateArea > div + div {
                    margin-left: 5px;
                }
/*4.답변리스트*/
.AsReport .AsDatailArea > .replyListArea.Expander {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 78px);
    overflow: hidden;
}

.AsReport .AsDatailArea > .replyListArea {
    position: absolute;
    /*min-width: 750px;*/
    left: 0;
    bottom: 0;
    display: inline-block;
    width: 100%;
    height: calc(100% - 410px);
    border-top: 1px solid #aec2d2;
    background-color: #c3d2ec;
    /*transition: height .3s;*/
    overflow: hidden;
}

    .AsReport .AsDatailArea > .replyListArea > .txtTitle {
        position: relative;
        padding: 10px;
        color: rgba(0,0,0,0.6);
        letter-spacing: -1px;
        font-weight: bold;
        border-bottom: 1px solid rgba(0,0,0,0.2);
    }
    /*160805 김슬기 추가*/
    .AsReport .AsDatailArea > .replyListArea > .right {
        position: absolute;
        display: flex;
        align-items: center;
        top: 5px;
        right: 5px;
        text-align: right;
    }

        .AsReport .AsDatailArea > .replyListArea > .right > .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 30px;
            margin-right: 10px;
            border-right: 1px solid rgba(0,0,0,0.2);
        }

            .AsReport .AsDatailArea > .replyListArea > .right > .btn:hover {
                cursor: pointer;
                background-color: rgba(0,0,0,0.1);
            }

            .AsReport .AsDatailArea > .replyListArea > .right > .btn > i {
                display: inline-block;
                width: 20px;
                height: 20px;
                background-image: url('../../Images/common/iconReply.png');
                background-position: -57px -27px;
            }

    .AsReport .AsDatailArea > .replyListArea.Expander > .right > .btn > i {
        background-position: -85px -27px;
    }

    .AsReport .AsDatailArea > .replyListArea > .right ol.listRule > li {
        float: left;
        font-size: 12px;
        letter-spacing: -1px;
    }

        .AsReport .AsDatailArea > .replyListArea > .right ol.listRule > li:hover {
            cursor: pointer;
        }

        .AsReport .AsDatailArea > .replyListArea > .right ol.listRule > li > span {
            color: rgba(0,0,0,0.6);
        }

    .AsReport .AsDatailArea > .replyListArea > .right > .listRule > li > .arrow {
        display: inline-block;
        width: 15px;
        height: 15px;
        background-image: url('../Images/common/iconGroup.png');
        background-repeat: no-repeat;
    }

    .AsReport .AsDatailArea > .replyListArea > .right > .listRule > .sortDesc > .arrow {
        background-position: -20px -302px;
    }

    .AsReport .AsDatailArea > .replyListArea > .right > .listRule > .sortAsc > .arrow {
        background-position: -63px -302px;
    }
    /*160805 김슬기 추가 끝*/

    .AsReport .AsDatailArea > .replyListArea > .ulReply {
        height: calc(100% - 90px);
        padding: 16px;
        overflow-y: auto;
        padding-bottom: 0px; /*190515 김슬기 추가 / 답변 내용 하단에 여백 때문에 답변이 덜 보여서 추가*/
    }

        .AsReport .AsDatailArea > .replyListArea > .ulReply > li {
            display: flex;
            flex-direction: row;
            position: relative;
            margin-bottom: 20px;
        }

            .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .userArea {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                width: 35px;
                height: 35px;
                background-image: url('../Images/common/iconUserType.png');
                background-repeat: no-repeat;
                background-color: #7c8390;
                vertical-align: top;
                margin-top: 10px;
            }

                .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .userArea.ASManager {
                    background-color: #4CC6AE;
                    background-position: -13px -59px;
                }

                .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .userArea.YLWASManager {
                    background-color: #06754a;
                    background-position: -13px -6px;
                }

                .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .userArea.ASSystem {
                    background-color: #181e29;
                    background-position: -13px -177px;
                }

                .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .userArea.CustomerManager,
                .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .userArea.CustomerUser {
                    background-color: #15a4fa;
                    background-position: -13px -121px;
                }

                .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .userArea > span {
                    display: inline-block;
                    font-size: 16px;
                    color: #fff;
                    font-weight: bold;
                }

            /*.AsReport .AsDatailArea > .replyListArea > .ulReply > li > .userArea > span {
                    width: 15px;
                    height: 22px;
                    background-image: url('../Images/common/iconUser.png');
                    background-repeat: no-repeat;
                    background-position: 0 0;
                    opacity: .5;
                }*/

            .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea {
                display: inline-block;
                margin-left: 10px;
                position: relative;
                max-width: calc(100% - 150px);
                z-index: 0;
            }


                .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .txtName {
                    display: inline-block;
                    font-size: 13px;
                    font-weight: bold;
                    letter-spacing: -1px;
                    margin-bottom: 10px;
                }

                .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .txtDate {
                    display: inline-block;
                    font-size: 11px;
                }

                .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .iconEmail {
                    display: inline-block;
                    float: right;
                }

                    .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .iconEmail > span {
                        display: inline-block;
                        background: url('../Images/common/iconReply.png') no-repeat;
                        background-repeat: no-repeat;
                        background-position: 0 -72px;
                        width: 26px;
                        height: 16px;
                        margin-left: 50px;
                    }

                .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .iconArrow {
                    position: absolute;
                    left: -21px;
                    top: 33px;
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    border-top: 7px solid transparent;
                    border-right: 13px solid #fff;
                    border-bottom: 7px solid transparent;
                    border-left: 13px solid transparent;
                    transform: rotate(28deg);
                    z-index: -1;
                }

                .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .txtMessage {
                    background: #fff;
                    padding: 10px;
                    border-radius: 10px;
                    font-size: 13px;
                    color: #354052;
                    line-height: 20px;
                    min-height: 43px;
                    word-break: break-all;
                }

                    .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .txtMessage > .txtArea {
                        display: inline;
                        vertical-align: top;
                        white-space: pre-wrap; /* 2024.12.04 김경훈 : 띄어쓰기를 통해 들여쓰기를 하려고 하는데, 설정하지 않으면 구분이 되지않는다하여 수정- 와이이 윤삼혁님-> 주혜정님 요청*/
                    }

                        .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .txtMessage > .txtArea > a {
                            text-decoration: underline;
                        }

.AsReport .AsDatailArea .iconLocked { /*181102 김슬기 추가 / 답변 편집시 자물쇠가 보이지 않아서 추가함.*/
    display: inline-block;
    vertical-align: middle;
}

    .AsReport .AsDatailArea .iconLocked > span { /*181102 김슬기 추가 / 답변 편집시 자물쇠가 보이지 않아서 추가함.*/
        display: inline-block;
        background: url('../Images/common/iconReply.png') no-repeat;
        width: 16px;
        height: 18px;
        background-position: -60px 0;
    }

    .AsReport .AsDatailArea .iconLocked.Unlock { /*190115 김슬기 추가 / 답변이 Unlock일 경우 자물쇠를 hidden 시키기 위함.*/
        display: none;
    }

.AsReport .AsDatailArea > .replyListArea > .ulReply > li > .btnEdit {
    display: inline-block;
    margin-left: 15px;
    padding-top: 32px;
    align-self: center;
}

    .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .btnEdit > div {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 33px;
        height: 33px;
        background-color: #fff;
        border-radius: 50%;
        margin-right: 5px;
        cursor: pointer;
    }

        .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .btnEdit > div:hover {
            opacity: .8;
        }

        .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .btnEdit > div > span {
            display: inline-block;
            background: url('../Images/common/iconReply.png') no-repeat;
        }



    .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .btnEdit > .iconEdit > span {
        width: 19px;
        height: 19px;
        background-position: -86px 0;
        margin-right: 2px;
    }

    .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .btnEdit > .iconDelete > span {
        width: 20px;
        height: 18px;
        background-position: -115px 0;
    }

.AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .txtMessage > .bottomArea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}


    .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .txtMessage > .bottomArea .ulReplyFile {
        display: inline-block;
        margin-top: 10px;
    }

        .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .txtMessage > .bottomArea .ulReplyFile::after {
            clear: both;
        }

        .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .txtMessage > .bottomArea .ulReplyFile li {
            float: left;
        }

            .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .txtMessage > .bottomArea .ulReplyFile li > div {
                margin-left: 2px;
                border-radius: 50%;
                color: #fff;
                font-size: 11px;
                font-weight: bold;
                width: 33px;
                height: 33px;
                line-height: 32px;
                text-align: center;
            }

    .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .txtMessage > .bottomArea > .iconLocked {
        display: none;
    }

    .AsReport .AsDatailArea > .replyListArea > .ulReply > li > .messageArea > .txtMessage > .bottomArea > .btnEditMode {
        display: none;
    }

/*Edit Mode*/
.AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode {
}

    .AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode > .messageArea > .iconArrow {
        border-right: 13px solid #15a4fa;
    }

.AsReport .AsDatailArea > .replyListArea > .ulReply > li.Right.EditMode > .messageArea > .iconArrow {
    border-left: 13px solid #15a4fa;
}

.AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode > .messageArea > .txtMessage {
    border: 3px solid #15a4fa;
    background-color: #4e5d74;
}

    .AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode > .messageArea > .txtMessage > .txtArea {
        width: 100%; /*170511 김슬기 추가*/
        color: #fff;
        background-color: transparent;
        border: 0;
    }

    .AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode > .messageArea > .txtMessage > .iconLocked {
        display: none;
    }

    .AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode > .messageArea > .txtMessage > .bottomArea > .btnEditMode {
        display: flex;
        margin-top: 10px;
    }

        .AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode > .messageArea > .txtMessage > .bottomArea > .btnEditMode > span {
            background-color: #95a1a9;
            padding: 7px 15px;
            border-radius: 3px;
            color: #fff;
            cursor: pointer;
        }

            .AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode > .messageArea > .txtMessage > .bottomArea > .btnEditMode > span:hover {
                opacity: .8;
            }

            .AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode > .messageArea > .txtMessage > .bottomArea > .btnEditMode > span.btnOK {
                background-color: #15a4fa;
                margin-right: 5px;
            }

    .AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode > .messageArea > .txtMessage > .iconLocked {
        display: none;
    }

    .AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode > .messageArea > .txtMessage > .bottomArea .ulReplyFile {
        margin-right: 50px;
    }

    .AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode > .messageArea > .txtMessage > .bottomArea > .iconLocked {
        display: inline-block;
        margin: 10px 20px 0 0;
        cursor: pointer;
    }

        .AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode > .messageArea > .txtMessage > .bottomArea > .iconLocked.Unlock > span { /*181102 김슬기 추가 / 답변 편집시 자물쇠 잠김 아이콘이 보이지 않아서 추가함*/
            background-position: -34px 0;
        }



.AsReport .AsDatailArea > .replyListArea > .ulReply > li.EditMode > .btnEdit {
    display: none;
}

/*Right Side*/
.AsReport .AsDatailArea > .replyListArea > .ulReply > li.Right {
    flex-direction: row-reverse;
}

    .AsReport .AsDatailArea > .replyListArea > .ulReply > li.Right > .messageArea {
        margin-right: 10px;
    }

        .AsReport .AsDatailArea > .replyListArea > .ulReply > li.Right > .messageArea > .iconArrow {
            right: -21px;
            left: auto;
            transform: rotate(-28deg);
            border-top: 7px solid transparent;
            border-right: 13px solid transparent;
            border-left: 13px solid #fff;
            border-bottom: 7px solid transparent;
        }

    .AsReport .AsDatailArea > .replyListArea > .ulReply > li.Right > .btnEdit {
        margin-left: 0;
    }

/*5.답변등록*/
.AsReport .AsDatailArea > .replyListArea.AttachFileMode > .replyInputArea {
    bottom: 0;
}

.AsReport .AsDatailArea > .replyListArea.AttachFileMode .icon.AttachFile {
    background-color: #ff7346;
}

    .AsReport .AsDatailArea > .replyListArea.AttachFileMode .icon.AttachFile > i {
        background-position: -100px -71px;
    }

.AsReport .AsDatailArea > .replyListArea > .replyInputArea {
    position: absolute;
    bottom: -100px;
    left: 0;
    display: inline-block;
    width: 100%;
    /*min-width: 750px;*/
    border-top: 1px solid #ccc;
    background-color: #fff;
    transition: ease-in .3s;
}

    .AsReport .AsDatailArea > .replyListArea > .replyInputArea.ServiceComplate {
        bottom: 0px;
        padding: 0px 0 10px 0;
        text-align: center; /*181106 김슬기 추가*/
        z-index: 10;
    }
/*20181026 - 답변이 없는 경우  */

.AsReport .AsDatailArea.NotReply > .asMessageArea {
    height: calc(100% - 45px);
}

.AsReport .AsDatailArea.NotReply > .replyListArea {
    min-height: 71px; /*영림원 이관으로 최소 높이 조정 - 높이 지정하면 텍스트 박스 높이 높아지는 것 반영되지 않음*/
    background-color: transparent;
    border-top: 0px;
    /*z-index:9;*/
}

    .AsReport .AsDatailArea.NotReply > .replyListArea > .txtTitle,
    .AsReport .AsDatailArea.NotReply > .replyListArea > .right {
        display: none;
    }

.AsReport .AsDatailArea.NotReply .divAttachedfileArea.viewType {
    z-index: 10;
}
/*동반자 서비스 인 경우*/
.AsReport .AsDatailArea > .replyListArea > .replyInputArea > .divPartnerService {
    display: none; /*181030 김슬기 추가*/
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.35);
}

    .AsReport .AsDatailArea > .replyListArea > .replyInputArea > .divPartnerService > p {
        color: #fff;
        font-size: 16px;
    }

.AsReport .AsDatailArea.NotReply > .replyListArea > .replyInputArea > .titleArea {
    border-top: 0px;
}

.AsReport .AsDatailArea > .replyListArea > .replyInputArea > .titleArea {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 40px;
    width: 100%;
    border-top: 1px solid #aec2d2;
    border-bottom: 1px solid #aec2d2;
    padding: 5px;
}

    .AsReport .AsDatailArea > .replyListArea > .replyInputArea > .titleArea > .txtTitle {
        display: inline-flex;
        align-items: center;
    }

    .AsReport .AsDatailArea > .replyListArea > .replyInputArea > .titleArea > .checkItem {
        position: absolute;
        right: 0px;
        top: -25px;
        height: 25px;
        display: flex;
        align-items: center;
        padding: 0 8px;
        font-size: 12px;
        letter-spacing: -.5px;
        color: #666;
        border: 1px solid #aec2d2;
        border-bottom: 1px;
        background-color: #fff;
        border-radius: 10px 10px 0 0;
    }

.AsReport .AsDatailArea > .replyListArea .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0;
}

    .AsReport .AsDatailArea > .replyListArea .icon:hover {
        cursor: pointer;
        background-color: rgba(0,0,0,0.05);
    }
    .AsReport .AsDatailArea > .replyListArea .icon.Dis {
        cursor: not-allowed;
        background-color: #eee;
    }

    .AsReport .AsDatailArea > .replyListArea .icon > i {
        display: inline-block;
        background: url('../Images/common/iconReply.png') no-repeat;
        width: 16px;
        height: 18px;
    }

    .AsReport .AsDatailArea > .replyListArea .icon.Locked > i {
        background-position: -60px 0;
    }

    .AsReport .AsDatailArea > .replyListArea .icon.Locked.Unlock > i {
        background-position: -34px 0;
    }

    .AsReport .AsDatailArea > .replyListArea .icon.Locked.Disabled > i {
        background-position: -34px -28px;
    }

    .AsReport .AsDatailArea > .replyListArea .icon.Email > i {
        width: 25px;
        background-position: 3px -71px;
    }

        .AsReport .AsDatailArea > .replyListArea .icon.Email > i.Checked {
            background-position: -32px -71px;
        }

    .AsReport .AsDatailArea > .replyListArea .icon.AttachFile > i {
        background-position: -73px -71px;
    }

.AsReport .AsDatailArea > .replyListArea > .replyInputArea .textareaReply {
    position: relative;
    height: 35px;
    max-height: 230px; /*190124 김슬기 수정 / 500 -> 230 / 버튼의 max-height와 맞춤*/
    width: 100%;
    font-size: 16px;
    color: #5c7284;
    letter-spacing: -1px;
    border: 1px solid #ccc;
    padding: 5px 8px;
    border-radius: 18px;
    overflow: auto;
    resize: none; /*180913 김슬기 추가*/
}

.AsReport .AsDatailArea > .replyListArea > .replyInputArea .textareaReply.Dis {
    cursor: not-allowed;
    color: #888;
    background-color: #eee;
    border: 1px solid #dbdbdb;
    position: relative;
    height: 35px;
    max-height: 230px; /*190124 김슬기 수정 / 500 -> 230 / 버튼의 max-height와 맞춤*/
    width: 100%;
    font-size: 16px;
    color: #5c7284;
    letter-spacing: -1px;
    border: 1px solid #ccc;
    padding: 5px 8px;
    border-radius: 18px;
    overflow: auto;
    resize: none; /*180913 김슬기 추가*/
}

/*.AsReport .AsDatailArea> .replyListArea > .replyInputArea .textareaReply:focus{ /*181209 김슬기 주석 / click 이벤트와 충돌로 인해 focus는 스크립트로 처리
        border:1px solid #15a4fa;
        min-height:100px;   /*181204 김슬기 수정 / height -> min-height로 변경 / 빠르게 지울 경우 높이를 제대로 바로 반영X
    }*/
.AsReport .AsDatailArea > .replyListArea > .replyInputArea .btnReplySave {
    /*position:absolute;
        right: 8px;
        bottom: 8px;*/
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    min-height: 30px;
    max-height: 230px; /*답변 최대 높이와 동일한 값*/
    border: 0px;
    color: #fff;
    /*border-radius:50%;
      background-image:url('../Images/common/iconReply.png');
      background-position: 6px -95px;
        */
    background-color: #d7d7d7;
    border-radius: 15px;
}

    .AsReport .AsDatailArea > .replyListArea > .replyInputArea .btnReplySave:hover {
        cursor: pointer;
        background-color: #15a4fa;
    }
    .AsReport .AsDatailArea > .replyListArea > .replyInputArea .btnReplySave.Dis:hover {
        cursor: not-allowed;
        background-color: #eee;
    }

    .AsReport .AsDatailArea > .replyListArea > .replyInputArea .btnReplySave.On {
        background-color: #15a4fa;
        min-height: 100px;
    }

.AsReport .AsDatailArea > .replyListArea > .replyInputArea > .divAttachedfileArea {
    margin: 5px 10px;
    width: calc(100% - 20px);
}

.AsReport .AsDatailArea > .replyListArea > .replyInputArea > .divSubmitArea {
    /*float: left;*/
    margin: 5px 0 0 0px; /*김슬기 수정 / 9px 0 0 0px -> 5px 0 0 0 px*/
    padding: 0 0 0 4px;
    width: 200px; /*김슬기 수정 / 100 -> 200*/
    display: inline-block; /*181106 김슬기 추가*/
}

    .AsReport .AsDatailArea > .replyListArea > .replyInputArea > .divSubmitArea .btnFill {
        margin: 3px 0px 0px 1px;
        padding: 10px 4px;
        width: 100%; /*김슬기 수정 / 100 -> 48*/
    }

        .AsReport .AsDatailArea > .replyListArea > .replyInputArea > .divSubmitArea .btnFill.devConfrimASReponse {
            background-color: #12d0be;
            margin: 3px 0px 0px 1px;
            padding: 10px 4px;
            width: 100%; /*김슬기 수정 / 100 -> 48*/
        }
        .AsReport .AsDatailArea > .replyListArea > .replyInputArea > .divSubmitArea .btnFill.Reopen {
            background-color: #15a4fa;
            margin: 3px 0px 0px 1px;
            padding: 10px 4px;
            width: 100%; /*김슬기 수정 / 100 -> 48*/
        }
        .AsReport .AsDatailArea > .replyListArea > .replyInputArea > .divSubmitArea .btnFill.btnHalfFill {
            margin: 3px 0px 0px 1px;
            padding: 10px 4px;
            width: 48%; /*김슬기 수정 / 100 -> 48*/
        }



/*21. 전체서비스관리현황*/
.AsAdminStatus {
    position: relative;
    height: calc(100% - 50px); /*201102 김슬기 수정 / 70 -> 50 / 메뉴 높이가 줄어든만큼 수정함.*/
    display: flex;
    background-color: #f1f1f1;
}

/*좌측메뉴*/
.leftMenuArea {
    display: inline-block;
    width: 250px;
    height: 100%;
    background-color: #222b32;
}

    .leftMenuArea > .ulLeftArea {
    }

        .leftMenuArea > .ulLeftArea > li {
            display: flex;
            align-items: center;
            height: 60px;
            padding: 0 20px 0 45px;
            color: #fff;
            font-size: 16px;
            line-height: 18px;
            background-image: url('../Images/common/iconLeftMenu.png');
            background-repeat: no-repeat;
            border-bottom: 1px solid #394147;
            opacity: 0.4;
        }

            .leftMenuArea > .ulLeftArea > li.iconAll {
                background-position: 3px 12px;
            }

            .leftMenuArea > .ulLeftArea > li.iconUser {
                background-position: 3px -45px;
            }

            .leftMenuArea > .ulLeftArea > li.iconModule {
                background-position: 3px -105px;
            }

            .leftMenuArea > .ulLeftArea > li.iconChange {
                background-position: 3px -393px;
            }

            .leftMenuArea > .ulLeftArea > li.iconAccount {
                background-position: 3px -162px;
            }

            .leftMenuArea > .ulLeftArea > li.iconPartner {
                background-position: 3px -217px;
            }

            .leftMenuArea > .ulLeftArea > li.iconCustomer {
                background-position: 3px -279px;
            }

            .leftMenuArea > .ulLeftArea > li.iconConfiguration {
                background-position: 3px -337px;
            }

            .leftMenuArea > .ulLeftArea > li.iconMyModel {
                background-position: 3px -446px;
            }

            .leftMenuArea > .ulLeftArea > li.iconEmailSetting {
                background-position: 3px -497px;
            }

            .leftMenuArea > .ulLeftArea > li:hover {
                cursor: pointer;
                background-color: #5c7284;
            }

            .leftMenuArea > .ulLeftArea > li.On {
                font-weight: bold;
                background-color: #15a4fa;
                opacity: 9;
            }

.asAdminStatusArea {
    /*float: left;*/
    width: calc(100% - 250px);
    min-width: 1030px;
    height: 100%;
    overflow: hidden;
    display: inline-block;
}

    .asAdminStatusArea .devChartScrollWrap {
        /*overflow-x: auto;*/
        width: 100%;
        height: calc(100% - 7px);
        overflow: auto;
    }

.queryRowArea {
    width: 100%;
    height: 60px;
    background-color: #222b32;
    min-width: 1230px; /*테블릿 세로에서 제대로 화면을 로드하지 못함*/
}

    .queryRowArea > .comboboxArea {
        position: relative;
        float: left;
        height: 60px;
        width: 180px; /*160417 유예지 수정 / 250 -> 200*/ /*160216 김슬기 수정 / 240 -> 250*/
        border-right: 1px solid #394147;
        background: url('../Images/common/imgComboArrowWhite.png') no-repeat top 19px right 2px;
        padding: 3px 10px;
        cursor: pointer;
    }

        .queryRowArea > .comboboxArea > .txtCaption {
            display: inline-block;
            font-size: 13px;
            letter-spacing: -1px;
            color: #5c7284;
            padding-bottom: 2px;
        }

        .queryRowArea > .comboboxArea > .txtValue {
            font-size: 16px;
            letter-spacing: -1px;
            color: #fff;
            padding: 5px 0 0 8px;
        }

        .queryRowArea > .comboboxArea > input.txtValue {
            font-size: 16px;
            letter-spacing: -1px;
            padding: 3px 0 3px 8px;
            display: block;
            background-color: transparent;
            border: 1px solid rgba(255,255,255,.5);
            /*width: 100%;*/
            width: calc(100% - 30px); /*181030 김슬기 추가 / width가 넘치지 않게 수정*/
            cursor: pointer;
            text-overflow: ellipsis;
        }

        .queryRowArea > .comboboxArea > .ulComboItem {
            top: 55px;
        }

        .queryRowArea > .comboboxArea > .btnArrow {
            cursor: pointer;
            position: absolute;
            right: 3px;
            bottom: 5px;
            width: 35px;
            height: 30px;
            background-color: rgba(0,0,0,0);
        }

            .queryRowArea > .comboboxArea > .btnArrow:hover {
                background-color: rgba(255,255,255,0.1);
            }

    .queryRowArea > .comboboxAreaDisable {
        position: relative;
        float: left;
        height: 60px;
        width: 250px; /*160216 김슬기 수정 / 240 -> 250*/
        border-right: 1px solid #394147;
    }

        .queryRowArea > .comboboxAreaDisable > .txtCaption {
            display: inline-block;
            font-size: 13px;
            letter-spacing: -1px;
            line-height: 8px;
            color: #5c7284;
            padding: 10px 0 0 8px;
        }

        .queryRowArea > .comboboxAreaDisable > .txtValue {
            font-size: 16px;
            letter-spacing: -1px;
            color: #fff;
            padding: 5px 0 0 8px;
        }

    .queryRowArea > .dateArea {
        float: left;
        border-right: 1px solid #394147;
    }

        .queryRowArea > .dateArea > .dateInput {
            margin-top: 8px;
            width: 110px;
            float: left;
        }

            .queryRowArea > .dateArea > .dateInput > dt {
                height: 15px;
                font-size: 13px;
                letter-spacing: -1px;
                color: #5c7284;
                padding-left: 8px;
            }

            .queryRowArea > .dateArea > .dateInput > dd > .inputDate {
                border: 0px;
                font-size: 16px;
                width: 100%;
                color: #fff;
                padding: 8px;
                background-color: #222b32;
                cursor: pointer;
            }

        .queryRowArea > .dateArea > .txtCaption {
            display: inline-block;
            padding-top: 30px;
            width: 20px;
            float: left;
            color: #fff;
            text-align: center;
        }

    .queryRowArea > .ulState {
        display: inline-block;
        float: left; /*160216 김슬기 추가*/
    }

        .queryRowArea > .ulState > li {
            float: left;
            height: 60px;
            padding: 20px 10px 0 10px;
            font-size: 16px;
            color: #fff;
            border-right: 1px solid #394147;
        }

            .queryRowArea > .ulState > li:hover {
                cursor: pointer;
                background-color: #5c7284;
            }

            .queryRowArea > .ulState > li.selected {
                background-color: #405367;
            }
    /* 220506 김주현 서비스 처리현황 다운로드 버튼 추가 */
    .queryRowArea > .topBtnArea {
        float: right;
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 16px;
    }

        .queryRowArea > .topBtnArea > .btnDownload {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: url('../Images/common/iconAsDownload.png') no-repeat center;
            cursor: pointer;
        }
    /*2025.03.06 김경훈 추가*/


    .topBtnArea > .divDevDownOption {
        display: none; /* 기본적으로 숨김 */
        position: absolute;
        right: 0;
        top: 60px;
        background-color: #fff;
        border: 1px solid #dbdbdb;
        z-index: 10;
        width: 150px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        opacity: 0;
        transform: translateY(-5px);
        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    }

        .topBtnArea > .divDevDownOption.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

        .topBtnArea > .divDevDownOption > .ulDownOption {
            padding: 0;
            list-style: none;
            margin: 0;
        }

            .topBtnArea > .divDevDownOption > .ulDownOption > li {
                margin: 0;
                padding: 8px 20px;
                color: #333;
                font-weight: normal;
                cursor: pointer;
                transition: background-color 0.2s;
            }

                .topBtnArea > .divDevDownOption > .ulDownOption > li:hover {
                    background-color: #35aff8;
                    color: #fff;
                }

                .topBtnArea > .divDevDownOption > .ulDownOption > li.selected {
                    background-color: #15a4fa;
                    color: #fff !important;
                }


    /*160216 김슬기 추가*/
    .queryRowArea > .queryInputArea {
        display: inline-flex;
        border-right: 1px solid #394147;
        height: 60px;
        border: 0px;
    }

        .queryRowArea > .queryInputArea > .inputQuery {
            width: 100%;
            height: 100%;
            padding: 0px 8px;
            color: #fff;
            font-size: 16px;
            letter-spacing: -1px;
            background-color: #222b32;
            border: 0px;
        }

            .queryRowArea > .queryInputArea > .inputQuery:focus,
            .queryRowArea > .queryInputArea > .inputQuery:focus {
                border: 2px solid #15a4fa;
            }

        .queryRowArea > .queryInputArea > .btnQuery {
            flex-shrink: 0;
            height: 100%;
            width: 40px;
            border: 0px;
            padding: 20px 20px 0 20px;
            background: #222b32 url('../Images/common/btnQuery.png') no-repeat center;
            border-right: 1px solid #394147;
        }

            .queryRowArea > .queryInputArea > .btnQuery:hover {
                cursor: pointer;
                background-color: #5c7284;
            }
/*160216 김슬기 추가 끝*/

.asAdminStatusArea .devChartScrollWrap > .chartWrap {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    min-width: 1230px;
    width: 100%;
    height: calc(100% - 75px);
    padding: 10px;
    /*overflow-y: auto; /*160223 김슬기 추가*/
}

    .asAdminStatusArea .devChartScrollWrap > .chartWrap > .col {
        position: relative;
        display: inline-block;
        margin: 0 10px 10px 0;
        padding: 15px;
        width: calc(33% - 10px);
        height: calc(50% - 5px);
        background-color: #Fff;
    }

    .asAdminStatusArea .devChartScrollWrap > .chartWrap .rowspan2 {
        position: absolute;
        right: 0px;
        top: 10px;
        width: calc(33% + 5px);
        height: calc(100% - 20px);
        overflow-y: auto;
        overflow-x: hidden;
    }

        .asAdminStatusArea .devChartScrollWrap > .chartWrap .rowspan2 .devASServiceByServiceType { /*190918 김슬기 추가 / 차트가 작아지면 밑에 차트가 올라와서 height 추가함*/
            height: calc(50% - 5px);
        }
    /*.asAdminStatusArea .devChartScrollWrap > .chartWrap > .col1 {
                min-width: 400px;
                min-height: 325px;
                }*/

    .asAdminStatusArea .devChartScrollWrap > .chartWrap > .col1:nth-child(3) {
        width: calc(33% + 10px);
        margin-right: 0px;
    }

    .asAdminStatusArea .devChartScrollWrap > .chartWrap > .col2 {
        /* min-width: 810px; 160222 김슬기 수정 / 790 -> 810*/
        /*height: calc(100% - 400px);
                min-height: 300px;160222 김슬기 수정 / 주석*/
        margin: 0 10px 0 0;
        width: calc(66% - 10px);
    }

        .asAdminStatusArea .devChartScrollWrap > .chartWrap > .col2:hover {
            cursor: pointer;
        }

    .asAdminStatusArea .devChartScrollWrap > .chartWrap > div {
        width: 100%;
        height: 50%;
    }

    /*.asAdminStatusArea .devChartScrollWrap > .chartWrap .devASServiceByServiceType,
            .asAdminStatusArea .devChartScrollWrap > .chartWrap .devASServiceTimeByServiceType {
                height: 49%;
            }*/

    .asAdminStatusArea .devChartScrollWrap > .chartWrap .txtTitle {
        font-size: 16px;
        font-weight: bold;
        letter-spacing: -1px;
    }

    .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: calc(100% - 20px); /*160210 김슬기 수정 -> 주석 삭제 170621 유예지*/
        /*margin-top:50px;*/
        /*min-height: 300px;*/
        /*background-color: #f9f9f9;*/ /*160223 김슬기 수정 / 주석*/
    }

        /*160205 김슬기 추가*/
        .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .explanation {
            position: absolute;
            top: calc(50% - 25px);
            left: calc(50% - 70px - 10%);
            font-size: 13px;
            color: #222b32;
            text-align: center;
            width: 140px;
            height: 70px;
        }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .explanation > span {
                font-size: 36px; /*160217 김슬기 수정 / 50 -> 36px*/
                font-weight: bold;
            }
        /*160205 김슬기 추가 끝*/

        /*Chart TooTip*/
        .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea {
            display: inline-block;
            padding: 15px;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: rgba(0,0,0,0.3) 5px 5px 10px;
        }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea ul.ulTooltip {
            }

                .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea ul.ulTooltip > li {
                    position: relative;
                    padding: 8px 0 10px 15px;
                }

                    .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea ul.ulTooltip > li:last-child {
                        padding: 8px 0 0px 15px;
                    }

                    .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea ul.ulTooltip > li > span.colorBox {
                        position: absolute;
                        left: 0px;
                        top: 8px;
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                    }

                        .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea ul.ulTooltip > li > span.colorBox.Red {
                            background-color: #ef5350;
                        }

                        .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea ul.ulTooltip > li > span.colorBox.Yellow {
                            background-color: #f6c222;
                        }

                        .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea ul.ulTooltip > li > span.colorBox.Blue {
                            background-color: #4a90e2;
                        }

                        .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea ul.ulTooltip > li > span.colorBox.Purple {
                            background-color: #5c6bc0;
                        }

                        .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea ul.ulTooltip > li > span.colorBox.Green {
                            background-color: #66bb6a;
                        }

                        .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea ul.ulTooltip > li > span.colorBox.DarkNavy {
                            background-color: #405367;
                        }

                    .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea ul.ulTooltip > li > p.txtCaption {
                        font-size: 13px;
                        line-height: 8px;
                    }

                    .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea ul.ulTooltip > li > p.txtValue span {
                        font-size: 20px;
                        line-height: 8px;
                    }

                        .asAdminStatusArea .devChartScrollWrap > .chartWrap .chartArea .tooltipArea ul.ulTooltip > li > p.txtValue span.txtDescription {
                            font-size: 13px;
                            line-height: 8px;
                        }



    .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea {
        margin-top: 20px;
    }

        .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .totalService {
            height: 80px;
            padding: 15px 0 0 90px;
            background-image: url('../Images/common/iconGroup.png');
            background-repeat: no-repeat;
            background-position: -310px -0px;
            margin-bottom: 10px;
        }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .totalService > .txtCaption {
                font-size: 13px;
                color: #222b32;
                letter-spacing: -1px;
            }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .totalService > .txtTime {
                font-size: 26px;
                font-weight: bold;
            }

        .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .ulTypeTime > li {
            position: relative;
            float: left;
            height: 60px;
            width: 50%;
            padding: 10px 0 0 63px;
            margin-bottom: 4px;
        }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .ulTypeTime > li > i {
                position: absolute;
                left: 10px;
                top: 5px;
                display: inline-block;
                width: 42px;
                height: 42px;
                background-image: url('../Images/common/iconGroup.png');
                background-repeat: no-repeat;
            }
            /*160216 김슬기 수정 / Howto -> Usage*/
            .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .ulTypeTime > li.Usage > i {
                background-position: -326px -87px; /*181115 김슬기 수정 / -313px -81px -> -326px -87px*/
            }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .ulTypeTime > li.Error > i {
                background-position: -327px -201px; /*181115 김슬기 수정 /-313px -195px -> -327px -201px*/
            }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .ulTypeTime > li.Data > i {
                background-position: -326px -143px; /*181115 김슬기 수정 /-313px -136px -> -326px -143px*/
            }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .ulTypeTime > li.Improvement > i {
                background-position: -327px -315px;
            }
            /*160216 김슬기 수정 / Etc -> ETC*/
            .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .ulTypeTime > li.ETC > i {
                background-position: -327px -257px;
            }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .ulTypeTime > li.System > i {
                background-position: -327px -370px;
            }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .ulTypeTime > li.Technical > i {
                background-position: -327px -201px;
            }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .ulTypeTime > li .txtCaption {
                font-size: 12px; /*160222 김슬기 수정 / 13 -> 12로 변경*/
                color: #222b32;
                letter-spacing: -1px;
            }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .ulTypeTime > li .txtTime {
                font-size: 16px;
                font-weight: bold;
                letter-spacing: -1px;
            }

    /*160217 김슬기 수정 / devASTable 추가*/
    .asAdminStatusArea .devChartScrollWrap > .chartWrap > .devASTable > .table {
        /*width: 1220px;*/ /*160222 김슬기 수정 / 100% -> 1220px*/
        width: 100%;
        border: 0px;
        border-spacing: 0px;
        padding: 0px;
        margin-bottom: 20px;
    }

        .asAdminStatusArea .devChartScrollWrap > .chartWrap > .devASTable > .table th {
            padding: 8px 4px;
            font-size: 13px;
            font-weight: bold;
            color: #fff;
            background-color: #405367;
        }
            /*160217 김슬기 추가 / 테이블 헤더 전부 hover 필요*/
            .asAdminStatusArea .devChartScrollWrap > .chartWrap > .devASTable > .table th:hover {
                cursor: pointer;
                background-color: #5c7284;
            }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap > .devASTable > .table th.subTh {
                background-color: #536576;
            }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap > .devASTable > .table th.btnTableSortAscend {
                cursor: pointer;
                background-image: url('../Images/common/iconTableSortA.png');
                background-repeat: no-repeat;
                background-position: center right;
            }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap > .devASTable > .table th.btnTableSortDescend {
                cursor: pointer;
                background-image: url('../Images/common/iconTableSortD.png');
                background-repeat: no-repeat;
                background-position: center right;
            }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap > .devASTable > .table th.btnTableSort:hover {
                background-color: #5c7284;
            }
        /*160222 김슬기 추가*/
        .asAdminStatusArea .devChartScrollWrap > .chartWrap > .devASTable > .table tbody tr td:first-child {
            cursor: pointer;
        }

        .asAdminStatusArea .devChartScrollWrap > .chartWrap > .devASTable > .table td {
            padding: 8px 4px;
            font-size: 13px;
            color: #222b32;
            text-align: center;
            background-color: #fff;
        }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap > .devASTable > .table td.alignRight {
                text-align: right;
            }

            .asAdminStatusArea .devChartScrollWrap > .chartWrap > .devASTable > .table td.txtPoint {
                font-weight: bold;
            }

        .asAdminStatusArea .devChartScrollWrap > .chartWrap > .devASTable > .table tr:nth-child(even) td {
            background-color: #f7f7f7;
        }
/*2020 - FAQ  박혜진 추가 */
.wrap.AsFaq > .contentsGroup {
    display: flex;
}

    .wrap.AsFaq > .contentsGroup .statusArea > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0px 8px;
        height: 20px;
        border-radius: 10px;
        background-color: #E5E6E8;
        color: #354052;
        font-size: 11px;
    }

        .wrap.AsFaq > .contentsGroup .statusArea > span.Genuine {
            background-color: #CAE8D5;
            color: #0A8C38;
        }

        .wrap.AsFaq > .contentsGroup .statusArea > span.EVER {
            background-color: #E0F3FF;
            color: #15A4FA;
        }

        .wrap.AsFaq > .contentsGroup .statusArea > span.Common {
            background-color: #F1EAF8;
            color: #6116D4;
        }

        .wrap.AsFaq > .contentsGroup .statusArea > span.Notice {
            background-color: #999;
            color: #fff;
        }

        .wrap.AsFaq > .contentsGroup .statusArea > span.Manual {
            background-color: #15A4FA;
            color: #fff;
        }

    .wrap.AsFaq > .contentsGroup > .faqListWrap {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        width: 600px;
        min-width: 375px;
        height: 100%;
        border-right: 1px solid #aec2d2;
        background-color: #f9f9f9;
        overflow: hidden;
    }

        .wrap.AsFaq > .contentsGroup > .faqListWrap > .listArea {
            width: calc(100% - 4px);
            height: 100%;
            overflow-y: auto;
        }

        .wrap.AsFaq > .contentsGroup > .faqListWrap .ulFaqList > li {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 10px 16px;
            border-bottom: 1px solid #D6D6D6;
            border-left: 3px solid transparent;
        }

            .wrap.AsFaq > .contentsGroup > .faqListWrap .ulFaqList > li:hover {
                cursor: pointer;
                background-color: #e7f3fb;
            }

            .wrap.AsFaq > .contentsGroup > .faqListWrap .ulFaqList > li.Selected {
                background-color: #fff;
            }

            .wrap.AsFaq > .contentsGroup > .faqListWrap .ulFaqList > li.New {
                border-left: 5px solid #15A4FA;
            }

            .wrap.AsFaq > .contentsGroup > .faqListWrap .ulFaqList > li .contentsBox {
                width: calc(100% - 75px);
            }

            .wrap.AsFaq > .contentsGroup > .faqListWrap .ulFaqList > li .txtName,
            .wrap.AsFaq > .contentsGroup > .faqListWrap .ulFaqList > li .txtDate {
                font-size: 12px;
            }

            .wrap.AsFaq > .contentsGroup > .faqListWrap .ulFaqList > li .txtSerialNo {
                font-size: 12px;
                color: #999;
            }

                .wrap.AsFaq > .contentsGroup > .faqListWrap .ulFaqList > li .txtSerialNo:before {
                    content: 'No. ';
                }

            .wrap.AsFaq > .contentsGroup > .faqListWrap .ulFaqList > li .txtDate > span {
                display: block;
            }

            .wrap.AsFaq > .contentsGroup > .faqListWrap .ulFaqList > li .txtTitle {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 6px 0;
                font-size: 16px;
                font-weight: bold;
            }

            .wrap.AsFaq > .contentsGroup > .faqListWrap .ulFaqList > li .infoBox {
                text-align: right;
                flex-shrink: 0;
            }

            .wrap.AsFaq > .contentsGroup > .faqListWrap .ulFaqList > li .attachFile {
                display: inline-block;
                width: 18px;
                height: 22px;
                background: url(../Images/common/iconGroup.png) no-repeat;
                background-position: -142px -112px;
            }

    .wrap.AsFaq > .contentsGroup > .faqDetail {
        /* min-width: 850px; 스크롤 생기지 않는 문제 */
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 30px;
        overflow-y: auto;
    }

        .wrap.AsFaq > .contentsGroup > .faqDetail > .titleArea,
        .wrap.AsFaq > .contentsGroup > .faqDetail > .divAttachedfileArea,
        .wrap.AsFaq > .contentsGroup > .faqDetail > .btnArea {
            flex-shrink: 0;
        }

        .wrap.AsFaq > .contentsGroup > .faqDetail .txtTitle {
            padding: 8px 0;
            font-size: 18px;
            font-weight: bold;
            overflow: hidden;
            width: 100%;
            word-break: break-all;
        }

        .wrap.AsFaq > .contentsGroup > .faqDetail .txtDescription {
            font-size: 12px;
        }

            .wrap.AsFaq > .contentsGroup > .faqDetail .txtDescription > span {
                display: inline-block;
                padding: 0 4px;
            }

                .wrap.AsFaq > .contentsGroup > .faqDetail .txtDescription > span.txtSerialNo:before {
                    content: 'No. '
                }

                .wrap.AsFaq > .contentsGroup > .faqDetail .txtDescription > span + span {
                    border-left: 1px solid #D6D6D6;
                }

        .wrap.AsFaq > .contentsGroup > .faqDetail .contentsArea {
            margin-top: 10px;
            min-height: 150px;
            max-height: 100%;
            width: 100%;
            padding: 10px;
            border-top: 1px solid #D6D6D6;
            line-height: 18px;
            font-size: 13px;
            overflow: auto;
            white-space:pre-wrap;/*2024.12.04 김경훈 : 들여쓰기 관련 수정*/
        }

        .wrap.AsFaq > .contentsGroup > .faqDetail .btnArea {
            border-top: 1px solid #D6D6D6;
            text-align: right;
        }

    .wrap.AsFaq > .contentsGroup > .faqWrite {
        /*min-width: 850px; 넓이가 좁아졌을 때 스크롤 생성되지 않음*/
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 30px;
    }

        .wrap.AsFaq > .contentsGroup > .faqWrite > form {
            overflow-y: auto;
        }

        .wrap.AsFaq > .contentsGroup > .faqWrite .txtTitle {
            flex-shrink: 0;
            padding-bottom: 10px;
            font-weight: bold;
        }

        .wrap.AsFaq > .contentsGroup > .faqWrite .infoInputWrap {
            display: flex;
            flex-shrink: 0;
            flex-wrap: wrap;
            padding: 20px 0;
        }

            .wrap.AsFaq > .contentsGroup > .faqWrite .infoInputWrap dd {
                height: 30px;
            }

            .wrap.AsFaq > .contentsGroup > .faqWrite .infoInputWrap > .half {
                width: 50%;
                max-width: 300px;
            }

        .wrap.AsFaq > .contentsGroup > .faqWrite .htmlEditorArea {
        }
/*160217 김슬기 수정 / devASTable 추가 끝*/
.filebox {
    margin-top: 5px;
}

    .filebox input[type="file"] {
        position: absolute;
        width: 10px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        border: 0;
    }

    .filebox .upload-name {
        display: inline-block;
        padding: 8px 20px 10px 20px; /* label의 패딩값과 일치 */
        font-size: inherit;
        font-family: inherit;
        line-height: normal;
        vertical-align: middle;
        background-color: #f5f5f5;
        border: 2px solid #ccc;
        -webkit-appearance: none; /* 네이티브 외형 감추기 */
        -moz-appearance: none;
        appearance: none;
        width: 457px;
        letter-spacing: -1px;
        color: #888;
    }

.indicator {
    position: fixed;
    left: 50%;
    top: 40%;
    z-index: 1;
    width: 50px;
    height: 50px;
}

.reveal-modal-bg {
    position: fixed;
    height: 100%;
    width: 100%;
    background: #999;
    background: rgba(100,100,100,.1);
    z-index: 100;
    display: none;
    top: 0;
    left: 0;
}

.reveal-modal {
    /*visibility: hidden;
    top: 0px;
    top: 50%;
    position: absolute; 170420 유예지 삭제(배경안나와서)
    z-index: 101;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -box-shadow: 0 0 10px rgba(0,0,0,.4);
    border: 3px solid #d8d8d8;
    background: #fff;
    padding: 10px 30px 10px 30px;*/
}

    .reveal-modal p {
        font-size: 13px;
        color: #464646;
        /*line-height: 16px;*/ /*170616 김슬기 주석*/
    }

    .reveal-modal.miniAlert {
        width: 100%;
        text-align: center;
    }

.colorGraylight {
    background: #aaaaaa;
}

.btnSmall {
    color: #fff;
    border: 0px;
    font-size: 11px;
    padding: 3px 10px;
    font-weight: bold;
    cursor: pointer;
}

.replyFileFont {
    color: #fff;
}

.Reopen {
    background-color: #ABB5BC;
}


/*160210 김슬기 추가*/
.y .tick > line {
    stroke: lightgray;
    opacity: 0.7;
    stroke-width: 2px;
}

.chartArea > svg > g > .axis path {
    fill: lightgray;
}

.tooltip {
    background: #eee;
    box-shadow: 0 0 5px #999999;
    color: #333;
    display: none;
    font-size: 12px;
    padding: 5px;
    position: absolute;
    text-align: center;
    width: 60px;
    z-index: 10;
}

/*indicator 추가*/
figure {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 6.250em;
    height: 6.250em;
    animation: rotate 2.0s linear infinite;
}

.white {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    animation: flash 2.0s linear infinite;
    opacity: 0;
}

.dot {
    position: absolute;
    margin: auto;
    width: 2.4em;
    height: 2.4em;
    border-radius: 100%;
    transition: all 1s ease;
}

    .dot:nth-child(2) {
        top: 0;
        bottom: 0;
        left: 0;
        background: #FF4444;
        animation: dotsY 2.0s linear infinite;
    }

    .dot:nth-child(3) {
        left: 0;
        right: 0;
        top: 0;
        background: #FFBB33;
        animation: dotsX 2.0s linear infinite;
    }

    .dot:nth-child(4) {
        top: 0;
        bottom: 0;
        right: 0;
        background: #99CC00;
        animation: dotsY 2.0s linear infinite;
    }

    .dot:nth-child(5) {
        left: 0;
        right: 0;
        bottom: 0;
        background: #33B5E5;
        animation: dotsX 2.0s linear infinite;
    }

@keyframes rotate {
    0% {
        transform: rotate( 0);
    }

    10% {
        width: 6.250em;
        height: 6.250em;
    }

    66% {
        width: 2.4em;
        height: 2.4em;
    }

    100% {
        transform: rotate(360deg);
        width: 6.250em;
        height: 6.250em;
    }
}

@keyframes dotsY {
    66% {
        opacity: .1;
        width: 2.4em;
    }

    77% {
        opacity: 1;
        width: 0;
    }
}

@keyframes dotsX {
    66% {
        opacity: .1;
        height: 2.4em;
    }

    77% {
        opacity: 1;
        height: 0;
    }
}

@keyframes flash {
    33% {
        opacity: 0;
        border-radius: 0%;
    }

    55% {
        opacity: .6;
        border-radius: 100%;
    }

    66% {
        opacity: 0;
    }
}

/*indicator 끝*/

/*no Data*/
.divNoData {
    /*position: relative; /*160225 김슬기 수정 / absolute -> relative*/
    /*top: 10px;*/ /*160223 김슬기 수정 / 0 -> 10px*/
    /*top: 50%;
    left: 0;
    width: 100%;
    height: calc(100% - 40px); /*160223 김슬기 수정 / 100% -> calc(100% - 40px)*/
    /*padding-top: 100px; /*160223 김슬기 수정 / 100% -> 100px*/
    /*text-align: center;
    background-color: #fff;*/
    /*170621 유예지 전체 주석*/
}

    .divNoData > .img {
        width: 100%;
        height: 40px;
        background-image: url('../Images/common/iconNodata.png');
        background-repeat: no-repeat;
        background-position: center;
        /*margin-top: -20px;*/ /*160223 김슬기 추가, 170621 유예지삭제*/
    }

    .divNoData > .txtTitle {
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        color: #d1d1d1;
    }

/*20160509 김동현 추가*/
.devTotalAttechedInfo {
    font-size: 12px;
}

/*160223 김슬기 추가*/
.asAdminStatusArea .devChartScrollWrap > .chartWrap .rowspan2 > div > .chartArea > .divNoData {
    /*top: 200px;*/
    /*height: 400px;*/
    /*height: 260px;*/
    /*z-index: 999;*/
}

/*160225 김슬기 추가*/
.asAdminStatusArea .chartWrap .rowspan2 > .devASServiceTimeByServiceType > .serviceTimeArea > .divNoData {
    /*top: -7px;*/
    margin-top: 20%;
}

.devGoToMain {
    cursor: pointer;
}

/*160422 김동현 추가*/
.devDeleteRequest {
}


/*설정**********************************************************************************/
.wrap.AsSetting {
    position: relative;
    display: flex;
}

    .wrap.AsSetting > .asAdminStatusArea {
        height: 100%;
        /*overflow: hidden;*/ /*170608 김슬기 주석
        height: calc(100% - 70px);*/
        overflow-y: auto;
        background-color: #f7f7f7;
    }


    .wrap.AsSetting .asAdminStatusArea .devChartScrollWrap {
        min-width: initial;
        min-width: auto;
        height: 100%;
    }

.asAdminStatusArea .devChartScrollWrap .settingWrap {
    width: 100%;
    /*height: calc(100% - 70px);
    overflow-y: auto;*/ /*170608 김슬기 주석*/
    padding: 30px;
    background-color: #f7f7f7;
    display: inline-block;
}

    .asAdminStatusArea .devChartScrollWrap .settingWrap .accountList {
    }

    .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 30px;
        padding: 0;
    }
        /*고객관리 - 엑셀로 내려받기 버튼 왼쪽 추가 */
        .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea.between {
            justify-content: space-between;
        }

            .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea.between > .btnRightArea {
                display: flex;
                justify-content: flex-end;
            }


        .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea .combobox {
            position: relative;
            display: inline-block;
            width: 180px;
            margin-right: 10px;
        }

            .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea .combobox > .txtValue {
                cursor: pointer;
                text-align: left;
                border: 1px solid #dbdbdb;
                background: #fff url('../Images/common/imgComboArrowGray.png') no-repeat center right;
                padding: 8px 30px 0px 8px;
                height: 36px;
                color: #5c7284;
                font-size: 13px;
                width: 100%;
            }

                .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea .combobox > .txtValue:hover {
                    cursor: pointer;
                    color: #15a4fa;
                }

        .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea .queryInputArea {
            position: relative;
        }

            .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea .queryInputArea > .inputQuery {
                width: 80%;
                padding: 8px; /*190103 김슬기 수정 / 8 45 8 8 -> 8 / 우측에 여백이 너무 많아서 좌측과 동일하게 수정*/
                font-size: 14px;
                letter-spacing: -1px;
                border: 1px solid #dbdbdb;
            }

            .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea .queryInputArea > .btnQuery {
                position: absolute;
                right: 0;
                top: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                background-color: transparent;
                border: 0;
            }

                .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea .queryInputArea > .btnQuery > span {
                    display: inline-block;
                    width: 19px;
                    height: 18px;
                    background-image: url('../Images/common/btnSettingQuery.png');
                    background-repeat: no-repeat;
                    background-position: 0 0;
                }

                .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea .queryInputArea > .btnQuery:hover > span {
                    background-position: -28px 0;
                }

                .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea .queryInputArea > .btnQuery:hover {
                    cursor: pointer;
                    background-color: #15a4fa;
                }


        .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea .btn {
            display: inline-block;
            padding: 7px 20px;
            background-color: #b9c1c6;
            font-size: 16px;
            color: #fff;
            border: 0;
            cursor: pointer;
        }

            .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea .btn.Primary {
                background-color: #15a4fa;
            }


            .asAdminStatusArea .devChartScrollWrap .settingWrap .btnArea .btn:hover {
                box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
            }


.asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList {
    width: 100%;
    font-size: 13px;
    text-align: center;
}

    .asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > tbody > tr:nth-child(even) {
        background-color: #fff;
    }

/*.asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > tbody > tr:hover { 170515 김슬기 주석
                background-color: #d8dde0;
            }*/

.asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .devAccountTable > tbody > tr:hover { /*170515 김슬기 추가*/
    background-color: #d8dde0;
    cursor: pointer;
}

.asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > tbody > tr.selected {
    background-color: #d8dde0;
}



.asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > thead > tr > th {
    padding: 15px 0;
    background-color: #405367;
    color: #fff;
    font-size: 13px;
}

    .asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > thead > tr > th:first-child {
        width: 25%;
    }


.asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > tbody > tr > td {
    padding: 10px 20px; /*170526 김슬기 수정 / 15px 30px -> 15px 20px*/ /*170630 김슬기 수정 / 15 20 -> 4 20*/ /*170704 김슬기 수정 / 4 20 -> 10 20*/
}

    .asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > tbody > tr > td > .btnWithdrawal {
        display: inline-block;
        padding: 6px 20px;
        background-color: #b9c1c6;
        color: #fff;
        cursor: pointer;
    }



        .asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > tbody > tr > td > .btnWithdrawal:hover {
            background-color: #15a4fa;
        }

        .asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > tbody > tr > td > .btnWithdrawal > span {
            color: #fff;
        }

    .asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > tbody > tr > td select { /*170512 김슬기 추가*/
        padding: 0 0px 0 8px;
        height: 30px;
        width: 150px;
        font-size: 13px;
        color: #313131;
        letter-spacing: -1px;
        border: 1px solid #ccc;
        border-radius: 2px;
    }

.asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > thead > tr > th > .btnTableSort {
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: bottom;
    margin-left: 5px;
    cursor: pointer;
}

/*.asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > thead > tr > th > .btnTableSort:hover {
                    background-color: #5c7284;
                }*/

/*170515 김슬기 수정 -> th 전체에 hover 효과를 위함*/
.asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > thead > tr > th:hover {
    cursor: pointer;
    background-color: #5c7284;
}

/*170515 김슬기 수정 -> btnTableSortAscend, btnTableSortDescend로 분리*/
/*.asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > thead > tr > th > .btnTableSort > span {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    background-image: url('../Images/common/iconTableSortA.png');
                    background-repeat: no-repeat;
                    background-position: center right;
                }*/

.asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > thead > tr > th > .btnTableSortAscend > span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../Images/common/iconTableSortA.png');
    background-repeat: no-repeat;
    background-position: center right;
}

.asAdminStatusArea .devChartScrollWrap > .settingWrap .accountList > .tableAccountList > thead > tr > th > .btnTableSortDescend > span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../Images/common/iconTableSortD.png');
    background-repeat: no-repeat;
    background-position: center right;
}


/*파트너지정*/
.asAdminStatusArea .devChartScrollWrap > .settingWrap.Partner > .btnArea {
    margin: 0;
    padding: 0 0 20px 0;
    text-align: right;
}

.asAdminStatusArea .devChartScrollWrap > .settingWrap.Partner .accountList {
    float: left;
    width: 70%;
    vertical-align: top;
}

    .asAdminStatusArea .devChartScrollWrap > .settingWrap.Partner .accountList.Partner {
        width: 25%;
        margin-left: 5%;
    }

    .asAdminStatusArea .devChartScrollWrap > .settingWrap.Partner .accountList > .tableAccountList > thead > tr > th {
        /*width: 33.3333%;*/
    }

    .asAdminStatusArea .devChartScrollWrap > .settingWrap.Partner .accountList.Partner > .tableAccountList > thead > tr > th {
        background-color: #15a4fa;
    }

    .asAdminStatusArea .devChartScrollWrap > .settingWrap.Partner .accountList.Partner > .tableAccountList > tbody > tr > td {
        text-align: left;
    }


/*고객관리*/

.asAdminStatusArea .devChartScrollWrap .settingWrap.Customer > .btnArea {
    justify-content: space-between;
}

.asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic {
    /*margin-bottom: 50px;*/ /*170630 김슬기 주석*/
}

    .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .txtTitle {
        display: flex;
        align-items: center;
        font-size: 22px;
        margin-bottom: 50px;
        cursor: pointer;
    }

        .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .txtTitle > span {
            display: inline-block;
            width: 9px;
            height: 17px;
            background-image: url(../Images/common/iconSetting.png);
            background-repeat: no-repeat;
            background-position: 0 0;
            margin-right: 20px;
            cursor: pointer;
        }

    .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent {
        width: 901px; /*181029 김슬기 수정 / 740 -> 901 / 도움말이 밑으로 떨어져서 width 늘림.*/
        padding-bottom: 20px;
        border-bottom: 1px solid #b9c1c6;
    }

        .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 10px; /*170713 김슬기 수정 / 20 -> 10*/
            min-height: 38px; /*170713 김슬기 추가*/
        }

            .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > p {
                width: 200px;
                font-size: 13px;
                font-weight: bold; /*170630 / 김슬기 추가*/
            }

                .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > p.txtRequired {
                    color: #eb5252;
                }

                .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > p > .required {
                    font-size: 18px;
                    color: #ff5858;
                    margin-left: 2px;
                }

            .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > select {
                padding: 5px 10px;
                border: 1px solid #dbdbdb;
                width: 350px; /*170711 김슬기 추가*/
            }

            .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > input {
                padding: 7px 10px;
                border: 1px solid #dbdbdb;
                width: 350px; /*170711 김슬기 추가*/
            }
            .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > textarea {
                padding: 7px 10px;
                border: 1px solid #dbdbdb;
                width: 700px; /*170711 김슬기 추가*/
                height: 100px;
            }
            .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > #isRestrictASCustomer {
                padding: 7px 10px;
                border: 1px solid #dbdbdb;
                width: auto; /*170711 김슬기 추가*/
            }
            .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > .devERPAdminSetting > span {
                padding: 0px 0px 0px 200px;
                font-size: 14px;
                color: #ff5858;
            }
            .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > .devRestrictASServiceSetting > span {
                padding: 0px 0px 0px 200px;
                font-size: 14px;
                color: #ff5858;
            }

            .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > .iconHelp {
                display: inline-block;
                width: 18px;
                height: 18px;
                background-image: url(../Images/common/iconSetting.png);
                background-repeat: no-repeat;
                background-position: 0 -27px;
                margin-left: 10px;
                cursor: pointer;
            }

            .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > .txtHelp {
                display: none;
                margin-left: 10px;
                font-size: 13px;
                color: #15a4fa;
                padding-bottom: 4px; /*170614 김슬기 추가*/
            }

            .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > .spanInfo > span > span {
                font-size: 13px;
                color: #eb5252;
                margin-left: 10px;
            }

            .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > input[type=button] { /*181023 김슬기 추가*/
                cursor: pointer;
            }

.asAdminStatusArea .devChartScrollWrap .settingWrap.Customer.Register .btnArea { /*181025 김슬기 수정 / 고객 등록 화면에서 버튼을 가운데로 위치하기 위함*/
    /*justify-content: flex-start;*/
    width: 740px;
    margin: 0;
    justify-content: center;
}

    .asAdminStatusArea .devChartScrollWrap .settingWrap.Customer.Register .btnArea > .btn {
        margin-right: 20px;
    }

        .asAdminStatusArea .devChartScrollWrap .settingWrap.Customer.Register .btnArea > .btn:last-child {
            margin-right: 0;
        }

.asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > .btnArea {
    width: auto;
    justify-content: initial;
    margin-bottom: 0;
    margin-left: 10px;
}

    .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > .btnArea > .btn {
        font-size: 13px;
    }

        .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > .btnArea > .btn:first-child {
            margin-right: 10px;
        }

    .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > .btnArea.Small {
        flex-basis: 100%;
        margin-left: 190px; /*170713 김슬기 수정 / 200 -> 190*/
        margin-top: 5px; /*170713 김슬기 수정 / 200 -> 190*/
    }

        .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > .btnArea.Small > .btn {
            display: flex;
            align-items: center;
            font-size: 12px;
            padding: 5px 10px;
            margin-left: 10px; /*170704 김슬기 추가*/
            margin-right: 0px; /*170704 김슬기 추가*/
        }

.asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic > .divContent > ul > li > .txtHelp.Under {
    flex-basis: 100%;
    margin-left: 200px;
    margin-top: 10px;
}

/*환경설정*/
.asAdminStatusArea .devChartScrollWrap .settingWrap.Configuration {
    height: calc(100% - 5px);
    overflow: hidden;
    padding: 30px 30px 20px 30px;
}

    .asAdminStatusArea .devChartScrollWrap .settingWrap.Configuration.Email > form {
        height: 100%;
    }

.asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic.Configuration {
    height: calc(100% - 50px);
    max-width: 900px;
    margin-bottom: 40px;
    overflow: hidden;
}

    .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic.Configuration > .txtTitle {
        display: inline-flex;
        padding: 6px 20px;
        background-color: #fff;
        border: 1px solid #dbdbdb;
        border-radius: 50px;
        font-size: 16px;
        margin-bottom: 30px;
        cursor: default;
    }

    .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic.Configuration > .txtDescription {
        display: inline-block;
        font-size: 13px;
        color: #999;
    }

    .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic.Configuration > .divContent > ul > li > p {
        width: 250px;
    }

        .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic.Configuration > .divContent > ul > li > p.txtValue {
            width: calc(100% - 250px);
            border-bottom: 1px solid #e0e0e0;
            padding: 3px 0;
            height: 100%;
            display: inline-flex;
            align-items: center;
            font-weight: normal;
        }

            .asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic.Configuration > .divContent > ul > li > p.txtValue:before {
                content: ': ';
                margin-right: 5px;
            }


.asAdminStatusArea .devChartScrollWrap .settingWrap.Configuration .btnArea {
    /*width: 790px;*/
    max-width: 900px; /*181227 김슬기 수정 / width 주석 후 max-width 추가 / 위에 있는 form과 width를 동일하게 주기 위함.*/
    margin: 0;
    justify-content: center;
}


    .asAdminStatusArea .devChartScrollWrap .settingWrap.Configuration .btnArea > .btn {
        margin-right: 10px;
    }

.settingWrap.Configuration .serviceModelEmailSetting {
    position: relative;
    height: calc(100% - 65px);
    border: 1px solid #dbdbdb;
    border-radius: 20px 20px 0 0;
    background-color: #fff;
}

    .settingWrap.Configuration .serviceModelEmailSetting > .serviceModelSeleted {
        display: flex;
        align-items: center;
        height: 50px;
        padding: 0px 20px;
        border-radius: 20px 20px 0 0;
        background-color: #f7f7f7;
    }

        .settingWrap.Configuration .serviceModelEmailSetting > .serviceModelSeleted > select {
            background-color: #f7f7f7;
            height: 100%;
            min-width: 200px;
            font-size: 16px;
            border: 0px;
            cursor: pointer; /*181221 김슬기 추가*/
        }

            .settingWrap.Configuration .serviceModelEmailSetting > .serviceModelSeleted > select + select {
                border-left: 1px solid #dfdfdf;
                padding-left: 14px;
                margin-left: 14px;
            }

    .settingWrap.Configuration .serviceModelEmailSetting > .detail {
        height: calc(100% - 50px);
    }

        .settingWrap.Configuration .serviceModelEmailSetting > .detail > dl {
            height: 90px;
            padding: 10px 20px;
            background-color: #354052;
        }

            .settingWrap.Configuration .serviceModelEmailSetting > .detail > dl > dt {
                position: relative;
                padding: 6px 0;
                color: #fff;
                font-size: 13px;
            }

                .settingWrap.Configuration .serviceModelEmailSetting > .detail > dl > dt > span {
                    display: block;
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    padding: 5px 0 0px 20px;
                    font-size: 12px;
                    color: rgba(255,255,255,0.6);
                }

                    .settingWrap.Configuration .serviceModelEmailSetting > .detail > dl > dt > span:before {
                        position: absolute;
                        left: 0;
                        top: 5px;
                        content: '!';
                        width: 16px;
                        height: 16px;
                        color: #fff;
                        font-size: 12px;
                        text-align: center;
                        border-radius: 50%;
                        background-color: rgba(255,255,255,0.4);
                    }

            .settingWrap.Configuration .serviceModelEmailSetting > .detail > dl > dd {
                display: flex;
                padding: 6px 0; /*190104 김슬기 추가 / 하단 여백이 더 넓어서 대표 메일과 동일하게 패딩 넣음.*/
            }

                .settingWrap.Configuration .serviceModelEmailSetting > .detail > dl > dd .txtMailValue {
                    color: #fff;
                    /*190104 김슬기 추가 / 대표 메일이 길어질 경우 word 짤리는 것을 방지 > 스크롤 생기게 수정*/
                    word-break: break-all;
                    height: 29px;
                    overflow-y: auto;
                    /*190104 김슬기 추가 끝*/
                }

                .settingWrap.Configuration .serviceModelEmailSetting > .detail > dl > dd > input {
                    display: none;
                    height: 35px;
                    width: 100%;
                    padding: 0 8px;
                    font-size: 16px;
                    border: 1px solid #ccc;
                }

            .settingWrap.Configuration .serviceModelEmailSetting > .detail > dl .btnEdit {
                margin-left: 10px;
                padding: 4px 16px;
                text-align: center;
                color: #fff;
                font-size: 12px;
                border: 0px;
                border-radius: 15px;
                background-color: #5c7284;
                min-width: 70px; /*190104 김슬기 추가 / 대표 메일이 길어질 경우 버튼 글자가 하단으로 내려오는 것을 방지*/
            }

                .settingWrap.Configuration .serviceModelEmailSetting > .detail > dl .btnEdit:hover {
                    cursor: pointer;
                    background-color: #42a4df;
                }

            .settingWrap.Configuration .serviceModelEmailSetting > .detail > dl > dd > input:focus {
                color: #15a4fa;
                border: 2px solid #15a4fa;
            }

        .settingWrap.Configuration .serviceModelEmailSetting > .detail.EditMode > dl > dd > input {
            display: block;
            height: 29px;
        }

        .settingWrap.Configuration .serviceModelEmailSetting > .detail.EditMode > dl > dd .btnEdit,
        .settingWrap.Configuration .serviceModelEmailSetting > .detail.EditMode > dl > dd .txtMailValue {
            display: none;
        }

        .settingWrap.Configuration .serviceModelEmailSetting > .detail > .subTitleArea {
            display: flex;
            align-items: center;
            height: 35px;
            padding: 0 20px 0 16px; /*181227 김슬기 수정 / 0 20px ->  0 20px 0 16px; / 밑에 리스트에 보여지는 체크박스와 위치를 동일하게 하기 위함.*/
            font-size: 12px;
            border-bottom: 1px solid #dbdbdb;
            background-color: #eaeced;
        }

            .settingWrap.Configuration .serviceModelEmailSetting > .detail > .subTitleArea > .txtTitle {
                font-size: 14px;
                letter-spacing: -.8px;
                margin-left: 5px; /*181227 김슬기 추가 / 체크박스 만큼 left를 밀기위해 추가함.*/
            }

            .settingWrap.Configuration .serviceModelEmailSetting > .detail > .subTitleArea .txtSelected {
                font-weight: bold;
                margin-left: 10px;
            }

                .settingWrap.Configuration .serviceModelEmailSetting > .detail > .subTitleArea .txtSelected:before {
                    content: ' (';
                }

                .settingWrap.Configuration .serviceModelEmailSetting > .detail > .subTitleArea .txtSelected:after {
                    content: ' / ';
                }

            .settingWrap.Configuration .serviceModelEmailSetting > .detail > .subTitleArea .txtTotal:after {
                content: ' )';
            }

        .settingWrap.Configuration .serviceModelEmailSetting > .detail input[type=checkbox] {
            /* margin-right: 5px; */
        }

        .settingWrap.Configuration .serviceModelEmailSetting > .detail > .ulMailList {
            height: calc(100% - 125px);
            overflow-y: auto;
        }

            .settingWrap.Configuration .serviceModelEmailSetting > .detail > .ulMailList > li {
                padding: 10px 20px;
                width: 33.3%;
                flex-wrap: wrap;
                display: inline-block;
                margin-left: -4px;
                border-right: 1px solid #efefef;
                border-bottom: 1px solid #efefef;
            }

                .settingWrap.Configuration .serviceModelEmailSetting > .detail > .ulMailList > li:nth-child(3n) {
                    border-right: 0px solid #fff;
                }

                .settingWrap.Configuration .serviceModelEmailSetting > .detail > .ulMailList > li > span {
                    display: inline-block;
                    padding: 0;
                    opacity: .5;
                    cursor: pointer; /*181224 김슬기 추가 / span을 클릭해도 체크박스가 클릭되도록 하려고 cursor를 넣음.*/
                }

                    .settingWrap.Configuration .serviceModelEmailSetting > .detail > .ulMailList > li > span.txtEmail {
                        display: block;
                        width: 100%;
                        font-size: 12px;
                        color: #999;
                        padding-left: 10px; /*181227 김슬기 추가 / 체크박스 만큼 left를 밀기 위함.*/
                    }

                .settingWrap.Configuration .serviceModelEmailSetting > .detail > .ulMailList > li:hover > span {
                    opacity: 1;
                }

                .settingWrap.Configuration .serviceModelEmailSetting > .detail > .ulMailList > li > input[type="checkbox"]:checked ~ span {
                    opacity: 1;
                    font-weight: bold;
                }

                .settingWrap.Configuration .serviceModelEmailSetting > .detail > .ulMailList > li > .txtEmail:before {
                    content: ' <';
                }

                .settingWrap.Configuration .serviceModelEmailSetting > .detail > .ulMailList > li > .txtEmail:after {
                    content: '>';
                }

.asAdminStatusArea .devChartScrollWrap .settingWrap .btnToggle > input[type="checkbox"] {
    display: none;
    visibility: hidden;
}

/*Toggle Switch Button 토글 스위치 체크박스버튼*/
.asAdminStatusArea .devChartScrollWrap .settingWrap .btnToggle > input + label {
    display: block;
    position: relative;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 70px;
    height: 22px;
    font-size: 13px;
    padding: 0;
    background-color: #c8c8c8; /*unchecked 배경*/
    border-radius: 50px;
    transition: all 0.3s;
    cursor: pointer;
}

    .asAdminStatusArea .devChartScrollWrap .settingWrap .btnToggle > input + label:before {
        /*content: "아니오";*/
        position: absolute;
        color: #fff;
        margin-left: 25px;
        top: 2px;
        left: 0;
    }

    .asAdminStatusArea .devChartScrollWrap .settingWrap .btnToggle > input + label:after {
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #fff; /*unchecked 스위치*/
        transition: all 0.3s;
    }

.asAdminStatusArea .devChartScrollWrap .settingWrap .btnToggle > input:checked + label {
    background-color: #15a4fa; /*checked 배경*/
}

    .asAdminStatusArea .devChartScrollWrap .settingWrap .btnToggle > input:checked + label:before {
        /*content: "예";*/
        margin-left: 10px;
    }

    .asAdminStatusArea .devChartScrollWrap .settingWrap .btnToggle > input:checked + label:after {
        margin-left: 48px;
        background-color: #fff; /*checked 스위치*/
    }





/*Radio Button Style 라디오버튼*/
.radioArea > input[type="radio"] {
    display: none;
}

    .radioArea > input[type="radio"] + label {
        font-size: 13px;
    }


        .radioArea > input[type="radio"] + label span {
            display: inline-block;
            position: relative;
            width: 19px;
            height: 19px;
            border-radius: 50%;
            margin: -2px 10px 0 0;
            vertical-align: middle;
            background: #fff;
            border: 1px solid #dbdbdb;
            cursor: pointer;
        }

    .radioArea > input[type="radio"]:checked + label span:before {
        content: "";
        display: inline-block;
        position: absolute;
        left: 5px;
        top: 5px;
        background: #15a4fa;
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }


    .radioArea > input[type="radio"]:disabled + label {
        font-size: 13px;
        color: #dbdbdb;
    }

        .radioArea > input[type="radio"]:disabled + label span {
            cursor: default;
        }

    .radioArea > input[type="radio"]:disabled:checked + label span:before {
        background: #dbdbdb;
    }

.asAdminStatusArea .devChartScrollWrap .settingWrap .settingBasic.Configuration > .divContent > ul > li > .radioArea > input + label {
    margin-right: 20px;
}

/*회원센터**********************************************************************************/
.subContentsArea.MembersCenter {
    height: calc(100% - 150px);
    padding: 0 20px;
    overflow: auto;
}

    .subContentsArea.MembersCenter .contentsArea {
        width: 1200px;
        margin: 80px auto 100px auto;
    }

        .subContentsArea.MembersCenter .contentsArea.smallMargin {
            margin: 40px auto; /*170516 김슬기 수정 / 80px auto 100px auto -> 40px auto*/
        }

.subContentsArea .contentsArea .lineGray {
    width: 100%;
    height: 1px;
    background-color: #ccc;
}

.subContentsArea.MembersCenter .contentsArea > .divTitleWrap {
    margin-bottom: 30px;
}

    .subContentsArea.MembersCenter .contentsArea > .divTitleWrap > .txtTitle {
        margin: 0;
        font-size: 28px;
        color: #072a4d;
        letter-spacing: -2px;
        text-align: center;
        margin-bottom: 5px;
    }

    .subContentsArea.MembersCenter .contentsArea > .divTitleWrap > .txtTitle {
        margin: 0;
        font-size: 28px;
        color: #072a4d;
        letter-spacing: -2px;
        text-align: center;
        margin-bottom: 5px;
    }

    .subContentsArea.MembersCenter .contentsArea > .divTitleWrap > .txtDescription {
        font-size: 13px;
        color: #999;
        text-align: center;
    }

        .subContentsArea.MembersCenter .contentsArea > .divTitleWrap > .txtDescription.important {
            color: #eb5252 !important;
            font-weight: bold !important;
            font-size: 16px !important;
        }


/*로그인*/

.subContentsArea.MembersCenter .contentsArea .divLoginArea {
    position: relative;
    margin: 0 auto;
    width: 550px;
    padding: 40px 0 20px 0; /*170703 김슬기 수정 / 40 0 -> 40 0 20 0*/
}

    .subContentsArea.MembersCenter .contentsArea .divLoginArea ul {
        display: inline-block;
        margin: auto 0;
        width: 430px;
    }

    .subContentsArea.MembersCenter .contentsArea .divLoginArea li {
        position: relative;
    }
        /*메세지 체크*/
        .subContentsArea.MembersCenter .contentsArea .divLoginArea li .field-validation-error {
            margin-left: 135px;
            padding: 3px 10px;
            font-size: 13px;
            color: #eb5252;
            text-align: center;
            letter-spacing: -.7px;
        }

            .subContentsArea.MembersCenter .contentsArea .divLoginArea li .field-validation-error:before {
                content: '*';
            }

        .subContentsArea.MembersCenter .contentsArea .divLoginArea li > label {
            display: inline-block;
            width: 130px;
            font-size: 16px;
            line-height: 30px;
            color: #666;
            letter-spacing: -1px;
        }

        .subContentsArea.MembersCenter .contentsArea .divLoginArea li > input {
            width: calc(100% - 150px);
            margin: 5px 0;
            padding: 0px 6px;
            height: 30px;
            font-size: 16px;
            color: #333;
            border: 1px solid #ccc;
        }

            .subContentsArea.MembersCenter .contentsArea .divLoginArea li > input[type=checkbox] {
                margin-left: 140px;
                width: 20px;
                height: 20px;
                border: 0px;
                color: #fff;
                background-color: #fff;
            }

        .subContentsArea.MembersCenter .contentsArea .divLoginArea li > .txtCheck {
            display: inline-block;
            padding: 0 0 0 8px;
            font-size: 13px;
            color: #666;
        }

    .subContentsArea.MembersCenter .contentsArea .divLoginArea .btnLogin {
        position: absolute;
        right: 0px;
        top: 45px;
        width: 120px;
        height: 70px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        letter-spacing: -1px;
        line-height: 70px;
        border: 0px;
        background-color: #072a4d;
    }

        .subContentsArea.MembersCenter .contentsArea .divLoginArea .btnLogin:hover {
            cursor: pointer;
            background-color: #051627;
            box-shadow: rgba(0,0,0,0.3) 5px 5px 10px;
        }

/*170703 김슬기 추가 시작*/
.captchaArea {
    position: relative;
    padding: 20px 10px 10px 10px;
}

    .captchaArea > div {
        position: relative;
        margin: 0 auto;
        width: 550px;
    }

    .captchaArea a {
        position: absolute;
        left: 220px;
        top: 20px;
        height: 70px;
        line-height: 70px;
        padding: 0px 10px;
        color: #fff;
        font-size: 13px;
        background-color: #2d3f6b;
    }

    .captchaArea .captchaText {
        position: absolute;
        left: 320px;
        top: 20px;
        font-size: 16px;
        line-height: 35px;
        color: #333;
        letter-spacing: -1px;
    }

        .captchaArea .captchaText > p {
            color: #666;
        }

        .captchaArea .captchaText > input[type=text] {
            width: 230px;
            padding: 3px 6px;
            font-size: 13px;
            color: #333;
            border: 1px solid #ccc;
        }

        .captchaArea .captchaText > input[type=button] {
            padding: 4px 8px;
            color: #fff;
            font-size: 13px;
            background-color: #2d3f6b;
            border: 0px;
            border-radius: 2px;
        }
        /*170703 김슬기 추가 끝*/

        .captchaArea .captchaText > span > span { /*181024 김슬기 추가 / 캡챠 validate 메시지*/
            display: inline-block;
            padding-left: 25px;
            font-size: 13px;
            letter-spacing: -1px;
            color: #eb5252;
            background-image: url('../Images/common/iconError.png');
            background-repeat: no-repeat;
            background-position: 0px center;
        }

    /*아이디/비밀번호 찾기 캡차*/
    .captchaArea.FindAccount {
        padding: 0;
    }

        .captchaArea.FindAccount > img {
            width: 170px;
        }

        .captchaArea.FindAccount a {
            top: 0px;
            left: 175px;
            height: 60px;
            line-height: 60px;
        }

        .captchaArea.FindAccount .captchaText {
            top: 0px;
            left: 260px;
            font-size: 14px;
            line-height: 30px;
        }

            .captchaArea.FindAccount .captchaText > input[type=text] {
                width: 200px;
                font-size: 12px;
            }

            .captchaArea.FindAccount .captchaText > span > span {
                font-size: 11px;
            }
/*아이디/비밀번호 찾기 캡차 끝*/

.subContentsArea.MembersCenter .contentsArea .divMembersLinkArea {
    width: 1200px;
    height: 160px;
    margin: 0 auto;
    padding: 30px 0;
    text-align: center;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #eeeeee;
}

    .subContentsArea.MembersCenter .contentsArea .divMembersLinkArea .ulMembersBtn {
        display: inline-block;
        width: 800px; /*181031 김슬기 수정 / 760 -> 800 / 일본어가 길어져서 짤림*/
        margin: 0 auto;
    }

        .subContentsArea.MembersCenter .contentsArea .divMembersLinkArea .ulMembersBtn > li {
            position: relative;
            float: left;
            width: 400px; /*181031 김슬기 수정 / 760 -> 800 / 일본어가 길어져서 짤림*/
            padding: 25px 0 0 120px;
        }

            .subContentsArea.MembersCenter .contentsArea .divMembersLinkArea .ulMembersBtn > li > .icon {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-color: #fff;
                background-image: url('../Images/common/iconMembers.png');
                background-repeat: no-repeat;
            }

            .subContentsArea.MembersCenter .contentsArea .divMembersLinkArea .ulMembersBtn > li > .txtTitle {
                font-size: 21px;
                color: #072a4d;
                letter-spacing: -1px;
                text-align: left;
            }

            .subContentsArea.MembersCenter .contentsArea .divMembersLinkArea .ulMembersBtn > li > .txtDescription {
                font-size: 13px;
                color: #999;
                text-align: left;
            }

            .subContentsArea.MembersCenter .contentsArea .divMembersLinkArea .ulMembersBtn > li.btnJoin > .icon {
                background-position: 23px -47px;
            }

            .subContentsArea.MembersCenter .contentsArea .divMembersLinkArea .ulMembersBtn > li.btnPW > .icon {
                background-position: 2px -160px;
            }

            .subContentsArea.MembersCenter .contentsArea .divMembersLinkArea .ulMembersBtn > li:hover {
                cursor: pointer;
            }

                .subContentsArea.MembersCenter .contentsArea .divMembersLinkArea .ulMembersBtn > li:hover .icon {
                    background-color: #bfdfff;
                }



/*회원가입*/
.subContentsArea.MembersCenter .contentsArea .textareaAgreement {
    padding: 15px;
    width: 100%;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -1px;
    color: #666;
    border: 1px solid #ccc;
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 10px; /*160920 김슬기 추가*/
}

    .subContentsArea.MembersCenter .contentsArea .textareaAgreement .title {
        font-weight: bold;
    }

    .subContentsArea.MembersCenter .contentsArea .textareaAgreement .depth1 {
        padding-left: 20px;
    }

    .subContentsArea.MembersCenter .contentsArea .textareaAgreement .depth2 {
        padding-left: 40px;
    }

.subContentsArea.MembersCenter .contentsArea > .ulJoinStep {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

    .subContentsArea.MembersCenter .contentsArea > .ulJoinStep > li {
        float: left;
        height: 50px;
    }

        .subContentsArea.MembersCenter .contentsArea > .ulJoinStep > li > .txtStep {
            color: #999;
            font-size: 13px;
            font-weight: bold;
        }

        .subContentsArea.MembersCenter .contentsArea > .ulJoinStep > li > .txtTitle {
            color: #999;
            font-size: 21px;
            font-weight: bold;
            letter-spacing: -2px;
        }

        .subContentsArea.MembersCenter .contentsArea > .ulJoinStep > li.arrow {
            width: 50px;
            background-image: url('../Images/common/iconMembers.png');
            background-repeat: no-repeat;
            background-position: -60px 5px;
        }

        .subContentsArea.MembersCenter .contentsArea > .ulJoinStep > li.On > .txtStep {
            color: #072a4d;
        }

        .subContentsArea.MembersCenter .contentsArea > .ulJoinStep > li.On > .txtTitle {
            color: #96c159;
        }

.subContentsArea.MembersCenter .contentsArea .divAgree {
    width: 100%;
    padding: 20px 0;
}

    .subContentsArea.MembersCenter .contentsArea .divAgree > .txtTitle {
        display: inline-block;
        font-size: 21px;
        color: #072a4d;
        margin-bottom: 10px;
        letter-spacing: -2px;
    }

    .subContentsArea.MembersCenter .contentsArea .divAgree.Half {
        position: relative;
        float: left;
        width: 580px;
        padding: 20px 0;
    }

        .subContentsArea.MembersCenter .contentsArea .divAgree.Half .txtTitle {
            top: 35px;
        }

    .subContentsArea.MembersCenter .contentsArea .divAgree > .textareaAgreement {
        height: 190px;
    }

    .subContentsArea.MembersCenter .contentsArea .divAgree > .checkArea {
        padding: 10px 0;
        font-size: 13px;
        letter-spacing: -1px;
        color: #666;
        display: block;
    }

    .subContentsArea.MembersCenter .contentsArea .divAgree.AllAgreements > .checkArea {
        padding: 0;
    }

    .subContentsArea.MembersCenter .contentsArea .divAgree > .checkArea > span { /*190318 김슬기 추가 / span 클릭시 checkbox 제어하려고 스타일 추가*/
        cursor: pointer;
    }

    .subContentsArea.MembersCenter .contentsArea .divAgree .systemConfigScription {
        padding: 4px 8px;
        font-size: 13px;
        color: #072a4d;
        letter-spacing: -1px;
        border: 1px solid #ccc;
        background-color: #e6e9ed;
    }

.subContentsArea .contentsArea .tableJoin {
    width: 100%;
    border: 0px;
}

    .subContentsArea .contentsArea .tableJoin th {
        width: 150px;
        padding: 5px 0;
        font-size: 16px;
        color: #666;
        font-weight: normal;
        text-align: left;
        letter-spacing: -1px;
    }

        .subContentsArea .contentsArea .tableJoin th.txtRequired {
            color: #eb5252;
        }

            .subContentsArea .contentsArea .tableJoin th.txtRequired > label { /*170516 김슬기 추가*/
                color: #eb5252;
            }

    .subContentsArea .contentsArea .tableJoin td {
        position: relative;
        padding: 5px 0;
        font-size: 16px;
        color: #333;
        letter-spacing: -1px;
    }

.subContentsArea .contentsArea .btnArea {
    width: 100%;
    padding: 20px 0;
    text-align: center;
}

    .subContentsArea .contentsArea .btnArea > .btnNormal {
        padding: 10px 24px;
        text-align: center;
        min-width: 130px;
        color: #fff;
        font-size: 16px;
        border: 0px;
        border-radius: 2px;
        background-color: #072a4d;
    }

        .subContentsArea .contentsArea .btnArea > .btnNormal.Back {
            padding: 7px 24px 8px 24px;
            text-align: center;
            min-width: 130px;
            color: #072a4d;
            font-size: 16px;
            border: 2px solid #072a4d;
            border-radius: 2px;
            background-color: #fff;
        }

        .subContentsArea .contentsArea .btnArea > .btnNormal:hover {
            cursor: pointer;
            background-color: #051627;
            box-shadow: rgba(0,0,0,0.3) 5px 5px 10px;
        }

        .subContentsArea .contentsArea .btnArea > .btnNormal.Back:hover {
            color: #fff;
            cursor: pointer;
            background-color: #051627;
            box-shadow: rgba(0,0,0,0.3) 5px 5px 10px;
        }

/*160930 김슬기 추가 / 공지사항에서 제목 필드 width 100%로 주기위해*/
.subContentsArea .contentsArea .tableJoin td.boardTitle > input {
    width: 100%;
}

.subContentsArea .contentsArea .tableJoin td span.txtInfo {
    padding-left: 10px;
    font-size: 13px;
    letter-spacing: -0.5px;
}

.subContentsArea .contentsArea .tableJoin td .spanInfo {
    position: absolute;
    top: 27.5px; /*190325 김슬기 수정 / 27 -> 27.5 / 크롬에서 글씨가 너무 붙어서 보여서 top 증가*/
    left: 0px;
    z-index: 150;
    font-size: 11px;
    letter-spacing: -1px;
    color: #eb5252;
}

    .subContentsArea .contentsArea .tableJoin td .spanInfo > span > span {
        font-size: 11px;
        letter-spacing: -1px;
        color: #eb5252;
    }

.subContentsArea .contentsArea .tableJoin td input, .subContentsArea.MembersCenter .contentsArea .tableJoin td select {
    padding: 0 0px 0 8px;
    height: 30px;
    width: 280px;
    font-size: 16px;
    color: #666;
    letter-spacing: -1px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

    .subContentsArea.MembersCenter .contentsArea .tableJoin td select.selectYear {
        width: 100px;
    }

    .subContentsArea.MembersCenter .contentsArea .tableJoin td select.selectMonth {
        width: 80px;
    }

    .subContentsArea.MembersCenter .contentsArea .tableJoin td select.selectDay {
        width: 80px;
    }

    .subContentsArea .contentsArea .tableJoin td input[type=file] {
        padding: 0px;
    }

    .subContentsArea .contentsArea .tableJoin td input[type=button].show { /*170116 김슬기 추가*/
        width: 50px;
        padding: 0px;
    }

.subContentsArea .contentsArea .tableJoin td textarea {
    padding: 0 0px 0 8px;
    height: 200px;
    width: 100%;
    font-size: 16px;
    color: #666;
    letter-spacing: -1px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

.subContentsArea .contentsArea .tableJoin td .selectYear {
    width: 120px;
}

.subContentsArea .contentsArea .tableJoin td .selectMonth {
    width: 80px;
}

.subContentsArea > .contentsArea .tableJoin td .selectDay {
    width: 80px;
}

.subContentsArea .contentsArea .tableJoin td input[type=radio] {
    width: 25px;
    height: 25px;
}

.subContentsArea .contentsArea .tableJoin td input[type=checkbox] {
    width: 25px;
    height: 25px;
}

.subContentsArea .contentsArea .tableJoin td input.btnCheck {
    padding: 0 16px;
    width: auto;
    height: 30px;
    font-size: 13px;
    letter-spacing: -1px;
    color: #fff;
    border: 0px;
    border-radius: 2px;
    background-color: #aaa;
}

    .subContentsArea .contentsArea .tableJoin td input.btnCheck:hover {
        cursor: pointer;
        background-color: #999;
        box-shadow: rgba(0,0,0,0.4) 2px 2px 5px;
    }

.subContentsArea .contentsArea .tableJoin td span {
    display: inline-block;
    font-size: 16px;
    color: #666;
    letter-spacing: -1px;
    line-height: 25px;
}

    /*170630 김슬기 추가 시작*/
    .subContentsArea .contentsArea .tableJoin td span.barErrorMessageSummaryInfo {
        position: absolute;
        top: 25px;
        left: 0px;
        z-index: 150;
        font-size: 14px;
        letter-spacing: -1px;
    }

        .subContentsArea .contentsArea .tableJoin td span.barErrorMessageSummaryInfo li.txtWarning {
            margin-top: 1px;
        }
/*170630 김슬기 추가 끝*/

.subContentsArea .contentsArea .tableJoin td .pInfoText {
    font-size: 13px;
    letter-spacing: -1px;
}

.subContentsArea.MembersCenter .contentsArea .tab {
    display: inline-block;
    width: 100%;
    margin: 20px 0;
}

    .subContentsArea.MembersCenter .contentsArea .tab > li {
        cursor: pointer;
        float: left;
        padding: 10px 0;
        width: 33.33333%;
        font-size: 16px;
        color: #072a4d;
        letter-spacing: -1px;
        text-align: center;
        border-top: 2px solid #072a4d;
        border-bottom: 2px solid #072a4d;
        border-left: 2px solid #072a4d;
        border-right: 0px;
        background-color: #fff;
    }

    .subContentsArea.MembersCenter .contentsArea .tab.opensource > li {
        width: 25%; /*160920 김슬기 수정 / width: 33.33333 -> 25 / '오픈소스라이선스'항목 추가*/
    }

    .subContentsArea.MembersCenter .contentsArea .tab > li:hover {
        background-color: #e6e9ed;
    }

    .subContentsArea.MembersCenter .contentsArea .tab.step4 > li {
        width: 24%;
    }

    .subContentsArea.MembersCenter .contentsArea .tab > li:last-child {
        border-right: 2px solid #072a4d;
    }

        .subContentsArea.MembersCenter .contentsArea .tab > li:last-child:after {
            clear: both;
        }

    .subContentsArea.MembersCenter .contentsArea .tab > li.on {
        color: #fff;
        background-color: #072a4d;
    }

.subContentsArea.MembersCenter .contentsArea .joinFinished {
    text-align: center;
    margin: 60px 0;
}

    .subContentsArea.MembersCenter .contentsArea .joinFinished > .img {
        display: inline-block;
        width: 160px;
        height: 160px;
        margin: 0 auto;
        background-image: url('../Images/common/imgInformation.png');
        background-repeat: no-repeat;
        background-position: -9px 0px;
    }

    .subContentsArea.MembersCenter .contentsArea .joinFinished > .imgTransfer {
        display: inline-block;
        width: 160px;
        height: 160px;
        margin: 0 auto;
        background-image: url('../Images/common/imgTransferCancel.png');
        background-repeat: no-repeat;
        background-position: -9px 0px;
    }

    .subContentsArea.MembersCenter .contentsArea .joinFinished > .txtTitle {
        font-size: 40px;
        color: #072a4d;
        font-weight: lighter;
        letter-spacing: -5px;
        margin-bottom: 10px;
    }

    .subContentsArea.MembersCenter .contentsArea .joinFinished > .txtDescription {
        font-size: 13px;
        color: #999;
        letter-spacing: -1px;
    }

/* 2018-10-22 계정정보 등 디자인 변경 */
.articleMembers {
    width: 100%;
    height: calc(100% - 90px);
    display: flex;
    justify-content: center;
}

.divMembers {
    display: inline-block;
    padding: 20px;
    background-color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 5px;
}

    .divMembers > .txtTitle {
        padding: 40px 0;
        font-size: 21px;
        color: #072a4d;
        text-align: center;
    }

.sectionMembers {
    position: relative;
    width: 430px; /*181023 김슬기 수정 / 420 -> 430로 변경*/
}

    .sectionMembers > .titleBox {
        width: 100%;
        min-height: 50px; /*190918 김슬기 수정 / 글씨가 위로 치우쳐져서 주석처리*/
        height: auto;
        display: inline-flex;
        align-items: center;
        color: #fff;
        text-align: center;
        justify-content: center;
        border-radius: 25px;
        background-color: #072a4d;
        word-wrap: break-word; /*181023 김슬기 추가 / 글이 길어질 경우 줄바꿈*/
        display: inline-block;
        padding: 5px 20px; /*181023 김슬기 수정*/
    }

    .sectionMembers > .tab {
        position: absolute;
        top: 7px;
        width: calc(50% - 7px);
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-radius: 18px;
        background-color: #072a4d;
        cursor: pointer; /*181023 김슬기 추가*/
    }

    .sectionMembers > .hiddenControl:checked + .tab {
        color: #072a4d;
        background-color: #fff;
    }

    .sectionMembers > .tab.FindAccountID {
        left: 7px;
    }

    .sectionMembers > .tab.FindPassword {
        right: 7px;
    }

    .sectionMembers > .tabContents {
        min-height: 300px;
        position: relative;
        perspective: 1000px;
        transform-style: preserve-3d;
    }

.tabContentsDetail {
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    position: absolute;
    transform: rotateY(180deg);
    backface-visibility:;
    transition: all .4s linear;
}

.divInputBox dl {
    width: 100%;
    margin-bottom: 20px;
}

    .divInputBox dl > dt {
        font-size: 12px;
        color: #666;
    }

    .divInputBox dl > dd {
        height: 40px;
        width: 100%;
    }

        .divInputBox dl > dd > input,
        .divInputBox dl > dd > select {
            width: 100%;
            height: 100%;
            font-size: 16px;
            border: 0px;
            border-bottom: 1px solid #c2c5cb;
        }

            .divInputBox dl > dd > input:focus {
                color: #15a4fa;
                border-bottom: 2px solid #15a4fa;
            }
        /*181023 김슬기 추가 / 오류 메시지 */
        .divInputBox dl > dd > .spanInfo {
            position: relative;
            top: -5px;
        }

        .divInputBox dl > dd > .spanInfo {
            font-size: 11px;
            color: #eb5252;
        }

.divInputBox .btnArea {
    width: 100%;
    margin: 0;
    padding: 20px 0 0 0;
    text-align: right;
}
    /*181023 김슬기 추가 끝 */

    .divInputBox .btnArea button {
        position: relative;
        display: inline-block;
        height: 46px;
        font-size: 16px;
        border: 0;
    }

    .divInputBox .btnArea input[type=button] { /*181024 김슬기 추가 / 일부 button을 input type button으로 변경*/
        position: relative;
        display: inline-block;
        height: 46px;
        font-size: 16px;
        border: 0;
        cursor: pointer;
    }

    .divInputBox .btnArea button:before,
    .divInputBox .btnArea button:after {
        position: absolute;
        content: '';
    }

    .divInputBox .btnArea button:hover {
        cursor: pointer;
        opacity: 0.9;
    }

    .divInputBox .btnArea button.btnNormal {
        padding: 0px 50px 0px 20px;
        color: #fff;
        background-color: #15a4fa;
    }

        .divInputBox .btnArea button.btnNormal:before {
            top: 16px;
            right: 13px;
            width: 13px;
            height: 13px;
            border: 1px solid;
            border-color: #fff #fff transparent transparent;
            transform: rotate(45deg);
        }

        .divInputBox .btnArea button.btnNormal:after {
            right: 11px;
            top: 23px;
            width: 26px;
            height: 1px;
            background-color: #fff;
        }

    /*181023 김슬기 수정 / 버튼을 a 태그로 변경*/
    .divInputBox .btnArea .btnCancel {
        padding: 0px 20px;
        color: #fff;
        background-color: #aaa;
    }

    .divInputBox .btnArea a {
        position: relative;
        display: inline-block;
    }

        .divInputBox .btnArea a .btnCancel {
            height: 46px;
            padding: 12px 20px;
        }
/*181023 김슬기 수정 끝*/
.sectionMembers > .hiddenControl:checked + .tab + .hiddenControl + .tab + .tabContents > .divFindAccountID {
    transform: rotate(0);
}

.sectionMembers > .hiddenControl + .tab + .hiddenControl:checked + .tab + .tabContents > .divFindPassword {
    transform: rotate(0);
}
/*181008 김슬기 추가 시작*/
.ulComboItem.RegistCombo /* 회원가입시 소속에 붙는 콤보박스*/ {
    width: 280px;
}

    .ulComboItem.RegistCombo li {
        height: 30px;
        padding: 0 10px;
    }

        .ulComboItem.RegistCombo li:hover {
            background-image: none;
        }

/*에러메세지*/
.barErrorMessageSummaryInfo {
    display: inline-block;
    padding-left: 25px;
    font-size: 13px;
    letter-spacing: -1px;
    color: #eb5252;
    background-image: url('../Images/common/iconError.png');
    background-repeat: no-repeat;
    background-position: 0px center;
}

    /*170630 김슬기 추가*/
    .barErrorMessageSummaryInfo li.txtWarning {
        color: #eb5252;
        margin-top: 3px;
    }

.subContentsArea .contentsArea .divLoginArea > .barErrorMessageSummaryInfo {
    margin-top: 10px;
}

.subContentsArea .contentsArea .barErrorMessageSummaryInfo {
    margin-top: 10px;
}

    .subContentsArea .contentsArea .barErrorMessageSummaryInfo.Box {
        margin: 0px;
        padding: 3px 0 3px 25px;
        border: 1px solid #eb5252;
        background-color: #fffbf3;
    }

    .subContentsArea .contentsArea .barErrorMessageSummaryInfo li {
        color: #eb5252 !important;
    }

/*에러 메세지창 영역*/
.divError {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 000;
}

.messageBox {
    margin: 0 auto;
    padding: 80px 0;
    text-align: center;
}

    .messageBox .img {
        display: inline-block;
        width: 150px;
        height: 150px;
        background-color: #f1f1f1;
        background-image: url(../Images/common/imgError.png);
        background-repeat: no-repeat;
        background-position: 15px 29px;
        border-radius: 50%;
    }

        .messageBox .img.AuthError {
            background-position: 15px -116px;
        }

        .messageBox .img.Ok {
            background-position: 15px -116px;
        }

    .messageBox .txtTitle {
        font-size: 34px;
        letter-spacing: -3px;
        color: #464646; /*181122 김슬기 수정 / #fff -> #464646 으로 변경*/
        font-weight: lighter;
    }

    .messageBox .txtDescription {
        padding: 20px 0;
        font-size: 16px;
        letter-spacing: -1px;
        color: #464646; /*181122 김슬기 수정 / #fff -> #464646 으로 변경*/
    }

    .messageBox .inputBox {
        position: relative;
        display: inline-block;
        margin: 10px 0;
        padding: 15px 25px;
        background-color: #ededed;
        border-radius: 25px;
    }

        .messageBox .inputBox > label, .messageBox .inputBox > p, .messageBox .inputBox > span {
            font-size: 16px;
            color: #072a4d;
            letter-spacing: -1px;
        }

        .messageBox .inputBox > input {
            height: 35px;
            padding: 4px 8px;
            font-size: 16px;
            color: #333;
            font-weight: bold;
            /*background-color:#fff;*/
            border: 1px solid #ccc;
        }

        .messageBox .inputBox .field-validation-error {
            position: absolute;
            margin: 0 30px;
            padding: 3px 0;
            width: 90%;
            left: 0;
            bottom: -10px;
            font-size: 13px;
            color: #fff;
            text-align: center;
            letter-spacing: -1px;
            background-color: #eb5252;
        }

        .messageBox .inputBox > input.btn {
            height: 35px;
            padding: 4px 16px;
            font-size: 13px;
            color: #fff;
            background-color: #072a4d;
            border: 0px;
        }

            .messageBox .inputBox > input.btn:hover {
                cursor: pointer;
                box-shadow: rgba(0,0,0,0.3) 3px 3px 5px;
            }


.subContentsArea .contentsArea .messageBox > form > .barErrorMessageSummaryInfo {
    margin-left: 0px;
}
/*정보성 메세지*/
.copyTextStyle {
    display: inline-block;
    padding: 3px 8px;
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
}

/*popup 띄우기*/
.popupBg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(52,64,82,.2);
}
/*CommonButton*/
.btnArea {
    position: relative;
    width: 100%;
    padding: 20px;
    margin: 0 auto;
    text-align: center;
}

    .btnArea .btn {
        padding: 8px 24px;
        color: #072a4d;
        font-size: 16px;
        border: 2px solid #072a4d;
        background-color: #fff;
    }

        .btnArea .btn:hover {
            cursor: pointer;
            color: #fff;
            background-color: #072a4d;
            box-shadow: rgba(0,0,0,0.3) 2px 2px 5px;
            transition: 0.3s all;
        }

        .btnArea .btn.Point {
            color: #fff;
            border: 2px solid #15A4FA;
            background-color: #15A4FA;
        }

        .btnArea .btn.URL {
            position: absolute;
            left: 0;
            top: 10px;
        }



@media all and (min-width:1599px) {
    .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .ulTypeTime > li {
        transform: scale(1.4);
        transform-origin: 27px 0;
        margin-bottom: 20px;
    }

    .asAdminStatusArea .devChartScrollWrap > .chartWrap .serviceTimeArea > .totalService > .txtCaption {
        font-size: 16px;
    }
}

/*Loading - 2018-1121 : 박혜진*/

.loading {
    width: 100%;
    height: 100%;
    background: rgba(34,30,50,0.8);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
}

    .loading > div {
        width: 60px;
        height: 60px;
        position: absolute;
        left: 50%;
        margin-left: -30px;
        top: 50%;
        margin-top: -30px;
    }


        .loading > div > div {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            background: #15a4fa;
            top: 10px;
            left: 10px;
            transform-origin: 20px 20px;
            border-radius: 8px;
            animation: spin-a 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
        }

        .loading > div > .c2 {
            top: 10px;
            left: auto;
            right: 10px;
            background: #ef5350;
            transform-origin: -4px 20px;
            animation: spin-b 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
        }

        .loading > div > .c3 {
            top: auto;
            left: auto;
            right: 10px;
            bottom: 10px;
            background: #67bb6a;
            transform-origin: -4px -4px;
            animation: spin-c 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
        }

        .loading > div > .c4 {
            top: auto;
            bottom: 10px;
            background: #f6c22b;
            transform-origin: 20px -4px;
            animation: spin-d 2s infinite cubic-bezier(0.5, 0, 0.5, 1);
        }

@keyframes spin-a {
    0% {
        transform: rotate(90deg);
    }

    0% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-b {
    0% {
        transform: rotate(90deg);
    }

    25% {
        transform: rotate(90deg);
    }

    25% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-c {
    0% {
        transform: rotate(90deg);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    50% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-d {
    0% {
        transform: rotate(90deg);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    75% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.loading > span {
    width: 100px;
    height: 30px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 50%;
    margin-top: 30px;
    color: #fff;
    font-size: 12px;
    text-align: center;
}


/*검색데이터 없음*/
.msgNodataArea {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    z-index: 8;
}

    .msgNodataArea.Auth {
        position: relative;
        position: relative;
    }

    .msgNodataArea > section {
        display: inline-block;
        text-align: center;
    }

    .msgNodataArea .img {
        position: relative;
        display: inline-block;
        width: 130px;
        height: 130px;
        background-color: #e7e9ed;
        border-radius: 50%;
    }

        .msgNodataArea .img > i {
            display: inline-block;
            width: 95px;
            height: 95px;
            margin: 21px 0 0 2px;
            background-image: url('../Images/common/imgError.png');
            background-repeat: no-repeat;
            background-position: -10px -421px;
        }

    .msgNodataArea > section .txtMessage {
        margin: 8px 0;
        text-align: center;
        font-size: 16px;
        color: #072a4d;
    }

    .msgNodataArea.Auth .img {
        width: 150px;
        height: 150px;
    }

        .msgNodataArea.Auth .img > i {
            width: 101px;
            background-position: -10px -139px;
        }