﻿

.wrap_content .inner {
    display: flex;
    word-break:keep-all;
}

h2 {
    font-size: 19px;
    font-weight: normal;
    color: #109ba5;
    letter-spacing: -1px;
    padding-bottom: 10px;
}


.disable {
    color: #505050;
}

.line {
    margin-top: 70px;
    border-top: 1px dotted #383c4a;
}

.rMateChartH5__Caption {
    color: #13c9e2;
}

.rMateChartH5__SubCaption {
    padding-right: 0 !important
}

/*************************************************************************************************/
/* 좌측 */
/*************************************************************************************************/
#selectWrap {
    flex-basis: 305px;
    flex-shrink: 0;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    background: #202940
}

#area00 {
    width: 100%;
    padding: 14px;
    margin-bottom: 24px;
    border-radius: 4px;
    box-sizing: border-box;
    background: #000;
}

    #area00 a#DelegateAdmanClear {
        display: inline-block;
        font-size: 11px;
        color: #ffffff;
        padding: 1px 5px 0 5px;
        margin: -4px 0 0 4px;
        vertical-align: middle;
        border-radius: 2px;
        background: #109ba5;
    }
        #area00 a#DelegateAdmanClear:hover {
            background: #09838c;
        }

    #area00 select {
        color: #fff;
        margin: -4px 0 0 4px;
        padding: 3px;
        vertical-align: middle;
        border: 0;
        border-radius: 4px;
        background: #109ba5;
    }
        #area00 ul li {
            padding-bottom: 4px;
        }
            #area00 ul li:before {
                content: "-";
                padding-right: 4px;
            }
        #area00 ul li:last-child {
            padding-bottom: 0
        }
        #area00 ul li a {
            color:#ababab;
            text-decoration:none
        }
        #area00 ul li a:hover {
            color:#109ba5;
        }

        #area00 ul li.btnDamdang {
            width: 112px;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
            padding: 3px 2px 4px 0;
            color: #5E5E5E
        }

        #area00 ul li.isok {
            cursor: pointer;
            color: #13c9e2;
        }

            #area00 ul li.isok:hover {
                text-decoration: underline
            }

        #area00 ul li.btnDamdangClear {
            font-size: 16px;
            font-weight: bold;
            color: #eee;
            padding-top: 4px;
        }

            #area00 ul li.btnDamdangClear strong {
                display: block;
                width: 97px;
                font-size: 11px;
                font-weight: normal !important;
                color: #fff;
                margin-top: 5px;
                padding: 1px 5px 1px 4px;
                cursor: pointer;
                background: #424759
            }


    #area01 > ul {
        margin-left: 15px;
    }

        #area01 > ul#area01_sec2 > li {
            display: inline-block;
        }

            #area01 > ul#area01_sec2 > li > a {
                display: inline-block;
                font-size: 13px;
                color: #525252;
                text-decoration: none;
                padding: 2px 8px;
                margin-bottom: 4px;
                border-radius: 2px;
                background: #121726;
            }
                #area01 > ul#area01_sec2 > li > a:hover {
                    color: #fff;
                    background: #109ba5;
                }
            #area01 > ul#area01_sec2 > li.selected > a {
                color: #fff;
                background: #109ba5;
            }

/* 자사 + 경쟁기업 선택 */
#area02 {
    margin-top: 20px;
}

    #area02 > a#hkSelectAdman {
        color: orange;
    }

    #area02 > div.tip {
        position: absolute;
        margin-top: -25px;
        margin-left: 109px;
    }

    #area02 > ul {
        margin-left: 15px;
    }
        #area02 > ul#area01_sec3_req {
            color: #13c9e2;
            margin: 6px 0 0 10px;
        }
        #area02 > ul#area02_sec2 {
            color: #fff;
        }
        #area02 > ul#area02_sec3_req {
            margin: 8px 0 4px 15px;
        }
        #area02 > ul#area02_sec3 ul li {
            margin: 5px 0
        }

#SelectedDelegateAdman {
    color:#fff
}
#SelectedDelegateAdman:before {
    content:"-";
    padding-right:4px
}


/*************************************************************************************************/
/* 우측 */
/*************************************************************************************************/
#viewWrap {
    margin-left: 24px;
}

/* 보고싶은 데이터 선택 */
#area03 {
    padding-bottom: 40px;
}

    #area03 > div.tip {
        position: absolute;
        margin-top: -25px;
        margin-left: 210px;
    }

    #area03 > div.sec1, div.sec2, div.sec3 {
        padding-bottom: 8px;
    }
    #area03 > div > .label {
        font-size: 15px;
        font-style: italic;
        padding: 5px 0 4px 0;
    }
    #area03 > div > ul > li {
        display: inline-block;
        width: 196px;
        padding-bottom: 5px;
    }

/* 그래프 종류 */
#area04 {
    padding-bottom: 40px;
}

    #area04 > div.tip {
        position: absolute;
        margin-top: -25px;
        margin-left: 110px;
    }

    #area04 > div:nth-child(3) {
        position: absolute;
        margin: -30px 0 0 114px;
    }

    #area04 > ul {
        display: inline-block;
        width: calc(100% - 116px);
    }
        #area04 > ul > li {
            display: inline-block;
            width: 150px;
            padding-bottom: 5px;
        }
    #area04 > span {
        display: inline-block;
        width: 110px;
        font-size: 15px;
        font-style: italic;
        vertical-align: top;
    }

    #area04 > div > span {
        display: inline-block;
        width: 110px;
        font-size: 15px;
        font-style: italic;
        vertical-align: top;
    }
    #area04 > div > ul {
        display: inline-block;
        width: 110px;
    }
        #area04 > div > ul > li {
            padding-bottom: 5px;
        }

#sampleChart {
    text-align: center;
}


/* 그래프 정렬 */
#area05 > ul > li {
    display: inline-block;
    padding-right: 16px;
}

/* sampleChart */
#sampleChart {
    text-align: center;
    padding-bottom: 20px;
}


/*  기간선택 */

#area06 > div.gigan {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#area06 > div.gigan > input#txtDate1, input#txtDate2 {
    width: 68px;
    height: 28px;
    color: #c1c1c1;
    border: 0;
    border-radius: 4px;
    margin-bottom:10px;
    padding: 0 8px;
    background: #000;
}
#area06 > div.gigan > input#btnDate1 {
    margin: 0 6px 10px 6px;
}
#area06 > div.gigan > input#btnDate2 {
    margin: 0 8px 10px 6px;
}
#area06 > div.gigan > span {
    display: inline-block;
    margin: 0 6px 10px 0;
}
    #area06 > div.gigan > div {
        margin: 0 8px 0 0;
    }
    #area06 > div.gigan > div > button {
        color: #bababa;
        border: 0;
        border-radius: 4px;
        margin: 0 1px 10px 1px;
        padding: 4px 6px 6px 6px;
        background: #202940;
        cursor: pointer;
    }
    #area06 > div.gigan > div > button:hover {
        color: #109ba5;
    }

#area06 > div.gigan > button#btnResult {
    color: #fff;
    border: 0;
    border-radius: 4px;
    margin: 0 0 10px 2px;
    padding: 4px 6px 6px 6px;
    background: #109ba5;
    cursor: pointer;
}
    #area06 > div.gigan > button#btnResult:hover {
        background: #09838c;
    }
/*************************************************************************************************/
/* 결과차트 */
/*************************************************************************************************/
#resultArea {
    text-align: center;
}
#resultArea > div {
    width:780px;
    margin:0 auto;
    margin-bottom:30px;
}

#resultAreaTitle {
    color: #EE3F1E;
    text-align: center;
    padding: 30px 0;
}

#resultArea > div.sceen {
    clear: both;
}

    #resultArea > div.sceen img {
        width: 180px;
        height: 135px;
    }

    #resultArea > div.sceen > h3 {
        color: #D19832;
        padding: 0;
        margin: 5px 0 8px 0
    }

    #resultArea > div.sceen > ul {
        float: left;
    }

        #resultArea > div.sceen > ul > li {
            border: 1px solid #3a3c40;
            display: block;
            float: left;
            width: 184px;
            margin: 2px;
            margin-bottom: 20px;
            padding: 3px 0 3px 4px;
        }

            #resultArea > div.sceen > ul > li > h4 {
                padding: 0;
                margin: 0
            }

                #resultArea > div.sceen > ul > li > h4 > span {
                    display: block;
                    padding: 0;
                    color: gray;
                }

                #resultArea > div.sceen > ul > li > h4 > a {
                    display: block;
                    width: 180px;
                    color: #13c9e2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -o-text-overflow: ellipsis;
                    white-space: nowrap;
                    text-decoration: none;
                }

                    #resultArea > div.sceen > ul > li > h4 > a:hover {
                        text-decoration: underline;
                    }

            #resultArea > div.sceen > ul > li > ul {
            }

                #resultArea > div.sceen > ul > li > ul > li > div.gubun {
                    width: 180px;
                    padding-bottom: 2px;
                    color: #BDA48E;
                    word-break: break-all
                }

                #resultArea > div.sceen > ul > li > ul > li > div.content {
                }

                #resultArea > div.sceen > ul > li > ul > li > div.desc {
                    padding: 3px 0 2px 0
                }


    #resultArea > div.copy > h3 {
        color: #D19832;
        padding: 0;
        margin: 5px 0 3px 0;
    }

    #resultArea > div.copy > ul {
        margin: 0 0 0 20px;
    }

        #resultArea > div.copy > ul > li {
            list-style: square;
        }

            #resultArea > div.copy > ul > li > h4 {
                padding: 0;
                margin: 0
            }

                #resultArea > div.copy > ul > li > h4 > span {
                }

                #resultArea > div.copy > ul > li > h4 > a {
                    margin-left: 5px;
                    display: block;
                    color: #13c9e2;
                    text-decoration: none;
                }

            #resultArea > div.copy > ul > li > ul {
                margin: 0 0 20px 20px;
            }

                #resultArea > div.copy > ul > li > ul > li {
                    list-style: disc;
                }

                    #resultArea > div.copy > ul > li > ul > li > div.gubun {
                        color: #BDA48E
                    }

                    #resultArea > div.copy > ul > li > ul > li > div.content {
                        float: left;
                        margin-right: 10px
                    }

                    #resultArea > div.copy > ul > li > ul > li > div.desc {
                        color: gray;
                    }

    #resultArea > div.reply > h3 {
        color: #D19832;
        padding: 0;
        margin: 5px 0 8px 0;
    }

    #resultArea > div.reply > ul {
        margin: 0 20px;
    }

        #resultArea > div.reply > ul > li {
            list-style: square;
            margin-bottom: 20px
        }

            #resultArea > div.reply > ul > li > h4 {
                padding: 0;
                margin: 0
            }

                #resultArea > div.reply > ul > li > h4 > span {
                }

                #resultArea > div.reply > ul > li > h4 > a {
                    margin-left: 5px;
                    display: block;
                    color: #13c9e2;
                    text-decoration: none;
                }

            #resultArea > div.reply > ul > li > ul {
                margin-left: 20px;
            }

                #resultArea > div.reply > ul > li > ul > li {
                    list-style: disc;
                }

                    #resultArea > div.reply > ul > li > ul > li > h5 {
                        font-size: 13px;
                        padding: 0;
                        margin: 0;
                        color: #BDA48E;
                    }

                    #resultArea > div.reply > ul > li > ul > li > .btnReply {
                        font-size: 13px;
                        font-family: 'NanumGothic', '나눔고딕','NanumGothicWeb', '맑은 고딕', 'Malgun Gothic', 'Dotum', 'Verdana',' Arial';
                        color: #fff;
                        margin: 5px 0;
                        padding: 3px 5px 3px 5px;
                        cursor: pointer;
                        border: 0;
                        background: #424759;
                    }

                    #resultArea > div.reply > ul > li > ul > li > ul {
                    }

                        #resultArea > div.reply > ul > li > ul > li > ul > li {
                            list-style: circle;
                        }

input[type="checkbox"], input[type="radio"] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: -3px 6px 0 0;
}
.rMateChartH5__CheckBoxDiv input[type="checkbox"] {
    vertical-align: middle;
    margin:4px
}

div.rMateChartH5__Box > div.rMateChartH5__Chart > div.rMateChartH5__DataTip {
    color: #b4b4b4 !important;
    font: 12px Arial !important;
    padding: 0 !important;
    background-color: rgba(0, 0, 0, .8) !important;
    border: 1px solid #000 !important;
}

.rMateChartH5__DataTip > div.DataTip {
    display: flex;
    flex-direction: column;
    width: 200px;
    text-align: left;
}

    .rMateChartH5__DataTip > div.DataTip > div.title {
        padding: 2px 0 3px 5px !important;
    }

    .rMateChartH5__DataTip > div.DataTip > div.onair {
        color: #6c6c6c !important;
        padding: 0 0 0 5px !important;
    }

    .rMateChartH5__DataTip > div.DataTip > div.value {
        padding: 3px 0 4px 5px !important;
    }

    .rMateChartH5__DataTip > div.DataTip > div.copy {
        padding: 0 0 4px 5px !important;
    }

    .rMateChartH5__DataTip > div.DataTip > div.cut img {
        width: 200px !important;
        height: 112px !important;
    }


@media (max-width: 910px) {
    #selectWrap {
        flex-basis: 240px;
    }
    #area00 select {
        margin: 8px 0 0 4px;
    }
}
@media (max-width: 610px) {
    #area00 select {
        margin: 10px 0 0 20px;
    }
}