@font-face{
    font-family: 'NotoSansKr';
    src: url('../font/NotoSansKR-Regular_0.otf') format('truetype');
    font-weight: normal;
}
@font-face{
    font-family: 'NotoSansKr';
    src: url('../font/NotoSansKR-Medium_0.otf') format('truetype');
    font-weight: 500;
}
@font-face{
    font-family: 'Roboto';
    src: url('../font/Roboto-Bold.ttf') format('truetype');
    font-weight: normal;
}
html{
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

*{
    margin: 0;
    padding: 0;
    font-family: 'NotoSansKr';
}
ul,ol,dl{
    list-style: none;
}
a{
    text-decoration: none;
    color: #fff;
}
input,textarea{
    box-sizing: border-box;
}
body{
    position: relative;
    background: #242532;
    overflow-y: scroll;
}
h1, h2, h3, h4, h5, h6{
    color: #fff;
}
.mgt40 {
    margin-top: 40px;
}

header{
    min-height: 100px;
    background-color: #343749;
    transition: 0.2s;
    position: fixed;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    z-index: 999;
}
header::after{
    content: "";
    display: block;
    clear: both;
}
header .headerArea{
    display: flex;
    align-items: center;
    padding: 0 40px;
}
header h1#logo{
    width: 12%;
    max-width: 217px;
}
header h1#logo img{
    display: block;
}

/*****pc메뉴*****/
header nav#gnb{
    margin: 0 auto;
    width: 65%;
    max-width: 1120px;
    min-width: 700px;
}
header nav#gnb > ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
header nav#gnb > ul::after{
    content: "";
    display: block;
    clear: both;
}
header nav#gnb > ul li{
    width: 14.285%;
    height: auto;
    padding: 18px 0;
    position: relative;
}
header nav#gnb > ul li a{
    display: block;
    text-align: center;
}

header nav#gnb > ul li a span{
    display: block;
    color: #ffffff;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.05em;
}
header nav#gnb > ul > li:hover > a > span{
    color:#FFC7AE;
}
header nav#gnb > ul li:hover > ul.depth2 {
    display: flex;
}
header nav#gnb > ul li ul.depth2{
    position: absolute;
    display: none;
    align-items: center;
    justify-content: flex-start;
    background: #12131F;
    top: 100%;
    left: -50%;
}
header nav#gnb > ul li ul.depth2 li{
    padding: 0;
    width: auto;
}
header nav#gnb > ul li ul.depth2 li a{
    font-size: 14px;
    color: #fff;
    padding: 10px 20px;
    display: block;
    white-space: nowrap;
    opacity: 0.4;
}
header nav#gnb > ul li ul.depth2 li a:hover {
    opacity: 1;
}


/*****pc메뉴 우측*****/
div#gnb_side{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 30%;
    max-width: 217px;
}
div#gnb_side ul{}
div#gnb_side ul li{}
div#gnb_side ul li p{
    color: #ffffff;
    font-size: 12px;
    font-family: 'Roboto';
}
div#gnb_side ul li p a {
    font-family: 'Roboto';
    color: #FFE100;
}
div#gnb_side ul li p span{
    font-weight: bold;
    padding-left: 5px;
    font-family: 'Roboto';
}
div#gnb_side div#logout_btn{
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    font-size: 20px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}
/*****모바일 화면 메뉴*****/
.m_gnb{
    display: none;
    padding-right: 20px;
    float: right;
    margin: 38px 0;
}
.m_gnbBox{
    position: fixed;
    z-index: 9999;
    background: #242532;
    width: 100%;
    height: 0;
    opacity: 0;
    overflow-y: scroll;
    right: 0;
    top: 100px;
    transition: 0.1s;
}
.m_gnbBox.mo{
    display: none;
}
.m_menu_btn{
    display: none;
    position: absolute;
    width: 24px;
    height: 24px;
    right: 20px;
    top: calc(50% - 12px);
}
.m_menu_btn span{
    width: 100%;
    display: block;
    height: 2px;
    background: #fff;
    position: absolute;
    transition: 0.4s;
}
.m_menu_btn span:nth-child(1){
    top: 3px;
}
.m_menu_btn span:nth-child(2){
    top: 12px;
}
.m_menu_btn span:nth-child(3){
    bottom: 0;
}

.m_menu_btn.active span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
}
.m_menu_btn.active span:nth-child(2){
    opacity: 0;
}
.m_menu_btn.active span:nth-child(3){
    transform: translateY(-12px) rotate(-45deg);
}


.m_gnbBox .m_gnbTop{
    padding: 20px;
    background: #282F40;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.m_gnbBox .m_gnbTop ul{}
.m_gnbBox .m_gnbTop ul li{
    margin-bottom: 6px;
}
.m_gnbBox .m_gnbTop ul li p{
    letter-spacing: -0.05em;
    font-size: 14px;
}
.m_gnbBox .m_gnbTop ul li p span{
    font-weight: 500;
    padding-left: 12px;
    font-size: 14px;
    letter-spacing: 0;
}
.m_gnbBox .m_gnbTop ul li p a {
    color: #FFE100;
}
.m_gnbBox .m_gnbBot{
    position: relative;
    background: #242532;
}
.m_gnbBox .m_gnbBot > ul{
    width: 100%;
}
.m_gnbBox .m_gnbBot > ul > li{
    width: 100%;
    border-bottom: 1px solid #242532;
    background: #282F40;
}

.m_gnbBox .m_gnbBot > ul > li > a{
    display: flex;
    align-items: center;
    padding: 8px 20px;
}
.m_gnbBox .m_gnbBot ul li a img {
    width: 30px;
}
.m_gnbBox .m_gnbBot ul li a span{
    display: block;
    margin-left: 16px;
    font-size: 15px;
}
.mlogout_btn{
    line-height: 50px;
    color: #fff;
    text-align: center;
    bottom: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgb(255, 255, 255, 0.2);
    box-sizing: border-box;
    font-size: 20px;
}

.m_depth2 {
    display: none;
    background: #3c4457;
}
.m_depth2 li:not(:last-child) {
    border-bottom: 1px solid #282f40;
}
.m_depth2 li a {
    display: block;
    font-size: 14px;
    padding: 8px 20px 8px 67px;
}

.bar{
    width: 100%;
    height: 12px;
    background: #242532;
}
.sideMenu_on{
    min-height: -webkit-fill-available;
    opacity: 1;
    height: calc(100vh - 60px);
}
@media (max-width: 1783px){
    header nav#gnb > ul {
        justify-content: flex-start;
    }
    header nav#gnb > ul li{
        width: 20%;
    }
    /* 	div#gnb_side{
            flex-direction: column;
        }
        div#gnb_side div#logout_btn{
            margin-top: 20px;
        } */
}
@media (max-width: 1199px){
    header{
        display: block;
    }
    header h1#logo{
        float: left;
        margin: 26px 0 16px;
        width: auto;
    }
    ul.pc,
    div.pc{
        display: none !important;
    }
    .m_menu_btn{
        display: block;
    }
    .m_gnbBox.mo{
        display: block;
    }
}
@media (max-width: 767px){
    header{
        min-height: 60px;
    }
    header .headerArea{
        padding: 0 20px;
    }
    header h1#logo{
        margin: 15px 0 8px;
    }
    header h1#logo img{
        width: 90px;
    }
    .m_menu_btn{
        width: 18px;
        height: 18px;
        top: calc(50% - 9px);
    }
    .m_menu_btn span:nth-child(1){
        top: 2px;
    }
    .m_menu_btn span:nth-child(2){
        top: 9px;
    }
    .m_gnbBox{
        top: 60px;
    }
    .m_menu_btn.active span:nth-child(1){
        transform: translateY(4px) rotate(45deg);
    }
    .m_menu_btn.active span:nth-child(3){
        transform: translateY(-10px) rotate(-45deg);
    }
}

section#wrapper{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    min-height: 530px;
    padding-top: 100px;
}
section#wrapper:after{
    content:"";
    display: block;
    clear: both;
}

/*****차트 및 테이블태그 박스*****/
/*.main_cht,*/
/*.pro_table,*/
/*.not_table,*/
/*.rep_table,*/
/*.view_table,*/
/*.cus_table,*/
/*.self_table{*/
/*   	padding-top: 80px;*/
/*}*/
.table-area,
.table-area.main,
.main_cht,
.view_table {
    padding-top: 80px;
}
.main_cht h2{
    color: #fff;
    letter-spacing: -0.05em;
    font-size: 1.875rem;
    font-weight: 500;
}
.main_cht div.cht_box{
    width: 100%;
    box-shadow: 0px 4px 4px rgb(0,0,0,0.1);
    border-radius: 10px;
    background-color: #282F40;
}
div.cht_box > div,
div.cht_box_03 > div{
    max-width: 1130px;
    max-height: 390px;
    min-height: 247px;
    margin: 0 auto;
    padding: 0 10px;
}
.main_cht #myChart,
.main_cht #obstacle{
    margin-top: 20px;
    min-height: 230px;
    max-height: 390px;
}
.main_cht > ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.main_cht > ul li{
    max-width: 376px;
    min-width: 376px;
    margin-bottom: 60px;
}
.cht_tit{
    margin-bottom: 12px;
}
.cht_tit h3{
    font-weight: 500;
}
.main_cht > ul li .cht_tit a{
    display: block;
}
.main_cht > ul li .cht_tit a::after{
    content: "";
    display: block;
    clear: both;
}
.main_cht > ul li .cht_tit a h3{
    float: left;
    color: #fff;
    font-weight: 500;
}
.main_cht > ul li .cht_tit a img{
    display: block;
    float: right;
    padding: 5px 0;
}
.main_cht div.cht_box_02{
    background: #282F40;
    border-radius: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    padding: 30px 0;
    box-sizing: border-box;
}
.main_cht02 ul li{
    width: 49%;
    max-width: 582px;
    margin: 0;
}

.main_cht04 ul li{
    width: 24%;
    max-width: 270px;
    min-width: auto;
}
.main_cht04 ul li:nth-child(n + 5) {
    margin-bottom: 0;
}

.main_cht .srv_info .main_security_wrap {
    width: 100%;
    background: #282F40;
    border-radius: 10px;
    padding: 30px 0;
    box-sizing: border-box;
}
.main_cht .srv_info .main_security_wrap .security_title {
    font-size: 22px;
    font-weight: 500;
    text-align: center;
}
.main_cht .srv_info .main_security_wrap .security_content {
    display: flex;
    justify-content: space-between;
}
.main_cht .srv_info .main_security_wrap .security_content > div {
    width: 50%;
    position: relative;
    padding: 0 20px;
}
.main_cht .srv_info .main_security_wrap .security_content > div.line:after {
    content: "";
    width: 1px;
    height: 80%;
    background: #d9d9d9;
    position: absolute;
    right: 0;
    top: calc(50% - 40%);
}
.main_cht .srv_info .main_security_wrap .security_content .top {
    text-align: center;
    height: 100px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main_cht .srv_info .main_security_wrap .security_content .top img {
    display: inline-block;
    vertical-align: middle;
}
.main_cht .srv_info .main_security_wrap .security_content .top p {
    font-size: 30px;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
}
.main_cht .srv_info .main_security_wrap .security_content .top p.safety {
    color: #11D800;
}
.main_cht .srv_info .main_security_wrap .security_content .top p.weak {
    color: #FFC908;
}
.main_cht .srv_info .main_security_wrap .security_content .top p.danger {
    color: #FF0000;
}
.main_cht .srv_info .main_security_wrap .security_content #security_score {
    position: relative;
    margin-top: 10px;
}
.main_cht .srv_info .main_security_wrap .security_content .score {
    color: #ffffff;
    font-size: 20px;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
}
.main_cht .srv_info .main_security_wrap .security_content .score .score_num {
    font-size: 30px;
    font-weight: 500;
}
.main_cht .srv_info .main_security_wrap .security_situation_box {
    margin-top: 20px;
}
.main_cht .srv_info .main_security_wrap .security_situation_box .txt {
    text-align: center;
    font-size: 18px;
    color: #ffffff;
    padding: 0 16px;
    word-break: keep-all;
}
.main_cht .srv_info .main_security_wrap .security_situation_box .txt span {
    font-weight: 500;
    font-size: 22px;
}

/*****서브페이지*****/
.on{
    color:#FFC7AE !important;
}
.main_cht .srv_info{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main_cht .srv_info .intro{
    border-radius: 10px;
    padding: 30px 40px;
    width: 60%;
    margin-right: 40px;
    background: #282F40;
    box-shadow: 0 4px 4px rgb(0, 0, 0, 0.1);
}
.main_cht .srv_info .info_btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 40%;
}
.main_cht .srv_info .info_btn .bbtn {
    width: 31%;
}
.main_cht .srv_info .info_btn .bbtn a,
.main_cht .srv_info .info_btn .bbtn a img
{
    display: block;
}

.main_cht .srv_info .security_wrap {
    width: 48%;
    background: #282F40;
    border-radius: 10px;
    padding: 30px 0 0;
    height: 248px;
    box-sizing: border-box;
}
.main_cht .srv_info .security_wrap .security_title {
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 10px;
}
.main_cht .srv_info .security_wrap .security_content {
    display: flex;
    justify-content: space-between;
}
.main_cht .srv_info .security_wrap .security_content > div {
    width: 50%;
    position: relative;
}
.main_cht .srv_info .security_wrap .security_content > div.line:after {
    content: "";
    width: 1px;
    height: 80%;
    background: #d9d9d9;
    position: absolute;
    right: 0;
    top: calc(50% - 40%);
}
.main_cht .srv_info .security_wrap .security_content .top {
    text-align: center;
    margin-top: 10px;
}
.main_cht .srv_info .security_wrap .security_content .top img {
    display: inline-block;
    vertical-align: middle;
}
.main_cht .srv_info .security_wrap .security_content .top p {
    font-size: 30px;
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
}
.main_cht .srv_info .security_wrap .security_content .top p.safety {
    color: #11D800;
}
.main_cht .srv_info .security_wrap .security_content .top p.weak {
    color: #FFC908;
}
.main_cht .srv_info .security_wrap .security_content .top p.danger {
    color: #FF0000;
}
.main_cht .srv_info .security_wrap .security_content .score {
    color: #ffffff;
    font-size: 20px;
    margin-top: 10px;
    text-align: center;
}
.main_cht .srv_info .security_wrap .security_content .score .score_num {
    font-size: 30px;
    font-weight: 500;
}
.main_cht .srv_info .security_wrap .security_graph .graph02 {
    position: relative;
    max-width: 200px;
    margin: 0 auto;
}

.main_cht .srv_info .security_wrap .security_graph .graph02 .security_num {
    position: absolute;
    display: flex;
    justify-content: space-around;
    color: #ffffff;
    width: 100%;
    bottom: 50px;
    font-size: 13px;
}
.main_cht .srv_info .security_wrap .security_graph .graph02 .security_num li {
    text-align: center;
    width: 38px;
}
.main_cht .srv_info .security_wrap .security_graph .graph02 .security_txt ul {
    display: flex;
    justify-content: space-around;
    color: #ffffff;
}
.main_cht .srv_info .security_wrap .security_graph .graph02 .security_txt ul li {
    text-align: center;
    width: 38px;
}

.main_cht .srv_info .security_wrap .security_situation_box .txt {
    text-align: center;
    font-size: 18px;
    color: #ffffff;
    margin: 20px 0 30px;
    padding: 0 16px;
    word-break: keep-all;
}
.main_cht .srv_info .security_wrap .security_situation_box .txt span {
    font-weight: 500;
    font-size: 22px;
}

.main_cht .srv_info .info_btn .bbtn a img{
    width: 100%;
}

.srv_info .intro h2{
    margin-bottom: 17px;
    color: #fff;
}
.srv_info .intro .intro_t{
    width: 100%;
    color: #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.srv_info .intro .intro_t li{
    display: flex;
    width: 50%;
    align-items: center;
    padding: 7px 0;
}
.srv_info .intro .intro_t li h6{
    font-size: 16px;
    width: 60px;
    font-weight: 500;
    color: #f7f7f7;
}
.srv_info .intro .intro_t li p{
    font-size: 16px;
    letter-spacing: -0.05em;
    color: #fff;
}


.sub_cht,
.main_cht02{
    padding-top: 60px;
}
.sub_cht ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.sub_cht ul li{
    max-width: 376px;
    width: 33%;
}
.sub_cht04 ul li{
    width: 24%;
    max-width: 270px;
    min-width: auto;
    margin: 0;
}

/*****서브페이지 차트박스*****/
div.cht_box_03{
    border-radius: 10px;
    background: #282F40;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}
div.img_box{
    border-radius: 10px;
    overflow: hidden;
    background: #282f40;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}
div.img_box img {
    display: block;
    max-width: 64%;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
}

/*****차트아래 테이블 위 여백*****/
.table-area h2{
    margin-bottom: 20px;
    letter-spacing: -0.05em;
    font-weight: 500;
}
.table-area h4{
    margin-bottom: 10px;
    letter-spacing: -0.05em;
    position: relative;
    padding-left: 10px;
    font-weight: 500;
}
.table-area h4:before {
    content: "";
    position: absolute;
    z-index: -9;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #ED6B30;
}

/*.prd_table,*/
/*.prd_table2,*/
/*.num_table {*/
/*    margin-top: 47px;*/
/*}*/
.rep_table h2,
.not_table h2,
.view_table h2,
.cus_table h2,
.self_table h2{
    margin-bottom: 20px;
    letter-spacing: -0.05em;
    font-weight: 500;
}
.prd_table h4,
.prd_table2 h4,
.num_table h4{
    margin-bottom: 10px;
    letter-spacing: -0.05em;
    position: relative;
    padding-left: 10px;
    font-weight: 500;
}
.prd_table h4:before,
.prd_table2 h4:before,
.num_table h4:before{
    content: "";
    position: absolute;
    z-index: -9;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #ED6B30;
}

.print_log{
    position: relative;
}

/*****서브페이지 table태그 디자인*****/
.pro_table table,
.prd_table table,
.prd_table2 table,
.num_table table,
.not_table table,
.cus_table table,
.self_table table,
.rep_table table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    color: #cccccc;
    font-size: 14px;
    text-align: center;
}
.pro_table table tr,
.prd_table table tr,
.prd_table2 table tr,
.num_table table tr,
.not_table table tr,
.view_table table tr,
.cus_table table tr,
.self_table table tr,
.rep_table table tr{
    border-bottom: 1px solid #686d79;
}
.pro_table table thead tr,
.prd_table table thead tr,
.prd_table2 table thead tr,
.num_table table thead tr,
.not_table table thead tr,
.view_table table thead tr,
.cus_table table thead tr,
.self_table table thead tr,
.rep_table table thead tr{
    border-bottom: 1px solid #686D79;
}
.pro_table table tbody tr:last-child,
.prd_table table tbody tr:last-child,
.prd_table2 table tbody tr:last-child,
.num_table table tbody tr:last-child,
.not_table table tbody tr:last-child,
.view_table table tbody tr:last-child,
.cus_table table tbody tr:last-child,
.self_table table tbody tr:last-child,
.rep_table table tbody tr:last-child{
    border: 0;
}
.pro_table table thead th,
.prd_table table th,
.prd_table2 table th,
.num_table table th,
.not_table table th,
.view_table table th,
.cus_table table th,
.self_table table th,
.rep_table table thead th{
    /*     line-height: 44px; */
    padding: 10px;
    background: #181D28;
    white-space: nowrap;
    color: #fff;
    font-weight: 500;
}
.pro_table table td,
.prd_table table td,
.prd_table2 table td,
.num_table table td,
.self_table table td,
.rep_table table td{
    padding: 10px;
    background: #282F40;
    word-break: keep-all;
}

.not_table table td,
.cus_table table td,
.view_table table td {
    padding: 10px;
    background: #282F40;
    word-break: keep-all;
}

#tbData09-1 td {
    white-space: normal;
}
.prd_table table th:not(:last-child),
.prd_table2 table th:not(:last-child),
.prd_table table td:not(:last-child),
.prd_table2 table td:not(:last-child) {
    border-right: 1px solid #686D79;
}
.pro_table table td:nth-child(1),
.pro_table table td:nth-child(5),
.not_table table td:nth-child(2),
.cus_table table td:nth-child(3),
.self_table table td:nth-child(3),
.rep_table table td.left,
.prd_table table td.left,
.prd_table2 table td.left{
    text-align: left;
}
.prd_table table td span {
    cursor: pointer;
    display: inline-block;
}
.prd_table table td span.safety {
    color: #3EFF2E;
}
.prd_table table td span.weak {
    color: #FFE500;
}
.prd_table table td span.danger {
    color: #FF2020;
}

.not_table table td a,
.cus_table table td a,
.self_table table td a{
    display: block;
    /* 	text-decoration: underline; */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 80%;
}
.not_table table td a:hover,
.cus_table table td a:hover,
.self_table table td a:hover{
    color:#FA7538;
}

.light-green {
    color: #02ff24;
}

.table-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.table-flex > div {
    width: 48%;
}

/*****view 페이지 테이블*****/
.view_table table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    color: #fff;
    font-size: 14px;
}
.view_table h2{
    margin-bottom: 20px;
}
.view_table tr.mo{
    display: none;
}
.view_table table th{
    background: #181D28;
}
.view_table table td a{
    /*display: block;*/
    text-decoration: underline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #38A5EE;
    width: 80%;
}
.view_table input,
.view_table textarea{
    width: 100%;
    border-radius: 3px;
    resize: none;
    padding-left: 10px;
    line-height: 40px;
}
.view_table input{
    margin: 10px 0;
    background: #282F40;
    color: #fff;
    border: 0;
}
.view_table textarea{
    background: #282F40;
    color: #fff;
    border: 0;
    font-size: 16px;
}
.view_table.register input,
.view_table.register textarea,
.view_table.register a {
    background: #ffffff;
    color: #38A5EE;
}

/* 네트워크 서비스 페이지 */
.network-wrap {
    background: #282F40;
    border-radius: 10px;
    padding: 84px 84px 30px;
    margin-bottom: 16px;
}
.network-wrap#data01,
.network-wrap#data02,
.network-wrap#data03 {
    display: none;
}
.network-wrap .network-area {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}
.network-wrap .network-area > span {
    max-width: 334px;
    height: 1px;
    border-top: 1px dashed #ACE3FF;
    display: block;
    width: 100%;
    position: relative;
    top: 44px;
}
.network-wrap .network-area .area-box {
    position: relative;
}
.network-wrap .network-area .area-box:not(:last-child):after {
    content: "";
    width: 9px;
    height: 9px;
    background: #ACE3FF;
    border-radius: 50%;
    position: absolute;
    top: 40px;
    right: -20px;
}
.network-wrap .network-area .area-box:not(:first-child):before {
    content: "";
    width: 9px;
    height: 9px;
    background: #ACE3FF;
    border-radius: 50%;
    position: absolute;
    top: 40px;
    left: -20px;
}
.network-wrap .network-area .area {
    cursor: pointer;
}
.network-wrap .network-area .area .icon,
.network-wrap .network-area02 .area .icon{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto;
}
.network-wrap .network-area .area .icon01 {
    background: url(../img/network/net_01.png) no-repeat center #181D28;
}
.network-wrap .network-area .area .icon02 {
    background: url(../img/network/net_02.png) no-repeat center #181D28;
}
.network-wrap .network-area .area .icon03 {
    background: url(../img/network/net_03.png) no-repeat center #181D28;
}
.network-wrap .network-area02 .area .icon04 {
    background: url(../img/network/net_04.png) no-repeat center #181D28;
}
.network-wrap .network-area02 .area .icon05 {
    background: url(../img/network/net_05.png) no-repeat center #181D28;
}
.network-wrap .network-area02 .area .icon06 {
    background: url(../img/network/net_06.png) no-repeat center #181D28;
}
.network-wrap .network-area02 .area .icon07 {
    background: url(../img/network/net_07.png) no-repeat center #181D28;
}
.network-wrap .network-area02 .area .icon08 {
    background: url(../img/network/net_08.png) no-repeat center #181D28;
}
.network-wrap .network-area .area p.tit {
    position: relative;
    padding-bottom: 24px;
}
.network-wrap .network-area .area p.tit,
.network-wrap .network-area02 .area p.tit {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    text-align: center;
    margin-top: 12px;
}
.network-wrap .network-area .area p.tit span {
    font-weight: 400;
    font-size: 16px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    white-space: nowrap;
}
.network-wrap .network-area .sub-area  {
    position: absolute;
    top: -44px;
    left: 124px;
    z-index: 9;
}
#data02.network-wrap .network-area .sub-area {
    left: 10%;
}
.network-wrap .network-area .sub-area ul {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.network-wrap .network-area .sub-area ul li {
    background: #181D28;
    border-radius: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 12px 30px 12px 20px;
    box-sizing: border-box;
    max-width: 328px;
    min-width: 328px;
    position: relative;
}
.network-wrap .network-area .sub-area ul li .area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.network-wrap .network-area .sub-area ul li .sub-icon img {
    display: block;
}
.network-wrap .network-area .sub-area ul li .area .sub-tit {
    color: #fff;
    font-size: 14px;
    margin-left: 12px;
}
.network-wrap .network-area .sub-area ul li .sub-data {
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.network-wrap .network-area .sub-area ul li .sub-data i {
    color: #4C9DFF;
    font-size: 38px;
    margin-right: 5px;
}
.network-wrap .line-area {
    position: relative;
    padding-top: 46px;
    margin-top: 16px;
}
.network-wrap .line-area span {
    border-top: 1px dashed #ACE3FF;
    display: block;
}
.network-wrap .line-area span.line01 {
    width: 1px;
    height: 46px;
    border-left: 1px dashed #ACE3FF;
    position: absolute;
    right: 57px;
    top: 0;
}
.network-wrap .line-area span.line01:after {
    content: "";
    width: 9px;
    height: 9px;
    background: #ACE3FF;
    border-radius: 50%;
    position: absolute;
    top: -3px;
    right: -3px;
}
.network-wrap .line-area span.line02 {
    border-top: 1px dashed #ACE3FF;
    position: absolute;
    right: 58px;
    left: 270px;
    width: auto;
}
.network-area02 > div > span.line03,
.network-area02 > div > span.line04 {
    width: 1px;
    height: 46px;
    border-left: 1px dashed #ACE3FF;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    z-index: 1;
}
.network-area02 > div > span.line03:after,
.network-area02 > div > span.line04:after {
    content: "";
    width: 9px;
    height: 9px;
    background: #ACE3FF;
    border-radius: 50%;
    position: absolute;
    bottom: -4px;
    right: -3px;
}

.network-wrap .network-area02 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.network-wrap .network-area02 .outline {
    border: 1px dashed #0E131E;
    padding: 12px;
    border-radius: 20px;
    position: relative;
}
.network-wrap .network-area02 > div {
    position: relative;
}
.network-wrap .network-area02 .outline > ul {
    background: #424B60;
    border-radius: 20px;
    border: 1px dashed #0E131E;
    display: flex;
    justify-content: space-between;
    gap: 58px;
    padding: 0 46px;
}
.network-wrap .network-area02 .outline > ul > li {
    padding: 11px;
    position: relative;
}
.network-wrap .network-area02 .outline > ul > li .area {
    cursor: pointer;
}

.network-wrap .hover-area {
    display: none;
    border-radius: 10px;
    position: absolute;
    right: -10px;
    z-index: 9;
    padding-top: 30px;
}
.network-wrap .hover-area.hover {
    display: block;
}
.network-wrap .network-area .hover-area {
    top: calc(100% - 10px);
}
.network-wrap .network-area02 .hover-area {
    top: calc(100% - 20px);
    right: 0;
}
.network-wrap .sub-area .hover-area {
    top: calc(100% - 20px);
    right: 0;
    max-width: 268px;
}
.network-wrap .hover-area:after {
    content: "";
    width: 22px;
    height: 22px;
    background: #FFC7AE;
    transform: rotate(-45deg);
    border-top: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
    position: absolute;
    top: 20px;
    right: 38px;
    z-index: 1;
}
.network-wrap .hover-area .top {
    background: #FFC7AE;
    padding: 11px 20px;
    border-radius: 10px 10px 0 0;
    border: 1px solid #e3e3e3;
    white-space: nowrap;
}
.network-wrap .hover-area .top p {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    color: #333;
}
.network-wrap .sub-area .hover-area .top p {
    gap: 10px;
}
.network-wrap .sub-area .hover-area .top p span {
    color: #fff;
    border-radius: 100px;
    padding: 4px 16px;
    display: block;
    box-sizing: border-box;
    position: relative;
    z-index: 9;
}
.network-wrap .sub-area .hover-area .top p span.safety {
    background: #13BB1A;
}
.network-wrap .sub-area .hover-area .top p span.weak {
    background: #ffcd0e;
}
.network-wrap .sub-area .hover-area .top p span.danger {
    background: #ff0000;
}

.network-wrap .hover-area .top p img {
    display: block;
    margin-right: 10px;
    max-width: 25px;
}
.network-wrap .hover-area .con {
    background: #fff;
    padding: 20px;
    border: 1px solid #e3e3e3;
    border-radius: 0 0 10px 10px;
    border-top: 0;
    display: flex;
    gap: 14px;
}
.network-wrap .hover-area .con > p {
    font-size: 14px;
}
.network-wrap .hover-area .con ul {

}
.network-wrap .hover-area .con ul li:not(:last-child) {
    margin-bottom: 14px;
}
.network-wrap .hover-area .con ul li h5 {
    width: 120px;
    font-size: 14px;
    color: #333;
    letter-spacing: -1px;
    font-weight: 400;
}
.network-wrap .hover-area .con ul li p {
    font-size: 14px;
    color: #333;
    letter-spacing: -1px;
    white-space: nowrap;
    min-height: 21px;
}

#data02.network-wrap .network-area {
    justify-content: flex-start;
}
#data02.network-wrap .line-area span.line01 {
    left: 494px;
    right: auto;
}
#data02.network-wrap .line-area span.line02 {
    right: 190px;
}
.upTime {
    display: none;
}

@media (max-width: 1783px) {
    .network-wrap .network-area .sub-area {
        left: 105px;
    }
    .network-wrap .line-area span.line01 {
        right: 38px;
    }
    .network-wrap .line-area span.line02 {
        right: 40px;
    }
}

@media (max-width: 1199px) {
    .network-wrap .network-area .sub-area ul li {
        min-width: auto;
    }
    .network-wrap .network-area .sub-area ul li .area {
        gap: 20px;
    }
    .network-wrap .network-area02 {
        gap: 4%;
    }
    .network-wrap .network-area02 .outline > ul {
        padding: 0 20px;
        gap: 4px;
    }
    .network-wrap .line-area span.line02 {
        left: 190px;
    }
    #data02.network-wrap .line-area span.line02 {
        right: 138px;
    }
}
@media (max-width: 999px) {
    .network-wrap {
        padding: 84px 20px 40px;
    }
    .network-wrap .box1 .hover-area,
    .network-wrap .box2 .hover-area,
    .network-area02 > div:first-child ul li .hover-area {
        left: 0;
        right: auto;
    }
    .network-wrap .box1 .hover-area:after,
    .network-wrap .box2 .hover-area:after {
        left: 30px;
        right: auto;
    }
    .network-area02 > div:first-child ul li .hover-area:after {
        left: 42px;
        right: auto;
    }
}
@media (max-width: 878px) {
    .network-wrap {
        padding: 26px 20px;
    }
    .network-wrap .network-area02 .outline > ul {
        flex-direction: column;
        padding: 0 20px;
        gap: 0;
    }
    .network-wrap .network-area {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0 20px;
    }
    .network-wrap .network-area .area-box.box1 {
        width: 100%;
    }
    .network-wrap .network-area .area-box.box1 .area {
        max-width: 80px;
    }
    .network-wrap .network-area > span {
        max-width: none;
        width: calc(100% - 200px);
    }
    .network-wrap .network-area > span.top-line {
        width: calc(100% - 42px);
        max-width: none;
        border-top: 0;
        border-left: 1px dashed #ACE3FF;
        height: 194px;
        top: 0;
        left: 38px;
        margin-bottom: 14px;
    }
    .network-wrap .network-area .area-box.box1:after {
        bottom: 0;
        left: 34px;
        top: auto;
    }
    .network-wrap .network-area .area-box.box2:before {
        top: -23px;
        left: 34px;
    }
    .network-wrap .network-area .area-box.box2:after {
        top: 40px;
        right: -24px;
    }
    .network-wrap .network-area .area p.tit,
    .network-wrap .network-area02 .area p.tit,
    .network-wrap .network-area .area p.tit span {
        font-size: 14px;
    }
    .network-wrap .line-area {
        margin-top: 12px;
    }
    .network-wrap .line-area span.line02 {
        left: 84px;
    }
    .network-wrap .network-area .sub-area {
        top: 145px;
    }
    .network-wrap .network-area .sub-area ul {
        gap: 12px;
    }
    .network-wrap .network-area .sub-area ul li .area {
        display: block;
        margin-left: 12px;
    }
    .network-wrap .network-area .sub-area ul li .area .sub-tit {
        margin-left: 0;
    }
    .network-wrap .network-area02 {
        align-items: flex-start;
    }
    #data02.network-wrap .line-area span.line01 {
        left: 38px;
    }
    #data02.network-wrap .line-area span.line02 {
        right: 86px;
        left: 38px;
    }
}
@media (max-width: 599px) {
    .network-wrap .network-area .sub-area,
    #data02.network-wrap .network-area .sub-area {
        left: 54px;
    }
    .network-wrap .network-area02 .outline {
        border-radius: 10px;
    }
    .network-wrap .network-area02 .outline > ul {
        border-radius: 10px;
        padding: 20px 10px;
        gap: 15px;
    }
    .network-wrap .network-area02 .outline > ul > li {
        padding: 0;
    }
    .network-wrap .line-area {
        padding-top: 22px;
    }
    .network-wrap .line-area span.line01 {
        height: 22px;
    }
    .network-wrap .line-area span.line02 {
        left: 64px;
    }
    .network-area02 > div span.line03 {
        height: 22px;
    }
    .network-area02 > div span.line04 {
        height: 22px;
    }

    .network-wrap .network-area02 .hover-area {
        top: calc(100% - -20px);
    }
    .network-area02 > div:first-child ul li .hover-area:after {
        left: 30px;
    }
    .network-area02 > div:last-child ul li .hover-area:after {
        right: 26px;
    }
    #data02.network-wrap .line-area span.line02 {
        right: 64px;
    }
}

/*********/

@media (max-width: 1783px){
    section#wrapper{
        padding-top: 200px !important;
    }
    /*.main_cht,*/
    /*.pro_table,*/
    /*.not_table,*/
    /*.rep_table,*/
    /*.view_table,*/
    /*.cus_table,*/
    /*.self_table{*/
    /*	padding: 80px 20px 0;*/
    /*}*/
    .table-area.main,
    .main_cht,
    .board_container{
        padding: 80px 20px 0;
    }
    .sub_cht{
        padding: 60px 20px 0;
    }
    /*.prd_table,*/
    /*.prd_table2,*/
    /*.num_table{*/
    /*	padding: 0 20px;*/
    /*}*/
    .table-area,
    .view_table{
        padding: 0 20px;
        margin-top: 47px;
    }
    .breadcrumb {
        top: 220px !important;
    }
}
@media (max-width: 1199px){
    section.index:after{
        top:0 !important;
    }
    section#wrapper{
        padding-top: 100px !important;
    }
    .main_cht{
        padding: 60px 20px 0;
    }
    .main_cht > ul{
        flex-direction: row;
    }
    .main_cht > ul li{
        width: 47%;
        padding: 10px;
        max-width: none;
        min-width: auto;
    }
    .main_cht04 ul li {
        margin-bottom: 60px !important;
    }
    /*.main_cht > ul li:nth-child(7),*/
    /*.main_cht > ul li:nth-child(8){*/
    /*	margin: 0;*/
    /*}*/

    .main_cht h2,
    .main_cht > ul li .cht_tit a h3{
        font-size: 2vw;
    }
    .main_cht .srv_info{
        /*justify-content: center;*/
    }
    .main_cht .srv_info .intro{
        width: 50%;
        padding: 30px 20px;
    }
    .srv_info .intro .intro_t{
        align-items: flex-start;
        flex-direction: column;
    }
    .srv_info .intro .intro_t li{
        width: 100%;
    }
    .srv_info .intro .intro_t li h6{
        margin-right: 10px;
    }
    .prd_table,
    .prd_table2,
    .pro_table,
    .num_table,
    .rep_table,
    .not_table,
    .cus_table{
        width: 100%;
        overflow-x: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .prd_table::-webkit-scrollbar,
    .prd_table2::-webkit-scrollbar,
    .pro_table::-webkit-scrollbar,
    .num_table::-webkit-scrollbar,
    .rep_table::-webkit-scrollbar,
    .cus_table::-webkit-scrollbar{
        display: none;
    }
    .pro_table table,
    .prd_table table,
    .prd_table2 table{
        /*min-width: 1140px;*/
        min-width: 360px;
    }
    .num_table table,
    .rep_table table{
        min-width: 500px;
    }
    .pro_table table td,
    .prd_table table td,
    .prd_table2 table td,
    .num_table table td,
    .self_table table td,
    .rep_table table td{
        white-space: nowrap;
    }
    .table-flex {
        display: block;
    }
    .table-flex > div {
        width: 100%;
        box-sizing: border-box;
    }
    .table-flex > div:not(:last-child) {
        margin-bottom: 47px;
    }
    .print_log{
        top: 0;
        margin-bottom: 47px;
    }
    .breadcrumb {
        top: 114px !important;
        left: 20px !important;

    }

}

@media (max-width: 833px){
    .main_cht h2,
    .main_cht > ul li .cht_tit a h3{
        font-size: 1.125rem;
    }
    .main_cht .srv_info .info_btn{
        flex-direction: column;
    }
    .main_cht .srv_info .info_btn .bbtn {
        width: 50%;
        margin-bottom: 10px;
    }
    .info_btn .vd_btn{
        margin-bottom: 0 !important;
    }
    td.date{
        font-size: 14px;
    }
    td.date > span{
        display: none;
    }

}
@media (max-width: 767px){
    section#wrapper{
        padding-top: 60px !important;
    }
    .wrap{
        padding: 0 20px;
    }
    .wrap > .pro_table{
        padding: 40px 0;
    }
    .main_cht .srv_info .intro{
        margin-right: 20px;
    }
    .main_cht .srv_info.security_main {
        display: block;
    }
    .main_cht .srv_info .security_wrap {
        width: 100%;
    }
    .main_cht .srv_info .security_wrap:not(:last-child){
        margin-bottom: 20px;
    }
    .main_cht .srv_info .main_security_wrap .security_title,
    .main_cht .srv_info .security_wrap .security_title {
        font-size: 18px;
    }
    .main_cht .srv_info .main_security_wrap .security_content .top p,
    .main_cht .srv_info .security_wrap .security_content .top p,
    .main_cht .srv_info .main_security_wrap .security_content .score .score_num,
    .main_cht .srv_info .security_wrap .security_content .score .score_num{
        font-size: 26px;
    }
    .main_cht .srv_info .main_security_wrap .security_content .top img,
    .main_cht .srv_info .security_wrap .security_content .top img {
        width: 42px;
    }
    /*.main_cht,*/
    /*.pro_table,*/
    /*.not_table,*/
    /*.rep_table,*/
    /*.view_table,*/
    /*.cus_table,*/
    /*.self_table{*/
    /*	padding: 40px 20px 0;*/
    /*}*/
    .table-area.main,
    .table-area,
    .main_cht{
        padding: 40px 20px 0;
        margin-top: 0;
    }
    .view_table tr.pc{
        display: none;
    }
    .view_table tr.mo{
        display: table-row;
    }
    .breadcrumb {
        top: 72px !important;
    }
    .breadcrumb ul li {
        font-size: 11px;
    }
    div.img_box img {
        max-width: 100%;
    }
}
@media (max-width: 706px){
    .main_cht > ul li{
        width: 100%;
        margin-bottom: 50px !important;
        padding: 0;
    }
    .main_cht > ul li:last-child{
        margin: 0 !important;
    }
    .main_cht02 ul li:last-child{
        margin: 0 !important;
    }
    .sub_cht ul li{
        width: 100%;
        max-width: none;
        margin-bottom: 50px;
    }
    .sub_cht ul li:last-child{
        margin: 0;
    }
    .srv_info .intro_t li p{
        width: 180px;
    }
    .main_cht .srv_info .info_btn .bbtn{
        width: 61%;
    }
    .not_table table th:nth-child(1),
    .not_table table th:nth-child(3),
    .not_table table td:nth-child(1),
    .not_table table td:nth-child(3),
    .not_table col:nth-child(1),
    .not_table col:nth-child(3){
        display: none;
    }
    .notice_text{
        padding: 20px !important;
    }
    .rep_table .loding{
        font-size: 12px;
    }
    .cus_table table th:nth-child(1),
    .cus_table table th:nth-child(4),
    .cus_table table th:nth-child(5),
    .cus_table table td:nth-child(1),
    .cus_table table td:nth-child(4),
    .cus_table table td:nth-child(5),
    .cus_table col:nth-child(1),
    .cus_table col:nth-child(4),
    .cus_table col:nth-child(5){
        display: none;
    }
    .cus_table table td:nth-child(2) span{
        width: 28px;
        white-space: nowrap;
        overflow: hidden;
        margin: 0 auto;
    }
}
@media (max-width: 599px){
    .cus_table table th:nth-child(2),
    .cus_table table td:nth-child(2),
    .cus_table col:nth-child(2){
        display: none;
    }
    .cus_table table div.mo{
        display: block !important;
    }
    .main_cht .srv_info .main_security_wrap .security_situation_box .txt,
    .main_cht .srv_info .security_wrap .security_situation_box .txt {
        font-size: 16px;
    }
}
@media (max-width: 514px){
    .srv_info .intro .intro_t li h6,
    .srv_info .intro .intro_t li p{
        font-size: 3vw;
    }
    .not_table table th:nth-child(4),
    .not_table table th:nth-child(5),
    .not_table table td:nth-child(4),
    .not_table table td:nth-child(5),
    .not_table col:nth-child(4),
    .not_table col:nth-child(5){
        display: none;
    }
    .not_table table td{
        line-height: 30px;
    }
    .main_cht .srv_info .info_btn .bbtn {
        width: 90%;
    }
}
@media (max-width: 479px){
    .main_cht .srv_info{
        display: block;
    }
    .main_cht .srv_info .intro{
        width: 86%;
        margin: 0 auto;
        padding: 30px 21px;
    }
    .main_cht .srv_info .info_btn{
        flex-direction: initial;
        justify-content: center;
        width: 100%;
        margin-top: 20px;
    }
    .main_cht .srv_info .info_btn .bbtn {
        margin-bottom: 0;
        padding: 0 5px;
    }

    .srv_info .intro h2{
        text-align: center;
        font-size: 4.4vw;
    }
    .srv_info .intro .intro_t li h6,
    .srv_info .intro .intro_t li p{
        font-size: 13px;
    }
    .srv_info .intro_t li p{
        width: 100%;
    }
    .view_table table td a,
    .not_table table td a,
    .cus_table table td a{
        max-width: 90%;
    }
}

.notice_text{
    padding: 40px 20px;
    line-height: 40px;
}

/***** 삭제 버튼 클릭 시 모달 창 *****/
.del_modal{
    display: none;
}
.del_modal div{
    position: absolute;
    background: #f9f9f9;
    z-index: 9;
    top: calc(50% - 80px);
    left: calc(50% - 170px);
    height: 160px;
    width: 340px;
    border-radius: 5px;
    padding: 0 10px;
}
.del_modal div h4{
    line-height: 40px;
    border-bottom: 1px solid #efefef;
}
.del_modal div p{
    margin-top: 10px;
    font-size: 15px;
}
.del_modal:after{
    content: "";
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgb(0, 0, 0, 0.2)
}
.del_modal ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

/*****버튼*****/
.delete_btn,
.close_btn{
    width: 88px;
    line-height: 38px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
}
.delete_btn{
    background: #ED6B30;
    color: #fff;
    border: 1px solid #ED6B30;
}
.close_btn{
    background: #f7f7f7;
    color: #333;
    border: 1px solid #e7e7e7;
}

.view_btn{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 30px;
}
.answer_btn,
.modify_btn,
.del_btn,
.list_btn,
.upLoad_btn,
.save_btn{
    width: 90px;
    line-height: 40px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    margin-right: 20px;
    font-size: 14px;
}
.securityLabelBtn{
    width: 180px;
    line-height: 40px;
    border-radius: 5px;
    text-align: center;
    align-items: center;
    cursor: pointer;
    margin-top: 80px;
    margin-right: 20px;
    font-size: 12px;
}
.del_btn,
.upLoad_btn,
.save_btn{
    background: #ED6B30;
    color: #fff;
    border: 0;
}
.securityLabelBtn{
    background: #047d65;
    color: #fff;
    border:  0;
}

.answer_btn,
.modify_btn{
    background: #13BB1A;
    color: #fff;
}

.list_btn{
    background: #f7f7f7;
    color: #333;
}

.print_btn,
.write_btn{
    margin-top: 40px;
    color: #fff;
    background: #fa7538;
    border: 0;
    width: 60px;
    line-height: 40px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    margin-right: 20px;
    font-size: 14px;
}

.download_btn{
    width: 160px;
    color: #fff;
    background: #13BB1A;
    border: 0;
    line-height: 40px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    margin-right: 20px;
    font-size: 14px;
}

/*****테이블 내용 중 서비스상태 사용중, 사용안함*****/
.inUse{
    color: #fff;
    background: #13BB1A;
    width: 60px;
    line-height: 28px;
    border-radius: 5px;
    margin: 0 auto;
}
.unUsed{
    background: #ff0000;
    color: #fff;
    width: 60px;
    line-height: 28px;
    border-radius: 5px;
    margin: 0 auto;
}
a.downUsed{
    display: block;
    line-height: 28px;
    background: #FA7538;
    width: 240px;
    margin: 0 auto;
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
}
span.safety {
    color: #13BB1A;
}
span.weak {
    color: #ffcd0e;
}
span.upload {
    color: #4C9DFF;
}
span.danger {
    color: #ff0000;
}

tr.cancel td {
    /*** background: #4f0f0f !important; ***/
    background: #683240 !important;
}
td.safety {
    background: #13BB1A !important;
}
td.weak {
    background: #ffcd0e !important;
}
td.danger {
    background: #ff0000 !important;
}

/*****리포트페이지*****/

.rep_src{
    width: 100%;
    background: #181D28;
    padding: 20px 30px;
    box-sizing: border-box;
    margin-bottom: 40px;
    margin-top: 20px;
}
.rep_src form{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}
.rep_src .rep_date > span,
.rep_src .rep_search > span{
    color: #fff;
    font-size: 14px;
    display: block;
    margin-right: 20px;
    white-space: nowrap;
    min-width: 38px;
}
.rep_src .rep_date,
.rep_src .rep_search {
    display: flex;
    align-items: center;
}
.rep_src .cal,
.rep_src .col {
    display: flex;
    align-items: center;
    position: relative;
}

.rep_src form span.bar{
    display: inline-block;
    width: 10px;
    height: 1px;
    background: #d9d9d9;
    margin: 0 10px;
    position: relative;
    top: -3px;
}
.rep_src input[type="month"]{
    padding: 10px;
    font-size: 14px;
    width: 200px;
    height: 40px;
    color: #333;
    border: 1px solid #e3e3e3;
}
.rep_src .col .btn{
    display: flex;
    position: relative;
    left: -1px;
}
.rep_src input[type="button"]{
    width: 70px;
    height: 40px;
    color: #333;
    border: 1px solid #e3e3e3;
    position: relative;
    box-sizing: border-box;
    background: #fff;
}
.rep_src input[type="button"].btnR{
    left: -1px;
}
.rep_src input[type="submit"]{
    width: 70px;
    height: 40px;
    color: #fff;
    background: #FA7538;
    border: 0;
}
.rep_src input[type="text"]{
    height: 40px;
    padding: 0 57px 0 10px;
    font-size: 14px;
    background: #282F40;
    border: 0;
    border-bottom: 1px solid #e3e3e3 !important;
}
.rep_src input[type="text"]::placeholder {
    color: #999;
}
.rep_src .rep_search img {
    position: absolute;
    right: 20px;
    cursor: pointer;
    top: calc(50% - 9px);
}
.rep_table input[type="checkbox"]{
    accent-color: #ED6B30;
}

.rep_select {
    margin-bottom: 20px;
    float: right;
}
.rep_select select {
    padding: 0px 24px 0 5px;
    height: 20px;
    border: 1px solid #e3e3e3;
    font-size: 11px;
    color: #333;
    appearance: none;
    background: url(../img/select_arrow.png) no-repeat right 8px center;
    background-color: #fff;
}

.rep_select div > span {
    color: #fff;
    font-size: 12px;
    margin-right: 10px;
}

.rep_check{
    float: left;
}
.rep_check span{
    display: inline-block;
    color: #fff;
    font-size: 14px;
}
.rep_check button{
    font-size: 11px;
    color: #333;
    border: 1px solid #e3e3e3;
    background: #fff;
    padding: 0 8px;
    width: 70px;
    height: 21px;
    margin-left: 10px;
}

.rep_adm_btn{
    margin-top: 30px;
}
.rep_adm_btn:after{
    content: "";
    display: block;
    clear: both;
}
.rep_adm_btn .left{
    float: left;
}
.rep_adm_btn .left button{
    background: #474747;
    color: #fff;
    border: 0;
    width: 60px;
    height: 28px;
    font-size: 13px;
    padding: 5px;
    border-radius: 5px;
    display: block;
}
.rep_adm_btn .right{
    float: right;
}
.rep_adm_btn .right button{
    color: #fff;
    padding: 5px 15px;
    height: 28px;
    border: 0;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
}
.rep_adm_btn .right button.sel{
    background: #474747;
    margin-right: 6px;
}
.rep_adm_btn .right button.all{
    background: #FA7538;
}
@media (max-width: 1199px){
    .rep_src{
        display: block;
    }
    .rep_src .rep_search{
        margin-top: 10px;
    }
}
@media (max-width: 899px){
    #mailModal .modal{
        width: 90% !important;
        left: calc(50% - 45%) !important;
    }
    #mailModal .modal-body form div.mail-list ul {
        display: block !important;
        min-width: 300px;
    }
    #mailModal .modal-body form div.mail-list ul li {
        width: 100% !important;
    }
}
@media (max-width: 788px){
    .rep_src .rep_date{
        display: block;
        width: 100%;
    }
    .rep_src .rep_search {
        display: block;
    }
    .rep_src input[type="text"]{
        width: 100%;
    }
    .rep_table table thead th,
    .rep_table table td:last-child {
        font-size: 12px;
    }

    .rep_table table td {
        text-align: center !important;
        white-space: nowrap;
    }
    .rep_src .col:not(.d-flex) {
        display: block;
    }
    .rep_src .col .btn {
        margin-top: 10px;
    }

}
@media (max-width: 510px){
    .rep_src .cal,
    .rep_src .col {
        width: 100%;
        justify-content: space-between;
    }
    .rep_src input[type="month"] {
        width: 46%;
    }
    .rep_src .col .btn{
        left: 0;
    }
    .rep_src input[type="button"].btnR{
        left: 0;
    }
    .rep_src input[type="button"],
    .rep_src input[type="submit"]{
        width: 50%;
        margin: 0;
    }
    .rep_src .rep_search {
        width: 100%;
    }
    .rep_check span {
        display: none;
    }
    .rep_check button {
        margin-left: 0;
    }
}


/*****메일 모달*****/
#mailModal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgb(0, 0, 0, 0.5);
}
#mailModal .modal {
    position: absolute;
    left: calc(50% - 420px);
    top: 30px;
    background: #fff;
    width: 840px;
}
#mailModal .modal-content {}
#mailModal .modal-header{
    position: absolute;
    background: #343749;
    width: 100%;
    box-sizing: border-box;
    padding: 27px 20px 20px 40px;
}
#mailModal .modal-header span,
#mailModal .modal-header span:after{
    display: block;
    font-size: 0;
    width: 34px;
    background: #fff;
    height: 2px;
    transform: rotate(45deg);
    position: absolute;
    right: 20px;
    top: calc(50% - 3px);
    cursor: pointer;
}
#mailModal .modal-header span:after{
    content: "";
    transform: rotate(90deg);
    right: 0;
    top: 0;

}
#mailModal .modal-body{
    padding: 95px 0 101px;
}
#mailModal .modal-body form{
    height: 70vh;
    overflow-y: scroll;
    padding: 30px 40px 0 40px;
}
#mailModal .modal-body form label{
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
#mailModal .modal-body form input[type="text"],
#mailModal .modal-body form input[type="email"]{
    width: 100%;
    border: 1px solid #e3e3e3;
    color: #333;
    padding: 10px;
    height: 40px;
    margin-top: 10px;
    font-size: 14px;
}
#mailModal .modal-body form > div {
    margin-bottom: 30px;
}
#mailModal .modal-body form div.con-wrap,
#mailModal .modal-body form div.mail-list {
    border: 1px solid #e3e3e3;
    width: 100%;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: scroll;
}
#mailModal .modal-body form div.con-wrap > div{
    margin: 0 auto;
    width: 600px;
}
#mailModal .modal-body form div.con-wrap .mail-header{
    background: #ED6B30;
    padding: 64px 20px 40px 30px;
    position: relative;
}
#mailModal .modal-body form div.con-wrap .mail-header img {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 102px;
}
#mailModal .modal-body form div.con-wrap .mail-header .header_txt{
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    letter-spacing: -1px;
}
#mailModal .modal-body form div.con-wrap .mail-content{
    margin-top: 40px;
    padding: 0 30px;
}
#mailModal .modal-body form div.con-wrap .mail-content > p{
    font-size: 16px;
}
#mailModal .modal-body form div.con-wrap .mail-content > div.intro{
    background: #FDF0EA;
    border-radius: 10px;
    padding: 20px 30px;
    margin-top: 25px;
}
#mailModal .modal-body form div.con-wrap .mail-content > div.intro h4{
    font-size: 18px;
}
#mailModal .modal-body form div.con-wrap .mail-content > div,
#mailModal .modal-body form div.con-wrap .mail-content > div p.sub {
    margin-top: 20px;
}
#mailModal .modal-body form div.con-wrap .mail-content > div a {
    display: inline-block;
    color: #4794f3;
    font-weight: bold;
    text-decoration: underline !important;
}
#mailModal .modal-body form div.con-wrap .mail-content > div b{
    font-size: 18px;
    color: #333;
}
#mailModal .modal-body form div.con-wrap .mail-content > div.warning{
    font-size: 14px;
    box-sizing: border-box;
    position: relative;
    padding-left: 50px;
}
#mailModal .modal-body form div.con-wrap .mail-content > div.warning span{
    color: #ff0000;
    display: inline-block !important;
}
#mailModal .modal-body form div.con-wrap .mail-content > div.warning img {
    display: block;
    position: absolute;
    left: 0;
    top: calc(50% - 20px);
    width: 40px;
}
#mailModal .modal-body form div.con-wrap .mail-content > div h4{
    color: #111;
}
#mailModal .modal-body form div.con-wrap .mail-content > span.small-txt{
    margin-top: 30px;
    display: block;
    font-size: 14px;
}
#mailModal .modal-body form div.con-wrap .mail-footer{
    border-top: 1px solid #e3e3e3;
    margin-top: 30px;
    padding: 30px 25px 19px;
}
#mailModal .modal-body form div.con-wrap .mail-footer div p{
    font-size: 14px;
    color: #666;
}

#mailModal .modal-body form div.mail-list ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#mailModal .modal-body form div.mail-list ul li{
    width: calc(100% / 2);
}
#mailModal .modal-body form div.mail-list ul li div{
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    height: 34px;
}
#mailModal .modal-body form div.mail-list ul li div p.name{
    margin-right: 20px;
    width: 80px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#mailModal .modal-body form div.mail-list ul li div p.mailad{
    margin-right: 30px;
    width: 145px;
    word-wrap: break-word;
}
#mailModal .modal-body form div.mail-list ul li div span.del{
    background: #FF1F1F;
    color: #fff;
    border-radius: 3px;
    font-size: 11px;
    display: block;
    line-height: 20px;
    width: 40px;
    text-align: center;
}


#mailModal .modal-footer{
    position: absolute;
    bottom: 0;
    border-top: 1px solid #e3e3e3;
    width: 100%;
    padding: 27px 0 30px;
    box-sizing: border-box;
    background: #fff;
}
#mailModal .modal-footer .form-btn{
    display: flex;
    justify-content: center;
}
#mailModal .modal-footer .form-btn button{
    display: block;
    border: 0;
    background: #333;
    color: #fff;
    font-size: 14px;
    padding: 11px 47px;
    width: 120px;
    cursor: pointer;
}
#mailModal .modal-footer .form-btn button.send{
    margin-right: 10px;
    background: #ED6B30;
}
/*****검색창*****/
.not, .cus {  /** 검색창 **/
    text-align: right;
    margin-bottom: 20px;
}
.not .col, .cus .col{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.not select, .cus select{
    padding: 8px 4px;
    color: #fff;
    display: block;
    margin-right: 6px;
    background: #282F40;
    border: 0;
    border-bottom: 1px solid #d9d9d9 !important;
}
.not input[type="text"], .cus input[type="text"]{
    padding: 5.5px;
    display: block;
    border: 0;
    background: #282F40;
    border-bottom: 1px solid #d9d9d9 !important;
}
.not input[type="submit"], .cus input[type="submit"]{
    padding: 5.5px 16px;
    border: 1px solid #ed6b30;
    display: block;
    border-left: 0;
    background: #ed6b30;
    color: #fff;
    cursor: pointer;
}
.not input[type="button"], .cus input[type="button"]{
    padding: 5.5px 11px;
    display: block;
    border: 1px solid #d9d9d9;
    color: #636363;
    margin-left: 6px;
    cursor: pointer;
}

/*****문의 페이지*****/
.board_container h2 {
    border: 0;
    padding: 0;
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 0;
}
.customer select{
    width: 100px;
    height: 40px;
    border: 1px solid #dddddd;
    padding-left: 10px;
    border-radius: 5px;
}
.cus_table button.write_btn{
    padding: 10px 5px;
    width: 100px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 0;
    line-height: initial;
    color: #999;
    float: right;
    margin-top: 30px;
    cursor: pointer;
}
.cus_table button.write_btn:hover{
    border: 1px solid #fa7538;
    color: #fa7538;
}
.cus_table table div.mo{
    display: none;
}

/*****faq 페이지*****/
.faq_container, .faq_view_container{
    padding-top: 80px;
}
.faq_container h2{
    letter-spacing: -0.05em;
    position: relative;
    font-weight: 500;
}
.faq_view_container h2{
    font-size: 18px;
    font-weight: normal;
    color: #dddddd;
    margin-bottom: 30px;
}
.faq_container table{
    border-collapse: collapse;
    background: #282F40;
}
.faq_container table thead tr{
    background: #181D28;
    border-bottom: 1px solid #d9d9d9;
}

.faq_container table thead tr th{
    font-weight: 500;
    padding: 10px 0;
    color: #fff;
}

.faq_container table tbody tr{
    border-bottom: 1px solid #686d79;
}
.faq_container table tbody tr:hover{
    background: #2F384B;
}
.faq_container table tbody td{
    padding: 12px 0;
}
.faq_container table tbody td img{
    display: block;
    height: 15px;
    padding: 0 10px;
}
.faq_container table tbody td:first-child{
    text-align: center;
    color: #f7f7f7;
}
.faq_container table tbody td:last-child{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq_title{
    padding-left: 36px;
    font-size: 16px;
    font-weight: normal;
    position: relative;
    display: block;
    color: #fff;
}
.faq_title:before{
    content: "Q";
    color: #333;
    background: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    text-align: center;
    position: absolute;
    top: calc(50% - 10px);
    left: 0;
}
/*.faq_container h2:before{*/
/*	content:"";*/
/*	width: 200px;*/
/*	height: 2px;*/
/*	background: #101010;*/
/*	position: absolute;*/
/*	bottom: 0;*/
/*	left: 0;*/
/*}*/
/*.faq_board{*/
/*	cursor: pointer;*/
/*	background: #fff;*/
/*	border-radius: 8px;*/
/*	transition: 0.3s;*/
/*}*/
/*.faq_board:hover{*/
/*	background: #f7f7f7;*/
/*}*/
/*.faq_list{*/
/*	padding: 28px 16px;*/
/*	display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*}*/
/*.faq_list img{*/
/*	display: block;*/
/*    height: 100%;*/
/*}*/
.faq_view_title{
    position: relative;
    padding-left: 26px;
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}
.faq_view_title{
    font-size: 28px;
    padding-left: 40px;
    margin-top: 20px;
}
.faq_view_title:before{
    content: "Q.";
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
}
.faq_content{
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    padding: 50px 16px;
    min-height: 300px;
    letter-spacing: -0.05em;
}
.faq_content span{
    font-weight: 500;
    color: #fff;
}
.faq_content .faq_down{
    background: #282F40;
    display: block;
    padding: 20px;
    margin-bottom: 20px;
}
.faq_content .faq_down > div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 9px 0;
}
.faq_content .faq_down a{
    display: block;
    font-size: 14px;
}
.faq_content .faq_down img{
    display: block;
    width: 24px;
    margin-right: 10px;
}
/*****서브02카테고리메뉴*****/

.here{
    border: 1px solid #ED6B30 !important;
    background: #ED6B30 !important;
}
.here > a{
    color: #fff !important;
}
#tab{
    margin-top: 60px;
}
#tab ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 71.5%;
    margin: 0 auto;
}
#tab ul li{
    border: 1px solid #e3e3e3;
    border-radius: 50px;
    background: #fff;
}
#tab ul li:hover{
    border: 1px solid #ED6B30;
    background: #ED6B30;
}
#tab ul li:hover > a {
    color: #fff;
}
#tab ul li a{
    display: block;
    color: #333;
    line-height: 40px;
    font-size: 16px;
    letter-spacing: -0.05em;
    padding: 0 16px;
    white-space: nowrap;
}

/*****로그인 화면*****/
#login{
    background: url('../img/login_back.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
#login .login_box{
    max-width: 479px;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
    padding-bottom: 2%;
}

#login .login_box .login_top {
    text-align: center;
    padding-top: 10%;
    margin-bottom: 20px;
}
.login_top > img{
    margin: 0 auto 20px;
    display: block;
    width: 200px;
}
.login_top > p{
    font-size: 16px;
    color: #ffffff;
    letter-spacing: -0.05em;
}
.login_top > p span{
    font-family: 'Roboto';
    font-size: 24px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}
.login_input{
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    border: 1px solid #e3e3e3;
    padding: 50px 66px 70px;
    min-height: 538px;
    box-sizing: border-box;
}
.login_input .input{
    transition: 0.2s;
}

.login_input .input_box label{
    display: block;
    color: #666666;
    letter-spacing: -0.05em;
}

.login_input h1{
    font-family: 'Roboto';
    font-size: 30px;
    text-align: center;
    letter-spacing: -0.05em;
    margin-bottom: 30px;
    color: #333;
    line-height: 35px;
}
.login_input input[type="text"]{
    width: 100%;
    line-height: 40px;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    padding-left: 5px;
}
.login_input input[type="password"]{
    width: 100%;
    line-height: 40px;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    margin-top: 6px;
    padding-left: 5px;
}
.login_input .save_box{
    margin-top: 8px;
    position: relative;
}
.login_input .save_box input[type="checkbox"]{
    position: absolute;
    opacity: 0;
    cursor: pointer
}
.login_input .save_box input[type="checkbox"]:checked + .checkmark{
    background: #EC5C25;
    border-color: #EC5C25;
}
.login_input .save_box input[type="checkbox"]:checked + .checkmark:after{
    display: block;
}
.login_input .save_box label{
    font-size: 13px;
    padding-left: 32px;
    cursor: pointer;
    line-height: 1.5;
    color: #666;
}
.login_input .checkmark{
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.login_input .checkmark:after{
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 4px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.login_input button{
    margin-top: 20px;
    width: 100%;
    line-height: 40px;
    background: #EC5C25;
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}
/*****로그인페이지 하단*****/
.login_input .info_text{
    margin-top: 20px;
}
.login_input .info_text h6{
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
    color: #333;
}
.login_input .info_text p{
    font-size: 12px;
    color: #666;
    letter-spacing: -0.5px;
}
.login_input .notice_list{
    padding: 16px 20px;
    background: #f7f7f7;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    margin-top: 28px;
}
.login_input .notice_list > h1{
    font-size: 16px;
    text-align: left;
    font-family: 'NotoSansKr';
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
    line-height: normal;
}
.login_input .notice_list p{
    font-size: 13px;
}
.login_input .notice_list p a{
    color: #EC5C25;
}
.login_input .notice_list p a:first-child{
    margin-right: 37px;
}
/*
.login_input .notice_list > table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.login_input .notice_list > table td{
    padding: 5px 0;
    font-size: 14px;
}
.login_input .notice_list > table td:first-child:before{
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #333;
    border-radius: 50%;
    position: relative;
    top: -7px;
}
.login_input .notice_list > table td:nth-child(2){
    color: #dddddd;
}
.login_input .notice_list > table td a{
    display: inline-block;
    width: 230px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 10px;
    color: #333;
}
*/

/*****다운로드 버튼*****/
a.down,
a.dis-down{
    display: block;
    line-height: 20px;
    background: #FFC7AE;
    width: 60px;
    margin: 0 auto;
    color: #333333;
    border-radius: 5px;
    font-size: 11px;
}
a.down:hover{
    background: #ED6B30 !important;
}
a.dis-down{
    background: #dddddd;
    cursor: default;
}

/***** 보안점수 모달창*****/
.security_modal {
    display: none;
    position: fixed;
    max-width: 585px;
    width: 80%;
    height: auto;
    background: #f7f7f7;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    z-index: 9999;
    transform: translate(-50%, -50%);
}
.security_modal.onModal {
    display: block;
}
.security_modal .security_modal_content {
    padding: 20px 20px 10px;
    letter-spacing: -0.75px;
}
.security_modal .security_modal_content h4 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #333333;
}
.security_modal .security_modal_content h4 span {
    font-size: 22px;
    font-weight: bold;
}
.security_modal .security_modal_content h4 span.safety {
    color: #02ff24;
}
.security_modal .security_modal_content h4 span.weak {
    color: #ffcd0e;
}
.security_modal .security_modal_content h4 span.danger {
    color: #ff1b1b;
}
.security_modal .detail_content {}
.security_modal .detail_content .content {
    margin-bottom: 17px;
}
.security_modal .detail_content .content p.tit {
    font-weight: bold;
    color: #222222;
    font-size: 16px;
}
.security_modal .detail_content .content p {
    font-size: 15px;
    word-break: keep-all;
}

.security_modal .detail_content .content p > span.safety{
    color: #3EFF2E;
    font-weight: bold;
}
.security_modal .detail_content .content p > span.weak{
    color: #ffcd0e;
    font-weight: bold;
}
.security_modal .detail_content .content p > span.danger{
    color: #ff1b1b;
    font-weight: bold;
}
.security_modal .detail_content .content p img {
    max-width: 100%;
}
/*
.security_modal .detail_content .content p.dot {
    position: relative;
    padding-left: 20px;
}
.security_modal .detail_content .content p.dot:after {
    content: "";
    width: 3px;
    height: 3px;
    background: #333333;
    border-radius: 50%;
    position: absolute;
    left: 8px;
    top: 9px;
}*/

/*
.security_modal:after {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    border: 20px solid transparent;
    border-top-width: 0;
    border-bottom-color: #f7f7f7;
    transform: rotate(180deg);
    right: 5%;
}
*/

/*****브레드크럼*****/
.breadcrumb {
    position: absolute;
    top: 120px;
    left: 40px;
}
.breadcrumb ul {
    display: flex;
    align-items: center;
}
.breadcrumb ul li {
    color: #FFC7AE;
    font-size: 13px;
}

@media (max-width: 1199px){
    .customer{
        padding: 0 20px;
    }
    #tab{
        padding: 0 20px;
        /* overflow: scroll; */
        margin-top: 40px;
    }
    #tab ul{
        flex-wrap: wrap;
        width: 100%;
    }
    #tab ul li{
        width: 24%;
        margin-bottom: 10px;
        text-align: center;
        box-sizing: border-box;
        margin-right: 5px;
    }
    .faq_container, .faq_view_container{
        padding: 40px 20px;
    }
    .faq_list{
        padding: 28px 0;
    }
    .login_input .notice_list > table td:first-child{
        width: 100%;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        text-indent: -11px;
        padding-left: 10px;
    }
    .login_input .notice_list > table td:nth-child(2){
        display: none;
    }
}
@media (max-width: 1179px){
    #login{
        padding: 0;
    }
    #login .login_box{
        width: 100%;
        min-width: auto;
        height: 100vh;
        background-size: cover;
        padding: 0;
    }
    .login_input{
        max-height: none;
    }
    .login_top > p{
        font-size: 1.8vw;
    }
    .login_top > p span{
        font-size: 2.4vw;
    }
}
@media (max-width: 891px){
    #tab ul li a{
        font-size: 1.9vw;
    }
    .customer .represent > div p{
        font-size: 2vw;
    }
}
@media (max-width: 767px){
    #tab ul li a{
        font-size: 14px;
    }
    #login .login_box{
        flex-direction: column;
        width: 100%;
        max-width: none;
    }
    .login_top > img{
        margin: 0 auto 20px;
    }
    .login_top > p{
        text-align: center;
        font-size: 14px;
        padding-bottom: 30px;
    }
    .login_top > p span{
        font-size: 18px;
    }
    .login_input h1 {
        font-size: 30px;
    }
    .login_input {
        border-radius: 0;
        position: absolute;
        top: 220px;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .customer{
        margin-top: 40px;
        flex-direction: column;
    }
    .customer .represent{
        width: 100%;
        min-height: 50px;
        border-radius: 10px 10px 0 0;
    }
    .customer .represent > div{
        padding: 20px;
    }
    .customer .represent > div img{
        width: 22vw;
        min-width: 120px;
    }
    .customer .represent > div p{
        font-size: 16px;
    }
    .customer .represent > div p span{
        font-weight: normal;
        font-size: 14px;
    }
    .customer .inquiry{
        width: 100%;
        border-radius: 0 0 10px 10px;
        border: 1px solid #dddddd;
    }
    .customer .inquiry form > div input,
    .customer .inquiry form > div select,
    .customer .inquiry form > div textarea{
        width: 100%;
    }
    .customer .inquiry form button{
        width: 100%;
    }
    .faq_title, .faq_view_title{
        font-size: 16px;
        padding-left: 25px;
    }
    .faq_container table col:first-child,
    .faq_container table thead th:first-child,
    .faq_container table tbody td:first-child{
        display: none;
    }
    .faq_container table tbody td{
        padding: 12px;
    }
    .faq_container h2,
    .board_container h2{
        margin-bottom: 20px;
    }
    .faq_title{
        padding-left: 30px;
    }
    .not input[type="text"],.cus input[type="text"]{
        width: 80%;
    }
    .not select, .cus select{
        width: 40%;
    }

}
@media (max-width: 538px){
    .login_input{
        padding: 50px 20px 70px;
    }

    #tab ul li{
        width: 48%;
    }
}
@media (max-width: 459px){
    .faq{
        padding: 20px;
    }
    .faq_tit{
        font-size: 4vw;
    }
    .faq_text{
        font-size: 3.8vw;
    }
    .customer .inquiry form{
        padding: 30px 20px;
    }
    .faq_title{
        font-size: 14px;
    }
}
@media (max-width: 360px){
    .faq_container{
        padding: 20px;
    }
    /*.main_cht,*/
    /*.pro_table,*/
    /*.not_table,*/
    /*.rep_table,*/
    /*.view_table,*/
    /*.cus_table,*/
    /*.self_table{*/
    /*	padding: 20px;*/
    /*}*/
}

/*****푸터*****/
footer{
    background-color: transparent;
    border-top: 1px solid #5d5e67;
    margin-top: 100px;
}
#footer{

    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 0 25px;
}
#ft_logo{}
#ft_logo a{}
#ft_logo a img{}
footer div.ft_txt{
    color: #999999;
    font-size: 13px;
    letter-spacing: -0.05em;
    margin-top: 20px;
}
footer div.ft_txt ul{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;

}
footer div.ft_txt ul li{
    margin-right: 10px;
}
footer p.copy{}

@media (max-width: 1199px){
    footer #footer{
        padding: 30px 20px 25px;
    }
}