/*********************** 내정보(관리자) 리뉴얼 191121 김주현 ***********************/
/* (공통) */

.ellipsis { /* .. 말줄임 표시 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.myPageWrap {
    display: flex;
    width: 100%;
    /*min-width: 1000px;*/
    height: calc(100% - 30px);
    overflow: hidden;
    font-size: 13px;
}

    .myPageWrap:after {
        clear: both;
    }
    .myPageWrap .rightArea .maxWidth1000 {
        max-width:  1000px;
        min-width: 740px;
    }
    .myPageWrap > .rightArea .divTxtInformation {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 20px;
        font-size: 13px;
        color: #666;
        letter-spacing: -1px;
    }

        .myPageWrap > .rightArea .divTxtInformation:before {
            content: '';
            display: block;
            width: 24px;
            height: 20px;
            background-image: url('../Images/common/MainImg/icons.png');
            background-position: -138px -65px;
        }

    .myPageWrap > .rightArea .txtSubTitle {
        padding: 8px 20px;
        font-size: 13px;
        font-weight: bold;
        color: #333;
        background-color: #f1f1f1;
    }

    .myPageWrap > .rightArea .eventDescription {
        padding: 20px;
        font-size: 12px;
        color: #666;
        letter-spacing: -0.5px;
        border-bottom: 1px solid #ccc;
    }

    /* 고객정보입력 230802 김주현 */
    .myPageWrap .rightArea .csInfoWrap {
        display: flex;
        justify-content: space-between;
    }

        /* 고객현황 기본정보탭 */
        .myPageWrap .rightArea .csInfoWrap.tabContentsBox { 
            flex-direction: column;
        }

            .myPageWrap .rightArea .csInfoWrap.tabContentsBox .csInfoRight {
                margin-left: 0;
                padding-left: 0;
                padding-top: 20px;
                border-left: 0;
            }

            .myPageWrap .rightArea .csInfoWrap.tabContentsBox .csInfoWrap {
                flex-direction: column;
            }


        .myPageWrap .rightArea .csInfoWrap > section {
            flex-shrink: 0;
            flex: 1;
        }

            .myPageWrap .rightArea .csInfoWrap > section.csInfoRight {
                margin-left: 30px;
                padding-left: 30px;
                border-left: 1px solid #ddd;
            }

                .myPageWrap .rightArea .csInfoWrap > section.csInfoRight .btnArea {
                    margin-top: 20px;
                    padding-top: 10px;
                    border-top: 1px solid #ddd;
                }

        .myPageWrap .rightArea .csInfoWrap .divAgree3 .txtTitle {
            padding-top: 10px;
            padding-bottom: 20px;
            font-size: 18px;
            color: #1a1b23;
            letter-spacing: -2px;
        }

    .myPageWrap .rightArea .csInfoWrap .tableJoin {
        max-width: 600px;
    }

    .myPageWrap .rightArea .csInfoWrap .tableJoin th {
        width: 120px;
        min-width: unset;
        padding: 0 0 20px;
    }

    .myPageWrap > .rightArea .csInfoWrap .tableJoin td {
        position: relative;
        padding: 0 0 20px;
    }

    .myPageWrap .rightArea .csInfoWrap .tableJoin.Read th {
        min-height: 36px;
        padding-bottom: 0;
        font-weight: bold;
        color: #1a1b23;
    }

    .myPageWrap .rightArea .csInfoWrap .tableJoin.Read td {
        min-height: 36px;
        padding-bottom: 0;
    }

    .myPageWrap > .rightArea .csInfoWrap .tableJoin .btn_wrap {
        width: 100%;
    }


    .myPageWrap > .rightArea .csInfoWrap .tableJoin td input[type=text] {
        width: 100%;
        background-color: transparent;
    }

    .myPageWrap > .rightArea .csInfoWrap .tableJoin td .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        height: 26px;
        padding: 0 15px;
        border-radius: 2px;
        background-color: #15B4C2;
        color: #fff;
        font-size: 13px;
    }

        .myPageWrap > .rightArea .csInfoWrap .tableJoin td .btn:hover {
            background-color: #0b8a96;
            cursor: pointer;
        } 

    .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileDownloadArea {
        display:flex;
        flex-direction:column;
        width: 100%;
    }

    .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileDownloadArea > span {
        padding-top: 10px;
        color: #999;
        line-height: normal;
    }

    .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 90px;
        padding: 20px;
        border: 2px dashed #DBDBDB;
        border: 2px dashed #DBDBDB;
        border-radius: 5px;
        background-color: #F8F8F8;
    }

        .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .btnUpload {
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: flex-start;
            flex-shrink: 0;
            min-width: 55px;
            height: 26px;
            border: 1px solid #15B4C2;
            border-radius: 2px;
            background-color: #fff;
            color: #15B4C2;
            font-size: 13px;
            letter-spacing: -1px;
        }

            .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .btnUpload:hover {
                background-color: #15B4C2;
                color: #fff;
                cursor: pointer;
            }

        .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea input[type=file] {
            display: none;
        }

        .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea > div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

            .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .default .icon {
                flex-shrink: 0;
                width: 26px;
                height: 32px;
                background-image: url('../Images/common/iconFile.svg');
            }

            .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .default .txt {
                width: 100%;
                padding-left: 10px;
                color: #999;
                line-height: normal;
            }

        .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .result {
            display: none;
        }

        .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .result .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #999;
            font-style: normal;
        }

            .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .result .icon:before {
                content: "";
                color: #fff;
                font-size: 14px;
                font-weight: bold;
            }

            .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .result .icon.img {
                background-color: #9B51B6;
            }

                .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .result .icon.img:before {
                    content: "IMG";
                }


            .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .result .icon.pdf {
                background-color: #B51308;
            }

                .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .result .icon.pdf:before {
                    content: "PDF";
                }

        .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .result .fileInfo {
            display: flex;
            flex-direction: column;
            width: 100%;
            padding-left: 10px;
        }

            .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .result .fileInfo span {
                line-height: normal;
            }

            .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea .result .fileInfo .size {
                font-size: 11px;
                color: #999;
            }

        .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea.attached .default {
            display: none;
        }
            .myPageWrap > .rightArea .csInfoWrap .tableJoin td .fileUploadArea.attached .result{
                display: flex;
            }


    .myPageWrap > .rightArea .csInfoWrap .tableJoin td .spanInfo {
        position: absolute;
        left: 0;
        bottom: 0;
    }

        .myPageWrap .rightArea .csInfoWrap .divAgreeBox {
            margin-top: 20px;
            padding: 25px 25px 10px;
            background-color: #F2F6F8;
        }


            .myPageWrap .rightArea .csInfoWrap .divAgreeBox .txtTitle {
                padding-bottom: 20px;
                font-size: 16px;
                color: #1a1b23;
                letter-spacing: -2px;
            }


/* 버튼 (공통) */
input[type=button],
input[type=submit] {
    cursor: pointer;
    border-radius: 2px;
    letter-spacing: -.06em;
    vertical-align: top;
    text-align: center;
}

    input[type=button]:hover,
    input[type=submit]:hover {
        box-shadow: rgba(0,0,0,0.3) 2px 2px 5px;
    }

.myPageWrap .btnArea .btnNormal {
    height: 36px;
    margin-left: 5px;
    min-width: 120px;
    padding: 5px 15px;
    border: 0;
    border-radius: 30px;
    background-color: #000;
    font-size: 12px;
    color: #7CD800;
    cursor: pointer;
}

    .myPageWrap .btnArea .btnNormal:hover {
        background-color: #7CD800;
        color: #fff;
    }

.myPageWrap .btnArea .btnOutline {
    height: 36px;
    min-width: 120px;
    margin-left: 5px;
    padding: 5px 15px;
    border: 1px solid #ccc;
    border-radius: 30px;
    background-color: #fff;
    font-size: 12px;
    color: #333;
    cursor: pointer;
}

    .myPageWrap .btnArea .btnOutline:hover {
        box-shadow: rgba(0,0,0,0.3) 2px 2px 5px;
    }

.myPageWrap .btnArea .btnOutlineRed {
    height: 36px;
    min-width: 120px;
    margin-left: 5px;
    padding: 5px 15px;
    border: 1px solid #FF5858;
    border-radius: 30px;
    background-color: #fff;
    font-size: 12px;
    color: #FF5858;
    cursor: pointer;
}

    .myPageWrap .btnArea .btnOutlineRed:hover {
        box-shadow: rgba(0,0,0,0.3) 2px 2px 5px;
    }

.myPageWrap .btnSmall {
    height: 30px;
    padding: 0 12px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
}

.myPageWrap .btnCheck:hover {
    box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
}

.myPageWrap .Grey {
    color: #fff;
    background-color: #999;
}

    .myPageWrap .Grey:hover {
        background-color: #777;
    }

.myPageWrap .Navy {
    color: #fff;
    background-color: #072a4d;
}

    .myPageWrap .Navy:hover {
        background-color: #1a1b23;
    }

    .myPageWrap .Navy:disabled {
        opacity: .5;
        padding: 0 12px !important;
        background-color: #072a4d;
        box-shadow: none;
    }

.myPageWrap .serviceChange {
    color: #fff;
    background-color: #36AAFF;
}

    .myPageWrap .serviceChange:hover {
        color: #fff;
        background-color: #1e87d4;
    }


.myPageWrap .skyGreen {
    color: #fff;
    background-color: #15b4c2;
}

    .myPageWrap .skyGreen:hover {
        color: #fff;
        background-color: #0b8a96;
    }

.myPageWrap .btnSmall.outline,
.myPageWrap .btnTable.outline {
    color: #072a4d;
    background-color: #fff;
    border: 1px solid #072a4d;
}

    .myPageWrap .btnSmall.outline:hover,
    .myPageWrap .btnTable.outline:hover {
        color: #fff;
        background-color: #072a4d;
    }

.myPageWrap .btnTable {
    min-width: 40px;
    height: 21px;
    margin: 0;
    padding: 0 7px;
    border: none;
    border-radius: 3px;
    font-size: 11px;
    letter-spacing: -.03em;
}

.myPageWrap .btnHistory {
    color: #fff;
    background: #000;
}


/* 검색 (공통) */
.myPageWrap .searchArea {
    position: relative;
    float: right;
    width: 100%;
    height: 55px;
}

    .myPageWrap .searchArea .btn {
        float: right;
        margin-left: 10px;
        width: 36px;
        height: 36px;
        background-color: #cdd4db;
        background: url('../Images/common/iconEducation.png') no-repeat;
        border-radius: 50%;
        border: 0px;
    }

        .myPageWrap .searchArea .btn.Setting {
            background-color: #cdd4db;
            background-position: -102px -5px;
        }

    .myPageWrap .searchArea .dlgMessageOnlineSetting {
        position: absolute;
        right: 0px;
        top: -30px;
        padding: 4px 8px;
        color: #fff;
        font-size: 13px;
        background-color: #1a1b23;
        border-radius: 20px;
    }

    .myPageWrap .searchArea .btn.Search {
        background-color: #1a1b23;
        background-position: -12px -2px;
        background-size: 340px;
    }

    .myPageWrap .searchArea .btn:hover {
        cursor: pointer;
        background-color: #eb5252;
        box-shadow: rgba(0,0,0,0.4) 5px 5px 5px;
    }

    .myPageWrap .searchArea .searchBox {
        position: absolute;
        right: 0;
        top: 0px;
        width: 0px;
        height: 36px;
        background-color: #1a1b23;
        border-radius: 18px;
        opacity: 0;
        visibility: collapse;
    }


        .myPageWrap .searchArea .searchBox .btn {
            position: absolute;
            right: 0px;
            top: 0px;
        }

        .myPageWrap .searchArea .searchBox > input[type='text'] {
            padding-left: 20px;
            width: 330px;
            height: 36px;
            color: #fff;
            font-size: 15px;
            background-color: transparent;
            border: 0px;
        }

/* 검색:선택적 (공통) */
.myPageWrap .searchArea2 {
    z-index: 2;
    position: relative;
    width: 100%;
    height: 60px;
    padding: 15px;
    color: #1a1b23;
    font-size: 12px;
    font-weight: bold;
}
    /* 검색:전체 고객 현황인 경우 */
    .myPageWrap .searchArea2.devTotalCustomerSearch{
        height: 135px;
    }

    .myPageWrap .searchWrap.fixed,
    .myPageWrap .searchArea2.fixed {
        background-color: #dce9f7;
        border-bottom: 1px dashed #ccc;
    }

    .myPageWrap .searchArea2 .searchRight {
        position: absolute;
        top: 20px;
        right: 15px;
        letter-spacing: -.06em;
    }

        .myPageWrap .searchArea2 .searchRight .txtNumber {
            margin: 0 5px;
            color: #eb5252;
            font-size: 16px;
        }

        .myPageWrap .searchArea2 .searchRight > .btnUpload {
            display: inline-block;
        }

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

    .myPageWrap .searchArea2 .number label {
        padding-left: 20px;
    }


    .myPageWrap .searchArea2 select,
    .myPageWrap .searchArea2 input[type=text] {
        height: 30px;
        padding: 3px 3px;
        font-size: 12px;
        color: #666;
        letter-spacing: -.06em;
        border: 1px solid #aaa;
    }

    .myPageWrap .searchArea2 input {
        margin: 0;
    }

    .myPageWrap .searchArea2 input[type=text] {
        width: 140px;
        padding: 0 10px;
    }

    .myPageWrap .searchArea2 select.selectYear,
    .myPageWrap .searchArea2 select.selectMonth {
        margin-right: 5px;
    }

    .myPageWrap input[type=text].date {
        width: 75px;
        padding: 0 5px;
    }

    /*.myPageWrap .searchArea2 input[type=text].date {
        width: 70px;
        padding: 0 5px;
        background-image: url('../Images/common/iconDate.svg');
        background-repeat: no-repeat;
        background-position: 90% center;
    }

        .myPageWrap .searchArea2 input[type=text].date:valid {
            background-image: none;
        }*/

    .myPageWrap .searchArea2 input[type=checkbox] {
        width: 16px;
        height: 16px;
        margin-left: 20px;
    }

    .myPageWrap .searchArea2 input[type=button] {
        cursor: pointer;
    }

    .myPageWrap .searchArea2 .btnDetail {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 15px;
        right: 15px;
        height: 30px;
        padding: 0 10px;
        border: 1px solid #072a4d;
        border-radius: 15px;
        color: #072a4d;
    }
        .myPageWrap .searchArea2 .btnDetail:after {
            content: "";
            width: 6px;
            height: 6px;
            margin-top: -3px;
            margin-left: 5px;
            border-left: 2px solid #072a4d;
            border-bottom: 2px solid #072a4d;
            transform: rotate(-45deg);
        }
        .myPageWrap .searchArea2 .btnDetail:hover {
            background-color: #072a4d;
            box-shadow: rgb(0 0 0 / 30%) 2px 2px 5px;
            cursor: pointer;
            color: #fff;
        }
            .myPageWrap .searchArea2 .btnDetail:hover:after {               
                border-color: #fff;
            }


    .myPageWrap .searchArea2 .searchDetail2.show {
        z-index: 2;
        display: block;
    }

        .myPageWrap .searchArea2 .btnDetail.show {
            background-color: #072a4d;
            color: #fff;
        }
            .myPageWrap .searchArea2 .btnDetail.show:hover {
                background-color:#1a1b23;
            }
            .myPageWrap .searchArea2 .btnDetail.show:after {
                margin-top: 3px;
                border-color: #fff;
                transform: rotate(135deg);
            }

    .myPageWrap .searchArea2 label {
        font-size: 12px;
        letter-spacing: -.08em;
    }

    .myPageWrap .searchArea2 .searchStatus {
        display: none;
    }

    .myPageWrap .searchArea2 > .btnSearchDetail {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 19px;
        height: 30px;
        border: 1px solid #1a1b23;
        border-radius: 15px;
        cursor: pointer;
    }

        .myPageWrap .searchArea2 > .btnSearchDetail:hover {
            background: #98b9db;
        }

        .myPageWrap .searchArea2 > .btnSearchDetail > span {
            display: block;
            width: 17px;
            height: 10px;
            margin-top: 10px;
            background: url('../Images/common/iconCombo.png') no-repeat 0px -52px;
            background-size: 30px;
        }

        .myPageWrap .searchArea2 > .btnSearchDetail.Close {
            background: #1a1b23;
        }

            .myPageWrap .searchArea2 > .btnSearchDetail.Close > span {
                background-position-y: -102px;
            }

    .myPageWrap .searchArea2 .searchDetail {
        opacity: 0;
        visibility: collapse;
        position: absolute;
        right: 15px;
        width: 520px;
        margin-top: 10px;
        background-color: #fff;
        border: 1px solid #1a1b23;
        -moz-box-shadow: 0 0 10px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
        box-shadow: 0 0 10px rgba(0,0,0,.3);
    }

        .myPageWrap .searchArea2 .searchDetail.Open {
            animation: aniSearchShow 0.5s ease 1 forwards;
        }

        .myPageWrap .searchArea2 .searchDetail.Close {
            animation: aniSearchHide 0.5s ease 1 forwards;
        }

        .myPageWrap .searchArea2 .searchDetail .btnArea {
            padding: 20px 15px;
        }

            .myPageWrap .searchArea2 .searchDetail .btnArea input {
                margin: 0 0 0 5px;
            }

@keyframes aniSearchShow {
    0% {
        opacity: 0;
        top: -70px;
        visibility: collapse;
    }

    100% {
        opacity: 1;
        top: 45px;
        visibility: visible;
    }
}

@keyframes aniSearchHide {
    0% {
        opacity: 1;
        top: 45px;
        visibility: visible;
    }

    100% {
        opacity: 0;
        top: -70px;
        visibility: collapse;
    }
}

.myPageWrap .searchArea2 .searchDetail > .title {
    position: relative;
    padding: 10px 20px;
    background: #1a1b23;
    color: #fff;
}

    .myPageWrap .searchArea2 .searchDetail > .title > span {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        background: url('/Images/common/btnClose.png') center -10px no-repeat;
        cursor: pointer;
    }

        .myPageWrap .searchArea2 .searchDetail > .title > span:hover {
            background: url('/Images/common/btnCloseGray.png') center no-repeat;
        }

.myPageWrap .searchArea2 .searchDetail > .content {
    display: flex;
}

    .myPageWrap .searchArea2 .searchDetail > .content > div {
        position: relative;
        width: 50%;
        padding: 15px 15px 0;
    }

        .myPageWrap .searchArea2 .searchDetail > .content > div > label {
            display: block;
            padding-bottom: 8px;
        }

        .myPageWrap .searchArea2 .searchDetail > .content > div > .checkAllWrap {
            position: absolute;
            top: 15px;
            right: 15px;
        }

        .myPageWrap .searchArea2 .searchDetail > .content > div > .selectTask {
            display: flex;
            flex-wrap: wrap;
        }

            .myPageWrap .searchArea2 .searchDetail > .content > div > .selectTask > span {
                width: 69px;
                padding: 5px;
                margin-right: 10px;
                margin-bottom: 6px;
                text-align: center;
                color: #bbb;
                border: 1px solid #bbb;
                border-radius: 14px;
                cursor: pointer;
                font-weight: normal;
            }

                .myPageWrap .searchArea2 .searchDetail > .content > div > .selectTask > span:hover {
                    color: #777;
                    border-color: #777;
                }

                .myPageWrap .searchArea2 .searchDetail > .content > div > .selectTask > span.on {
                    color: #1a1b23;
                    border-color: #1a1b23;
                    font-weight: bold;
                }

                .myPageWrap .searchArea2 .searchDetail > .content > div > .selectTask > span:nth-child(3n) {
                    margin-right: 0;
                }

.myPageWrap .searchArea2 .searchDetail2 {
    display: none;
    position: absolute;
    top: 50px;
    right: 0;
    width: 600px;
    height: auto;
    border: 1px solid #1a1b23;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
}

    .myPageWrap .searchArea2 .searchDetail2 .title {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
        padding: 0 20px;
        color: #072a4d;
        font-size: 16px;
        letter-spacing: -.06em;
    }

        .myPageWrap .searchArea2 .searchDetail2 .title:before {
            content: "";
            width: 5px;
            height: 20px;
            margin-right: 5px;
            border-radius: 5px;
            background-color: #072a4d;
        }

    .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent {
        display: flex;
        width: 100%;
        padding: 20px;
    }

        .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .leftArea {
            display: flex;
            flex-shrink: 0;
            flex-direction: column;
            width: 40%;
            padding-right: 20px;
        }

            .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .leftArea > p {
                padding: 15px 0 5px;
                color: #072a4d;
            }

                .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .leftArea p:first-child,
                .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .rightArea p:first-child {
                    padding-top: 0;
                }


            .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .leftArea .checkboxWrap {
                display: flex;
                align-items: center;
                padding-top: 15px;
            }
                .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .leftArea .checkboxWrap > label {
                    margin-left: 5px;
                    color: #072a4d;
                }

            .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .leftArea input[type=text],
            .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .leftArea select {
                width: 100%;
            }


            .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .leftArea input[type=checkbox] {
                margin-left: 0;
            }

        .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .rightArea {
            width: 60%;
        }

            .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .rightArea > p {
                padding: 10px 0 5px;
                color: #072a4d;
            }

            .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .rightArea .checkboxWrap {
                   display: flex;
                   justify-content: space-between;
                   flex-wrap: wrap;
            }
                .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .rightArea .checkboxWrap.devModelLevelName .checkbox {
                    width: 23.5%;
                    padding-bottom: 5px;
                }

                .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .rightArea .checkboxWrap .checkbox {
                    width: 32%;
                    padding-bottom: 5px;
                }
                .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .rightArea .checkboxWrap.optionWrap .checkbox {
                    width: 48.75%;
                }
                    .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .rightArea .checkboxWrap .checkbox > input[type=checkbox] {
                        display: none;
                    }
                        .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .rightArea .checkboxWrap .checkbox > input[type=checkbox] + label {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 100%;
                            height: 30px;
                            color: #ccc;
                            border: 1px solid #ccc;
                            border-radius: 15px;
                            cursor: pointer;
                        }

                            .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .rightArea .checkboxWrap .checkbox > input[type=checkbox] + label:hover {
                                color: #999;
                                border-color: #999;
                            }

                        .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .rightArea .checkboxWrap .checkbox > input[type=checkbox]:checked + label {
                            color: #072a4d;
                            border-color: #072a4d;
                        }

                        .myPageWrap .searchArea2 .searchDetail2 .searchDetailContent .rightArea .checkboxWrap .checkbox > input[type=checkbox]:disabled + label {
                            color: #ccc;
                            border-color: #eee;
                            background-color: #eee;
                            cursor: not-allowed;
                        }

    .myPageWrap .searchArea2 .searchDetail2 .btnArea {
        justify-content: center;
    }

/* 탭 (공통) */
.myPageWrap > .rightArea .commonTab {
    display: inline-block;
    width: 100%;
    margin: 20px 0;
}

    .myPageWrap > .rightArea .commonTab > li {
        cursor: pointer;
        float: left;
        padding: 10px 0;
        width: 25%;
        font-size: 15px;
        color: #1a1b23;
        letter-spacing: -1px;
        text-align: center;
        border-top: 2px solid #1a1b23;
        border-bottom: 2px solid #1a1b23;
        border-left: 2px solid #1a1b23;
        border-right: 0px;
        background-color: #fff;
    }

    .myPageWrap > .rightArea .commonTab.opensource > li {
        width: 33.33333%;
    }

    .myPageWrap > .rightArea .commonTab.half li{
        width: 50%;
    }

    .myPageWrap > .rightArea .commonTab > li:hover {
        background-color: #e6e9ed;
    }

    .myPageWrap > .rightArea .commonTab.step4 > li {
        width: 24%;
    }

    .myPageWrap > .rightArea .commonTab > li:last-child {
        border-right: 2px solid #1a1b23;
    }

        .myPageWrap > .rightArea .commonTab > li:last-child:after {
            clear: both;
        }

    .myPageWrap > .rightArea .commonTab > li.on {
        color: #fff;
        background-color: #1a1b23;
    }

.myPageWrap > .rightArea .contCMSCancel {
    display:none;
}

/*  왼쪽 메뉴 (공통) */
.myPageWrap > nav {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 200px;
    height: 100%;
    background: #efefef;
    letter-spacing: -.13em;
}

    .myPageWrap > nav .menu_wrap {
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }

    .myPageWrap > nav .logo {
        display: block;
        margin: 20px 15px;
        /* width: 120px; */
        height: 30px;
        background-image: url(../Images/Common/iconAdmin2020.svg);
        background-repeat: no-repeat;
        background-position: 0 -0;
    }

    .myPageWrap > nav h3 {
        padding: 10px 20px 5px;
        margin-top: 15px;
        color: #1a1b23;
        font-weight: normal;
        font-size: 17px;
    }

        .myPageWrap > nav h3:first-child {
            margin-top: 10px;
        }

    .myPageWrap > nav .gnbsub {
        width: 100%;
    }

        .myPageWrap > nav .gnbsub > li {
            position: relative;
            width: 100%;
            padding: 3px 10px 3px 20px;
            font-size: 12px;
            color: #1a1b23;
            line-height: 20px;
        }

            .myPageWrap > nav .gnbsub > li > .iconNumber {
                position: absolute;
                top: 0px; /*200416 김슬기 수정 / 10 -> 0 수정*/
                right: 10px;
                display: none;
                height: 24px;
                padding: 0 8px;
                line-height: 22px;
                font-size: 12px;
                color: #fff;
                font-weight: bold;
                background-color: #eb5252;
                border-radius: 12px;
            }

            .myPageWrap > nav .gnbsub > li.New > .iconNumber {
                display: inline-block;
            }

    .myPageWrap > nav > .gnbsub > li.New.On > .iconNumber {
        color: #eb5252;
        background-color: #fff;
    }

    .myPageWrap > nav .gnbsub > li:hover {
        cursor: pointer;
        background-color: #ddd;
    }

    .myPageWrap > nav .gnbsub > li.On {
        background-color: #93d50a;
    }

    .myPageWrap > nav .gnbsub > li > ul.spMenuSubOn {
        padding: 10px 0;
        display: block;
        width: 205px;
    }

        .myPageWrap > nav .gnbsub > li > ul.spMenuSubOn > li {
            color: #666;
            font-size: 13px;
            letter-spacing: -1px;
            margin: 8px 0;
            padding: 0 8px;
        }

            .myPageWrap > nav .gnbsub > li > ul.spMenuSubOn > li.On {
                color: #15b4c2;
                font-size: 13px;
                letter-spacing: -1px;
                background-image: url('../Images/common/iconSpMenuArrow.png');
                background-repeat: no-repeat;
                background-position: -8px -58px;
            }

            .myPageWrap > nav .gnbsub > li > ul.spMenuSubOn > li:hover {
                color: #15b4c2;
                font-size: 13px;
                letter-spacing: -1px;
                margin: 8px 0;
                background-image: url('../Images/common/iconSpMenuArrow.png');
                background-repeat: no-repeat;
                background-position: -8px -58px;
            }

.MyInfo {
    position: relative;
    display: flex;
    flex-shrink: 0;
    height: 60px;
    padding: 10px 20px;
}

    .MyInfo .btn_myinfo {
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #072a4d;
        background-image: url(../Images/Common/iconAdminLogin.svg);
        background-repeat: no-repeat;
        background-position: 10px 9px;
    }

.myProfileBox {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    padding: 20px;
    border-top: 3px solid #93d50a;
    background-color: #fff;
    opacity: 1;
    z-index: -1;
    overflow: hidden;
}

    .myProfileBox .userTop {
        position: relative;
    }

        .myProfileBox .userTop .userName,
        .myProfileBox .userId {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 3px;
            letter-spacing: -.03em;
        }

        .myProfileBox .userTop .btnLogout {
            position: absolute;
            top: -15px;
            right: -15px;
            width: 30px;
            height: 30px;
            background-image: url(../Images/Common/iconAdminLogin.svg);
            background-repeat: no-repeat;
            background-position: 5px -35px;
        }

    .myProfileBox .btnEditPassword,
    .myProfileBox .btnEditPersonalInfo {
        display: block;
        width: 150px;
        height: 30px;
        margin: 0 auto 5px;
        border-radius: 18px;
        font-size: 12px;
        cursor: pointer;
    }

    .myProfileBox .btnEditPassword {
        margin-top: 20px;
        background: #fff;
    }

    .myProfileBox .btnEditPersonalInfo {
        border: 0;
        background-color: #000;
        color: #7CD800;
    }

        .myProfileBox .btnEditPersonalInfo:hover {
            background-color: #7CD800;
            color: #fff;
        }

    /*.MyInfo > .btn_myinfo:hover + .myProfileBox,  200610 김슬기 주석 / IE에서 제대로 작동 X
    .myProfileBox:hover {
        opacity: 1;
        z-index: 1;
        height: 175px;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        transition: all 0.3s;
    }*/

.myProfileBox.show {    /*200610 김슬기 추가 / 위 스타일이 ie에서 적용되지 않아 클래스명에 show를 추가하고 동일하게 추가함.*/
    opacity: 1;
    z-index: 1;
    height: 175px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    transition: all 0.3s;
}

/*관리자 정보*/
.partnerInfoBox {
    position: relative;
    width: 100%;
    margin-bottom: 2px;
    padding: 20px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

    .partnerInfoBox.flex {
        display: flex;
    }

    .partnerInfoBox .partnerInfo {
        font-size: 16px;
        color: #1a1b23;
        letter-spacing: -.05em;
        font-weight: bold;
    }

    .partnerInfoBox p {
        font-size: 13px;
        color: #666;
        letter-spacing: -.06em;
        line-height: 30px;
    }

    .partnerInfoBox > .ulClientInfo {
        display: flex;
        align-items: center;
    }

        .partnerInfoBox > .ulClientInfo > li {
            padding-right: 20px;
            border-right: 1px solid #1a1b23;
        }

            .partnerInfoBox > .ulClientInfo > li:last-child {
                padding-left: 20px;
                border-right: 0;
            }

            .partnerInfoBox > .ulClientInfo > li > .txtTitle {
                font-size: 12px;
                color: #1a1b23;
                font-weight: bold;
                line-height: 13px;
                letter-spacing: -.06em;
            }

            .partnerInfoBox > .ulClientInfo > li > .txtUserInfo {
                font-size: 13px;
                color: #1a1b23;
                font-weight: lighter;
                letter-spacing: -.06em;
            }

    /*
        2021.06.16 김우준 추가
        PartnerInfoBox를 시스템 관리 탭으로 옮기면서 tabMenu인 경우 border-top을 0으로 변경
    */
    .partnerInfoBox.devSystemTab {
        position: relative;
        width: 100%;
        margin-bottom: 20px;
        padding: 20px;
        border-top: 0px solid #ccc;
        border-bottom: 0px solid #ccc;
        background-color: #f9f9f9;
        box-sizing: border-box;
    }

/*CommonTable*/
.tableViewMessage {
    padding: 20px 0;
    font-size: 13px;
    letter-spacing: -0.5px;
    color: #1a1b23;
    text-align: center;
    background-color: #f1f1f1;
}

.tableView {
    width: 100%;
    padding: 0px;
    border-spacing: 0px;
    border: 0px;
    border-top: 1px solid #ccc;
}
    .tableView tr.incapacity {
        background-color: #ffecec;
    }

    .tableView tr.on,
    .tableView tr.on:hover {
        background-color: #D5DFE9;
    }

    .tableView th {
        padding: 8px 6px;
        font-size: 12px;
        font-weight: bold;
        color: #1a1b23;
        text-align: center;
        letter-spacing: -.06em;
        border-bottom: 1px solid #ccc;
        background-color: #e6e9ed;
    }

        .tableView th > span.expatiate {
            font-size: 12px;
        }

    .tableView td {
        position: relative;
        padding: 6px;
        font-size: 12px;
        color: #1a1b23;
        text-align: left;
        letter-spacing: -.03em;
        border-bottom: 1px solid #ccc;
    }

    .tableView.smallFont td {
        font-size: 13px;
    }

    .tableView th.brRight,
    .tableView td.brRight {
        border-right: 1px solid #ccc;
    }

    .tableView td.alignCenter {
        text-align: center;
    }
        /*210716 김우준 추가*/
        .tableView td.alignCenter.CompanyStatusStop {
            color: #FF7474;
        }
        /*210716 김우준 추가*/
        .tableView td.alignCenter.CompanyStatusCancleContract {
            color: #999;
        }

    .tableView td.alignRight {
        text-align: right;
    }

        .tableView td.alignRight > input[type=text] { /*200303 김슬기 추가*/
            text-align: right;
        }


    .tableView td.colorRed {
        color: #eb5252;
        font-weight: bold;
    }
    .tableView td.colorBlue {
        color: #1453FF;
        font-weight: bold;
    }

    .tableView td.serviceTotal {
        background-color: #fff7b9;
        font-weight: bold;
    }

    .tableView td.price {
        color: #eb5252;
        font-weight: bold;
        text-align: right;
    }

    .tableView td.total {
        color: #1a1b23;
        font-size: 21px;
        font-weight: bold;
        text-align: right;
        letter-spacing: -.05em;
    }

    .tableView td.Bold {
        font-weight: bold;
    }

    .tableView tr.Point > td {
        background-color: #f5dede;
    }

    .tableView td.add {
        cursor: pointer;
        background-image: url('../Images/common/iconSpAdd.png');
        background-repeat: no-repeat;
        background-position: center;
    }

    .tableView td .iconArea {
        position: relative;
        display: inline-block;
        padding: 0 0 0 30px;
    }

        .tableView td .iconArea > .icon {
            position: absolute;
            left: 0;
            /*transform:translateY(-50%) ;*/
            display: inline-block;
            height: 33px;
        }

            .tableView td .iconArea > .icon:before,
            .tableView td .iconArea > .icon:after {
                content: '';
                position: absolute;
                width: 0;
                height: 0;
            }

    .tableView td.Up {
        color: #037eff;
    }

        .tableView td.Up .iconArea > .icon {
            top: 70%;
        }

            .tableView td.Up .iconArea > .icon:before {
                left: 8px;
                top: -14px;
                border: 7px solid;
                border-color: transparent transparent #037eff transparent;
            }

            .tableView td.Up .iconArea > .icon:after {
                left: 9px;
                top: -12px;
                border: 6px solid;
                border-color: transparent transparent #037eff transparent;
            }

    .tableView td.Down {
        color: #dd0a0a;
    }

        .tableView td.Down .iconArea > .icon {
            top: 100%;
        }

            .tableView td.Down .iconArea > .icon:before {
                left: 8px;
                top: -12px;
                border: 7px solid;
                border-color: #dd0a0a transparent transparent transparent;
            }

            .tableView td.Down .iconArea > .icon:after {
                left: 9px;
                top: -11px;
                border: 6px solid;
                border-color: #dd0a0a transparent transparent transparent;
            }

    .tableView td.Inc {
        color: #FF7474;
    }
        .tableView td.Inc:before {
            content:"+";
        }

    .tableView td.txtRed {
        color: #FF7474;
    }

    .tableView td.Dec {
        color: #1453FF;
    }
        .tableView td.Dec:before {
            content: "-";
        }


    .tableView td.txtBlue {
        color: #1453FF;
    }

    .tableView td.textEllipsis .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 200px;
        padding-right: 30px;
    }

    .tableView td.textEllipsis .moreBtn {
        position: absolute;
        top: 50%;
        right: 5px;            
        display: block;
        width: 16px;
        height: 16px;
        margin-top: -8px;
        border-radius: 50%;
        background-color: #999;
        color: #fff;
        font-weight: bold;
        text-align: center;
    }

        .tableView td.textEllipsis .moreBtn:hover {
            background-color: #15b4c2;
        }

            .tableView td.textEllipsis .moreBtn:hover + .moreText {
                display: block;
            }

    .tableView td.textEllipsis .moreText {
        display: none;
        position: absolute;
        top: 0;
        right: 30px;
        width: 500px;
        padding: 10px;
        border-radius: 5px;
        background-color: rgba(0,0,0,.7);
        color: #fff;
        z-index: 1;
    }
        .tableView td.textEllipsis .moreText:before {
            content: "";
            position: absolute;
            top: 14px;
            right: -7px;
            width: 0;
            height: 0;
            border-top: 4px solid transparent;
            border-left: 7px solid rgba(0,0,0,.7);
            ;
            border-bottom: 4px solid transparent;
        }


    .tableView .cursor:hover {
        background-color: #e9e9e9;
        cursor: pointer;
    }

    .tableView td > .btnCreate {
        display: inline-block;
        padding: 3px 12px;
        font-size: 12px;
        color: #fff;
        text-align: center;
        background-color: #072a4d;
        border: 1px solid #072a4d;
        border-radius: 2px;
    }

        .tableView td > .btnCreate:hover {
            cursor: pointer;
            color: #072a4d;
            background-color: #fff;
        }

    .tableView input[type="checkbox"] {
        height: auto;
    }

    /*200721 김우준 추가*/
    /*스크롤 Contents의 크기로 인해 페이징 처리 안되는 현상으로 인해 높이 30px로 고정*/
    .fixScrollContentsHeight tbody tr {
        height: 30px;
    }

.tableMonthPayment td {
    height: 60px;
    padding: 6px 10px;
    letter-spacing: normal;
}

    .tableMonthPayment td input[type=button] {
        min-width: 72px;
    }

    .tableMonthPayment td span {
        display: block;
    }

        .tableMonthPayment td span.companyName {
            font-size: 14px;
            letter-spacing: -.06em;
        }

        .tableMonthPayment td span.price,
        .tableMonthPayment td span.vat {
            min-width: 90px;
            font-size: 13px;
        }

    .tableMonthPayment td.amount,
    .tableMonthPayment td.unpaid {
        min-width: 120px;
        font-size: 15px;
    }

    .tableMonthPayment td.statusChange {
        padding: 0;
    }

        .tableMonthPayment td.statusChange span {
            display: inline-block;
            width: 7px;
            height: 7px;
            margin-top: 10px;
            border-radius: 50%;
            background: #36AAFF;
        }

    .tableMonthPayment td.unpaid {
        color: #FF7474;
    }


    .tableMonthPayment td .State {
        display: inline-block;
        width: 50px;
        height: 20px;
        line-height: 19px;
        color: #fff;
        font-size: 10px;
        text-align: center;
        letter-spacing: 0px;
        background-color: #eee;
        border-radius: 2px;
    }

    .tableMonthPayment td.No .State {
        background-color: #ccc;
    }

    .tableMonthPayment td.Yes .State {
        background-color: #072a4d;
    }

.ulMonthPayment {
    display: flex;
}

    .ulMonthPayment > li {
        padding: 0 2%;
        border-right: 2px solid #ccc;
        width: 25%;
    }

    .ulMonthPayment.totalCustomer > li {
        width: 25%;
    }

        .ulMonthPayment > li:first-child {
            padding-left: 0;
        }

        .ulMonthPayment > li:last-child {
            border-right: 0;
        }

        .ulMonthPayment > li > .txtCaption {
            font-size: 13px;
            color: #333;
            line-height: normal;
            padding-bottom: 5px;
        }

        .ulMonthPayment > li > .txtValue {
            font-size: 18px;
            color: #333;
            line-height: 16px;
            letter-spacing: -.03em;
            padding-bottom: 5px;
            text-align: right;
        }

            .ulMonthPayment > li > .txtValue.Total {
                color: #15b4c2;
                font-weight: bold;
            }

            .ulMonthPayment > li > .txtValue.Unpaid {
                color: #FF7474;
                font-weight: bold;
            }

            .ulMonthPayment > li > .txtValue.Stop {
                color: #FF7474;
            }
            .ulMonthPayment > li > .txtValue.Termination {
                color: #999;
            }

/******** Right Contents ********/
.myPageWrap > .rightArea {
    position: relative;
    width: 100%;
    height: 100%;
    /*min-width: 800px;*/
    padding: 20px 30px;
    overflow-x: auto;
}

    .myPageWrap > .rightArea:after {
        clear: both;
    }

    /* 회사정보, 회사정보수정, 관리자변경 */
    .myPageWrap > .rightArea .companyInfo {
        position: relative;
        width: 100%;
    }

        .myPageWrap > .rightArea .companyInfo > .txtTitle {
            display: flex;
            align-items: center;
            width: 100%;
            margin-top: 5px;
            padding-bottom: 10px;
            font-size: 1.4em;
            color: #1a1b23;
            font-weight: bold;
            letter-spacing: -.1em;
        }

            .myPageWrap > .rightArea .companyInfo > .txtTitle.ceo,
            .myPageWrap > .rightArea .companyInfo > .txtTitle.manager,
            .myPageWrap > .rightArea .companyInfo > .txtTitle.partner,
            .myPageWrap > .rightArea .companyInfo > .txtTitle.agent,
            .myPageWrap > .rightArea .companyInfo > .txtTitle.newManager {
                padding-top: 20px;
            }

            .myPageWrap > .rightArea .companyInfo > .txtTitle.Daou:before {
                content: "";
                display: inline-block;
                width: 35px;
                height: 38px;
                margin-right: 5px;
                background-image: url(../Images/ko-KR/logoOptionPartner.png);
                background-repeat: no-repeat;
                background-position: -504px -14px;
            }

            .myPageWrap > .rightArea .companyInfo > .txtTitle.BizPlay:before {
                content: "";
                display: inline-block;
                width: 38px;
                height: 38px;
                margin-right:10px;
                background-image: url(../Images/ko-KR/logoOptionPartner.png);
                background-repeat: no-repeat;
                background-position: -353px -12px;
            }


            .myPageWrap > .rightArea .companyInfo > .txtTitle.LgUplus:before {
                content: "";
                display: inline-block;
                width: 38px;
                height: 38px;
                margin-right: 10px;
                background-image: url(../Images/ko-KR/logoOptionPartner.png);
                background-repeat: no-repeat;
                background-position: -890px -11px;
            }

            .myPageWrap > .rightArea .companyInfo > .txtTitle.HiWorks:before {
                content: "";
                display: inline-block;
                width: 125px;
                height: 37px;
                margin-right: 10px;
                background-image: url(../Images/ko-KR/logoOptionPartner.png);
                background-repeat: no-repeat;
                background-position: -945px -12px;
            }

            .myPageWrap > .rightArea .companyInfo > .txtTitle.company:before {
                content: "";
                display: inline-block;
                width: 35px;
                height: 35px;
                margin-right: 10px;
                border-radius: 50%;
                background-color: #072a4d;
                background-image: url(../Images/common/iconServiceComplate.png);
                background-repeat: no-repeat;
                background-position:-82px -22px;
            }

            .myPageWrap > .rightArea .companyInfo > .txtTitle.ceo:before {
                content: "";
                display: inline-block;
                width: 35px;
                height: 35px;
                margin-right: 10px;
                border-radius: 50%;
                background-color: #072a4d;
                background-image: url(../Images/common/iconServiceComplate.png);
                background-repeat: no-repeat;
                background-position: -52px -90px;
            }

            .myPageWrap > .rightArea .companyInfo > .txtTitle.manager:before {
                content: "";
                display: inline-block;
                width: 35px;
                height: 35px;
                margin-right: 10px;
                border-radius: 50%;
                background-color: #072a4d;
                background-image: url(../Images/common/iconServiceComplate.png);
                background-repeat: no-repeat;
                background-position: -24px -90px;
            }

            .myPageWrap > .rightArea .companyInfo > .txtTitle.partner:before {
                content: "";
                display: inline-block;
                width: 35px;
                height: 35px;
                margin-right: 10px;
                border-radius: 50%;
                background-color: #072a4d;
                background-image: url(../Images/common/iconServiceComplate.png);
                background-repeat: no-repeat;
                background-position: -82px -89px;
            }

            .myPageWrap > .rightArea .companyInfo > .txtTitle.agent:before {
                content: "";
                display: inline-block;
                width: 35px;
                height: 35px;
                margin-right: 10px;
                border-radius: 50%;
                background-color: #072a4d;
                background-image: url(../Images/common/iconServiceComplate.png);
                background-repeat: no-repeat;
                background-position: -83px -51px;
            }

            .myPageWrap > .rightArea .companyInfo > .txtTitle.pwChange:before {
                content: "";
                display: inline-block;
                width: 35px;
                height: 35px;
                margin-right: 10px;
                border-radius: 50%;
                background-color: #072a4d;
                background-image: url(../Images/common/iconServiceComplate.png);
                background-repeat: no-repeat;
                background-position: -110px -89px;
            }

            .myPageWrap > .rightArea .companyInfo > .txtTitle.myInfoChange:before {
                content: "";
                display: inline-block;
                width: 35px;
                height: 35px;
                margin-right: 10px;
                border-radius: 50%;
                background-color: #072a4d;
                background-image: url(../Images/common/iconServiceComplate.png);
                background-repeat: no-repeat;
                background-position: 5px -90px;
            }

        .myPageWrap > .rightArea .companyInfo .systemConfigScription {
            padding: 4px 8px;
            font-size: 13px;
            color: #1a1b23;
            letter-spacing: -1px;
            border: 1px solid #ccc;
            background-color: #e6e9ed;
        }

    /* 시스템환경설정 */
        .myPageWrap > .rightArea .companyInfo .tableJoin  td {
            display:table-cell;
        }

    .myPageWrap > .rightArea .tableInfo {
        width: 100%;
        padding: 10px 0 20px;
        border: 0px;
        border-bottom: 1px solid #ccc;
    }

        .myPageWrap > .rightArea .tableInfo th {
            min-height: 45px;
            padding: 5px 0;
            color: #1a1b23;
            text-align: left;
            letter-spacing: -.06em;
        }
    /*.myPageWrap > .rightArea .tableInfo th:after { 20200310 김슬기 주석
                content: " :";
            }*/
        .myPageWrap > .rightArea .tableInfo td .txtWrap {
            display: inline-flex;
            flex-direction: column
        }
            .myPageWrap > .rightArea .tableInfo td .txtPasswordInfo {
                display: inline-flex;
                align-items: center;
                font-size: 12px;
            }

                .myPageWrap > .rightArea .tableInfo td .txtPasswordInfo:before {
                    content: "!";
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 15px;
                    height: 15px;
                    margin-right: 5px;
                    border-radius: 50%;
                    background-color: #7CD800;
                    color: #fff;
                    font-weight: bold;
                }

    .myPageWrap > .rightArea .tableInfo th.txtRequired:after {
        content: "*";
        margin-left: 5px;
        font-weight: bold;
        color: #eb5252;
    }

    .myPageWrap > .rightArea .tableInfo td {
        position: relative;
        height: 40px;
        color: #333;
        letter-spacing: -.06em;
    }

        .myPageWrap > .rightArea .tableInfo td input[type=text],
        .myPageWrap > .rightArea .tableInfo td input[type=password],
        .myPageWrap > .rightArea .tableInfo td input[type=tel],
        .myPageWrap > .rightArea .tableInfo td select {
            padding: 0 0px 0 8px;
            height: 30px;
            width: 350px;
            font-size: 13px;
            color: #666;
            letter-spacing: -.06em;
            border: 0;
            border-bottom: 1px solid #ccc;
        }

            .myPageWrap > .rightArea .tableInfo td input[type=text]:focus,
            .myPageWrap > .rightArea .tableInfo td input[type=password]:focus,
            .myPageWrap > .rightArea .tableInfo td input[type=tel]:focus,
            .myPageWrap > .rightArea .tableInfo td select:focus {
                border-width: 2px;
                border-color: #93d50a;
            }
        .myPageWrap > .rightArea .tableInfo td input[type=checkbox] {
            width: 18px;
            height: 18px;
            margin: 0 5px 0 0;
        }

        .myPageWrap > .rightArea .tableInfo td .chkNewManager {
            position: relative;
        }

            .myPageWrap > .rightArea .tableInfo td .chkNewManager > label {
                padding-left: 100px;
            }

        .myPageWrap > .rightArea .tableInfo td .devReadOnly {
            background-color: #eee;
        }

    .myPageWrap > .rightArea .lineGray {
        width: 100%;
        height: 1px;
        margin: 20px 0;
        background-color: #ddd;
    }

    /*계정(회원)관리*/
    .myPageWrap > .rightArea > .memberListArea {
        width: 100%;
        max-width: 1000px;
        min-width: 700px;
        height: 100%;
        border-right: 1px solid #ddd;
    }

    .myPageWrap > .rightArea > .memberAddArea {
        flex-shrink: 0;
        min-width: 260px;
        height: 100%;
    }

        .myPageWrap > .rightArea > .memberAddArea > .ulTab {
            display: flex;
            width: 100%;
        }

            .myPageWrap > .rightArea > .memberAddArea > .ulTab > li {
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                height: 40px;
                font-size: 13px;
                color: #999;
                text-align: center;
                letter-spacing: -1px;
                border-bottom: 3px solid #dedede;
            }

                .myPageWrap > .rightArea > .memberAddArea > .ulTab > li:hover {
                    cursor: pointer;
                    background-color: #f1f1f1;
                }

                .myPageWrap > .rightArea > .memberAddArea > .ulTab > li.On {
                    color: #333;
                    border-bottom: 3px solid #93d50a;
                }

        .myPageWrap > .rightArea > .memberAddArea .divAddMember {
            padding: 10px 20px;
        }

            .myPageWrap > .rightArea > .memberAddArea .divAddMember > .txtTitle {
                padding-top: 8px;
                color: #666;
                font-weight: bold;
            }

            .myPageWrap > .rightArea > .memberAddArea .divAddMember > input {
                width: 100%;
                height: 30px;
                border: 1px solid #ccc;
            }

            .myPageWrap > .rightArea > .memberAddArea .divAddMember > .btn {
                cursor: pointer;
                height: 30px;
                display: inline-block;
                margin-left: -1px;
                color: #666;
                font-size: 13px;
                background-color: #f1f1f1;
                border: 1px solid #ccc;
            }

        .myPageWrap > .rightArea > .memberAddArea .btnArea {
            justify-content: center;
            padding-top: 0;
        }

            .myPageWrap > .rightArea > .memberAddArea .btnArea input {
                min-width: 107px;
            }

                .myPageWrap > .rightArea > .memberAddArea .btnArea input:first-child {
                    margin-left: 0;
                }

        .myPageWrap > .rightArea .tableEmployee tr {
            height: 50px;
        }

    .myPageWrap > .rightArea .subTitle {
        padding: 8px 20px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        background-color: #2d3f6b;
    }

    .myPageWrap > .rightArea .InformationBox {
        border: none;
    }

        .myPageWrap > .rightArea .InformationBox > dl {
            display: flex;
            align-items: center;
            min-height: 35px;
            padding: 5px 0;
            border-bottom: 1px solid #ccc;
        }

        .myPageWrap > .rightArea .InformationBox > dl dt {
            width: 120px;
            padding: 0 20px;
        }

            .myPageWrap > .rightArea .InformationBox > dl dd input[type=radio] {
                height: auto;
            }

        .myPageWrap > .rightArea .InformationBox.personalTable > dl dt {
            width: 160px;
        }

    /* 서비스 업무 모델 등록 */
    .myPageWrap > .rightArea .seviceModelConfigBox {
        padding: 25px 0;
        border-bottom: 1px solid #ccc;
    }

        .myPageWrap > .rightArea .seviceModelConfigBox > .serviceModelType > label {
            float: left;
            height: 50px;
            width: 130px;
            font-size: 12px;
            line-height: 50px;
            color: #1a1b23;
            letter-spacing: -1px;
        }

        .myPageWrap > .rightArea .seviceModelConfigBox > .serviceModelType > select {
            float: left;
            height: 50px;
            width: calc(100% - 330px);
            font-size: 12px;
            color: #1a1b23;
            border: 1px solid #ccc;
            border-right: 0px;
        }

        .myPageWrap > .rightArea .seviceModelConfigBox > .serviceModelType > .btnModel {
            float: left;
            height: 50px;
            width: 200px;
            font-size: 12px;
            color: #1a1b23;
            text-align: center;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

            .myPageWrap > .rightArea .seviceModelConfigBox > .serviceModelType > .btnModel:hover { /*170106 김슬기 추가*/
                cursor: pointer;
            }

        .myPageWrap > .rightArea .seviceModelConfigBox > .btnModel:hover {
            cursor: pointer;
            box-shadow: rgba(0,0,0,0.3)2px 2px 5px;
        }

    .myPageWrap > .rightArea .processSelect {
        padding: 20px 0 0 0;
    }

        .myPageWrap > .rightArea .processSelect > .titleArea {
            padding: 20px 0;
            font-size: 14px;
            color: #1a1b23;
            font-weight: bold;
            letter-spacing: -1px;
            border-top: 1px solid #ccc;
        }

            .myPageWrap > .rightArea .processSelect > .titleArea .txtInfo {
                font-weight: normal;
            }

        .myPageWrap > .rightArea .processSelect > label {
            float: left;
            width: 130px;
            font-size: 12px;
            color: #666;
            letter-spacing: -1px;
            line-height: 50px;
        }

        .myPageWrap > .rightArea .processSelect > .basicInfoText {
            margin-bottom: 20px;
            padding: 10px;
            font-size: 12px;
            color: #333;
            letter-spacing: -1px;
            width: calc(100% - 130px);
            border: 1px solid #ccc;
        }

        .myPageWrap > .rightArea .processSelect > .ulModlueList {
            border-top: 1px solid #ccc;
        }

            .myPageWrap > .rightArea .processSelect > .ulModlueList > li {
                float: left;
                position: relative;
                padding: 10px;
                width: 20%;
                border: 1px solid #ccc;
                border-top: 0px;
                border-right: 0px;
            }

                .myPageWrap > .rightArea .processSelect > .ulModlueList > li:nth-child(5n) {
                    border-right: 1px solid #ccc;
                }

                .myPageWrap > .rightArea .processSelect > .ulModlueList > li:last-child {
                    border-right: 1px solid #ccc;
                }

                .myPageWrap > .rightArea .processSelect > .ulModlueList > li > .btnState {
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    width: 40px;
                    height: 40px;
                    background-image: url('../Images/common/iconMyCloud.png');
                    background-repeat: no-repeat;
                    background-position: -6px -3px;
                }

                .myPageWrap > .rightArea .processSelect > .ulModlueList > li > .txtState {
                    font-size: 13px;
                    letter-spacing: -1px;
                }

                .myPageWrap > .rightArea .processSelect > .ulModlueList > li > .txtName {
                    font-size: 13px;
                    letter-spacing: -1px;
                }

                .myPageWrap > .rightArea .processSelect > .ulModlueList > li.businessBtnUse {
                    cursor: pointer;
                }

                .myPageWrap > .rightArea .processSelect > .ulModlueList > li.Required > .txtState,
                .myPageWrap > .rightArea .processSelect > .ulModlueList > li.Required > .txtName {
                    color: #eb5252;
                }

                .myPageWrap > .rightArea .processSelect > .ulModlueList > li.Required .btnState {
                    background-position: -6px -89px;
                }

                .myPageWrap > .rightArea .processSelect > .ulModlueList > li.UnUse {
                    background-color: #f2f2f2;
                }

                    .myPageWrap > .rightArea .processSelect > .ulModlueList > li.UnUse .btnState {
                        background-position: 0px 100px;
                    }

                    .myPageWrap > .rightArea .processSelect > .ulModlueList > li.UnUse > .txtState,
                    .myPageWrap > .rightArea .processSelect > .ulModlueList > li.UnUse > .txtName {
                        color: #999;
                    }

    /*서비스 업무 모델 가격 등록 */
    .myPageWrap > .rightArea .commonModuleBox {
        position: relative;
        padding: 20px 0;
        border-bottom: 1px solid #1a1b23;
    }

        .myPageWrap > .rightArea .commonModuleBox .txtCaption {
            font-size: 16px;
            color: #1a1b23;
            font-weight: bold;
            letter-spacing: -1px;
        }

        .myPageWrap > .rightArea .commonModuleBox .priceArea {
            position: absolute;
            right: 0px;
            top: 10px;
        }

            .myPageWrap > .rightArea .commonModuleBox .priceArea > span {
                margin-right: 10px;
                font-size: 16px;
                color: #333;
            }

                .myPageWrap > .rightArea .commonModuleBox .priceArea > span:nth-child(2) {
                    margin-right: 30px;
                }

            .myPageWrap > .rightArea .commonModuleBox .priceArea > .inputText {
                height: 35px;
                padding: 0px 8px;
                font-size: 16px;
                border: 1px solid #ccc;
                text-align: right;
                font-weight: bold;
            }

    .myPageWrap > .rightArea .ulModuleListBox {
    }

        .myPageWrap > .rightArea .ulModuleListBox > li {
            float: left;
            padding: 20px;
            width: 33.3%;
            height: 140px;
            border-left: 1px solid #cccccc;
            border-bottom: 1px solid #cccccc;
            background-color: #f9f9f9;
        }

            .myPageWrap > .rightArea .ulModuleListBox > li:nth-child(3n) {
                width: 33.4%;
                border-right: 1px solid #cccccc;
            }

            .myPageWrap > .rightArea .ulModuleListBox > li:last-child {
                border-right: 1px solid #cccccc;
            }

            .myPageWrap > .rightArea .ulModuleListBox > li > .txtTitle {
                margin-bottom: 10px;
                color: #1a1b23;
                letter-spacing: -.06em;
                font-size: 15px;
                font-weight: bold;
            }

            .myPageWrap > .rightArea .ulModuleListBox > li dl {
                float: left;
                width: 32%;
                margin-right: 2%;
                text-align: right;
            }

            .myPageWrap > .rightArea .ulModuleListBox > li > dl:nth-child(4) {
                margin-right: 0;
            }

            .myPageWrap > .rightArea .ulModuleListBox > li dl > dt {
                padding-right: 10px;
                font-weight: bold;
                font-size: 13px;
                letter-spacing: -1px;
            }

                .myPageWrap > .rightArea .ulModuleListBox > li dl > dt.type1 {
                    color: #5c54a7;
                }

                .myPageWrap > .rightArea .ulModuleListBox > li dl > dt.type2 {
                    color: #f06292;
                }

                .myPageWrap > .rightArea .ulModuleListBox > li dl > dt.type3 {
                    color: #4bbb6b;
                }

            .myPageWrap > .rightArea .ulModuleListBox > li dl > dd.price {
                padding: 0 10px 5px 0;
            }

            .myPageWrap > .rightArea .ulModuleListBox > li dl > dd.txtPrice {
                padding-right: 10px;
                font-weight: bold;
                font-size: 13px;
                letter-spacing: -1px;
            }

            .myPageWrap > .rightArea .ulModuleListBox > li dl > dd > input {
                padding: 3px 8px;
                width: 100%;
                font-size: 15px;
                font-weight: bold;
                border: 1px solid #ccc;
                text-align: right;
            }

    /* 운영 고객 청구 현황 */
    .myPageWrap > .rightArea .customerLayout {
        flex: 1;
        position: relative;
        min-width: 600px;
        height: 100%;
        overflow: hidden;
    }

    .myPageWrap > .rightArea .widthResize {
        flex-shrink: 0;
        width: 3px;
        height: 100%;
        background-color: #ccc;
    }

    .myPageWrap > .rightArea .customerDetail {
        min-width: 680px;
    }
        .myPageWrap > .rightArea .customerDetail.minWidthNone {
            min-width: unset !important;
        }

        .myPageWrap > .rightArea .customerDetail > .minWidthLayout { /*20200310 김슬기 수정 / #customerDetail > .customerDetail로 변경*/
            overflow-x: hidden;
            overflow-y: auto;
            padding: 15px;
        }

.myPageWrap .minWidthLayout {
    position: relative;
    min-width: 600px;
    height: 100%;
}

    .myPageWrap .minWidthLayout.systemManagement {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
    }

.myPageWrap .scrollContents {
    width: 100%;
    height: calc(100% - 60px);
    padding: 0 15px 15px;
    overflow-x: hidden;
    overflow-y: auto;
}

    .myPageWrap .scrollContents.btns {
        height: calc(100% - 120px);
    }

    .myPageWrap .scrollContents.h100 {
        height: 100%;
    }

    .myPageWrap .scrollContents .tableView {
        position: relative;
    }
        .myPageWrap .scrollContents .tableView thead {
            position: sticky;
            top: 0;
            z-index: 1;
        }

.myPageWrap .scrollBtnBottom {
    width: 100%;
    height: 60px;
    padding: 15px;
    text-align: right;
    border-top: 1px solid #ccc;
}

    .myPageWrap .scrollBtnBottom > input[type=button] {
        cursor: pointer;
        margin: 0;
    }

/* 운영 고객 현황 상단 정보*/
.myPageWrap > .rightArea .serviceModelWrap {
    min-height: 140px;
    padding-bottom: 30px;
}

    .myPageWrap > .rightArea .serviceModelWrap > .serviceModelBox {
        display: inline-block;
        height: 24px;
        padding: 0 13px;
        font-size: 12px;
        letter-spacing: -.06em;
        line-height: 22px;
        border: 1px solid #1a1b23;
        border-radius: 13px;
    }

    .myPageWrap > .rightArea .serviceModelWrap > .txtClientName {
        padding: 5px 0 10px;
        font-size: 20px;
        font-weight: lighter;
        color: #1a1b23;
        letter-spacing: -.056em;
    }

    .myPageWrap > .rightArea .serviceModelWrap > p {
        position: relative;
        padding-bottom: 3px;
        font-size: 14px;
        letter-spacing: -.06em;
    }

/*DB Size */
.divDataBaseContents {
    position: absolute;
    top: 20px;
    right: 20px;
    text-align: center;
}

    .divDataBaseContents > .txtCaption {
        font-size: 13px;
        letter-spacing: -.8px;
        color: #072a4d;
    }

    .divDataBaseContents > .txtValue {
        font-size: 34px;
        font-weight: bold;
        letter-spacing: -2px;
        color: #072a4d;
    }

    .divDataBaseContents > .txtDescription {
        font-size: 13px;
        letter-spacing: -.8px;
        color: #999;
    }

    .divDataBaseContents.Alert > .txtValue {
        padding: 0 0 0 30px;
        color: #ffbe03;
        background-repeat: no-repeat;
        background-image: url('../Images/common/iconAlert.png');
        background-position: left center;
    }

    .divDataBaseContents.Warning > .txtValue {
        padding: 0 0 0 30px;
        color: #eb5252;
        background-repeat: no-repeat;
        background-image: url('../Images/common/iconError.png');
        background-position: left center;
    }


.devChartArea {
    height: 500px;  /*200715 김슬기 수정 / 560 -> 500 / 차트 밑에 여백이 많아서 수정함.*/
}

    .devChartArea .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .devChartArea .browser text {
        text-anchor: end;
    }

    .devChartArea .line-chart {
        height: 100%;
        border-top: 1px solid #ccc; /*200630 김슬기 추가 / 차트 위에 구분선이 없어서 추가함.*/
    }

    .devChartArea svg {
        width: 100%;
        height: 100%;
    }

/* 운영 고객 현황 서비스변경 히스토리 modal */
.myPageWrap > .rightArea .seviceChangeHistory {
    display: block;
    width: 730px;
    height: 620px;
}

    .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap {
        display: flex;
        width: 100%;
        height: auto;
        padding: 0 15px;
        font-size: 12px;
        color: #072A4D;
        letter-spacing: -.06em;
    }

        .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap ul li {
            height: 22px;
            padding: 0 10px;
            line-height: 22px;
            border-bottom: 1px solid #ddd;
            text-align: center;
        }

            .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap ul li.thead {
                height: 35px;
                line-height: 35px;
                background-color: #F1F1F1;
                border-top: 1px solid #ddd;
                font-weight: 700;
            }

        .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap > .historyLeft {
            width: 100px;
            border-right: 1px solid #ddd;
        }

            .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap > .historyLeft > ul > li {
                text-align: left;
            }

        .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap > .historyRight {
            display: flex;
            width: calc(100% - 100px);
            overflow-x: auto;
        }

            .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap > .historyRight ul {
                flex: 1;
                min-width: 100px;
            }

                .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap > .historyRight ul:nth-child(odd) {
                    background-color: rgba(0,0,0,.02);
                }

                .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap > .historyRight ul.On {
                    border-left: 1px solid #36AAFF;
                    border-right: 1px solid #36AAFF;
                }

                    .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap > .historyRight ul.On li.thead {
                        border-top-color: #36AAFF;
                    }

                    .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap > .historyRight ul.On li.bgTotalPrice {
                        border-bottom-color: #36AAFF;
                    }

        .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap .bgChangeOnBlue {
            background-color: #EBF6FF;
            color: #36AAFF;
            font-weight: 900;
        }

        .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap .bgChangeOnBlack {
            background-color: #E8E8E8;
            color: #333;
            font-weight: 900;
        }

        .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap .bgTotalPrice {
            background-color: #464646;
            color: #fff;
            font-weight: 900;
            border-bottom: 1px solid #464646;
        }

        .myPageWrap > .rightArea .seviceChangeHistory .historyTableWrap .bottomBorder {
            border-bottom: 1px solid #072A4D;
        }



/* 운영 고객 현황 (결제 현황관리) */
.myPageWrap > .rightArea > #tabChargingInfo .tableView th,
.myPageWrap > .rightArea > #tabChargingInfo .tableView td {
    border-right: 1px solid #ccc;
}

    .myPageWrap > .rightArea > #tabChargingInfo .tableView th:last-child,
    .myPageWrap > .rightArea > #tabChargingInfo .tableView td:last-child {
        border-right: 0;
    }

/* 운영 고객 현황 (기본정보) */
.tabContentsBox .companyInfo {
    margin-bottom: 10px;
    padding-bottom: 20px;
}

/* 운영 고객 현황 (서비스 이력 조회) */
.myPageWrap > .rightArea .seviceChangeTitle {
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 30px;
    border-top: 1px solid #1a1b23;
    background-color: #e6e9ed;
}
    .myPageWrap > .rightArea .seviceChangeTitle > span {
        display: block;
        font-weight: bold;
        font-size: 13px;
        color: #1a1b23;
    }


/* 운영 고객 현황 (요금현황) */
.myPageWrap > .rightArea .MonthBillList {
    position: relative;
    margin-bottom: 20px;
    border-top: 2px solid #1a1b23;
}

    .myPageWrap > .rightArea .MonthBillList.serviceChangeList {
        margin-top: 0;
        border-top: 1px solid #1a1b23;
    }


    .myPageWrap > .rightArea .MonthBillList > li {
        color: #1a1b23;
        font-size: 16px;
        text-align: left;
    }

        .myPageWrap > .rightArea .MonthBillList > li.show {
            border-bottom: 1px solid #1a1b23;
        }

            .myPageWrap > .rightArea .MonthBillList > li.show .iconArrow {
                background-position: 5px -61px;
            }

        .myPageWrap > .rightArea .MonthBillList > li.billingMonthTitle {
            display: flex;
            align-items: center;
            height: 50px;
        }

            .myPageWrap > .rightArea .MonthBillList > li.billingMonthTitle > span > input[type=button] {
                margin: 0;
            }

        .myPageWrap > .rightArea .MonthBillList > li.billingMonthContents {
            padding: 10px;
            border-bottom: 2px solid #1a1b23;
        }

            .myPageWrap > .rightArea .MonthBillList > li.billingMonthContents .colorInfoWrap {
                display: inline-flex;
                justify-content: flex-end;
                width: 100%;
                padding: 0 0 5px;
            }

                .myPageWrap > .rightArea .MonthBillList > li.billingMonthContents .colorInfoWrap > span {
                    display: flex;
                    align-items: center;
                    padding-left: 20px;
                    font-size: 12px;
                }
                    .myPageWrap > .rightArea .MonthBillList > li.billingMonthContents .colorInfoWrap > span:before {
                        content: "";
                        width: 12px;
                        height: 12px;
                        margin-right: 5px;
                    }

                    .myPageWrap > .rightArea .MonthBillList > li.billingMonthContents .colorInfoWrap > span.up:before {
                        background-color: #FF7474;
                    }

                    .myPageWrap > .rightArea .MonthBillList > li.billingMonthContents .colorInfoWrap > span.down:before {
                        background-color: #1453FF;
                    }


        .myPageWrap > .rightArea .MonthBillList > li.cursor:hover {
            cursor: pointer;
            background-color: #f9f9f9;
        }

        .myPageWrap > .rightArea .MonthBillList > li .iconArrow {
            display: inline-block;
            width: 34px;
            height: 20px;
            background-image: url('../Images/common/iconCombo.png');
            background-repeat: no-repeat;
            background-position: 5px -130px;
        }

        .myPageWrap > .rightArea .MonthBillList > li .changeDate {
            display: inline-block;
            width: 200px;
            padding-left: 20px;
        }

        .myPageWrap > .rightArea .MonthBillList > li .type {
            display: inline-block;
            width: 100px;
        }

        .myPageWrap > .rightArea .MonthBillList > li .serial {
            display: inline-block;
            width: 200px;
        }

        .myPageWrap > .rightArea .MonthBillList > li .name {
            display: inline-block;
            width: 150px;
        }

        .myPageWrap > .rightArea .MonthBillList > li .date {
            display: inline-block;
            width: 120px;
            text-align: right;
        }

        .myPageWrap > .rightArea .MonthBillList > li .price {
            display: inline-block;
            width: 150px;
            text-align: right;
        }

        .myPageWrap > .rightArea .MonthBillList > li .paid {
            display: inline-block;
            width: 150px;
            padding-left: 50px;
        }

            .myPageWrap > .rightArea .MonthBillList > li .paid.red {
                color: #eb5252;
                font-weight: bold;
            }

        .myPageWrap > .rightArea .MonthBillList > li .billingRegisterDate {
            display: inline-block;
            width: 140px;
            text-align: right;
        }

        .myPageWrap > .rightArea .MonthBillList > li .totalBillBox {
            position: relative;
            text-align: right;
            margin: 10px 0;
            padding: 15px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #fff;
        }

            .myPageWrap > .rightArea .MonthBillList > li .totalBillBox > .totalPeriod {
                position: absolute;
                top: 20px;
                left: 20px;
                font-size: 16px;
                color: #999;
            }

            .myPageWrap > .rightArea .MonthBillList > li .totalBillBox > .totalBill {
                position: absolute;
                top: 40px;
                left: 20px;
                font-size: 34px;
                font-weight: bold;
                color: #eb5252;
            }

            .myPageWrap > .rightArea .MonthBillList > li .totalBillBox > .billList {
                display: inline-block;
            }

                .myPageWrap > .rightArea .MonthBillList > li .totalBillBox > .billList th, .myPageWrap > .rightArea .MonthBillList > li .totalBillBox > .billList td {
                    color: #666;
                    font-size: 16px;
                }

                .myPageWrap > .rightArea .MonthBillList > li .totalBillBox > .billList th {
                    text-align: left;
                    letter-spacing: -.09em;
                }

                .myPageWrap > .rightArea .MonthBillList > li .totalBillBox > .billList td {
                    text-align: right;
                }

        .myPageWrap > .rightArea .MonthBillList > li .titleBizList {
            padding: 8px 20px;
            height: 40px;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            background-color: #2d3f6b;
        }

        .myPageWrap > .rightArea .MonthBillList > li .ulBizList {
        }

            .myPageWrap > .rightArea .MonthBillList > li .ulBizList > li {
                float: left;
                width: 33.3%;
                flex-basis: 33.3%;
                height: auto;
                min-height: 60px;
                padding: 10px 15px;
                font-size: 13px;
                border-right: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
            }

                .myPageWrap > .rightArea .MonthBillList > li .ulBizList > li.th {
                    height: auto;
                    font-size: 13px;
                    font-weight: bold;
                    text-align: center;
                    background-color: #e6e9ed;
                }

                .myPageWrap > .rightArea .MonthBillList > li .ulBizList > li:nth-child(3n) {
                    width: 33.4%;
                    border-right: 0px;
                }

                .myPageWrap > .rightArea .MonthBillList > li .ulBizList > li .price {
                    width: 100%;
                }

                .myPageWrap > .rightArea .MonthBillList > li .ulBizList > li.total {
                    width: 100%;
                    border-right: 0px;
                    text-align: right;
                    flex-basis: unset;
                }

                    .myPageWrap > .rightArea .MonthBillList > li .ulBizList > li.total > span {
                        font-size: 21px;
                        font-weight: bold;
                        letter-spacing: -.05em;
                    }

        .myPageWrap > .rightArea .MonthBillList > li .tableBizList {
            width: 100%;
            border-spacing: 0px;
        }

            .myPageWrap > .rightArea .MonthBillList > li .tableBizList th {
                padding: 8px 6px;
                font-size: 16px;
                font-weight: bold;
                color: #1a1b23;
                text-align: center;
                letter-spacing: -1px;
                border-bottom: 1px dotted #b8bbbf;
                background-color: #e6e9ed;
            }

            .myPageWrap > .rightArea .MonthBillList > li .tableBizList td {
                padding: 6px 16px;
                font-size: 16px;
                color: #333;
                text-align: left;
                border-bottom: 1px dotted #b8bbbf;
            }

                .myPageWrap > .rightArea .MonthBillList > li .tableBizList td.alignCenter {
                    text-align: center;
                }

                .myPageWrap > .rightArea .MonthBillList > li .tableBizList td.alignRight {
                    text-align: right;
                }

                .myPageWrap > .rightArea .MonthBillList > li .tableBizList td.total {
                    text-align: right;
                    font-size: 21px;
                    font-weight: bold;
                    letter-spacing: -.05em;
                    border-bottom: 0px;
                }

/* 운영 고객 현황 (서비스 정보) */
.myPageWrap > .rightArea .txtService {
    display: flex;
    align-items: center;
    padding: 30px 0 10px 0;
    font-size: 21px;
    color: #1a1b23;
    letter-spacing: -2px;
}

    .myPageWrap > .rightArea .txtService > .icon {
        display: inline-block;
        width: 35px;
        height: 35px;
        margin-right: 5px;
        border-radius: 50%;
        background-image: url('../Images/common/iconServiceComplate.png');
        background-position: 0px 0px;
        background-color: #1a1b23;
        background-repeat: no-repeat;
    }

    .myPageWrap > .rightArea .txtService.Moduel > .icon {
        background-position: 7px 8px;
    }

    .myPageWrap > .rightArea .txtService.User > .icon {
        background-position: -24px 7px;
    }

    .myPageWrap > .rightArea .txtService.Dev > .icon {
        background-position: -54px 8px;
    }

    .myPageWrap > .rightArea .txtService.ETC > .icon {
        background-position: -83px 7px;
    }

    .myPageWrap > .rightArea .txtService.Promotion > .icon {
        background-position: -111px 7px;
    }

/*업무레벨 요금*/
.myPageWrap > .rightArea .ulBizList {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

    .myPageWrap > .rightArea .ulBizList > li {
        position: relative;
        display: inline-flex;
        flex-direction:column;
        justify-content: space-between;
        width: 25%;
        min-height: 70px;
        padding: 16px 20px;
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }
        .myPageWrap > .rightArea .ulBizList.ulPromotion > li {
            width: 50%;
        }
            .myPageWrap > .rightArea .ulBizList.ulPromotion > li:nth-child(2n) {
                border-right: 0px;            
            }


            .myPageWrap > .rightArea .ulBizList.ulPromotion > li > .txtPrice:before {
                content: '- ₩ ';
            }

        .myPageWrap > .rightArea .ulBizList > li:nth-child(4n) {
            border-right: 0px;
        }

        .myPageWrap > .rightArea .ulBizList > li .txtDescription {
            font-size: 13px;
            letter-spacing: -.5px;
            color: #1a1b23;
        }

        .myPageWrap > .rightArea .ulBizList > li .txtName {
            font-size: 16px;
            letter-spacing: -.8px;
            color: #1a1b23;
        }

        .myPageWrap > .rightArea .ulBizList > li .txtPrice {
            padding-top: 10px;
            font-size: 16px;
            color: #072a4d;
            text-align: right;
        }

        .myPageWrap > .rightArea .ulBizList > li > .txtPrice:before {
            content: '₩ ';
        }

        .myPageWrap > .rightArea .ulBizList > li > .txtCount {
            padding-top: 10px;
            font-size: 16px;
            color: #072a4d;
            text-align: right;
        }

.myPageWrap > .rightArea .totalCountArea {
    position: relative;
    padding: 25px;
    background-color: #072a4d;
}

    .myPageWrap > .rightArea .totalCountArea > .item {
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: flex-start;
        width: 290px;
        height: auto;
    }

    .myPageWrap > .rightArea .totalCountArea > div {
        display: block;
        height: 20px;
    }

        .myPageWrap > .rightArea .totalCountArea > div > .selectItem {
            padding-right: 20px;
        }

    .myPageWrap > .rightArea .totalCountArea > .item > div > label {
        display: inline-block;
        width: 130px;
        font-size: 13px;
        color: rgba(255,255,255,0.6);
    }

        .myPageWrap > .rightArea .totalCountArea > .item > div > label:before {
            content: '- ';
        }

    .myPageWrap > .rightArea .totalCountArea > .item > div > .txtPrice {
        display: inline-block;
        width: 130px;
        text-align: right;
        font-size: 16px;
        color: rgba(255,255,255,0.6)
    }

        .myPageWrap > .rightArea .totalCountArea > .item > div > .txtPrice:before {
            content: '₩ ';
        }

        .myPageWrap > .rightArea .totalCountArea > .item > div > .txtPrice.Promotion {
            color: #f00;
        }

            .myPageWrap > .rightArea .totalCountArea > .item > div > .txtPrice.Promotion:before {
                content: '₩ -';
            }

        .myPageWrap > .rightArea .totalCountArea > .item > div > .txtPrice.Inc {
            color: #FF7474;
        }

            .myPageWrap > .rightArea .totalCountArea > .item > div > .txtPrice.Inc:before {
                content: '₩ +';
            }


        .myPageWrap > .rightArea .totalCountArea > .item > div > .txtPrice.Dec {
            color: #4778ff;
        }

            .myPageWrap > .rightArea .totalCountArea > .item > div > .txtPrice.Dec:before {
                content: '₩ ';
            }

    .myPageWrap > .rightArea .totalCountArea > .totalCountBox {
        position: absolute;
        bottom: 25px;
        right: 25px;
        height: 40px;
        text-align: right;
    }

        .myPageWrap > .rightArea .totalCountArea > .totalCountBox > .txtCaption {
            display: inline-block;
            font-size: 13px;
            color: #7CD800;
            margin-right: 20px;
        }

        .myPageWrap > .rightArea .totalCountArea > .totalCountBox > .txtPrice {
            display: inline-block;
            font-size: 26px;
            color: #7CD800;
            font-weight: bold;
        }

            .myPageWrap > .rightArea .totalCountArea > .totalCountBox > .txtPrice:before { /*200605 김슬기 추가 / 총합에도 돈 표시가 필요해서 추가함.*/ 
                content: '₩ ';
            }

            .myPageWrap > .rightArea .totalCountArea > .totalCountBox > .txtDescription {
                font-size: 13px;
                color: #fff;
            }

/* 서비스 수준 현황 */
.myPageWrap > .rightArea .divSLAState {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
}

    .myPageWrap > .rightArea .divSLAState > section {
        position: relative;
    }

        .myPageWrap > .rightArea .divSLAState > section:last-child {
            padding-left: 3%;
            border-left: 1px solid #1a1b23;
        }

        .myPageWrap > .rightArea .divSLAState > section > .txtTitle {
            padding: 8px 0 16px 0;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: -.06em;
            color: #1a1b23;
        }

        .myPageWrap > .rightArea .divSLAState > section > .txtTotalTime {
            font-size: 24px;
            font-weight: bold;
            color: #1a1b23;
            letter-spacing: -.06em;
        }
        /*bar graph*/
        .myPageWrap > .rightArea .divSLAState > section > .barGraphArea {
            position: relative;
            padding: 20px 0;
        }

            .myPageWrap > .rightArea .divSLAState > section > .barGraphArea > .bar {
                position: relative;
                height: 8px;
                background-color: #bbb;
            }

                .myPageWrap > .rightArea .divSLAState > section > .barGraphArea > .bar > .value {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 100%;
                    width: 20px;
                    background-color: #1a1b23;
                }

            .myPageWrap > .rightArea .divSLAState > section > .barGraphArea > .txtUnit {
                display: block;
                padding: 4px 0;
                text-align: right;
                font-size: 12px;
                letter-spacing: -.8px;
                color: #666;
            }
        /*pie graph*/
        .myPageWrap > .rightArea .divSLAState > section > .pieGraphArea {
            position: absolute;
            top: 35px;
            left: 0px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 90px;
            height: 90px;
            border: 8px solid #15b4c2;
            border-radius: 50%;
        }

            .myPageWrap > .rightArea .divSLAState > section > .pieGraphArea > .valueArea {
                display: inline-block;
                margin-top: -5px;
                text-align: center;
                letter-spacing: -1px;
            }

                .myPageWrap > .rightArea .divSLAState > section > .pieGraphArea > .valueArea > .txtValue {
                    font-size: 24px;
                    font-weight: bold;
                    color: #1a1b23;
                }

                .myPageWrap > .rightArea .divSLAState > section > .pieGraphArea > .valueArea > .txtUnit {
                    font-size: 16px;
                    color: #1a1b23;
                }

        /*타입별 현황 영역*/
        .myPageWrap > .rightArea .divSLAState > section > .servicePartArea {
            position: absolute;
            top: 35px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 90px;
            height: 90px;
        }

            .myPageWrap > .rightArea .divSLAState > section > .servicePartArea > .txtCaption {
                display: inline-block;
                color: #1a1b23;
                letter-spacing: -.8px;
                text-align: center;
            }

            .myPageWrap > .rightArea .divSLAState > section > .servicePartArea > .divChartArea {
                position: absolute;
                top: 0;
                left: 0;
            }

        .myPageWrap > .rightArea .divSLAState > section > .typeArea {
            min-width: 210px;
            margin-left: 110px;
            display: inline-block;
        }

            .myPageWrap > .rightArea .divSLAState > section > .typeArea > p {
                position: relative;
                display: flex;
                align-items: center;
                padding: 0 0 10px 0;
            }

                .myPageWrap > .rightArea .divSLAState > section > .typeArea > p > .icon {
                    width: 10px;
                    height: 10px;
                    background-color: #bbb;
                    border-radius: 50%;
                }

                .myPageWrap > .rightArea .divSLAState > section > .typeArea > p > .txtCaption {
                    padding-left: 5px;
                    font-size: 13px;
                    color: #1a1b23;
                    font-weight: bold;
                }

                .myPageWrap > .rightArea .divSLAState > section > .typeArea > p > .valueArea {
                     margin-left: auto; 
                    font-size: 13px;
                    font-weight: bold;
                    color: #1a1b23;
                }
                    .myPageWrap > .rightArea .divSLAState > section > .typeArea > p > .valueArea > .txtValue {
                        display: inline-block;
                        width: 50px;
                        text-align: right;
                    }
                        .myPageWrap > .rightArea .divSLAState > section > .typeArea > p > .valueArea > .txtValue:first-child {
                            width: 80px;
                            text-align: right;
                            padding: 0 6px;
                            border-right: 1px solid #1a1b23;
                        }

                .myPageWrap > .rightArea .divSLAState > section > .typeArea > p.Type1 > .icon {
                    background-color: #4d8aff;
                }

                .myPageWrap > .rightArea .divSLAState > section > .typeArea > p.Type2 > .icon {
                    background-color: #fd5562;
                }

                .myPageWrap > .rightArea .divSLAState > section > .typeArea > p.Type3 > .icon {
                    background-color: #ffbe03;
                }


.myPageWrap > .rightArea .divSLA {
    width: 100%;
    padding: 20px 30px 20px 20px;
    box-sizing: border-box;
    background-color: #f2f4f6;
}

    .myPageWrap > .rightArea .divSLA > .tableSLA {
        width: 100%;
        border: 0px;
        border-bottom: 2px solid #abb7c3;
        border-spacing: 0px;
    }

        .myPageWrap > .rightArea .divSLA > .tableSLA th {
            position: relative;
            font-size: 16px;
            letter-spacing: -.8px;
            color: #1a1b23;
        }

            .myPageWrap > .rightArea .divSLA > .tableSLA th .txtHeader {
                position: absolute;
                top: 0;
                right: -3px;
            }

            .myPageWrap > .rightArea .divSLA > .tableSLA th > .txtUnit {
                position: absolute;
                top: 2px;       /*200714 김슬기 수정 / 5 -> 2 / 글씨가 겹쳐서 수정함.*/
                right: 0px;     /*200714 김슬기 수정 / -40 -> 0 / 글씨가 겹쳐서 수정함.*/
                font-size: 13px;
                color: #999;
            }

        .myPageWrap > .rightArea .divSLA > .tableSLA td {
            position: relative;
            height: 35px;
            width: 4%;
            border-right: 1px dashed #abb7c3;
            border-bottom: 2px solid #fff;
        }

            .myPageWrap > .rightArea .divSLA > .tableSLA td.captionHeader {
                width: 10%;
                border-right: none;
            }

                .myPageWrap > .rightArea .divSLA > .tableSLA td.captionHeader > .txtCaptionHeader {
                    position: absolute;
                    bottom: -15px;
                    left: 0%;
                    display: inline-flex;
                    align-items: center;
                    width: 100%;
                    min-width: 120px;
                    height: 30px;
                    padding: 0 10px 0 8px;
                    border-radius: 15px;
                    border: 2px solid #1a1b23;
                    background-color: #f2f4f6;
                    font-size: 12px;
                    font-weight: bold;
                    color: #1a1b23;
                    letter-spacing: -1px;
                    z-index: 99;
                }

            .myPageWrap > .rightArea .divSLA > .tableSLA td > .txtCaptionHeader > .icon {
                display: inline-flex;
                width: 7px;
                height: 7px;
                margin-right: 5px;
                border-radius: 50%;
                background-color: #1a1b23;
            }

        .myPageWrap > .rightArea .divSLA > .tableSLA tr.type1 td.On {
            border-bottom: 2px solid #4d8aff;
        }

        .myPageWrap > .rightArea .divSLA > .tableSLA tr.type1 td > .txtCaptionHeader {
            border: 2px solid #4d8aff;
        }

            .myPageWrap > .rightArea .divSLA > .tableSLA tr.type1 td > .txtCaptionHeader > .icon {
                background-color: #4d8aff;
            }

        .myPageWrap > .rightArea .divSLA > .tableSLA tr.type2 td.On {
            border-bottom: 2px solid #fd5562;
        }

        .myPageWrap > .rightArea .divSLA > .tableSLA tr.type2 td > .txtCaptionHeader {
            border: 2px solid #fd5562;
        }

            .myPageWrap > .rightArea .divSLA > .tableSLA tr.type2 td > .txtCaptionHeader > .icon {
                background-color: #fd5562;
            }

        .myPageWrap > .rightArea .divSLA > .tableSLA tr.type3 td.On {
            border-bottom: 2px solid #ffbe03;
        }

        .myPageWrap > .rightArea .divSLA > .tableSLA tr.type3 > td .txtCaptionHeader {
            border: 2px solid #ffbe03;
        }

            .myPageWrap > .rightArea .divSLA > .tableSLA tr.type3 > td .txtCaptionHeader > .icon {
                background-color: #ffbe03;
            }

        .myPageWrap > .rightArea .divSLA > .tableSLA td > .txtContent {
            position: absolute;
            bottom: -12px;
            right: -22px;
            display: inline-block;
            padding: 0 8px;
            height: 24px;
            color: #fff;
            font-size: 13px;
            line-height: 22px;
            background-color: #1a1b23;
            border-radius: 12px;
            z-index: 99;
        }

        .myPageWrap > .rightArea .divSLA > .tableSLA tr.type1 td > .txtContent {
            background-color: #4d8aff;
        }

        .myPageWrap > .rightArea .divSLA > .tableSLA tr.type2 td > .txtContent {
            background-color: #fd5562;
        }

        .myPageWrap > .rightArea .divSLA > .tableSLA tr.type3 td > .txtContent {
            background-color: #ffbe03;
        }

        .myPageWrap > .rightArea .divSLA > .tableSLA td.none {
            height: 20px;
            border-bottom: none;
        }

/* 서비스수준 공지사항 */
.myPageWrap > .rightArea .divSLAList {
    height: 100%;
}

    .myPageWrap > .rightArea .divSLAList > ul {
    }

        .myPageWrap > .rightArea .divSLAList > ul > li {
            position: relative;
            height: 90px;
            padding:15px 240px 15px 20px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            cursor: pointer;
        }

            .myPageWrap > .rightArea .divSLAList > ul > li.on,
            .myPageWrap > .rightArea .divSLAList > ul > li.on:hover {
                border: 2px solid #1a1b23;
            }

            .myPageWrap > .rightArea .divSLAList > ul > li:hover {
                background-color: #f9f9f9;
            }


            .myPageWrap > .rightArea .divSLAList > ul > li > .txtTitle {
                display: inline-block;
                align-items: center;
                width: 100%;
                padding: 0 0 10px 0;
                font-size: 18px;
                letter-spacing: -.1em;
                color: #1a1b23;
            }

            .myPageWrap > .rightArea .divSLAList > ul > li.New > .txtTitle i {
                display: inline-block;
                width: 8px;
                height: 8px;
                margin-right: 5px;
                border-radius: 50%;
                background-color: #36AAFF;
            }

            .myPageWrap > .rightArea .divSLAList > ul > li > .txtCategory {
                font-size: 13px;
                letter-spacing: -.06em;
                color: #1a1b23;
            }

                .myPageWrap > .rightArea .divSLAList > ul > li > .txtCategory .cate {
                    display: inline-block;
                    margin-right: 10px;
                    padding: 5px 8px;
                    border-radius: 5px;
                    color: #fff;
                    font-size: 11px;
                }

                    .myPageWrap > .rightArea .divSLAList > ul > li > .txtCategory .cate.check {
                        background-color: #73DCE0;
                    }
                    .myPageWrap > .rightArea .divSLAList > ul > li > .txtCategory .cate.upgrade {
                        background-color: #FFC352;
                    }
                    .myPageWrap > .rightArea .divSLAList > ul > li > .txtCategory .cate.error {
                        background-color: #FF6262;
                    }

                .myPageWrap > .rightArea .divSLAList > ul > li > .txtCategory .txtDate {
                    font-size: 13px;
                    letter-spacing: -.06em;
                    color: #999;
                }

            .myPageWrap > .rightArea .divSLAList > ul > li > .signWarning {
                position: absolute;
                top: 0;
                right: 0;
                width: 80px;
                height: 100%;
                display: none;
                align-items: center;
                justify-content: center;
                background-color: #272933;
            }

                .myPageWrap > .rightArea .divSLAList > ul > li > .signWarning > .txtTime {
                    display: inline-flex;
                    font-size: 16px;
                    color: #fff;
                    /*background-repeat: no-repeat;
                    background-image: url('../Images/common/iconError.png');
                    background-position: center -2px;*/
                }

            .myPageWrap > .rightArea .divSLAList > ul > li > .dateArea {
                position: absolute;
                right: 120px;
                top: 18px;
                display: inline-block;
                text-align: center;
            }

                .myPageWrap > .rightArea .divSLAList > ul > li > .dateArea > p {
                    font-size: 12px;
                    letter-spacing: -.8px;
                    color: #1a1b23;
                }

                .myPageWrap > .rightArea .divSLAList > ul > li > .dateArea > .iconArrow {
                    display: inline-block;
                    width: 16px;
                    height: 15px;
                    background-repeat: no-repeat;
                    background-image: url('../Images/common/iconArrowDown.png');
                    background-position: center;
                }

            .myPageWrap > .rightArea .divSLAList > ul > li.Warning > .signWarning {
                display: flex;
            }

/*공지사항*/
.myPageWrap > .rightArea .boardBox {
    border-top: 2px solid #1a1b23;
    border-bottom: 1px solid #1a1b23;
}

    .myPageWrap > .rightArea .boardBox .noticesList {
        position: relative;
        padding: 16px 0;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
    }

        .myPageWrap > .rightArea .boardBox .noticesList > .txtTitle {
            display: inline-block;
            font-size: 18px;
            color: #1a1b23;
            letter-spacing: -1px;
        }

        .myPageWrap > .rightArea .boardBox .noticesList > .txtTime {
            margin-left: 20px;
            font-size: 15px;
        }

        .myPageWrap > .rightArea .boardBox .noticesList > .txtDate {
            position: absolute;
            right: 8px;
            top: 10px;
            padding: 8px;
            font-size: 13px;
            color: #666;
            line-height: 24px;
        }

        .myPageWrap > .rightArea .boardBox .noticesList > .txtUserName {
            padding: 8px;
            font-size: 13px;
            color: #666;
            line-height: 24px;
        }

        .myPageWrap > .rightArea .boardBox .noticesList > .txt {
            display: inline-block;
            height: 20px;
            color: #fff;
            line-height: 20px;
            text-align: center;
        }

            .myPageWrap > .rightArea .boardBox .noticesList > .txt.New {
                width: 20px;
                background-color: #eb5252;
                border-radius: 50%;
            }

            .myPageWrap > .rightArea .boardBox .noticesList > .txt.RE {
                padding: 0px 8px;
                background-color: #999;
                border-radius: 25px;
            }

        .myPageWrap > .rightArea .boardBox .noticesList > .icon {
            display: inline-block;
            height: 20px;
            width: 20px;
            background-image: url('../Images/common/iconBoard.png');
            background-repeat: no-repeat;
        }

            .myPageWrap > .rightArea .boardBox .noticesList > .icon.File {
                background-position: 0px 2px;
            }

            .myPageWrap > .rightArea .boardBox .noticesList > .icon.Key {
                background-position: 0px -26px;
            }

    .myPageWrap > .rightArea .boardBox .boardView {
        padding: 20px;
        font-size: 13px;
        line-height: 24px;
        white-space: pre-line;
    }

/* 공지사항 테이블 */
.myPageWrap > .rightArea .noticeTable {
    width: 100%;
    border: 0px;
    font-size: 12px;
    border-spacing: 0px;
}

    .myPageWrap > .rightArea .noticeTable select {
        height: 30px;
        /*padding: 3px 25px 3px 5px;*/
        border: 1px solid #CCC;
        margin-right: 5px;
        /*-webkit-appearance: none;
            -moz-appearance: none;
            background: url('../Images/common/icon-selectbox-arrow.png') no-repeat right 10px center;*/
        cursor: pointer;
        vertical-align: top;
    }

        .myPageWrap > .rightArea .noticeTable select::-ms-expand {
            display: none;
        }

        .myPageWrap > .rightArea .noticeTable select:disabled {
            cursor: default;
            background-color: #e4e6ed;
            color: gray;
        }

    .myPageWrap > .rightArea .noticeTable th {
        width: 10%;
        min-width: 100px; /*200312 김슬기 추가 / SLA 등록화면에서 줄바꿈 현상이 일어나 추가함.*/
        padding: 5px 0;
        text-align: center;
        background: #f0f0f0;
        border-bottom: 1px solid #e1e1e1;
        color: #666;
        font-weight: bold;
        letter-spacing: -1px;
    }

        .myPageWrap > .rightArea .noticeTable th.txtRequired {
            color: #eb5252;
        }

        .myPageWrap > .rightArea .noticeTable th > .required {
            font-size: 16px;
            color: #ff5858;
        }

    .myPageWrap > .rightArea .noticeTable td.tableTd {
        position: relative;
        padding: 10px;
        font-size: 12px;
        color: #333;
        letter-spacing: -1px;
        border-bottom: 1px solid #e1e1e1;
    }

    .myPageWrap > .rightArea .noticeTable td.boardTitle > input {
        width: 100%;
    }

        .myPageWrap > .rightArea .noticeTable td.boardTitle > input.readonly {
            background-color: #f1f1f1;
            /* cursor:not-allowed; */
        }

    .myPageWrap > .rightArea input.readonly {
        background-color: #f1f1f1;
        cursor:not-allowed;
    }

    .myPageWrap > .rightArea .noticeTable td span.txtInfo {
        padding-left: 10px;
        font-size: 12px;
        letter-spacing: -0.5px;
    }

    .myPageWrap > .rightArea .noticeTable td .spanInfo {
        position: absolute;
        top: 44px;
        left: 15px;
        z-index: 10; /*200629 김우준 수정 150 -> 10 SLARegister z-index관련 수정*/
        font-size: 11px;
        letter-spacing: -1px;
        color: #eb5252;
    }

        .myPageWrap > .rightArea .noticeTable td .spanInfo > span > span {
            font-size: 11px;
            letter-spacing: -1px;
            color: #eb5252;
        }

    .myPageWrap > .rightArea .noticeTable td input {
        padding: 0 8px;
        height: 30px;
        font-size: 13px;
        color: #666;
        letter-spacing: -1px;
        border: 1px solid #ccc;
        border-radius: 2px;
    }

        .myPageWrap > .rightArea .noticeTable td input.date {
            width: 75px;
            padding: 0 5px;
        }

        .myPageWrap > .rightArea .noticeTable td input.alignRight {
            text-align: right;
        }
         

        .myPageWrap > .rightArea .noticeTable td input[type=file] {
            padding: 0px;
            height: auto;
            border: 1px solid #CCC;
            letter-spacing: -0.5px;
        }

            .myPageWrap > .rightArea .noticeTable td input[type=file]:disabled {
                background-color: #e4e6ed;
                color: gray;
            }

    .myPageWrap > .rightArea .noticeTable td textarea {
        padding: 8px;
        height: 200px;
        width: 100%;
        font-size: 13px;
        color: #666;
        letter-spacing: -1px;
        border: 1px solid #ccc;
        border-radius: 2px;
    }

    .myPageWrap > .rightArea .noticeTable td input[type=radio] {
        width: 20px;
        height: 20px;
    }

    .myPageWrap > .rightArea .noticeTable td input[type=checkbox] {
        width: 20px;
        height: 20px;
    }

    .myPageWrap > .rightArea .noticeTable td input[type=button].btnCheck {
        padding: 0 16px;
        width: auto;
        height: 30px;
        font-size: 13px;
        letter-spacing: -1px;
        color: #fff;
        border: 0px;
        border-radius: 2px;
        background-color: #aaa;
    }

        .myPageWrap > .rightArea .noticeTable td input[type=button].btnCheck:hover {
            cursor: pointer;
            background-color: #999;
            box-shadow: rgba(0,0,0,0.4) 2px 2px 5px;
        }

    .myPageWrap > .rightArea .noticeTable td input.noticeTime {
        width: 100px;
        margin: 0;
    }

    .myPageWrap > .rightArea .noticeTable td span {
        display: inline-block;
        font-size: 12px;
        color: #666;
        letter-spacing: -1px;
    }

        .myPageWrap > .rightArea .noticeTable td span.sTxt span {
            display: inline-block;
            font-size: 13px;
            color: #eb5252 !important;
            letter-spacing: -0.5px;
            line-height: 25px;
        }

    .myPageWrap > .rightArea .noticeTable td .pInfoText {
        font-size: 13px;
        letter-spacing: -1px;
    }

    .myPageWrap > .rightArea .noticeTable td input[type=button].show {
        width: 50px;
        padding: 0px;
    }

    .myPageWrap > .rightArea .noticeTable td input[type=button] {
        padding: 0;
        width: 20px;
        height: 20px;
        margin-left: 2px;
    }

        .myPageWrap > .rightArea .noticeTable td input[type=button]:hover {
            cursor: pointer;
        }

    .myPageWrap > .rightArea .noticeTable td input[type=password] {
        width: 220px;
    }

    .myPageWrap > .rightArea .noticeTable td .tabArea .tabs {
        position: relative;
        display: flex;
        width: 100%;
        height: 30px;
    }

        .myPageWrap > .rightArea .noticeTable td .tabArea .tabs .costTab + .costTab {
            margin-left: 5px;
        }

        .myPageWrap > .rightArea .noticeTable td .tabArea .tabs .costTab input[type=radio] {
            display: none;
        }

        .myPageWrap > .rightArea .noticeTable td .tabArea .tabs .costTab > label {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 30px;
            padding: 5px 20px;
            border: 1px solid #999;
            border-radius: 20px;
            color: #999;
            font-size: 12px;
            font-weight: bold;
        }

            .myPageWrap > .rightArea .noticeTable td .tabArea .tabs .costTab > label:hover {
                box-shadow: rgba(0,0,0,0.3) 2px 2px 5px;
                cursor: pointer;
            }

        .myPageWrap > .rightArea .noticeTable td .tabArea .tabs .costTab.disabled label:hover {
            box-shadow:none;
            cursor: default;
        }

        .myPageWrap > .rightArea .noticeTable td .tabArea .tabs .costTab input[type=radio]:checked + label {
            border-color: #06294C;
            color: #06294C;
            box-shadow: none;
        }

        .myPageWrap > .rightArea .noticeTable .devBusinessAddtionalInfo td .content .boxArea {
            display: flex;            
            width: 100%;
        }
            .myPageWrap > .rightArea .noticeTable .devBusinessAddtionalInfo td .content .boxArea + .boxArea{
                margin-top: 10px;
            }

            .myPageWrap > .rightArea .noticeTable .devBusinessAddtionalInfo td .content .boxArea .box {
                flex: 1;
                max-width: 240px;
                min-height: 50px;
                padding: 10px;
                border-radius: 2px;
            }

                .myPageWrap > .rightArea .noticeTable .devBusinessAddtionalInfo td .content .boxArea .box.blue {
                    background-color: #E8F2FC;
                }

                .myPageWrap > .rightArea .noticeTable .devBusinessAddtionalInfo td .content .boxArea .box.red {
                    background-color: #FFF5F2;
                }

                .myPageWrap > .rightArea .noticeTable .devBusinessAddtionalInfo td .content .boxArea .box.green {
                    max-width: 490px;
                    background-color: #E8FCF4;
                }

                .myPageWrap > .rightArea .noticeTable .devBusinessAddtionalInfo td .content .boxArea .box + .box {
                    margin-left: 10px;
                }

                .myPageWrap > .rightArea .noticeTable .devBusinessAddtionalInfo td .content .boxArea .box dl {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    height: 30px;
                }
                    .myPageWrap > .rightArea .noticeTable .devBusinessAddtionalInfo td .content .boxArea .box dl + dl {
                        margin-top: 10px;
                    }

                .myPageWrap > .rightArea .noticeTable .devBusinessAddtionalInfo td .content .boxArea .box .txtUnit {
                    display: inline-block;
                    width: 20px;
                    margin-left: 5px;
                    color: #333;
                }

        .myPageWrap > .rightArea .noticeTable td .switchArea {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 5px 0;
        }

            .myPageWrap > .rightArea .noticeTable td .switchArea input[type=checkbox] {
                display: none;
            }

                .myPageWrap > .rightArea .noticeTable td .switchArea input[type=checkbox] ~ label {
                    display: flex;
                    align-items: center;
                    height: 40px;
                }

                    .myPageWrap > .rightArea .noticeTable td .switchArea input[type=checkbox] ~ label > i {
                        position: relative;
                        width: 40px;
                        height: 20px;
                        margin-left: 15px;
                        border-radius: 20px;
                        background-color: #ccc;
                    }

                        .myPageWrap > .rightArea .noticeTable td .switchArea [type=checkbox] ~ label > i:after {
                            content: "";
                            position: absolute;
                            top: 3px;
                            left: 3px;
                            width: 14px;
                            height: 14px;
                            border-radius: 50%;
                            background-color: #fff;
                            box-shadow: 0 2px 6px rgba(0,0,0,.2);
                            transition: .3s;
                        }

                .myPageWrap > .rightArea .noticeTable td .switchArea [type=checkbox]:checked ~ label > i {
                    background-color: #072A4D;
                }

                    .myPageWrap > .rightArea .noticeTable td .switchArea [type=checkbox]:checked ~ label > i:after {
                        left: 24px;
                    }

            .myPageWrap > .rightArea .noticeTable td .switchArea .ratioArea {
                display: none;
                margin-left: 50px;
            }

            .myPageWrap > .rightArea .noticeTable td .switchArea [type=checkbox]:checked ~ .ratioArea {
                display: block;
            }

            .myPageWrap > .rightArea .noticeTable .customerSelectList {
                width: 100%;
                min-height: 140px;
            }

                .myPageWrap > .rightArea .noticeTable .customerSelectList .txtNodata {
                    display: none;
                }

                .myPageWrap > .rightArea .noticeTable .customerSelectList.noData {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #999;
                }

                    .myPageWrap > .rightArea .noticeTable .customerSelectList.noData .txtNodata {
                        display: block;
                    }

                    .myPageWrap > .rightArea .noticeTable .customerSelectList.noData .label {
                        display:none;
                    }

                .myPageWrap > .rightArea .noticeTable .customerSelectList .label {
                    position: relative;
                    display: inline-flex;
                    align-items:center;
                    margin: 0 5px 5px 0;
                    padding: 3px 5px 3px 12px;
                    border: 1px solid #D3DBE3;
                    border-radius: 4px;
                    background-color: #F5F7F8;
                }

                    .myPageWrap > .rightArea .noticeTable .customerSelectList .label > .btnDel {
                        position:relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 16px;
                        height: 16px;
                        margin-left: 5px;
                        color: #aaa;
                    }

                    .myPageWrap > .rightArea .noticeTable .customerSelectList .label:hover {
                        border-color: #aaa;
                        cursor: pointer;
                    }

                    .myPageWrap > .rightArea .noticeTable .customerSelectList .label:hover > .btnDel {
                        color: #ff5858;
                    }

                        .myPageWrap > .rightArea .noticeTable .customerSelectList .label > .btnDel:before,
                        .myPageWrap > .rightArea .noticeTable .customerSelectList .label > .btnDel:after {
                            content: "";
                            position: absolute;
                            width: 11px;
                            height: 1px;
                            background-color: currentColor;
                            transform: rotate(-45deg);
                        }

                        .myPageWrap > .rightArea .noticeTable .customerSelectList .label > .btnDel:after {
                            width: 1px;
                            height: 11px;
                        }

/* 고객별 시스템 관리 */
/* 20210201김우준 form 태그 삭제*/
/* 계약 추가 후 사용하지 않는 컨트롤러로 formSubmit이 되어 form을 삭제*/
.myPageWrap > .rightArea .AdminRegisterBox {
}
    .myPageWrap > .rightArea .AdminRegisterBox > form .topTitle {
        display: block;
        width: 100%;
        padding: 8px;
        background-color: #ccd9e6;
        font-size: 12px;
        color: rgba(0,0,0,0.7);
        letter-spacing: -.8px;
        text-align: center;
    }

    .myPageWrap > .rightArea .AdminRegisterBox > form .reqValue {
        width: 100%;
        padding-top: 10px;
        background-color: #f9f9f9;
    }
        .myPageWrap > .rightArea .AdminRegisterBox > form .reqValue > dl {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

            .myPageWrap > .rightArea .AdminRegisterBox > form .reqValue > dl > dt {
                min-width: 183px;
                padding-left: 15px;
                font-size: 12px;
                color: #1a1b23;
                letter-spacing: -.06em;
            }

            .myPageWrap > .rightArea .AdminRegisterBox > form .reqValue > dl > dd {
            }

        .myPageWrap > .rightArea .AdminRegisterBox > form .InitialArea > .informationMessage {
            margin: 0 10px 10px;
            padding: 2px 8px;
            font-size: 13px;
            font-weight: bold;
            color: #fff;
            letter-spacing: -1px;
            border: 1px solid #eb5252;
            border-radius: 5px;
            background-color: #eb5252;
        }
        

        .myPageWrap > .rightArea .AdminRegisterBox > form .InitialArea .initialBox {
            position: relative;
            display:flex;
            align-items: center;
        }

            .myPageWrap > .rightArea .AdminRegisterBox > form .InitialArea .initialBox > input[type=text] {
                padding: 0 4px;
                margin: 0px;
                height: 30px;
                width: 250px;
                font-size: 12px;
                border: 1px solid #ccc;
            }

                .myPageWrap > .rightArea .AdminRegisterBox > form .InitialArea .initialBox > input[type=text]:focus {
                    border: 2px solid #93d50a;
                }

            .myPageWrap > .rightArea .AdminRegisterBox > form .InitialArea .initialBox > input[type=button] {
                padding: 0 8px;
                height: 30px;
                font-size: 12px;
                color: #1a1b23;
                background-color: #fff;
                border: 1px solid #1a1b23;
                cursor: pointer;
            }

                .myPageWrap > .rightArea .AdminRegisterBox > form .InitialArea .initialBox > input[type=button]:hover {
                    background-color: #1a1b23;
                    color: #fff;
                }

        .myPageWrap > .rightArea .AdminRegisterBox > form .YLWProjectNameArea .initialBox {
            position: relative;
            display:flex;
            align-items: center;
        }

            .myPageWrap > .rightArea .AdminRegisterBox > form .YLWProjectNameArea .initialBox > input[type=text] {
                padding: 0 4px;
                margin: 0px;
                height: 30px;
                width: 250px;
                font-size: 12px;
                border: 1px solid #ccc;
            }

                .myPageWrap > .rightArea .AdminRegisterBox > form .YLWProjectNameArea .initialBox > input[type=text]:focus {
                    border: 2px solid #93d50a;
                }

    .myPageWrap > .rightArea .AdminRegisterBox > form .AdminRegisterArea {
        padding-top: 10px;
    }

        .myPageWrap > .rightArea .AdminRegisterBox > form .AdminRegisterArea > ul {
            display: flex;
            width: 100%;
            border-bottom: 1px solid #ccc;
            background-color: #f9f9f9;
        }

            .myPageWrap > .rightArea .AdminRegisterBox > form .AdminRegisterArea > ul > li {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
            }

                .myPageWrap > .rightArea .AdminRegisterBox > form .AdminRegisterArea > ul > li > .txtTitle {
                    width: 100%;
                    padding: 8px;
                    font-size: 12px;
                    letter-spacing: -.8px;
                    text-align: center;
                    color: rgba(0,0,0,0.7);
                    background-color: #e4e4d4;
                }

                .myPageWrap > .rightArea .AdminRegisterBox > form .AdminRegisterArea > ul > li.YLW > .txtTitle {
                    background-color: #e4eecd;
                }

                .myPageWrap > .rightArea .AdminRegisterBox > form .AdminRegisterArea > ul > li.ServicePartner > .txtTitle {
                    background-color: #ccd9e6;
                }

                .myPageWrap > .rightArea .AdminRegisterBox > form .AdminRegisterArea > ul > li.SalesPartner > .txtTitle {
                    background-color: #e4e4e4;
                }

                .myPageWrap > .rightArea .AdminRegisterBox > form .AdminRegisterArea  .selectPartner {
                    width: 100%;
                    padding-right: 20px;
                }
                    .myPageWrap > .rightArea .AdminRegisterBox > form .AdminRegisterArea .selectPartner > select {
                        width: 250px;
                        height: 30px;
                        padding: 3px 0px 3px 8px;
                        margin: 5px 0px;
                        font-size: 12px;
                        letter-spacing: -.8px;
                        border: 1px solid #ccc;
                        background-repeat: no-repeat;
                        background-position: 6px center;
                        background-color: #fff;
                    }
                    .myPageWrap > .rightArea .AdminRegisterBox > form .form form AdminRegisterArea .selectPartner > input[type=button] {
                        padding: 0 8px;
                        height: 30px;
                        font-size: 12px;
                        color: #1a1b23;
                        background-color: #fff;
                        border: 1px solid #1a1b23;
                        cursor: pointer;
                    }

                .myPageWrap > .rightArea .AdminRegisterBox > form .AdminRegisterArea > ul > li > .registerBox {                    
                    width: 33.3%;
                    padding: 10px 15px 5px 15px;
                }

                    .myPageWrap > .rightArea .AdminRegisterBox > form .AdminRegisterArea > ul > li > .registerBox > .txtCaption {
                        margin-bottom: 5px;
                        font-size: 12px;
                        color: #1a1b23;
                    }

                    .myPageWrap > .rightArea .AdminRegisterBox > form .AdminRegisterArea > ul > li > .registerBox > input[type=text] {
                        width: 100%;
                        height: 30px;
                        padding: 3px 8px 3px 30px;
                        margin-bottom: 5px;
                        font-size: 12px;
                        letter-spacing: -.8px;
                        border: 1px solid #e6e6e6;
                        background-repeat: no-repeat;
                        background-position: 6px center;
                        background-color: #fff;
                    }

                    .myPageWrap > .rightArea .AdminRegisterBox > form .AdminRegisterArea > ul > li > .registerBox > input[type=text].inputName {
                        background-image: url('../Images/common/iconUser.png');
                    }

                    .myPageWrap > .rightArea .AdminRegisterBox > form .form AdminRegisterArea > ul > li > .registerBox > input[type=text].inputEmail {
                        background-image: url('../Images/common/iconEmail.png');
                    }

                .myPageWrap > .rightArea .AdminRegisterBox > form .AdminCMSWithdrawalDateSetArea .selectPartner > select {
                    width: 100px;
                    height: 30px;
                    padding: 3px 0px 3px 8px;
                    margin: 5px 0px;
                    font-size: 12px;
                    letter-spacing: -.8px;
                    border: 1px solid #ccc;
                    background-repeat: no-repeat;
                    background-position: 6px center;
                    background-color: #fff;
                }
    .myPageWrap > .rightArea .AdminRegisterBox > form .AdminSettlemnetSetArea {
        padding: 0px;
    }

    .myPageWrap > .rightArea .AdminRegisterBox > form .AdminSystemCreateValUpdateSetArea {
        padding: 0px 0px 10px 0px;
    }

.myPageWrap > .rightArea .AdminServiceDateArea {
    padding: 10px 0;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f9f9f9;
}

    .myPageWrap > .rightArea .AdminServiceDateArea > .txtTitle {
        width: 100%;
        padding-left: 20px;
        margin: 5px 0 15px 0;
        font-size: 13px;
        font-weight: bold;
    }

    .myPageWrap > .rightArea .AdminServiceDateArea > .AdminServiceDateBox {
        width: 100%;
        margin-bottom: 5px;
    }

        .myPageWrap > .rightArea .AdminServiceDateArea > .AdminServiceDateBox.textRight input[type=text] {
            text-align: right;
        }

        .myPageWrap > .rightArea .AdminServiceDateArea > .AdminServiceDateBox > label {
            display: inline-block;
            padding-left: 15px;
            min-width: 180px;
            font-size: 12px;
            letter-spacing: -.06em;
            color: #1a1b23;
        }

            .myPageWrap > .rightArea .AdminServiceDateArea > .AdminServiceDateBox > label:before {
                content: "- ";
            }

        .myPageWrap > .rightArea .AdminServiceDateArea > .AdminServiceDateBox > select {
            margin-right: 5px;
            padding: 0 0 0 2px;
            font-size: 12px;
            letter-spacing: -.03em;
            height: 30px;
            border: 1px solid #ccc;
        }

            .myPageWrap > .rightArea .AdminServiceDateArea > .AdminServiceDateBox > select.selectYear {
                width: 80px;
            }
            .myPageWrap > .rightArea .AdminServiceDateArea > .AdminServiceDateBox > select.selectMonth {
                width: 50px;
            }
            .myPageWrap > .rightArea .AdminServiceDateArea > .AdminServiceDateBox > select.selectDay {
                width: 50px;
            }

        .myPageWrap > .rightArea .AdminServiceDateArea > .AdminServiceDateBox > input[type=text] {
            width: 190px;
            margin-right: 10px;
            padding: 0 8px;
            font-size: 12px;
            letter-spacing: -.03em;
            height: 30px;
            border: 1px solid #ccc;
        }

        .myPageWrap > .rightArea .AdminServiceDateArea > .AdminServiceDateBox > input[type=number] {
            width: 150px;
            margin-right: 10px;
            padding: 0 8px;
            font-size: 12px;
            letter-spacing: -.03em;
            height: 30px;
            border: 1px solid #ccc;
        }

    .myPageWrap > .rightArea .AdminServiceDateArea .AdminServiceDateBox button {
        width: 120px;
        margin-top: 10px;
        padding: 8px 24px;
        border: 1px solid #1a1b23;
        border-radius: 50px;
        background-color: #1a1b23;
        font-size: 12px;
        color: #fff;
    }

        .myPageWrap > .rightArea .AdminServiceDateArea .AdminServiceDateBox button:hover {
            cursor: pointer;
            color: #1a1b23;
            border: 1px solid #1a1b23;
            background-color: transparent;
            box-shadow: rgba(0,0,0,0.3) 2px 2px 5px;
            transition: 0.3s all;
        }

.myPageWrap > .rightArea .AdminServiceContractDateArea {
    padding: 15px;
    background-color: #f9f9f9;
    border-top: 1px solid #ccc;
}
    .myPageWrap > .rightArea .AdminServiceContractDateArea .txtTitle {
        font-size: 15px;
    }

    .myPageWrap > .rightArea .AdminServiceContractDateArea > .ContractSummaryDataArea {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 20px 0 30px;
        border-bottom: 1px solid #ccc;
    }

        .myPageWrap > .rightArea .AdminServiceContractDateArea > .ContractSummaryDataArea > section {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            width: 160px;
            height: 60px;
            padding: 0 20px;
            border-left: 1px solid #ccc;
        }

            .myPageWrap > .rightArea .AdminServiceContractDateArea > .ContractSummaryDataArea > section:first-child {
                padding-left: 0;
                border-left: 0;
            }

            .myPageWrap > .rightArea .AdminServiceContractDateArea > .ContractSummaryDataArea > section > .txtCaption {
                font-size: 13px;
                letter-spacing: -.8px;
                color: #072a4d;
            }

                .myPageWrap > .rightArea .AdminServiceContractDateArea > .ContractSummaryDataArea > section > .txtCaption:before {
                    content: ' l ';
                    color: #15b4c2;
                }

            .myPageWrap > .rightArea .AdminServiceContractDateArea > .ContractSummaryDataArea > section > .txtValue {
                margin-left: auto;
                padding-left: 8px;
                font-size: 24px;
                color: #072a4d;
                text-align: right;
            }

        .myPageWrap > .rightArea .AdminServiceContractDateArea > .ContractSummaryDataArea > .btn {
            position: absolute;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 25px;
            margin: 0;
            padding: 0 8px;
            border: 0px;
            border-radius: 5px 5px 0 0;
            background-color: #072a4d;
            font-size: 12px;
            color: #fff;
        }
            .myPageWrap > .rightArea .AdminServiceContractDateArea > .ContractSummaryDataArea > .btn:hover {
                background-color: #1a1b23;
            }

            .myPageWrap > .rightArea .AdminServiceContractDateArea > .ContractSummaryDataArea > .btn:before {
                content:"";
                display: inline-block;
                width: 6px;
                height: 6px;
                margin-right: 7px;
                margin-bottom: 3px;
                border-left: 1px solid #fff;
                border-bottom: 1px solid #fff;
                transform: rotate(-45deg);
            }

            .myPageWrap > .rightArea .AdminServiceContractDateArea > .ContractSummaryDataArea > .btn.active {
                background-color: #888;
            }
                .myPageWrap > .rightArea .AdminServiceContractDateArea > .ContractSummaryDataArea > .btn.active:hover {
                    background-color: #444;
                }

                .myPageWrap > .rightArea .AdminServiceContractDateArea > .ContractSummaryDataArea > .btn.active:before {
                    margin-top: 8px;
                    transform: rotate(135deg);
                }

/* 회사정보 */
.myPageWrap > .rightArea .companyInfoBox {
    margin: -1px 0 0px 0;
    padding: 20px 30px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f9f9f9;
}

    .myPageWrap > .rightArea .companyInfoBox > .txtServiceModel {
        display: inline-block;
        margin-bottom: 5px;
        padding: 2px 10px;
        font-size: 12px;
        color: #072a4d;
        line-height: 23px;
        border: 1px solid #072a4d;
        border-radius: 50px;
    }

    .myPageWrap > .rightArea .companyInfoBox > .txtTitle {
        margin-bottom: 20px;
        font-size: 21px;
        color: #072a4d;
        letter-spacing: -2px;
    }

        .myPageWrap > .rightArea .companyInfoBox > .txtTitle > .Client {
            color: #7CD800;
            font-weight: bold;
        }

    .myPageWrap > .rightArea .companyInfoBox > .txtSubTitle {
        padding: 0;
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: bold;
        color: #072a4d;
        letter-spacing: -2px;
        background-color: transparent;
    }

    .myPageWrap > .rightArea .companyInfoBox > .itemWrap {
        display: flex;
        flex-wrap: wrap;
    }

        .myPageWrap > .rightArea .companyInfoBox > .itemWrap > .item {
            display: inline-flex;
            align-items: center;
            height: 14px;
            min-width: 180px;
            margin: 4px 0;
            padding-right: 20px;
        }

            .myPageWrap > .rightArea .companyInfoBox > .itemWrap > .item > label::after {
                content: ' :  '
            }

            .myPageWrap > .rightArea .companyInfoBox > .itemWrap > .item > label,
            .myPageWrap > .rightArea .companyInfoBox > .itemWrap > .item > .txtValue {
                display: inline-block;
                line-height: 13px;
                letter-spacing: -.03em;
            }

            .myPageWrap > .rightArea .companyInfoBox > .itemWrap > .item > label {
                font-size: 12px;
                color: #777;
            }

            .myPageWrap > .rightArea .companyInfoBox > .itemWrap > .item > .txtValue {
                padding-left: 5px;
                font-size: 14px;
                color: #072a4d;
            }

/* 서비스 신청 완료 */
.myPageWrap > .rightArea .joinFinished {
    text-align: center;
    margin: 60px 0;
}

    .myPageWrap > .rightArea .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;
    }

    .myPageWrap > .rightArea .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;
    }

    .myPageWrap > .rightArea .joinFinished > .imgMoney {
        display: inline-block;
        width: 160px;
        height: 160px;
        margin: 0 auto;
        background-image: url('../Images/common/imgMoney.png');
        background-repeat: no-repeat;
        background-position: -9px 0px;
    }

    .myPageWrap > .rightArea .joinFinished > .imgService {
        display: inline-block;
        width: 160px;
        height: 160px;
        margin: 0 auto;
        background-image: url('../Images/common/imgService.png');
        background-repeat: no-repeat;
        background-position: -9px 0px;
    }

    .myPageWrap > .rightArea .joinFinished > .imgApiSetting {
        display: inline-block;
        width: 160px;
        height: 160px;
        margin: 0 auto;
        background-image: url('../Images/common/imgApiSetting.png');
        background-repeat: no-repeat;
        background-position: -9px 0px;
    }

    .myPageWrap > .rightArea .joinFinished > .imgNotice {
        display: inline-block;
        width: 160px;
        height: 160px;
        margin: 0 auto;
        background-image: url('../Images/common/imgNotice.png');
        background-repeat: no-repeat;
        background-position: -9px 0px;
    }

    .myPageWrap > .rightArea .joinFinished > .txtTitle {
        font-size: 40px;
        color: #072a4d;
        font-weight: lighter;
        letter-spacing: -5px;
    }

    .myPageWrap > .rightArea .joinFinished > .txtDescription {
        font-size: 13px;
        color: #999;
        letter-spacing: -1px;
    }

.myPageWrap > .rightArea .ElectronicContractArea {
    margin: 30px 0;
    padding: 30px 50px;
    background-color: #f9f9f9;
}

    .myPageWrap > .rightArea .ElectronicContractArea > .titleArea {
        position: relative;
        padding: 0 0 10px 100px;
        margin-bottom: 30px;
        border-bottom: 1px solid #ccc;
    }

        .myPageWrap > .rightArea .ElectronicContractArea > .titleArea > .img {
            position: absolute;
            left: 0;
            top: 0;
            width: 80px;
            height: 65px;
            background-image: url('../Images/common/iconServiceComplate.png');
            background-repeat: no-repeat;
            background-position: 0px -27px;
        }

    .myPageWrap > .rightArea .ElectronicContractArea .txtTitle {
        font-size: 21px;
        font-weight: lighter;
        color: #072a4d;
        letter-spacing: -.8px;
    }

    .myPageWrap > .rightArea .ElectronicContractArea .txtDescription {
        margin-bottom: 30px;
        font-size: 13px;
        color: #666;
        letter-spacing: -.5px;
    }

    .myPageWrap > .rightArea .ElectronicContractArea .txtTitle.Sub {
        font-size: 16px;
        color: #333;
        padding-left: 60px;
    }

    .myPageWrap > .rightArea .ElectronicContractArea > .contentsArea > .txtDescription.Sub {
        padding-left: 60px;
    }



/*indicator 추가*/
.loaders-container {
    position: fixed; /*190213 김슬기 수정 / absolute -> fixed로 변경*/
    left: 50%;
    top: 50%;
    margin-top: -40px;
    margin-left: -40px;
    padding: 20px;
    text-align: center;
    font-size: 0;
    z-index: 11; /*200312 김슬기 수정 / 1 -> 11*/
}

    .loaders-container .container {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
    }

        .loaders-container .container .circle {
            box-sizing: border-box;
            width: 80px;
            height: 80px;
            border-radius: 100%;
            border: 10px solid #ececec;
            border-top-color: #072a4d;
            animation: spin 1s infinite linear;
        }

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
/*indicator 추가 끝*/

.tableViewHover > tbody > tr:hover {
    background: #f8f8f8;
    cursor: pointer;
}

/* table (공통) */
.myPageWrap > .rightArea .tableJoin {
    width: 100%;
    border: 0px;
}

    .myPageWrap > .rightArea .tableJoin th {
        width: 160px; /*200313 김슬기 수정 / 150 -> 160*/
        min-width: 160px;
        padding: 5px 0;
        font-size: 12px;
        color: #666;
        font-weight: normal;
        letter-spacing: -.05em;
        text-align: left;
    }

        .myPageWrap > .rightArea .tableJoin th.txtRequired:after {
            content: "*";
            margin-left: 5px;
            font-weight: bold;
            color: #eb5252;
        }

    .myPageWrap > .rightArea .tableJoin.flexNone td {
        flex-direction: column;
        align-items: unset;
        height: auto;
    }

    .myPageWrap > .rightArea .tableJoin td {
        display: flex;
        align-items: center;
        position: relative;
        min-height: 50px;
        padding: 5px 0;
        font-size: 14px;
        color: #333;
        letter-spacing: -1px;
    }

    .myPageWrap > .rightArea .tableJoin .btn_wrap {
        display: flex;
        width: 280px;
        padding: 0;
    }

    .myPageWrap > .rightArea .tableJoin td.boardTitle > input {
        width: 100%;
    }

    .myPageWrap > .rightArea .tableJoin td span.txtInfo {
        padding-left: 10px;
        font-size: 12px;
        letter-spacing: -0.5px;
    }

    .myPageWrap > .rightArea .tableJoin td .spanInfo {
        font-size: 11px;
        letter-spacing: -1px;
        color: #eb5252;
    }

        .myPageWrap > .rightArea .tableJoin td .spanInfo > span {
            font-size: 11px;
            letter-spacing: -1px;
            color: #eb5252;
        }

            .myPageWrap > .rightArea .tableJoin td .spanInfo > span > span {
                font-size: 11px;
                letter-spacing: -1px;
                color: #eb5252;
            }

    .myPageWrap > .rightArea .tableJoin td input[type=text],
    .myPageWrap > .rightArea .tableJoin td input[type=password],
    .myPageWrap > .rightArea .tableJoin td input[type=number],
    .myPageWrap > .rightArea .tableJoin td input[type=tel],
    .myPageWrap > .rightArea .tableJoin td input[type=email],
    .myPageWrap > .rightArea .tableJoin td select {
        width: 280px;
        height: 30px;
        margin: 5px 0;
        padding: 0 3px 1px;
        border: none;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        letter-spacing: -1px;
    }

    .myPageWrap > .rightArea .tableJoin td select {
        padding: 0;
        margin-right: 8px;
    }

    .myPageWrap > .rightArea .tableJoin td input.devReadOnly {
        background-color: #ccc;
    }

    .myPageWrap > .rightArea .tableJoin td select.selectYear {
        width: 80px;
    }

    .myPageWrap > .rightArea .tableJoin td select.selectMonth {
        width: 50px;
    }

    .myPageWrap > .rightArea .tableJoin td select.selectDay {
        width: 50px;
    }

    .myPageWrap > .rightArea .tableJoin td input[type=file] {
        padding: 0px;
    }

    .myPageWrap > .rightArea .tableJoin td input[type=button].show { /*170116 김슬기 추가*/
        background-color: #b9c1c6;
        color: #fff;
        padding: 6px 20px;
        width: auto;
        font-size: 13px;
        letter-spacing: 0;
        height: auto;
        border: none;
        cursor: pointer;
    }

    .myPageWrap > .rightArea .tableJoin td input[type=password] { /*170116 김슬기 추가*/
        width: 220px;
    }

    .myPageWrap > .rightArea .tableJoin td textarea {
        padding: 8px;
        height: 200px;
        width: 100%;
        font-size: 12px;
        color: #666;
        letter-spacing: -1px;
        border: 1px solid #ccc;
        border-radius: 2px;
        resize: none; /*200312 김슬기 추가*/
    }

        .myPageWrap > .rightArea .tableJoin td textarea.settingVal {
            width: 280px;
            font-size: 14px;
        }

    .myPageWrap > .rightArea .tableJoin td .selectYear {
        width: 120px;
    }

    .myPageWrap > .rightArea .tableJoin td .selectMonth {
        width: 80px;
    }

    .myPageWrap > .rightArea .tableJoin td .selectDay {
        width: 80px;
    }

    .myPageWrap > .rightArea .tableJoin td input[type=radio] {
        width: 18px;
        height: 18px;
    }

    .myPageWrap > .rightArea .tableJoin td input[type=checkbox] {
        width: 18px;
        height: 18px;
        margin-left: 0;
    }

    .myPageWrap > .rightArea .tableJoin td input.btnCheck {
        width: auto;
        min-width: 55px;
        height: 30px;
        font-size: 13px;
        letter-spacing: -1px;
        color: #fff;
        border: 0px;
        border-radius: 2px;
        background-color: #aaa;
    }

        .myPageWrap > .rightArea .tableJoin td input.btnCheck:hover {
            cursor: pointer;
            background-color: #999;
            box-shadow: rgba(0,0,0,0.4) 2px 2px 5px;
        }

    .myPageWrap > .rightArea .tableJoin td span {
        display: inline-block;
        font-size: 12px;
        color: #666;
        letter-spacing: -1px;
        line-height: 25px;
    }

        .myPageWrap > .rightArea .tableJoin td span.field-validation-error > span {
            display: inline-block !important;
            padding-left: 25px;
            font-size: 12px;
            letter-spacing: -1px;
            color: #eb5252;
            background-image: url('../Images/common/iconError.png');
            background-repeat: no-repeat;
            background-position: 0px center;
        }

    .myPageWrap > .rightArea .tableJoin td .pInfoText {
        font-size: 12px;
        letter-spacing: -1px;
    }

/* 개인정보이용약관 업데이트 191212 김주현 추가 */
.agreeTable {
    width: 95%;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .agreeTable th,
    .agreeTable td {
        padding: 7px 15px;
    }

    .agreeTable th {
        text-align: center;
        font-weight: bold;
        background: #ddd;
    }

a.agreeLink {
    font-weight: bold;
    color: #3366ff;
}

.beforeAgreementLayer .modalWrap{
    width: 800px;
    height: 600px;
    color: #666;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -.06em;
}

    .beforeAgreementLayer .contents {
        width: 100%;
        height: 560px;
        padding: 20px;
        letter-spacing: -1px;
        line-height: 20px;
        overflow-x: hidden;
        overflow-y: auto;
    }

        .beforeAgreementLayer .contents .title {
            font-weight: bold;
        }

        .beforeAgreementLayer .contents .depth1 {
            padding-left: 20px;
        }

        .beforeAgreementLayer .contents .depth2 {
            padding-left: 40px;
        }

        .beforeAgreementLayer .contents p {
            color: #666;
            line-height: 20px;
        }

/*2020-04 : 마케팅 신규 페이지로 인해 박혜진 추가*/
.myPageWrap .rightArea > .titleArea {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 50px;
    margin-bottom: 10px;
}

    .myPageWrap .rightArea > .titleArea > .txtTitle {
        width: 100%;
        font-size: 22px;
        letter-spacing: -.1em;
        font-weight: bold;
    }

    .myPageWrap .rightArea > .titleArea > .txtModel {
        display: inline-flex;
        font-size: 15px;
        letter-spacing: -.08em;
        opacity: 0.8;
    }
/*하단 버튼*/
.myPageWrap .btnArea {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    padding: 20px 0;
    margin: 0;
    max-width: 1000px;
}
    .myPageWrap .btnArea.btnCenter {
        max-width: unset;
        justify-content: center;
    }

    .myPageWrap .btnArea > .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        min-width: 200px;
        height: 50px;
        border: 0px;
        border-radius: 25px;
        background-color: #000;
        color: #7CD800;
        font-weight: bold;
    }

        .myPageWrap .btnArea > .btn:hover {
            cursor: pointer;
            background-color: #7CD800;
            color: #fff;
        }

        .myPageWrap .btnArea > .btn + .btn {
            margin-left: 10px;
        }

        .myPageWrap .btnArea > .btn.gray {
            cursor: pointer;
            background-color: #e7e7e7;
            color: #424558;
        }
.myPageWrap .tableTopText {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 1000px;
    padding-bottom: 5px;
}
    .myPageWrap .tableTopText p {
        display: flex;
        align-items: center;
        font-size: 11px;
        padding-left: 20px;
    }

        .myPageWrap .tableTopText p span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
        }

            .myPageWrap .tableTopText p span.checked:before {
                content: "";
                width: 5px;
                height: 9px;
                margin-left: 2px;
                border: 0 solid #93d50a;
                border-width: 0 3px 3px 0;
                transform: rotate(45deg);
            }

            .myPageWrap .tableTopText p span.checkbox:before {
                content: "";
                width: 11px;
                height: 11px;
                border: 1px solid #000;
                border-radius: 2px;
            }

            .myPageWrap .tableTopText p span.star:before {
                content: "*";
                color: #eb5252;
                font-size: 17px;
                font-weight: bold;
            }

/*table Design*/
.myPageWrap .tableInfoM {
    width: 100%;
    max-width: 1000px;
    border-spacing: 0;
    border: 0px;
    border-top: 4px solid #DDDDE1;
    border-bottom: 1px solid #DDDDE1;
    font-size: 16px; /*마케팅 포털과 맞추기 위함*/
}

    .myPageWrap .tableInfoM input[type=checkbox],
    .myPageWrap .tableInfoM input[type=radio] {
        width: 24px;
        height: 24px;
        margin: 3px 0;
    }
    .myPageWrap .tableInfoM .radio input[type=radio] {
        display: none;
    }

        .myPageWrap .tableInfoM .radio input[type=radio] + label {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

            .myPageWrap .tableInfoM .radio input[type=radio] + label > i {
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 24px;
                height: 24px;
                border: 1px solid #666;
                border-radius: 50%;
            }

                .myPageWrap .tableInfoM .radio input[type=radio] + label > i:before {
                    content: '';
                    position: absolute;
                    top: 4px;
                    left: 4px;
                    width: 14px;
                    height: 14px;
                    border-radius: 50%;
                    background-color: transparent;
                }
        .myPageWrap .tableInfoM .radio input[type=radio]:checked + label > i {
            border-color: #0075ff;
        }

            .myPageWrap .tableInfoM .radio input[type=radio]:checked + label > i:before {
                background-color: #0075ff;
            }

    .myPageWrap .tableInfoM .radio.Dis input[type=radio] + label > i {
        border-color: #aaa;
        background-color: #ccc;
    }

    .myPageWrap .tableInfoM .radio.Dis input[type=radio]:checked + label > i:before {
        background-color: #999;
    }

    .myPageWrap .tableInfoM .checkbox input[type=checkbox] {
        display: none;
    }
        .myPageWrap .tableInfoM .checkbox input[type=checkbox] + label {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

            .myPageWrap .tableInfoM .checkbox input[type=checkbox] + label > i {
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                width: 24px;
                height: 24px;
                border: 1px solid #666;
                border-radius: 2px;
            }

            .myPageWrap .tableInfoM .checkbox input[type=checkbox] + label > i:before {
                content: '';
                position: absolute;
                top: 1px;
                left: 7px;
                width: 5px;
                height: 12px;
                border-width: 0;
                border-color: #fff;
                border-style: solid;
                transform: rotate( 45deg );
            }

        .myPageWrap .tableInfoM .checkbox input[type=checkbox]:checked + label > i {
            border-color: #0075ff;
            background-color: #0075ff;
        }

            .myPageWrap .tableInfoM .checkbox input[type=checkbox]:checked + label > i:before {
                    border-width: 0 4px 4px 0;
                }

    .myPageWrap .tableInfoM .checkbox.Dis input[type=checkbox] + label > i {
        border-color: #aaa;
        background-color: #ccc;
    }

.tableInfoM th {
    position: relative;
    min-width: 80px;
    padding: 8px 16px;
    border-left: 1px solid #DDDDE1;
    border-bottom: 1px solid #DDDDE1;
    background-color: #F5F7F9;
    text-align: center;
    letter-spacing: -.08em;
    color: #424558;
    font-weight: normal;
}

    .tableInfoM th .txtInfo {
        color: #eb5252;
        font-weight: bold;
    }

    .tableInfoM td {
        position: relative;
        padding: 8px 16px;
        border-left: 1px solid #DDDDE1;
        border-bottom: 1px solid #DDDDE1;
        color: #424558;
        letter-spacing: -.08em;
    }

    .tableInfoM td.tdCheckbox {
        width: 180px;
        text-align: center;
    }    

    .tableInfoM td:first-child {
        border-left: 0px solid #DDDDE1;
    }

    .tableInfoM td.textAlignCenter {
        text-align: center;
    }

    .tableInfoM.TextAlignCenter td {
        text-align: center;
    }

    .tableInfoM.TextAlignCenter td.Dis { /*200513 김슬기 추가 / td에 Dis 클래스 추가함.*/
        background-color: #f6f6f6;
    }

    .tableInfoM.TextAlignCenter td.price {
        padding-right: 22px;
        text-align: right;
    }

        .tableInfoM.TextAlignCenter td.price:after{ /*210304 김슬기 추가 / 리소스와 단위를 붙이기 위해 css로 처리함*/
            content: "만원";
        }

        .tableInfoM.TextAlignCenter td.count:after { /*210304 김슬기 추가 / 리소스와 단위를 붙이기 위해 css로 처리함*/
            content: "회";
        }

        .tableInfoM.TextAlignCenter td > .checked {
            display: inline-block;
            width: 12px;
            height: 21px;
            border: 0 solid #93d50a;
            border-width: 0 5px 5px 0;
            transform: rotate(45deg);
        }

.tableInfoM td.textRight {
    text-align: right;
}

.tableInfoM td.txtTotal {
    font-size: 21px;
    font-weight: bold;
}

.tableInfoM td.txtUnit {
    padding-left: 0;
    border-left: 0;
    text-align: center;
}

.tableInfoM td .txtValue {
    display: inline-block;
    font-weight: bold;
    width: 80px;
}

.tableInfoM td .txtHelp {
    display: inline-block;
    margin-left: 8px;
    font-size: 13px;
}

.tableInfoM td .txtValue2 {
    font-weight: bold;
    font-size: 17px;
}

    .tableInfoM td .txtValue2 > span {
        font-size: 16px;
        font-weight: normal;
    }

.tableInfoM th.top {
    border-top: 4px solid #DDDDE1;
    font-size: 18px;
    vertical-align: text-top;
}

    .tableInfoM th.top.basic {
        border-top: 4px solid #F0E41D;
        background-color: #fff;
    }

    .tableInfoM th.top.essential {
        border-top: 4px solid #AFE43C;
        background-color: #fff;
    }

    .tableInfoM th.top.standard {
        border-top: 4px solid #6DA816;
        background-color: #fff;
    }

    .tableInfoM th.top.enterprise {
        border-top: 4px solid #046848;
        background-color: #fff;
    }

    .tableInfoM th.top.gray {
        border-top: 4px solid #aaa;
        background-color: #fff;
    }
/*엔터프라이즈의 경우 툴팁이 우측으로 밀림 현상이 있어 별도로 셋팅함*/
.tableInfoM th.enterprise .btnDetail > .divTooltip {
    right: -40px;
}

    .tableInfoM th.enterprise .btnDetail > .divTooltip:before {
        right: 43px;
    }

.tableInfoM td.basic {
    background-color: #FDFBDC;
}

.tableInfoM td.essential {
    background-color: #F3FBE1;
}

.tableInfoM td.standard {
    background-color: #E6F7DF;
}

.tableInfoM td.enterprise {
    background-color: #E4F8F2;
}

.tableInfoM .btnDetail {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: text-top;
    width: 14px;
    height: 14px;
    border: 0px;
    border-radius: 50%;
    background-color: #000;
}

    .tableInfoM .btnDetail:before {
        content: '?';
        color: #fff;
        font-size: 12px;
        font-weight: bold;
    }

    .tableInfoM .btnDetail:hover {
        cursor: pointer;
        background-color: #7CD800;
    }

        .tableInfoM .btnDetail:hover > .divTooltip {
            display: block;
        }

    .tableInfoM .btnDetail > .divTooltip {
        position: absolute;
        right: -80px;
        bottom: 20px;
        display: none;
        min-width: 330px;
        padding: 8px 6px;
        border-radius: 5px;
        background-color: rgba(0,0,0,0.8);
        color: #fff;
        text-align: left;
        font-weight: normal;
        font-size: 12px;
        z-index: 99;
    }

        .tableInfoM .btnDetail > .divTooltip:before {
            content: '';
            position: absolute;
            bottom: -6px;
            right: 83px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 6px 5px 0 5px;
            border-color: #000 transparent transparent transparent;
        }

.tableInfoM + .tableInfoM {
    margin-top: 30px;
}
/*Plus,Minus Button*/
.inputNumber {
    margin-right: 10px;
    width: 80px;
    border: 0;
}

.btnNumber {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    vertical-align: middle;
    border-radius: 3px;
    background-color: #333;
}

    .btnNumber:hover {
        background: #7CD800;
    }

        .btnNumber:hover:before,
        .btnNumber:hover:after {
            background-color: #fff;
        }

    .btnNumber:before,
    .btnNumber:after {
        content: '';
        display: inline-block;
        position: absolute;
        width: 12px;
        height: 2px;
        background-color: #fff;
    }
    .btnNumber:before {
        top: 12px;
        left: 7px;
    }

    .btnNumber:after {
        transform: rotate(90deg);
        top: 12px;
        left: 7px;
    }

    .btnNumber.minus:after {
        display: none;
    }

.txtInfoLabel {
    padding: 10px;
}

    .txtInfoLabel span {
        color: #eb5252;
        font-weight: bold;
    }

/* 서비스 모델 선택 */
.ulSelectedModel {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1000px;
    padding: 0;
    margin: 0;
}

    .ulSelectedModel > li {
        display: inline-block;
        width: calc(50% - 20px);
        min-width: 250px;
        height: 180px;
        padding: 20px;
        margin: 0 40px 40px 0;
        border: 1px solid #ebebeb;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: rgba(0,0,0,0.2) 0 0 5px;
        cursor: pointer; /*200428 김슬기 추가 / 클릭 이벤트가 있는 부분이라 추가함.*/
    }

        .ulSelectedModel > li:hover {
            background-color: #f1f1f1;
        }

        .ulSelectedModel > li:nth-child(2n) {
            margin-right: 0px;
        }

        .ulSelectedModel > li.Selected {
            background-color: #7CD800;
            color: #fff;
        }

        .ulSelectedModel > li > .txtName {
            font-size: 22px;
            font-weight: bold;
        }

        .ulSelectedModel > li > i {
            display: inline-block;
            width: 32px;
            height: 32px;
            background-image: url(../Images/Common/iconAdmin2020.svg);
            background-repeat: no-repeat;
        }

        .ulSelectedModel > li.model1 > i {
            background-position: 0 -45px;
        }

        .ulSelectedModel > li.model2 > i {
            background-position: -43px -45px;
        }

        .ulSelectedModel > li.model3 > i {
            background-position: -88px -45px;
        }

        .ulSelectedModel > li.model4 > i {
            background-position: -130px -45px;
        }
        .ulSelectedModel > li.model5 > i {
            background-position: -175px -45px;
        }

        .ulSelectedModel > li.Selected.model1 > i {
            background-position: -0px -93px;
        }

        .ulSelectedModel > li.Selected.model2 > i {
            background-position: -43px -93px;
        }

        .ulSelectedModel > li.Selected.model3 > i {
            background-position: -88px -93px;
        }

        .ulSelectedModel > li.Selected.model4 > i {
            background-position: -130px -93px;
        }

.modelIcon {
    display: flex;
    align-items: center;
}

    .modelIcon > i {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-right: 5px;
        background-image: url(../Images/Common/iconAdmin2020.svg);
        background-repeat: no-repeat;
    }

        .modelIcon > .model1 {
            background-position: 0 -45px;
        }

        .modelIcon > .model2 {
            background-position: -43px -45px;
        }

        .modelIcon > .model3 {
            background-position: -88px -45px;
        }

        .modelIcon > .model4 {
            background-position: -130px -45px;
        }
        .modelIcon > .model5 {
            background-position: -175px -45px;
        }

/*레벨선택*/
.myPageWrap .tableInfoM.level {
    border-top: 0px solid #dddde1;
}

    .myPageWrap .tableInfoM.level.basic {
        border-top: 4px solid #F0E41D;
    }

    .myPageWrap .tableInfoM.level.essential {
        border-top: 4px solid #AFE43C;
    }

    .myPageWrap .tableInfoM.level.standard {
        border-top: 4px solid #6DA816;
    }

    .myPageWrap .tableInfoM.level.enterprise {
        border-top: 4px solid #046848;
    }
/* 선택한 레벨에 따라 class명 변경 : basic / essential / standard / enterprise */
.tableInfoM.basic th:first-child, .tableInfoM.basic td:first-child {
    background-color: #FDFBDC;
}

.tableInfoM.essential th:first-child, .tableInfoM.essential td:first-child {
    background-color: #F3FBE1;
}

.tableInfoM.standard th:first-child, .tableInfoM.standard td:first-child {
    background-color: #E6F7DF;
}

.tableInfoM.enterprise th:first-child, .tableInfoM.enterprise td:first-child {
    background-color: #E4F8F2;
}

.tableInfoM .radioBoxWrap {
    display: inline-flex;
    align-items: center;
    min-width: 120px;
}

    .tableInfoM .radioBoxWrap label {
        margin-left: 5px;
    }

.myPageWrap .tableInfoM.level td.Dis {
    background-color: #f6f6f6;
    color: #999;
}

.myPageWrap .tableInfoM .txtPrice {
    padding-left: 8px;
    color: #eb5252;
    font-weight: bold;
}

.myPageWrap .checkArea > label { /*200518 김슬기 추가 / 체크박스와 label이 너무 붙어있어서 추가함.*/
    padding-left: 5px;
}
/*서비스해지*/
.CancelContract .contentsArea {
    max-width: 1000px;
    padding: 30px 0;
    font-size: 17px;
    letter-spacing: -.1em;
}

.CancelContract {
    justify-content: flex-start;
    max-width: 1000px;
    height: 90px;
    padding: 20px 0;
    border-top: 1px solid #dedee0;
}

    .CancelContract .checkArea {
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 17px;
    }

        .CancelContract .checkArea label {
            padding-left: 0;
        }

.CancelContract input[type=checkbox] {
    width: 30px;
    height: 30px;
    margin-right: 8px;
}

.downloadCheckArea {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0 20px;
    border-bottom: 1px solid #dedee0;
    font-size: 17px;
}
/*서비스해지*/
.myPageWrap .rightArea.CancelContract > .titleArea,
.dlg > .dlgBox.CancelContract > .titleArea {
    position: relative;
    padding-left: 60px;
}

    .myPageWrap .rightArea.CancelContract > .titleArea > .icon,
    .dlg > .dlgBox.CancelContract .icon {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        width: 50px;
        height: 42px;
        background-image: url(../Images/Common/iconAdmin2020.svg);
        background-repeat: no-repeat;
        background-position: 0 -174px;
    }

.dlg > .dlgBox.CancelContract .contentsArea {
    padding: 20px 0;
    font-size: 14px;
    line-height: 24px;
}


/*Layout_Contract*/
.contractArea {
    display: flex;
    width: 100%;
    height: 100%;
}

.contractWrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .contractWrap .contractIframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
        border-bottom: 1px solid #ccc;
    }

    .contractWrap .contractBottom {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-shrink: 0;
        width: 100%;
        height: 100px;
    }

    .contractWrap .agreeWrap {
        font-size: 14px;
        letter-spacing: -.03em;
    }

    .btnPassLogin {
        height: auto;
        margin: 10px 0 0;
        padding: 0;
        border: none;
    }


/*Layout_Members*/
.memberArea {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto;
}

    .memberArea.full_h {
        height: calc(100% - 30px);
        overflow-y: hidden;
    }

/*캡챠*/
.divGoogleCaptchhaArea .barErrorMessageSummaryInfo {
    display:block;
    margin-bottom: 5px;
    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 3px;
}

/*로그인*/
.login_area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    height: 100%;
}

    .login_area .login_wrap {
        width: 460px;
        margin: 20px 0;
        padding: 40px 50px;
        border: 1px solid #ccc;
        border-top: 5px solid #7CD800;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: rgba(0,0,0,0.1) 0 3px 7px;
    }

    .login_area .top_logo {
        padding: 20px 0 30px;
        text-align: center;
    }

    .login_area .txtAdmin {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        font-size: 12px;
        color: #666;
        letter-spacing: -.06em;
    }

        .login_area .txtAdmin:before {
            content: "ｉ";
            display: flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            margin-right: 10px;
            border-radius: 50%;
            background-color: #ccc;
            color: #fff;
            font-size: 11px;
        }

.divLoginArea {
    position: relative;
    margin: 0 auto;
    padding-bottom: 30px;
}

    .divLoginArea dl {
        margin-bottom: 10px;
    }

        .divLoginArea dl dt {
            font-size: 13px;
            color: #666;
        }

        .divLoginArea dl dd input {
            width: 100%;
            height: 40px;
            font-size: 14px;
            border: 0;
            border-bottom: 1px solid #ccc;
        }

    .divLoginArea input[type=checkbox] {
        width: 16px;
        height: 16px;
        border: 0px;
        color: #fff;
        background-color: #fff;
    }

    .divLoginArea .ulLoginInfo {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }

        .divLoginArea .ulLoginInfo li {
            display: flex;
            align-items: center;
            font-size: 13px;
        }

            .divLoginArea .ulLoginInfo li a {
                color: #666;
            }

    .divLoginArea .txtCheck {
        display: inline-block;
        padding: 0 0 0 3px;
        font-size: 13px;
        color: #666;
    }

    .divLoginArea .divGoogleCaptchhaArea {
       margin-bottom: 15px;
    }

    .divLoginArea .btnLogin {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 40px;
        border: none;
        border-radius: 3px;
        background-color: #000;
        color: #7CD800;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        letter-spacing: -1px;
    }

        .divLoginArea .btnLogin:hover {
            cursor: pointer;
            background-color: #7CD800;
            color: #fff;
        }

    .divLoginArea .btnJoin {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 40px;
        margin-top:10px;
        border: none;
        border-radius: 3px;
        background-color: #e7e7e7;
        color: #424558;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        letter-spacing: -1px;
    }

    /*20190521 김우준 추가*/
    .divLoginArea dl dd .spanInfo {
        display: block;
        margin-bottom: 15px;
        font-size: 11px;
        letter-spacing: -1px;
        color: #eb5252;
    }

        .divLoginArea dl dd .spanInfo > span {
            font-size: 11px;
            letter-spacing: -1px;
            color: #eb5252;
        }

            .divLoginArea dl dd .spanInfo > span > span {
                font-size: 11px;
                letter-spacing: -1px;
                color: #eb5252;
            }

                .divLoginArea dl dd span .field-validation-error > span {
                    display: inline-block !important;
                    padding-left: 25px;
                    font-size: 12px;
                    letter-spacing: -1px;
                    color: #eb5252;
                    background-image: url(../Images/common/iconError.png);
                    background-repeat: no-repeat;
                    background-position: 0px center;
                }

/* 비밀번호 변경 알림 */
.devchangePasswordAreafrm {
    height: 100%;
}

.changePasswordArea {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    height: 100%;
}

    .changePasswordArea > .changePasswordWrap {
        width: 760px;
        margin: 20px 0;
        padding: 70px 80px;
        border: 1px solid #ccc;
        border-top: 5px solid #7CD800;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: rgba(0,0,0,0.1) 0 3px 7px;
    }
        .changePasswordArea > .changePasswordWrap > .txtWrap {
            position: relative;
        }

            .changePasswordArea > .changePasswordWrap > .txtWrap > .title {
                margin-bottom: 50px;
                color: #707070;
                font-size: 30px;
                font-weight: bold;
                letter-spacing: -.06em;
                line-height: 50px;
            }

                .changePasswordArea > .changePasswordWrap > .txtWrap > .title > span {
                    color: #7CD800;
                    font-size: 40px;
                }

            .changePasswordArea > .changePasswordWrap > .txtWrap > .subTitle {
                margin-bottom: 50px;
            }

                .changePasswordArea > .changePasswordWrap > .txtWrap > .subTitle > span {
                    text-decoration: underline;
                }

                .changePasswordArea > .changePasswordWrap > .txtWrap .iconChangePassword {
                    position: absolute;
                    top: 0;
                    right: 10px;
                    width: 96px;
                    height: 125px;
                    background-image: url('../Images/common/iconChangePassword.png');
                    background-repeat: no-repeat;
                }

    .changePasswordArea .btnArea {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 30px;
        text-align: center;
    }

        .changePasswordArea .btnArea input[type=button] {
            height: 45px;
            min-width: 170px;
            margin: 0 8px;
            padding: 5px 15px;
            border-radius: 30px;
            cursor: pointer;
        }

        .changePasswordArea .btnArea .btnNormal {
            border: none;
            background-color: #000;
            color: #7CD800;
        }

            .changePasswordArea .btnArea .btnNormal:hover {
                background-color: #7CD800;
                color: #fff;
            }

        .changePasswordArea .btnArea .btnOutline {
            border: 1px solid #ccc;
            background-color: #fff;
            color: #333;
        }

            .changePasswordArea .btnArea .btnOutline:hover {
                box-shadow: rgba(0,0,0,0.3) 2px 2px 5px;
            }


/*회원가입*/
.member_area {
    display: flex;
    flex-direction: column;
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    font-size: 13px;
}

    .member_area .top_area {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40px 0;
    }

        .member_area .top_area .historyArea {
            display: inline-flex;
            font-size: 25px;
            font-weight: bold;
            letter-spacing: -2px;
            color: #666;
        }

            .member_area .top_area .historyArea a {
                display: block;
                margin-right: 10px;
            }

        .member_area .top_area .ulJoinStep {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .member_area .top_area .ulJoinStep > li {
                height: 50px;
            }

                .member_area .top_area .ulJoinStep > li > .txtStep {
                    color: #999;
                    font-size: 13px;
                    font-weight: bold;
                }

                .member_area .top_area .ulJoinStep > li > .txtTitle {
                    color: #999;
                    font-size: 18px;
                    font-weight: bold;
                    letter-spacing: -2px;
                }

                .member_area .top_area .ulJoinStep > li.arrow {
                    width: 50px;
                    background-image: url('../Images/common/iconMembers.png');
                    background-repeat: no-repeat;
                    background-position: -60px 5px;
                }

                .member_area .top_area .ulJoinStep > li.On > .txtStep {
                    color: #1a1b23;
                }

                .member_area .top_area .ulJoinStep > li.On > .txtTitle {
                    color: #7CD800;
                }

    .member_area .AllAgreements {
        margin-bottom: 20px;
        padding: 20px;
        color: #eb5252;
        background-color: #fff;
        border: 1px solid #ccc;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        letter-spacing: -.06em;
    }

    .barErrorMessageSummaryInfo {
        display: inline-block;
        margin: 5px 0 30px; 
        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 -2px;
    }

.member_area .textareaAgreement,
.rightArea .textareaAgreement {
    width: 100%;   
    margin-bottom: 5px;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 13px;
    color: #424558;
    line-height: 20px;
    letter-spacing: -1px;
    overflow-x: hidden;
}

    .member_area .textareaAgreement.h180,
    .rightArea .textareaAgreement.h180 {
        height: 180px;
        overflow-y: auto;
    }

    .member_area .textareaAgreement > .title,
    .rightArea .textareaAgreement > .title {
        font-weight: bold;
        margin-top:15px;        /*200615 김슬기 추가 / 마케팅 포털과 맞추기 위해 추가함.*/
    }

    .member_area .textareaAgreement > .depth1,
    .rightArea .textareaAgreement > .depth1 {
        padding-left: 20px;
    }

    .member_area .textareaAgreement > .depth2,
    .rightArea .textareaAgreement > .depth2 {
        padding-left: 40px;
    }

    .member_area .textareaAgreement > .depth3,
    .rightArea .textareaAgreement > .depth3 {
        padding-left: 60px;
    }

    .member_area .textareaAgreement > .depth4,
    .rightArea .textareaAgreement > .depth4 {
        padding-left: 80px;
    }

    .member_area .textareaAgreement table,
    .rightArea .textareaAgreement table {
        margin: 5px 0 5px 20px;
        border: 1px solid #999;
        border-collapse: collapse;
    }

        .member_area .textareaAgreement table th,
        .member_area .textareaAgreement table td,
        .rightArea .textareaAgreement table th,
        .rightArea .textareaAgreement table td {
            padding: 3px 7px;
            border: 1px solid #999;
        }

        .member_area .textareaAgreement table th,
        .rightArea .textareaAgreement table th {
            background-color: #f2f4f7
        }

.member_area .divAgree > .txtTitle {
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #1a1b23;
    letter-spacing: -.06em;
}

.member_area .divAgree .checkArea {
    margin-bottom: 40px;
}

    .member_area .divAgree .checkArea .devCheckBoxSpan {
        font-weight: bold;
        padding-left: 5px;
        font-size: 13px;
    }

.member_area .btnArea {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    text-align: center;
}

.member_area .form_wrap {
    flex-grow: 1;
    margin-bottom: 30px;
    background: #fff;
}

.divAgree2 {
    display: flex;
    padding: 0;
}

    .divAgree2 .txtTitle {
        flex-shrink: 0;
        width: 180px;
        padding-top: 10px;
        padding-bottom: 20px;
        font-size: 21px;
        color: #1a1b23;
        letter-spacing: -2px;
    }

    .divAgree2 .tableJoin {
        width: 100%;
    }

    .divAgree2 form {
        flex-grow: 1;
    }

.member_area .half_wrap {
    display: flex;
    justify-content: space-between;
}

    .member_area .half_wrap .divAgreeHalf {
        width: 48%;
    }

        .member_area .half_wrap .divAgreeHalf .txtTitle {
            padding-top: 10px;
            padding-bottom: 20px;
            font-size: 21px;
            color: #1a1b23;
            letter-spacing: -2px;
        }

        .member_area .half_wrap .divAgreeHalf .tableJoin {
            height: 100px;
        }

.member_area .tableJoin input[type=text],
.member_area .tableJoin input[type=password],
.member_area .tableJoin input[type=email],
.member_area .tableJoin input[type=number],
.member_area .tableJoin input[type=phone] {
    width: 280px;
    padding: 0;
    border: none;
    border-bottom: 1px solid #ccc;
    letter-spacing: -1px;
}

.member_area .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 560px;
    height: 50px;
    margin: 0 auto;
    padding: 7px;
    background: #ccc;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    letter-spacing: -1px;
}

    .member_area .tab li {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 100%;
        border-radius: 3px;
        cursor: pointer; /*200515 김슬기 추가 / 클릭 이벤트가 있는 부분이라 추가함.*/
    }

        .member_area .tab li.on {
            background-color: #fff;
            font-weight: bold;
        }

.member_area .findForm {
    display: none;
    width: 440px;
    margin: 0 auto;
}

    .member_area .findForm .tableJoin input {
        width: 440px;
    }

    .member_area .findForm.show {
        display: block;
    }

.member_area .tableJoin th {
    width: 200px;
    font-weight: normal;
    text-align: left;
    font-size: 13px;
    color: #888;
    letter-spacing: -1px;
}

    .member_area .tableJoin th.txtRequired:after {
        content: "*";
        margin-left: 5px;
        font-weight: bold;
        color: #eb5252;
    }
    .member_area .tableJoin th .txtPhoneInfo {
        position: absolute;
        top: 2px; 
        left: 80px;
        display: flex;
        align-items: center;
        font-size: 12px;
    }
        .member_area .tableJoin th .txtPhoneInfo:before {
            content: "!";
            display: flex;
            align-items: center;
            justify-content: center;
            width: 15px;
            height: 15px;
            margin-right: 5px;
            border-radius: 50%;
            background-color: #7CD800;
            color: #fff;
            font-weight: bold;
        }

.member_area .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;
}

    .member_area .tableJoin td input.btnCheck:hover {
        cursor: pointer;
        background-color: #999;
        box-shadow: rgba(0,0,0,0.4) 2px 2px 5px;
    }

.member_area .tableJoin td .txtPhoneInfo {
    display: block;
    margin-left: 10px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #888;
}
    .member_area .tableJoin td .txtPhoneInfo:before {
        content: "!";
        display: flex;
        align-items: center;
        justify-content: center;
        width: 15px;
        height: 15px;
        margin-right: 5px;
        border-radius: 50%;
        background-color: #7CD800;
        color: #fff;
        font-weight: bold;
    }

.member_area .tableJoin td .spanInfo {
    display: block;
    margin-bottom: 15px;
    font-size: 12px;
    letter-spacing: -1px;
    color: #eb5252;
}

    .member_area .tableJoin td .spanInfo > span {
        font-size: 12px;
        letter-spacing: -1px;
        color: #eb5252;
    }

        .member_area .tableJoin td .spanInfo > span > span {
            font-size: 12px;
            letter-spacing: -1px;
            color: #eb5252;
        }

            .member_area .tableJoin td .spanInfo > span > span.success {
                color: #00A81C;
            }

.member_area .tableJoin td span.field-validation-error > span {
    display: inline-block !important;
    padding-left: 25px;
    font-size: 12px;
    letter-spacing: -1px;
    color: #eb5252;
    background-image: url(../Images/common/iconError.png);
    background-repeat: no-repeat;
    background-position: 0px center;
}

.member_area .joinFinished {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    height: 100%;
    text-align: center;
}

    .member_area .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;
    }

    .member_area .joinFinished > .txtTitle {
        margin-top: 30px;
        font-size: 46px;
        color: #666;
        font-weight: lighter;
        letter-spacing: -5px;
    }

    .member_area .joinFinished > .txtDescription {
        margin-top: 10px;
        font-size: 17px;
        color: #777;
        letter-spacing: -.06em;
    }

.lineGray {
    flex-shrink: 0;
    width: 100%;
    height: 1px;
    margin: 20px 0;
    background-color: #ddd;
}


/*에러 메세지창 영역*/
.divError {
    position: absolute;
    display: inline-flex;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 000;
}

.messageBox {
    display: flex;
    justify-content: center;   
    flex-direction: column;
    height: 100%;
    text-align: center;
}
    .messageBox.changePW {
        min-height: 580px;
    }

    .messageBox .img {
        display: inline-block;
        width: 150px;
        height: 150px;
        margin: 0 auto;
        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 -243px;
        }


        .messageBox .img.sessionEnd {
            background-position: 15px -380px;
        }

    .messageBox .txtTitle {
        font-size: 36px;
        letter-spacing: -3px;
        color: #1a1b23;
        font-weight: lighter;
    }

    .messageBox .txtDescription {
        padding: 20px 0;
        font-size: 16px;
        letter-spacing: -1px;
        color: #1a1b23;
    }

    .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: #1a1b23;
            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: #1a1b23;
            border: 0px;
        }

            .messageBox .inputBox > input.btn:hover {
                cursor: pointer;
                box-shadow: rgba(0,0,0,0.3) 3px 3px 5px;
            }

    .messageBox .pwChangeArea li {
        position:relative;
        display: flex;
        align-items: center;
        min-height: 10px;
    }

        .messageBox .pwChangeArea li label {
            width: 110px;
            font-size: 16px;
            color: #1a1b23;
            letter-spacing: -1px;
            text-align: left;
        }
        .messageBox .pwChangeArea li .field-validation-error {
            bottom: unset;
            width: 100%;
            margin: 0 0 0 110px;
            background-color: transparent;
            color: #eb5252;
            font-size: 12px;
            text-align: left;
        }


/* Footer_정보 */
footer {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    height: 30px;
    background-color: #272933;
    z-index: 1;
}
    footer.min_w1000 {
        min-width:1000px;
    }

    footer .footer_gnb {
        display: flex;
        justify-content: center;
        width: 100%; 
        background-color: #aaa;
        color: #fff;
    }

        footer .footer_gnb ul {
            display: inline-flex;
            justify-content: space-around;
            width: 100%;
            max-width: 1000px;
        }

            footer .footer_gnb ul li {
                display: flex;
                align-items: center;
                height: 30px;
                font-size: 12px;
            }

                footer .footer_gnb ul li a {
                    color: #fff;
                }

                    footer .footer_gnb ul li a:hover {
                        color: #fff;
                    }

    footer .footer_info {
        display: inline-flex;
        width: 1000px;
        height: 110px;
        padding: 20px 0;
    }

        footer .footer_info .bottom_logo {
            width: 162px;
            height: 39px;
            margin-right: 40px;
            background-image: url(../Images/Common/MainImg/ever_logo_W.png);
            opacity: 0.5;
        }

        footer .footer_info .copyright {
            color: #8e909f;
            font-size: 13px;
        }

            footer .footer_info .copyright .icon {
                display: inline-block;
                width: 11px;
                height: 11px;
                opacity: .5;
            }

                footer .footer_info .copyright .icon.cs {
                    background-size: 12px;
                    background-image: url(../Images/Common/iconPhoneWhite.svg);
                    background-position: center;
                    background-repeat: no-repeat;
                }

                footer .footer_info .copyright .icon.email {
                    background-size: 12px;
                    background-image: url(../Images/Common/iconEmailWhite.svg);
                    background-position: center bottom;
                    background-repeat: no-repeat;
                }

            footer .footer_info .copyright a {
                color: #8e909f;
            }

                footer .footer_info .copyright a:hover {
                    color: #7CD800;
                }

        footer .footer_info .cs_number {
            display:flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-left: auto;
            font-size: 30px;
            color: #eee;
            line-height: 24px;
        }

            footer .footer_info .cs_number:before {
                content: "";
                display: block;
                width: 30px;
                height: 30px;
                background-size: 30px;
                background-image: url(../Images/Common/iconPhoneWhite.svg);
                background-position: center;
                background-repeat: no-repeat;
                opacity: .5;
            }


/*메세지창 영역*/
.modal-Message {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    visibility: collapse;
    z-index: 300;
    /*background-color:rgba(0,0,0,0.4);*/
}

    .modal-Message > .bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background-color: #000;
        opacity: 0.4;
    }

    .modal-Message > .informationArea {
        position: absolute;
        width: 100%;
        height: 300px;
        top: 50%;
        left: 0px;
        margin: -150px 0 0 0;
        background-color: #1a1b23;
        text-align: center;
    }

        .modal-Message > .informationArea > .messageArea {
            padding-top: 80px;
            min-width: 1000px;
        }

            .modal-Message > .informationArea > .messageArea > .txtMessage {
                font-size: 24px;
                font-weight: lighter;
                letter-spacing: -2px;
                color: #fff;
                line-height: 30px;
            }

            .modal-Message > .informationArea > .messageArea > .txtMessageText {
                margin-top: 20px;
                font-size: 13px;
                letter-spacing: -1px;
                color: #fff;
                line-height: 20px;
            }

            .modal-Message > .informationArea > .messageArea > .btnArea {
                text-align: center;
                padding: 30px;
            }

                .modal-Message > .informationArea > .messageArea > .btnArea > .btnLine {
                    height: auto;
                    margin: 0 8px;
                    padding: 8px 24px;
                    color: #fff;
                    font-size: 16px;
                    letter-spacing: -1px;
                    background-color: transparent;
                    border: 1px solid #fff;
                    border-radius: 50px;
                }

                    .modal-Message > .informationArea > .messageArea > .btnArea > .btnLine:hover {
                        cursor: pointer;
                        color: #072a4d;
                        background-color: #fff;
                    }

/*과금시뮬레이션*/
.simulationArea {
    position: relative;
    width: 100%;
}
    .simulationArea > .titleArea {
        padding-bottom: 30px;
    }

        .simulationArea > .titleArea > .txtTitle {
            font-size: 34px;
            color: #333;
            letter-spacing: -2px;
        }

        .simulationArea > .titleArea > .txtDescription {
            font-size: 16px;
            color: #333;
            letter-spacing: -0.8px;
        }

    .simulationArea > .simulationSelectedArea {
        display: inline-block;
        width: 1000px;
        /*height: calc(100% - 130px);
        김주현 수정 2021-02-25 */ border-top: 2px solid #072a4d;
        /*border-bottom: 2px solid #072a4d;*/ /*김태훈 수정 2019-07-31*/
    }

        .simulationArea > .simulationSelectedArea > .step {
            width: 100%;
            border-bottom: 1px solid #eaeaea;
        }

            .simulationArea > .simulationSelectedArea > .step > ul {
                display: flex;
                width: 100%;
            }

                .simulationArea > .simulationSelectedArea > .step > ul > li {
                    padding: 10px 0;
                    text-align: center;
                }

                    .simulationArea > .simulationSelectedArea > .step > ul > li > .txtNo {
                        font-size: 34px;
                        font-weight: bold;
                    }

                    .simulationArea > .simulationSelectedArea > .step > ul > li > .txtCaption {
                        font-size: 16px;
                        color: #333;
                        font-weight: bold;
                        letter-spacing: -0.8px;
                    }

                    /*.simulationArea > .simulationSelectedArea > .step > ul > li:nth-child(2n) > .icon {
                        margin: 20px 0;
                        display: inline-block;
                        width: 20px;
                        height: 20px;
                        background-image: url('../Images/common/iconSimulation.png');
                        background-repeat: no-repeat;
                        background-position: -12px -409px;
                    } 김주현 수정 2021-02-25*/

        .simulationArea > .simulationSelectedArea > .seletedArea {
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        /*넓이*/
        /*.simulationArea > .simulationSelectedArea > .step > ul > li:nth-child(2n) {
            width: 20px;
        }김주현 수정 2021-02-25*/

        .simulationArea > .simulationSelectedArea > .step > ul > li:nth-child(1) {
            width: 180px;
        }

        .simulationArea > .simulationSelectedArea > .step > ul > li:nth-child(3) {
            width: 250px;
        }

        .simulationArea > .simulationSelectedArea > .step > ul > li:nth-child(5) {
            width: 190px;
        }

        .simulationArea > .simulationSelectedArea > .step > ul > li:nth-child(7) {
            width: 140px;
        }

        .simulationArea > .simulationSelectedArea > .step > ul > li:nth-child(9) {
            width: 240px;
        }

        .simulationArea > .simulationSelectedArea > .seletedArea > .defaultLevelArea {
            width: 180px;
        }

        .simulationArea > .simulationSelectedArea > .seletedArea > .moduleSelectArea {
            float: left;
            height: 100%;
            width: 580px;
            overflow: hidden;
        }

        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .item {
            width: 250px;
        }

        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level {
            width: 190px;
        }

        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .price {
            width: 140px;
        }

        .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea {
            float: left;
            width: 240px;
            height: 100%;
            display: inline-block;
        }

        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .item,
        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level,
        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .price {
            float: left;
            height: 50px;
            padding: 10px;
        }

        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .item,
        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .price {
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
        }

        /*1.기본값선택*/
        .simulationArea > .simulationSelectedArea > .seletedArea > .defaultLevelArea {
            float: left;
            padding: 10px;
            height: 100%;
        }

            .simulationArea > .simulationSelectedArea > .seletedArea > .defaultLevelArea > .ulDefaultLevel {
            }

                .simulationArea > .simulationSelectedArea > .seletedArea > .defaultLevelArea > .ulDefaultLevel > li {
                    width: 100%;
                    padding: 10px 16px;
                    font-size: 15px;
                    letter-spacing: -.06em;
                    color: #333;
                    text-align: center;
                }

                    .simulationArea > .simulationSelectedArea > .seletedArea > .defaultLevelArea > .ulDefaultLevel > li:hover {
                        cursor: pointer;
                        font-weight: bold;
                    }

                    .simulationArea > .simulationSelectedArea > .seletedArea > .defaultLevelArea > .ulDefaultLevel > li.Selected {
                        color: #fff;
                    }

                    .simulationArea > .simulationSelectedArea > .seletedArea > .defaultLevelArea > .ulDefaultLevel > li:nth-child(1).Selected {
                        background-color: #5c54a7;
                    }

                    .simulationArea > .simulationSelectedArea > .seletedArea > .defaultLevelArea > .ulDefaultLevel > li:nth-child(2).Selected {
                        background-color: #f06292;
                    }

                    .simulationArea > .simulationSelectedArea > .seletedArea > .defaultLevelArea > .ulDefaultLevel > li:nth-child(3).Selected {
                        background-color: #96c159;
                    }
        /*2.항목선택*/
        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea {
            /*display:inline-block;*/
        }

            .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .item {
                position: relative;
            }

                .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .item > .txtTitle {
                    height: 30px;
                    line-height: 30px;
                    text-align: left;
                    font-size: 15px;
                    letter-spacing:-.06em;
                    padding: 0px 10px 0px 35px;
                    color: #aaa;
                    background-image: url('../Images/common/iconSimulation.png');
                    background-position: -5px -176px;
                    background-repeat: no-repeat;
                }

            .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea.Selected > .item > .txtTitle {
                color: #072a4d;
                background-position: -5px -140px;
            }

            .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .item > .btnMore {
                position: absolute;
                right: 10px;
                top: 14px;
                display: inline-block;
                padding: 2px 4px;
                color: #333;
                font-size: 11px;
                border: 1px solid #ccc;
            }

                .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .item > .btnMore:hover {
                    cursor: pointer;
                    color: #fff;
                    background-color: #2d3f6b;
                }
            /*3.레벨선택*/
            .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level {
                text-align: center;
            }

                .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level > ul {
                    display: inline-block;
                }

                    .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level > ul > li {
                        position: relative;
                        display: inline-block;
                        width: 40px;
                        height: 13px;
                        margin: 0 4px;
                        height: 30px;
                        color: #aaa;
                        font-size: 16px;
                        line-height: 28px;
                        border: 1px solid #ededed;
                        border-radius: 15px;
                    }

                        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level > ul > li:hover {
                            cursor: pointer;
                        }

                        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level > ul > li.Selected {
                            color: #fff;
                            border: 0px;
                        }

                            .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level > ul > li.Selected:nth-child(1) {
                                background-color: #5c54a7
                            }

                            .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level > ul > li.Selected:nth-child(2) {
                                background-color: #f06292
                            }

                            .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level > ul > li.Selected:nth-child(3) {
                                background-color: #96c159
                            }

                        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level > ul > li > .divTooltip {
                            display: none;
                            position: absolute;
                            top: 25px;
                            left: 0px;
                            width: 200px;
                            padding: 10px;
                            background-color: #072a4d;
                            z-index: 9999;
                            text-align: left;
                        }

                            .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level > ul > li > .divTooltip > .txtTitle > span {
                                color: #fff;
                                font-size: 16px;
                                font-weight: bold;
                            }

                            .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level > ul > li > .divTooltip > .txtDescription {
                                color: #fff;
                                font-size: 12px;
                                line-height: 16px;
                            }

                        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level > ul > li:hover > .divTooltip {
                            cursor: pointer;
                            display: block;
                        }

                        .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .level > ul > li > .divTooltip:hover {
                            display: block;
                        }
            /*4.사용료*/
            .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .price {
                text-align: right;
            }

                .simulationArea > .simulationSelectedArea > .seletedArea .moduleArea > .price > .txtPrice {
                    font-size: 16px;
                }
        /*5. 확인*/
        .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea {
            position: relative;
            height: 100%;
            text-align: left;
            padding: 16px;
        }

            .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea > .priceArea {
            }

                .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea > .priceArea > .txtCaption {
                    font-size: 12px;
                }

                .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea > .priceArea > .txtPrice {
                    font-size: 26px;
                    font-weight: bold;
                    color: #eb5252;
                }

            .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea > .bar {
                display: inline-block;
                margin: 10px 0;
                width: 30px;
                height: 3px;
                background-color: #333;
            }

            .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea > .ulOptionList {
            }

                .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea > .ulOptionList > li {
                    width: 100%;
                    padding: 2px 0;
                }

                    .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea > .ulOptionList > li span {
                        display: inline-block;
                        width: 45%;
                        font-size: 12px;
                        color: #333;
                    }

                    .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea > .ulOptionList > li .value {
                        text-align: right;
                    }

            .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea .btnType1 {
                margin: 5px 5px 0 0;
                height: 25px;
                line-height: 25px;
                width: 100%;
                font-size: 12px;
                color: #072a4d;
                text-align: center;
                border: 1px solid #072a4d;
                background-color: #fff;
            }

            .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea .btnOption {
                margin: 5px 5px 0 0;
                height: 40px;
                line-height: 40px;
                width: 100%;
                font-size: 16px;
                color: #fff;
                text-align: center;
                border: 1px solid #072a4d;
                background-color: #072a4d;
            }

            .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea .btnType2 {
                margin: 5px 5px 0 0;
                height: 40px;
                line-height: 40px;
                width: 100%;
                font-size: 16px;
                color: #fff;
                text-align: center;
                border: 1px solid #eb5252;
                background-color: #eb5252;
            }

                .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea .btnOption:hover,
                .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea .btnType1:hover,
                .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea .btnType2:hover {
                    cursor: pointer;
                    font-weight: bold;
                    box-shadow: rgba(0,0,0,0.3) 2px 2px 5px;
                }

            .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea > .actionArea {
                position: absolute;
                bottom: 0;
                left: 10px;
            }

                .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea > .actionArea .simulationBtnArea > li {
                    display: inline-block;
                    width: 100%;
                }

            .simulationArea > .simulationSelectedArea > .seletedArea > .cartArea .txtDescription {
                margin-bottom: 20px;
                font-size: 12px;
                color: #072a4d;
                line-height: 16px;
            }

@keyframes aniOptionAreaOpen {
    0% {
        display: block;
    }

    1% {
        display: block;
        top: 0%;
        opacity: 0;
    }

    100% {
        display: block;
        top: 50%;
        opacity: 1;
    }
}

@keyframes aniOptionAreaClose {
    0% {
        display: block;
        top: 50%;
        opacity: 1;
    }

    99% {
        display: block;
        top: 0%;
        opacity: 0;
    }

    100% {
        display: none;
    }
}

.simulationArea .optionArea.Open {
    animation: aniOptionAreaOpen 0.5s ease 1 both;
}

.simulationArea .optionArea.Close {
    animation: aniOptionAreaClose 0.5s ease 1 both;
}

.simulationArea .optionArea {
    /*display: none;*/ /*191122 김슬기 주석 / 옵션은 이제 항상 보여짐.*/
    position: relative;
    width: 1000px;
    text-align: left;
    border-top: 2px solid #072a4d;
}
    /*화면 분할에 따른 김태훈 추가*/

    .simulationArea .optionArea .txtPrice {
        font-size: 26px;
        font-weight: bold;
        color: #eb5252;
        padding: 0px 10px 0px 15px;
    }

    .simulationArea .optionArea .txtCpation {
        font-size: 26px;
        font-weight: bold;
        color: #4bbb6b;
        padding: 0px 10px 0px 15px;
    }

    .simulationArea .optionArea .txtUnit {
        font-size: 16px;
        color: #072a4d;
        letter-spacing: -.8px;
    }

    .simulationArea .optionArea > .btnClose {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-image: url('../images/common/iconSimulation.png');
        background-repeat: no-repeat;
        background-position: -3px -244px;
    }

        .simulationArea .optionArea > .btnClose:hover {
            cursor: pointer;
            background-color: #fff;
            box-shadow: rgba(0,0,0,0.3) 3px 3px 6px;
        }

    .simulationArea .optionArea > .optionSelectedArea {
        width: 100%;
        padding: 40px 0 0 0;
        height: 120px;
        text-align: center;
    }

        .simulationArea .optionArea > .optionSelectedArea > .txtTitle {
            font-size: 24px;
            color: #333;
            letter-spacing: -2px;
            font-weight: lighter;
            text-align: center;
        }

        .simulationArea .optionArea > .optionSelectedArea > .ulOption {
            display: inline-block;
            margin: 0 auto;
        }

            .simulationArea .optionArea > .optionSelectedArea > .ulOption > li {
                display: inline-block;
                height: 40px;
                padding: 0px 30px 0px 35px;
                font-size: 16px;
                line-height: 40px;
                letter-spacing: -1.5px;
                color: #072a4d;
                background-image: url('../Images/common/iconSimulation.png');
                background-repeat: no-repeat;
                background-position: -5px -176px;
            }

                .simulationArea .optionArea > .optionSelectedArea > .ulOption > li.selected {
                    background-position: -5px -140px;
                }

    .simulationArea .optionArea > .optionContentsArea {
        width: 100%;
        /* height: calc(100% - 100px); 김주현 수정 2021-02-25 */
        padding: 0 10px;
        overflow: hidden;
        overflow-y: auto;
    }

    .simulationArea .optionArea .optionItemArea.Selected {
        opacity: 1;
    }

        .simulationArea .optionArea .optionItemArea.Selected > .txtTitle > .txtCaption {
            background-position: -5px -140px;
        }

    .simulationArea .optionArea .optionItemArea {
        opacity: 1; /*p0.3에서 1로 수정*/
        margin: 0 auto;
        width: 100%;
        padding: 10px 0; /**/
        /*border-top: 1px solid #a6a6a6;*/
        border-bottom: 1px solid #a6a6a6;
    }

        .simulationArea .optionArea .optionItemArea > .txtTitle {
            padding: 8px 0;
            color: #072a4d;
            font-size: 24px;
            letter-spacing: -1px;
        }

            .simulationArea .optionArea .optionItemArea > .txtTitle > .txtCaption {
                display: inline-block;
                height: 30px;
                padding: 0px 10px 0px 35px;
                font-weight: lighter;
                border-right: 1px solid #072a4d;
                background-image: url('../Images/common/iconSimulation.png');
                background-position: -5px -176px;
                background-repeat: no-repeat;
            }

            .simulationArea .optionArea .optionItemArea > .txtTitle > .txtCaptionNoBar {
                display: inline-block;
                height: 30px;
                padding: 0px 10px 0px 35px;
                font-weight: lighter;
                background-image: url('../Images/common/iconSimulation.png');
                background-position: -5px -176px;
                background-repeat: no-repeat;
            }

        .simulationArea .optionArea .optionItemArea.Selected > .txtTitle > .txtCaptionNoBar {
            background-position: -5px -140px;
        }

        .simulationArea .optionArea .optionItemArea > .txtTitle > .txtPrice {
            display: inline-block;
            color: #eb5252;
            font-weight: bold;
        }

        .simulationArea .optionArea .optionItemArea > .txtDescription {
            padding-left: 35px;
            font-size: 14px;
            color: #3f4551;
            letter-spacing: -2px;
        }

        .simulationArea .optionArea .optionItemArea > .inputArea {
            display: inline-block;
            margin: 20px 0 0 25px;
        }

            .simulationArea .optionArea .optionItemArea > .inputArea > li {
                position: relative;
                display: inline-block;
                padding: 15px 20px 0 70px;
                height: 100px;
            }

                .simulationArea .optionArea .optionItemArea > .inputArea > li .img {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 60px;
                    height: 100px;
                    background-image: url('../Images/common/iconSimulation.png');
                    background-repeat: no-repeat;
                }

                .simulationArea .optionArea .optionItemArea > .inputArea > li > .txtTitle {
                    padding: 4px 0 0 0;
                    font-size: 16px;
                    color: #072a4d;
                    letter-spacing: -.8px;
                }
                /*직접입력 버튼 추가*/
                .simulationArea .optionArea .optionItemArea > .inputArea > li > .btn {
                    height: 24px;
                    padding: 4px 8px;
                    margin-bottom: 5px;
                    color: #fff;
                    font-size: 11px;
                    border-radius: 12px;
                    background-color: #ccc;
                    cursor: pointer; /*191120 김슬기 추가 / 버튼이므로 pointer를 넣어준다.*/
                }

                    .simulationArea .optionArea .optionItemArea > .inputArea > li > .btn.On {
                        background-color: #2d3f6b;
                    }

                .simulationArea .optionArea .optionItemArea > .inputArea > li > .txtTitle > .txtDescription {
                    font-size: 13px;
                    color: #999;
                    letter-spacing: -.5px;
                }

                .simulationArea .optionArea .optionItemArea > .inputArea > li .inputText {
                    padding: 0 9px;
                    height: 35px;
                    width: 70px;
                    font-size: 16px;
                    color: #072a4d;
                    font-weight: bold;
                    text-align: right;
                    border: 1px solid #ccc;
                    border-radius: 15px;
                }

                    .simulationArea .optionArea .optionItemArea > .inputArea > li .inputText.dis {
                        border: 0px;
                        font-size: 24px;
                        background-color: #fff;
                    }

                    .simulationArea .optionArea .optionItemArea > .inputArea > li .inputText.Work {
                        width: 60px;
                    }

                .simulationArea .optionArea .optionItemArea > .inputArea > li > div > span {
                    font-size: 16px;
                }

                .simulationArea .optionArea .optionItemArea > .inputArea > li .txtPrice {
                    padding: 0;
                    font-size: 21px;
                    color: #072a4d;
                    font-weight: bold;
                    letter-spacing: -.03em;
                }

                .simulationArea .optionArea .optionItemArea > .inputArea > li .txtCaption {
                    font-size: 13px;
                    color: #072a4d;
                }

                .simulationArea .optionArea .optionItemArea > .inputArea > li.normalUser .img {
                    background-position: 0px -300px;
                }

                .simulationArea .optionArea .optionItemArea > .inputArea > li.essUser .img {
                    background-position: -140px -300px;
                }

                .simulationArea .optionArea .optionItemArea > .inputArea > li.essUser > div > .inputText {
                    color: #4bbb6b;
                }

                .simulationArea .optionArea .optionItemArea > .inputArea > li.essUser > div > span {
                    color: #4bbb6b;
                }

                .simulationArea .optionArea .optionItemArea > .inputArea > li.addDev .img {
                    background-position: -70px -300px;
                }

                .simulationArea .optionArea .optionItemArea > .inputArea > li.info {
                    padding: 30px 10px 0 20px;
                }

        .simulationArea .optionArea .optionItemArea > .tableUserInfo {
            display: inline-block;
            border-spacing: 0;
            border: 0;
            position: relative;
            top: 20px;
        }

            .simulationArea .optionArea .optionItemArea > .tableUserInfo th {
                padding: 8px 11px;
                font-size: 13px;
                letter-spacing: -0.8px;
                font-weight: bold;
                color: #072a4d;
                text-align: center;
                border-bottom: 1px solid #ccc;
            }

                .simulationArea .optionArea .optionItemArea > .tableUserInfo th.normalUser {
                    color: #fff;
                    background-color: #072a4d;
                }

                .simulationArea .optionArea .optionItemArea > .tableUserInfo th.essUser {
                    color: #fff;
                    background-color: #4bbb6b;
                    border-bottom: 1px solid #4bbb6b;
                }

            .simulationArea .optionArea .optionItemArea > .tableUserInfo td {
                padding: 8px 11px;
                font-size: 13px;
                letter-spacing: -0.8px;
                color: #666;
                text-align: center;
                border-bottom: 2px solid #ccc;
            }
        /*20180511 - api 연동서비스 추가 - 박혜진*/
        .simulationArea .optionArea .optionItemArea > .ulPartnerList {
            display: inline-block;
            padding: 10px 25px;
            border-radius: 10px;
            background-color: #fff;
        }

            .simulationArea .optionArea .optionItemArea > .ulPartnerList > li {
                display: inline-block;
                text-align: center;
                padding: 10px 14px;
                opacity: 0.3;
            }

                .simulationArea .optionArea .optionItemArea > .ulPartnerList > li.Checked {
                    opacity: 1;
                }

                .simulationArea .optionArea .optionItemArea > .ulPartnerList > li .checkbox {
                    display: inline-block;
                    width: 30px;
                    height: 28px;
                    background-image: url('../Images/common/iconSimulation.png');
                    background-position: -6px -178px;
                }

                .simulationArea .optionArea .optionItemArea > .ulPartnerList > li.Checked .checkbox {
                    background-position: -6px -140px;
                }

                .simulationArea .optionArea .optionItemArea > .ulPartnerList > li .Apilogo {
                    display: inline-block;
                    width: 130px;
                    height: 43px;
                    background-repeat: no-repeat;
                    background-image: url('../Images/ko-KR/logoOptionPartner.png');
                    background-image: -webkit-image-set(url('../Images/ko-KR/logoOptionPartner.png') 1x, url('../Images/ko-KR/logoOptionPartner@2x.png') 2x);
                    background-position: 0px 0px;
                }

                .simulationArea .optionArea .optionItemArea > .ulPartnerList > li.Nice .Apilogo {
                    width: 45px;
                    background-position: -830px -8px;
                }

                .simulationArea .optionArea .optionItemArea > .ulPartnerList > li.SmartBill .Apilogo {
                    width: 150px;
                    background-position: -175px -10px;
                }

                .simulationArea .optionArea .optionItemArea > .ulPartnerList > li.BizPlay .Apilogo {
                    background-position: -348px -8px;
                }

                .simulationArea .optionArea .optionItemArea > .ulPartnerList > li.Daou .Apilogo {
                    width: 155px;
                    background-position: -502px -8px;
                }

                .simulationArea .optionArea .optionItemArea > .ulPartnerList > li.KBStarCMS .Apilogo {
                    width: 155px;
                    background-position: -667px -8px;
                }

                .simulationArea .optionArea .optionItemArea > .ulPartnerList > li > .txtName {
                    font-size: 16px;
                    color: #072a4d;
                }

        .simulationArea .optionArea .optionItemArea > input {
            padding: 3px 5px;
            height: 40px;
            line-height: 38px;
            font-size: 16px;
            font-weight: bold;
            color: #072a4d;
            border-radius: 10px;
            border: 1px solid rgba(0,0,0,0.3);
        }

            .simulationArea .optionArea .optionItemArea > input:focus {
                color: #eb5252;
                border: 2px solid #93d50a;
            }

    .simulationArea .optionArea > .btnArea {
        width: 100%;
        max-width: unset;
        height: 80px;
        padding: 20px;
    }

/*팝업 - 업무상세보기*/
.modal-Module {
    /*visibility: hidden;*/
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 50px;
    background-color: #f1f1f1;
    box-shadow: rgba(0,0,0,0.3) 10px 10px 10px;
    text-align: center;
    z-index: 9999999;
}

    .modal-Module > .contentsArea {
        position: relative;
        width: 1000px;
        height: 100%;
        margin: 0 auto;
    }

        .modal-Module > .contentsArea > .btnClose {
            position: absolute;
            width: 55px;
            height: 55px;
            right: -70px;
            top: 0;
            border-radius: 50%;
            background-color: #072a4d;
            background-image: url('../Images/common/btnClose.png');
            background-repeat: no-repeat;
            background-position: center;
        }

            .modal-Module > .contentsArea > .btnClose:hover {
                cursor: pointer;
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                transition: all 0.5s ease-in-out;
            }

        .modal-Module > .contentsArea > .ulProcessHeader {
            width: 650px;
        }

            .modal-Module > .contentsArea > .ulProcessHeader li {
                position: relative;
                float: left;
                width: 80px;
                height: 50px;
                padding-top: 13px;
                text-align: center;
                font-size: 14px;
                letter-spacing: -1px;
                border-top: 2px solid #072a4d;
                border-bottom: 1px solid #072a4d;
            }

                .modal-Module > .contentsArea > .ulProcessHeader li > span {
                    position: absolute;
                    display: inline-block;
                    top: 15px;
                    right: 0px;
                    height: 13px;
                    width: 1px;
                    background-color: #072a4d;
                }

                .modal-Module > .contentsArea > .ulProcessHeader li:nth-child(1) {
                    width: 180px;
                }

                .modal-Module > .contentsArea > .ulProcessHeader li:nth-child(2) {
                    width: 230px;
                }

        .modal-Module > .contentsArea > .processScrollArea {
            clear: both;
            width: 670px;
            height: calc(100% - 50px);
            overflow-y: auto;
            overflow-x: hidden;
            border-bottom: 2px solid #000;
        }

            .modal-Module > .contentsArea > .processScrollArea > .tableProcess {
                width: 650px;
                height: 100%;
                border: 0px;
                padding: 0px;
                border-spacing: 0px;
            }

                .modal-Module > .contentsArea > .processScrollArea > .tableProcess tr .txtProcess:hover {
                    cursor: pointer;
                    /*background-color:#ccc;*/
                }

                .modal-Module > .contentsArea > .processScrollArea > .tableProcess tr.line td {
                    border-top: 1px solid #072a4d;
                }

                .modal-Module > .contentsArea > .processScrollArea > .tableProcess td {
                    text-align: center;
                    height: 30px;
                    width: 80px;
                    text-align: center;
                }

                    .modal-Module > .contentsArea > .processScrollArea > .tableProcess td.txtProcess {
                        width: 180px;
                        padding: 8px 20px;
                        font-size: 24px;
                        text-align: left;
                        letter-spacing: -3px;
                        vertical-align: top;
                    }

                    .modal-Module > .contentsArea > .processScrollArea > .tableProcess td.txtFunction {
                        width: 230px;
                        font-size: 14px;
                        text-align: left;
                        letter-spacing: -1px;
                    }

                    .modal-Module > .contentsArea > .processScrollArea > .tableProcess td > span.icon {
                        display: inline-block;
                        width: 15px;
                        height: 15px;
                        border-radius: 50%;
                        border: 2px solid #aaa;
                    }

        .modal-Module > .contentsArea > .processInfoArea {
            position: absolute;
            right: 0px;
            top: 0px;
            height: 100%;
            width: 320px;
            text-align: left;
        }

            .modal-Module > .contentsArea > .processInfoArea.processFirst {
                display: block;
            }

            .modal-Module > .contentsArea > .processInfoArea.processNext {
                display: none;
            }

            .modal-Module > .contentsArea > .processInfoArea .txtProcessTitle {
                height: 50px;
                width: 100%;
                padding: 12px 24px 8px 24px;
                font-size: 24px;
                color: #fff;
                letter-spacing: -2px;
                font-weight: lighter;
                line-height: 24px;
                background-color: #999;
                border-radius: 30px;
            }

            .modal-Module > .contentsArea > .processInfoArea > .scrollArea {
                height: calc(100% - 60px);
                overflow-x: hidden;
                overflow-y: auto;
            }

            .modal-Module > .contentsArea > .processInfoArea .txtProcessDescription {
                padding: 12px 24px 20px 24px;
                color: #333;
                font-size: 13px;
                letter-spacing: -0.5px;
            }

            .modal-Module > .contentsArea > .processInfoArea .txtFunctionTitle {
                padding: 10px 24px 0px 24px;
                font-size: 16px;
                color: #111;
                letter-spacing: -1px;
            }

            .modal-Module > .contentsArea > .processInfoArea .txtFunctionDescription {
                padding: 6px 24px 24px 24px;
                color: #111;
                font-size: 12px;
                letter-spacing: -0.5px;
            }
        /*선택시*/
        .modal-Module > .contentsArea.SeletedLevel1 > .processScrollArea > .tableProcess td.level1 > span.icon {
            border: 2px solid #5c54a7;
        }

        .modal-Module > .contentsArea.SeletedLevel1 > .processInfoArea .txtProcessTitle {
            background-color: #5c54a7;
        }

        .modal-Module > .contentsArea.SeletedLevel2 > .processScrollArea > .tableProcess td.level2 > span.icon {
            border: 2px solid #f06292;
        }

        .modal-Module > .contentsArea.SeletedLevel2 > .processInfoArea .txtProcessTitle {
            background-color: #f06292;
        }

        .modal-Module > .contentsArea.SeletedLevel3 > .processScrollArea > .tableProcess td.level3 > span.icon {
            border: 2px solid #4bbb6b;
        }

        .modal-Module > .contentsArea.SeletedLevel3 > .processInfoArea .txtProcessTitle {
            background-color: #4bbb6b;
        }


/* 내 서비스 수준 현황 */
.SLAViewListSearchBox {
    display: inline-block;
    width: 100%;
    position: relative;
    /*padding: 20px 0;*/    /*200715 김슬기 주석 / 위 아래 padding이 중복으로 있어서 주석 처리함.*/
}

    .SLAViewListSearchBox > input[type=text], .SLAViewListSearchBox > select {
        margin-right: 10px;
        width: 100%;
        height: 30px;
        padding: 3px 8px;
        font-size: 16px;
        color: #333;
        letter-spacing: -1px;
        border: 1px solid #ccc;
    }

/*클라우드 시스템 생성*/
.contentsMessageArea {
    padding: 10px 20px;
    color: #fff;
    font-size: 14px;
    background-color: #2d3f6b;
}

.divCloudSystemArea {
    padding: 20px;
    font-size: 16px;
    color: #666;
    line-height: 30px;
    letter-spacing: -1px;
    background-color: #f9f9f9;
}

    .divCloudSystemArea .createAzureDescTitle {
        color: #000;
    }

        .divCloudSystemArea .createAzureDescTitle:after {
            content: ' : ';
        }

    .divCloudSystemArea .cloudTitle {
        padding: 16px 0 8px 0;
        font-size: 21px;
        font-weight: bold;
        color: #072a4d;
    }


.myPageWrap > .rightArea .tab {
    display: inline-block;
    width: 100%;
    margin: 20px 0;
}

    .myPageWrap > .rightArea .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;
    }

    .myPageWrap > .rightArea .tab.opensource > li {
        width: 33.33333%;
    }

    .myPageWrap > .rightArea .tab > li:hover {
        background-color: #e6e9ed;
    }

    .myPageWrap > .rightArea .tab.step4 > li {
        width: 24%;
    }

    .myPageWrap > .rightArea .tab > li:last-child {
        border-right: 2px solid #072a4d;
    }

        .myPageWrap > .rightArea .tab > li:last-child:after {
            clear: both;
        }

    .myPageWrap > .rightArea .tab > li.on {
        color: #fff;
        background-color: #072a4d;
    }

.tabContentsBox {
    display: inline-block;
    width: 100%;
    padding: 20px 0;
    font-size: 12px;
    color: #666;
    text-align: left;
}

    .tabContentsBox select {
        width: 100%;
        padding: 4px 0px 4px 16px;
        font-size: 16px;
        color: #666;
        border: 1px solid #ccc;
        background-color: #fff;
        cursor: pointer; /*190213 김슬기 추가 / select박스에 마우스 오버시 pointer로 변경*/
    }

    .tabContentsBox .cloudAdminDistribute table input[type=text] {
        padding: 4px 16px;
        font-size: 16px;
        color: #666;
        border: 1px solid #ccc;
        background-color: #fff;
    }

    .tabContentsBox .devSystemManagerServiceStartDateAdjust select {
        width: auto;
        height: 30px;
        padding: 3px 3px;
        font-size: 12px;
        color: #666;
        letter-spacing: -.06em;
        border: 1px solid #aaa;
        margin-right: 10px;
        /*211118 김우준 추가 / 시스템관리 - 서비스 개시 일자 Select Box */
    }

    /* 231020 김주현 : 결제현황관리 탭 총 미납금액 */
    .tabContentsBox .totalArea {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 20px;
        padding: 10px 20px;
        background-color: #FFF6F6;
    }

        .tabContentsBox .totalArea > dl {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 30px;
            color: #333;
            font-size: 14px;
        }

        .tabContentsBox .totalArea > .totalCost dt {
            font-size: 17px;
        }

        .tabContentsBox .totalArea > .totalCost dd .txtRed {
            color: #FF5858;
            font-size: 21px;
            font-weight: bold;
        }


.devSystemManagerServiceStartDateAdjust select {
    width: auto;
    height: 30px;
    padding: 3px 3px;
    font-size: 12px;
    color: #666;
    letter-spacing: -.06em;
    border: 1px solid #aaa;
    margin-right: 10px;
    /*211118 김우준 추가 / 시스템관리 - 서비스 개시 일자 Select Box */
}
/* 
   ------------------------------------------------------
				   CMS - 변자희 추가
   ------------------------------------------------------
*/

.cmsBtn {
    padding-top: 40px;
}

    .cmsBtn .ulAsk {
        display: flex;
        justify-content: space-between;
        width: 600px;
        margin: 0 auto;
    }

        .cmsBtn .ulAsk > li {
            position: relative;
            padding-top: 20px;
            width: 49%; /*161103 김슬기 수정 / width: 305px -> 49% 수정*/
            height: 75px;
            background-color: #fff;
            border: 2px solid #072a4d;
        }


            .cmsBtn .ulAsk > li > .txtTitle {
                display: inline-block;
                font-size: 24px;
                font-weight: bold;
                color: #072a4d;
                letter-spacing: -1px;
                margin-left: 100px;
                margin-top: -10px;
            }

            .cmsBtn .ulAsk > li > .txtDescription {
                font-size: 14px;
                color: #072a4d;
                letter-spacing: -2px;
                opacity: 0.5;
                margin-left: 100px;
                margin-bottom: 10px;
            }

            .cmsBtn .ulAsk > li > .icon {
                position: absolute;
                top: 3px;
                left: 20px;
                height: 60px;
                width: 50px;
                background-image: url(../Images/common/iconCmsBtn.png);
                background-repeat: no-repeat;
            }

                .cmsBtn .ulAsk > li > .icon.download {
                    background-position: 0px 0px;
                }

                .cmsBtn .ulAsk > li > .icon.upload {
                    background-position: 0px -145px;
                }

                .cmsBtn .ulAsk > li > .icon.cancle {
                    background-position: -5px -307px;
                }

            .cmsBtn .ulAsk > li > a { /*161028 김슬기 추가 / a태그를 li안에 넣기 위해*/
                position: relative;
                display: block;
                width: 301px;
                height: 71px;
                top: -71px;
            }

            .cmsBtn .ulAsk > li:hover {
                cursor: pointer;
                background-color: #072a4d;
            }

                .cmsBtn .ulAsk > li:hover > .txtTitle {
                    color: #fff;
                }

                .cmsBtn .ulAsk > li:hover > .txtDescription {
                    color: #fff;
                }

                .cmsBtn .ulAsk > li:hover > .icon.download {
                    background-position: 0px -70px;
                }

                .cmsBtn .ulAsk > li:hover > .icon.upload {
                    background-position: 0px -225px;
                }

                .cmsBtn .ulAsk > li:hover > .icon.cancle {
                    background-position: -5px -380px;
                }


        /*161028 김슬기 추가 / CMS Member화면에서 Upload 버튼*/
        .cmsBtn .ulAsk .filebox input[type="file"] {
            position: absolute;
            width: 10px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            border: 0;
        }

        .cmsBtn .ulAsk .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;
        }

        .cmsBtn .ulAsk .filebox label {
            position: relative;
            display: block;
            top: -71px;
            width: 301px;
            height: 71px;
        }

            .cmsBtn .ulAsk .filebox label:hover {
                cursor: pointer;
            }
/*161028 김슬기 추가 끝 */

/*161116 변자희님 추가*/
.uploadResult {
    margin: 45px;
    text-align: center;
}

    .uploadResult > .uploadImg {
        display: inline-block;
        height: 160px;
        width: 160px;
        background-image: url(../Images/common/cmsUpload.png);
        background-repeat: no-repeat;
    }

        .uploadResult > .uploadImg.Complete {
            background-position: -10px -1px;
        }

        .uploadResult > .uploadImg.Fail {
            background-position: -10px -217px;
        }

    .uploadResult > p {
        font-weight: lighter;
        font-size: 32px; /*161117 김슬기 수정 / 40px -> 32px / 글씨가 너무 큰 것 같아서 수정함.*/
        color: #072a4d;
        letter-spacing: -2px;
        margin-top: 20px;
    }
/*161116 변자희님 추가 끝*/


.txtUpload {
    font-size: 16px;
    color: #666;
    letter-spacing: -2px;
    text-align: center;
}

    .txtUpload p {
        display: block;
        margin-top: 20px;
    }

.txtCancelRequest {
    font-size: 20px;
    color: #666;
    letter-spacing: -2px;
    text-align: center;
}

    .txtCancelRequest p {
        display: block;
        margin-top: 20px;
    }


.uploadComplete {
    margin: 100px 45px 30px;
    text-align: center;
}

    .uploadComplete > .uploadCheck {
        position: relative;
        top: 0px;
        left: 35%;
        height: 28px;
        width: 28px;
        background-image: url(../Images/common/iconCmsBtn.png);
        background-repeat: no-repeat;
        background-position: -16px -467px;
        float: left;
    }

    .uploadComplete > p {
        display: inline-block;
        font-size: 21px;
        color: #072a4d;
        letter-spacing: -2px;
    }

/*161104 김슬기 추가*/
.uploadFail {
    margin: 45px;
    text-align: center;
}

    .uploadFail > .uploadCheck {
        position: relative;
        top: 0px;
        left: 35%;
        height: 28px;
        width: 28px;
        background-image: url(../Images/common/iconCmsBtn.png);
        background-repeat: no-repeat;
        background-position: -16px -467px;
        float: left;
    }

    .uploadFail > p {
        display: inline-block;
        font-size: 21px;
        color: #072a4d;
        letter-spacing: -2px;
    }
/*161104 김슬기 끝*/

.transferBox {
    text-align: center;
    margin-bottom: 70px;
}

    .transferBox > 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;
    }

/*tab*/
.ulTabCommon {
    width: 100%;
    height: 27px;
    border-bottom: 2px solid #333;
}

    .ulTabCommon > li {
        float: left;
        height: 27px;
        padding: 5px 10px;
        font-size: 12px;
        color: #fff;
        text-align: center;
        letter-spacing: -.06em;
        border-bottom: 2px solid #333;
        background-color: #aaa;
        margin-right: 1px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

        .ulTabCommon > li:hover {
            cursor: pointer;
            background-color: #222;
        }

        .ulTabCommon > li.On {
            color: #333;
            font-weight: bold;
            border: 2px solid #333;
            border-bottom: 2px solid #fff;
            background-color: #fff;
        }

.tabContentsBox {
    display: inline-block;
    width: 100%;
    padding: 20px 0;
    font-size: 12px;
    color: #666;
    text-align: left;
}

    .tabContentsBox select {
        width: 100%;
        padding: 4px 0px 4px 16px;
        font-size: 16px;
        color: #666;
        border: 1px solid #ccc;
        background-color: #fff;
        cursor: pointer; /*190213 김슬기 추가 / select박스에 마우스 오버시 pointer로 변경*/
    }

    .tabContentsBox .cloudAdminDistribute table input[type=text] {
        padding: 4px 16px;
        font-size: 16px;
        color: #666;
        border: 1px solid #ccc;
        background-color: #fff;
    }

.spanInfo {
    font-size: 11px;
    letter-spacing: -1px;
    color: #eb5252;
}

/*PageNavigation*/
.PageNav {
    width: 100%;
    padding: 15px 15px 25px;
    text-align: center;
}

    .PageNav > .btnPrev {
        cursor: pointer;
        margin-right: 10px;
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 25px;
        background-image: url('../Images/common/arrow.png');
        background-position: -159px -42px;
    }

    .PageNav > .btnNext {
        cursor: pointer;
        margin-right: 10px;
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 25px;
        background-image: url('../Images/common/arrow.png');
        background-position: -9px -3px;
    }

    .PageNav > a {
        margin-right: 5px;
        display: inline-block;
        width: 25px;
        height: 25px;
        font-size: 12px;
        line-height: 25px;
        color: #072a4d;
        text-align: center;
        border-radius: 50%;
    }

        .PageNav > a:hover {
            cursor: pointer;
            background-color: #aaa;
            color: #fff;
        }

        .PageNav > a.On {
            background-color: #072a4d;
            color: #fff;
        }

/*-- 메세지 박스 --*/
.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 12;
}

    .modal.hidden {
        display: none;
    }

.modal .modalWrap {
    -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);
    background: #fff;
}

    

    /* 191209 김주현 추가 :: 모달 이름 */
    .modal .modalTitle {
        position: relative;
        padding: 10px 20px;
        background: #272933;
        color: #fff;
    }
        .modal .modalTitle > span.btnModalExtension {
            display: block;
            position: absolute;
            top: 10px;
            right: 45px;
            width: 20px;
            height: 20px;
            background: url('/Images/common/btnExtension.png') center no-repeat;
            cursor: pointer;
            opacity: .5;
        }
            .modal .modalTitle > span.btnModalExtension:hover {
                opacity: 1;
            }

        .modal .modalTitle > span.btnModalReduce {
            display: block;
            position: absolute;
            top: 10px;
            right: 45px;
            width: 20px;
            height: 20px;
            background: url('/Images/common/btnReduce.png') center no-repeat;
            cursor: pointer;
            opacity: .5;
        }
            .modal .modalTitle > span.btnModalReduce:hover {
                opacity: 1;
            }

        .modal .modalTitle > span.btnModalClose {
            display: block;
            position: absolute;
            top: 8px;
            right: 10px;
            width: 20px;
            height: 20px;
            background: url('/Images/common/btnClose2.png') center no-repeat;
            cursor: pointer;
            opacity: .5;
        }

            .modal .modalTitle > span.btnModalClose:hover {
                opacity: 1;
            }

    .modal .modalContents {
       padding: 20px;
       background-color: #fff;
    }

    .modal p {
        font-size: 13px;
        color: #464646;
        line-height: 16px;
    }

    .modal .small {
        width: 200px;
    }

    .modal .medium {
        width: 400px;
    }

    .modal .miniAlert {
        width: 400px;
        text-align: center;
    }

    .modal .large {
        width: 600px;
    }

    .modal .xlarge {
        width: 800px;
    }

    .modal .processDetail {
        width: 540px;
        padding: 0px;
    }

    .modal .onlineInput {
        width: 400px;
        padding: 0px;
    }

    .modal .onlineSetting {
        width: 670px;
        padding: 0px;
    }

    .modal .bizLevelInfo {
        width: auto;
        padding: 0px;
    }

    .modal .NoticePopup {
        width: auto;
        padding: 0px;
        float: left;
    }

    .modal .youku {
        width: auto;
        padding: 0px;
    }

    .modal .Disposable {
        width: auto;
        padding: 0px;
    }

    .modal .mobileOpinion {
        width: 840px;
        padding: 0px;
    }

    /* 191114 김주현 추가 :: 관리자-회사정보-관리자변경-검색 모달  */
    .modal .memberSearch {
        width: 600px;
        height: 530px;
    }

        .modal .memberSearch > .listSearchBox {
            padding: 10px 20px;
        }

            .modal .memberSearch > .listSearchBox input[type="text"],
            .modal .memberSearch > .listSearchBox select {
                width: 200px;
                height: 30px;
                padding: 0 7px;
                border: 1px solid #ccc;
            }

            .modal .memberSearch > .listSearchBox > .txtSel {
                margin-left: 20px;
                font-size: 12px;
                color: #eb5252;
            }

        .modal .memberSearch .tableViewWrap {
            padding: 0 20px;
            overflow-y: auto;
        }

            .modal .memberSearch .tableView > tbody > tr {
                height: 30px;
            }

                .modal .memberSearch .tableView > tbody > tr:hover {
                    cursor: pointer;
                    background: #eee;
                }

    /*231019 김주현 추가 : 프로모션등록 - 고객리스트 modal */
    .modal .proMemberList {
        display: flex;
        flex-direction: column;
        width: 800px;
        height: calc(100% - 200px);
        max-height: 800px;
    }

        .modal .proMemberList .modalContents {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;            
            padding: 0;
            overflow: auto;                      
        }

            .modal .proMemberList .modalContents .searchArea2 {
                flex-shrink: 0;
            }

            .modal .proMemberList .modalContents .scrollContents {
                width: calc(100% - 30px);
                height: 100%;
                margin: 0 15px;
                padding: 0;
            }

    /* 200730 김주현 추가 : 신규계약서 modal */
    .modal .serviceModal {
        width: 900px;
    }

        .modal .serviceModal .btnAreaModal {
            padding: 5px 20px;
            border-bottom: 1px solid #ccc;
            text-align: right;
        }

        .modal .serviceModal .modalContents {
            height: 650px;
            overflow-y: auto;
        }



        /*200623 김우준 변경 :: SLA고객 선택, 검색창 css변경*/
        .devCompanyListWrap {
            text-align: left;
            font-size: 15px;
            height: 320px;
            padding: 0 20px;
            overflow-y: auto;
        }

.devShowCompanyListWrap {
    text-align: left;
    font-size: 15px;
    height: 380px;
    padding: 0 20px;
    overflow-y: auto;
}

    .liCheckAll {
        display: flex;
        position: sticky;
        align-items: center;
        top: 0;
        left: 0;
        height: 40px;
        padding: 0 10px;
        border-bottom: solid 1px #ddd;
        font-size: 13px;
        background-color: #e6e9ed;
        border-top: 1px solid #ccc;
    }

    .ulCompanyList li {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 0 10px;
        border-bottom: solid 1px #ddd;
        font-size: 13px;
        margin-right: 5px;
    }

        .ulCompanyList li input[type=checkbox],
        .liCheckAll input[type=checkbox] {
            margin-right: 5px;
        }

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
    width: 16px;
    height: 16px;
}

.ui-widget-header .ui-icon {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-width: 1px 1px 0 0px;
    border-style: solid;
    border-color: #454545;
}

.ui-datepicker .ui-datepicker-prev .ui-icon {
    transform: rotate(-135deg);
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-next .ui-icon {
    transform: rotate(45deg);
    cursor: pointer;
}



/*첨부파일*/
.divAttachedfileArea {
    position: relative;
    border: 2px dashed #dbdbdb;
    background-color: #eff2f4;
    border-radius: 5px;
    margin: 10px 0;
    height: 90px;
}

    .divAttachedfileArea.viewType {
        border: 1px solid #fff;
        border-bottom: 1px solid #dbdbdb;
        background-color: #fff;
        border-radius: 0px;
        margin: 10px 0 0 0;
    }

    .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: 10px;
        padding-right: 130px;
    }

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

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

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

            .divAttachedfileArea .divFileListArea .ulFileList li {
                position: relative;
                float: left;
                padding: 0 35px 20px 60px;
            }

.ulFileList li > div.divMessage {
    display: none;
}

.divAttachedfileArea .divFileListArea .ulFileList li > .iconFile {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    line-height: 49px; /*160225 김슬기 수정 / 46 -> 49로 변경*/
}
/*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 .type4 :hover > div.divMessage {
        display: inline-block;
        padding: 4px 8px;
        color: #fff;
        background-color: rgba(0,0,0,0.8);
    }

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

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

.divAttachedfileArea .divFileListArea .ulFileList li > .txtFileTitle {
    display: inline-flex;
    font-size: 12px;
    color: #4e5960;
    padding-top: 7px;
    cursor: pointer;
}

.devTotalAttechedInfo {
    font-size: 12px;
}
/*.divAttachedfileArea .divFileListArea .ulFileList li > .txtFileTitle > .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 > .btnDel {
    /*position: absolute;
    top: 10px;
    right: 10px;*/
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url('../Images/common/iconGroup.png');
    background-repeat: no-repeat;
    background-position: -18px -228px;
    cursor: pointer;
    margin-left: 4px;
}

.divAttachedfileArea .divFileListArea .ulFileList li > .txtSize { /*190213 김슬기 추가*/
    display: inline-block;
    font-size: 11px;
    color: #4e5960;
}

.divAttachedfileArea .divFileListArea .ulFileList li > .txtFileSize {
    font-size: 0.68rem;
    color: #4e5960;
}

.divAttachedfileArea .divFileListArea .fileUploadAction {
    position: absolute;
    right: 0;
    top: 5px;
    width: 120px;
    text-align: right;
    padding-top: 5px;
}

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

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

    .divAttachedfileArea .divFileListArea .fileUploadAction .filebox {
        margin-top: 10px;
    }

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

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

        .divAttachedfileArea .divFileListArea .fileUploadAction .btnUpload:hover {
            color: #fff;
            background-color: #15a4fa;
            cursor: pointer;
        }

.fileTxt {
    padding-top: 5px;
    display: block;
    color: #eb5252;
    font-size: 14px; /*161103 김슬기 추가*/
}

    .fileTxt > span {
        display: block;
    }

        .fileTxt > span .tx-bold { /*161103 김슬기 추가*/
            font-weight: bold;
        }

/*첨부파일보기*/
.divAttachedfileArea > .viewMode .fileUploadAction {
    display: none;
}

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

.divAttachedfileArea > .viewMode {
    padding-right: 0px !important;
}


/*200626 김슬기 추가 / 고객별 DB Size 그래프 디자인이 없어서 Style.css에서 가져옴.*/
.axis path,
.axis line {
    fill: none;
    stroke: #000;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.x.axis path {
    display: none;
}

.dot {
    stroke: #000;
    stroke-width: 2;
    radius: 5;
}

.brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges;
}

div.tooltip {
    position: absolute;
    top:0;
    left:0;
    text-align: center;
    width: 100px;
    height: 40px;
    padding: 2px;
    font: 12px sans-serif;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 8px;
    pointer-events: none;
}

.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 2px;
}

.grid line {
    stroke: lightgrey;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}

.grid path {
    stroke-width: 0;
}

.topic {
    fill: none;
}


/* 고객현황 - 결재정보 팝업 */
.dlg.dlgAppr > .dlgBox {
    width: 450px;
    height: auto;
    padding: 20px 25px 30px;
    letter-spacing: -.06em;
}

    .dlg.dlgAppr > .dlgBox .titleArea .txtTitle {
        font-size: 16px;
    }

    .dlg.dlgAppr > .dlgBox .btnGroup {
        display: flex;
        align-items: center;        
    }

    .dlg.dlgAppr > .dlgBox .btnPreview {
        position: relative;
        display: flex;
        width: 22px;
        height: 22px;
        margin-left: 5px;
        border-radius: 3px;
        background-color: #D9D9D9;
    }

        .dlg.dlgAppr > .dlgBox .btnPreview:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            width: 8px;
            height: 8px;
            border: 1px solid #333;
            border-radius: 50%;
        }

        .dlg.dlgAppr > .dlgBox .btnPreview:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 13px;
            width: 5px;
            height: 1px;
            background-color: #333;
            transform: rotate(45deg);
        }

        .dlg.dlgAppr > .dlgBox .btnPreview:hover {
            box-shadow: 2px 2px 3px rgba(0,0,0,.3);
        }

        .dlg.dlgAppr > .dlgBox .txtHelp {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 13px;
            color: #999;
        }

        .dlg.dlgAppr > .dlgBox .txtHelp > i {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            margin-right: 5px;
            border-radius: 50%;
            background-color: #ccc;
            color: #fff;
            font-weight: bold;
            font-style: normal;
        }

        .dlg.dlgAppr > .dlgBox .txtHelp:hover > span {
            color: #333;
            text-decoration: underline;
        }

        .dlg.dlgAppr > .dlgBox .txtHelp:hover > i {
            background-color: #333;
        }
            .dlg.dlgAppr > .dlgBox .txtHelp:hover > i:before {
                position: absolute;
                right: 20px;
                bottom: -20px;
                content: "사업자등록증, 자동이체신청서 등 \a 잘못된 결재 정보 수정을 요청하세요.";
                width: fit-content;
                height: fit-content;
                padding: 20px;
                border-radius: 5px;
                background-color: rgba(0,0,0,.7); 
                color: #fff;
                font-size: 13px;
                font-weight: normal;
                white-space:pre;
            }


/* 이미지 미리보기 */ 
.dlg.imgPreview > .dlgBox {
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: auto;
    max-height: 90%;
    padding: 20px 25px 30px;
    overflow: hidden;
}

    .dlg.imgPreview > .dlgBox .contentArea {
        width: fit-content;
        max-width: 1200px;
        height: 100%;
        overflow: auto;
    }

/* 프로모션 추가 231018 김주현 */
.proInfoArea {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 60px);
    padding: 15px 15px 0;
    letter-spacing: -.06em;
    overflow: hidden;
}

    .proInfoArea .regDate {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
        padding-bottom: 10px;
        color: #999;
        font-size: 12px;
    }

        .proInfoArea .regDate .bar {
            display:flex;
            width: 1px;
            height: 10px; 
            margin: 0 8px;
            background-color: #ddd;
        }

    .proInfoArea .proInfoBox {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        width: 100%;
        border-radius: 5px;
        background-color: #E9F3FF;
    }

            .proInfoArea .proInfoBox .mainInfo {
                display: flex;
                width: 100%;
                padding: 20px;
            }

                .proInfoArea .proInfoBox .mainInfo .leftArea {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                }

                    .proInfoArea .proInfoBox .mainInfo .leftArea .titleArea {
                        display: flex;
                        align-items: center;
                        width: 100%;
                    }
                        .proInfoArea .proInfoBox .mainInfo .leftArea .titleArea .status{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-shrink: 0;
                            height: fit-content;
                            margin-right: 5px;
                            padding: 4px 10px;
                            border-radius: 20px;
                            font-size: 12px;
                            color: #fff;
                        }

                            .proInfoArea .proInfoBox .mainInfo .leftArea .titleArea .status.UnderInvestigation {
                                background-color: #333;
                            }

                            .proInfoArea .proInfoBox .mainInfo .leftArea .titleArea .status.Ongoing {
                                background-color: #36AAFF;
                            }

                            .proInfoArea .proInfoBox .mainInfo .leftArea .titleArea .status.Closed{
                                background-color: #999;
                            }
                            .proInfoArea .proInfoBox .mainInfo .leftArea .titleArea .status.Reject {
                                background-color: #f5975d;
                            }

                            .proInfoArea .proInfoBox .mainInfo .leftArea .titleArea .title {
                                flex-wrap: wrap;
                                width: 100%;                
                                padding-right: 10px;
                                font-size: 21px;
                                font-weight: bold;
                            }

                    .proInfoArea .proInfoBox .mainInfo .leftArea .period {
                        margin-top: 5px;
                        font-size: 14px;
                    }

                .proInfoArea .proInfoBox .mainInfo .rightArea {
                    display: flex;
                    align-items: flex-end;
                    justify-content: center;
                    flex-direction: column;
                    flex-shrink: 0;
                }
                    .proInfoArea .proInfoBox .mainInfo .rightArea .txt {
                        margin-bottom: 5px;
                        font-size: 14px;
                    }
                    .proInfoArea .proInfoBox .mainInfo .rightArea .cost {
                        font-size: 14px;
                    }

                        .proInfoArea .proInfoBox .mainInfo .rightArea .cost > i {
                            font-size: 21px;
                            font-weight: bold;
                            font-style: normal;
                        }

                        .proInfoArea .proInfoBox .mainInfo .rightArea .cost > .Inc {
                            color: #FF7474;
                        }

                            .proInfoArea .proInfoBox .mainInfo .rightArea .cost > .Inc:before {
                                content: "+"
                            } 

                        .proInfoArea .proInfoBox .mainInfo .rightArea .cost > .Dec {
                            color: #1453FF;
                        }

                            .proInfoArea .proInfoBox .mainInfo .rightArea .cost > .Dec:before {
                                content: "-"
                            }


            .proInfoArea .proInfoBox .addDevArea{
                display:flex;
                justify-content: space-between;
                width: 100%;
                padding: 0 20px 20px;
            }

                .proInfoArea .proInfoBox .addDevArea .box {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex: 1;
                    min-height: 90px;
                    padding: 12px;
                    border: 1px dashed #ddd;
                    border-radius: 5px;
                    background-color: #FAFCFF;
                }

                    .proInfoArea .proInfoBox .addDevArea .box + .box {
                        margin-left: 5px;
                    }

                        .proInfoArea .proInfoBox .addDevArea .box > dt {
                            color: #999;
                            font-size: 12px;                    
                        }

                        .proInfoArea .proInfoBox .addDevArea .box > dd {
                            color:#666;
                            font-size: 14px;
                            text-align: right;
                        }

                            .proInfoArea .proInfoBox .addDevArea .box > dd .value {
                                padding-right: 5px;
                            }

            .proInfoArea .proInfoBox .txtEtc {
                padding: 12px 20px 20px;
                border-top: 1px solid #fff;
                color: #777;
                font-size: 12px;
            }

    .proInfoArea .proCustomerList {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding: 35px 0 15px;
        overflow: hidden;
    }

    .proInfoArea .proCustomerList .title {
        flex-shrink:0;
        margin-bottom: 10px;
        font-size:12px;
        font-weight: bold;        
    }
        .proInfoArea .proCustomerList .scrollContents {
            height: 100%;
            padding: 0;
        }

.myPageWrap .btnArea.promotion {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 0 20px;
    border-top: 1px solid #ccc;
}