.flex-box { display: flex; display: -ms-flexbox; }
/*.inner {  position: relative; }*/
.c_inner { padding: 0 20px; }
.btn1 { background-color: #01b7cf; border: 1px solid #01b7cf; font-size: 13px; font-weight: 500; display: block; width: 100%; padding: 10px 0; }
.btn2 { background-color: #029aee; border: 1px solid #029aee; font-size: 13px; font-weight: 500; display: block; width: 100%; padding: 10px 0; }
.red_btn_border { background-color: #c22d21; border: 1px solid #c22d21; font-size: 13px; font-weight: 500; display: block; width: 100%; padding: 10px 0; }
#intro { position: relative; width: 100%; height: 100vh; }
#intro img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hidden { overflow: hidden; }
.r_status { background-color: #01b7cf; border: 1px solid #01b7cf; color: #fff; }
.c_status { background-color: #029aee; border: 1px solid #029aee; color: #fff; }
.sb_txt { color: #01b7cf; }
.b_txt { color: #029aee; }
.red_txt { color: #ff1500; }
.blue_btn { background-color: #009bf2; }
.green_btn { background-color: #01b7cf; }
.red_btn { background-color: #ff4536; }

#Header .top_inner { background-color: #009bf2; width: 100%; height: 55px; position: absolute; top: 0; left: 0; z-index: 100; }
#Header .top_inner .status_list { width: 61%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); justify-content: center; }
#Header .top_inner .status_list li:not(:last-of-type) { margin-right: 25px; }
#Header .top_inner .status_list li a { color: #fff; font-size: 15px; font-weight: 500; }
#Header .top_inner .alarm { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 20px; }
#Header .top_inner .logo { position: absolute; top: 0px; left: 0px;}
#Header .top_inner .logo img { height: 55px}

#Header .menu_btn { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); padding: 0; width: 25px; cursor: pointer; z-index: 102; }
#Header .close_nav { width: 25px; cursor: pointer; }
#Header .menu-btn .line { padding: 0; width: 25px; background: #fff; height: 2px; margin: 5px 0; transition: all 700ms cubic-bezier(.9, 0, .33, 1); border-radius: 5px; }
#Header .menu-btn .line.line--1 { width: 25px; transform: rotate(0) translateY(0); }
#Header .menu-btn .line.line--1.line-cross { width: 25px; transform: rotate(45deg) translateY(10px); background: rgba(0,0,0,0.6); }
#Header .menu-btn .line.line--2 { transform: translateX(0); }
#Header .menu-btn .line.line--2.line-fade-out { transform: translate(25px); opacity: 0; }
#Header .menu-btn .line.line--3 { transform: rotate(0) translateY(0); }
#Header .menu-btn .line.line--3.line-cross { width: 25px; transform: rotate(-45deg) translateY(-10px); background: rgba(0,0,0,0.6); }

#Header nav { width: 0px; overflow: hidden; position: absolute; transform: translateX(50vw); height: 100vh; transition: all 800ms cubic-bezier(.8, 0, .33, 1); border-radius: 0% 0% 100% 50%; left: 100vw; z-index: 999; opacity: 0; }
#Header nav.nav-open { transform: translate(0px, 0px); left: 0px; border-radius: 0% 0% 0% 0%; background: rgba(255, 255, 255, 1); opacity: 1; width:100vw;}
#Header nav .nav_top { padding: 13px 20px; justify-content: space-between; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
#Header nav .nav_top .setting_list { align-items: center; }
#Header nav .nav_top .setting_list li:not(:last-of-type) { margin-right: 25px; }
#Header nav .nav_top .setting_list li a { display: block; }
#Header nav .nav_top .setting_list li:nth-child(1) a { width: 20px; }
#Header nav .nav_top .setting_list li:nth-child(2) a { width: 22px; }
#Header nav .nav_inner { padding: 30px 20px; }
#Header nav .my_menu { justify-content: space-between; margin-bottom: 25px; }
#Header nav .my_menu .left { align-items: center; }
#Header nav .my_menu .left span { display: block; }
#Header nav .my_menu .left .name { font-size: 20px; margin-right: 7px; }
#Header nav .my_menu .left .grade { width: 75px; padding: 3px 0; font-size: 13px; font-weight: 600; text-align: center; color: #01b7cf; background-color: #fff; border: 1px solid #01b7cf; border-radius: 20px; }
#Header nav .my_menu .my_menu_list li { position: relative; }
#Header nav .my_menu .my_menu_list li:not(:last-of-type) { margin-right:  13px; }
#Header nav .my_menu .my_menu_list li:not(:last-of-type)::after { content: ''; display: block; width: 1px; height: 15px; background: #e5e5e5; position: absolute; top: 50%; right: -7px; transform: translateY(-50%); }
#Header nav .my_menu .my_menu_list li a { font-size: 13px; }
#Header nav .nav_btn { margin-bottom: 20px; padding: 10px 15px; background-color: #01b7cf; width: 100%; border-radius: 10px; align-items: center; justify-content: space-between; }
#Header nav .nav_btn span { font-size: 20px; color: #fff; font-weight: 600; }
#Header nav .nav_btn .left img { width: 25px; margin-right: 10px; }
#Header nav .nav_links li:not(:last-of-type) { border-bottom: 1px solid #efefef; }
#Header nav .nav_links li a { font-size: 17px; font-weight: 500; display: block; padding: 10px 5px; }
#Header nav .div_footer { width: 100%; position: absolute; bottom: 0; padding: 50px 0; background-color: #f1f1f1; }

#Header nav .nav_inner .collector_my { padding-bottom: 15px; margin-bottom: 5px; border-bottom: 1px solid #71D7E3; }






/* TODO : */
/*.new { position: relative; }*/
/*.new::after { content: ''; display: block; width: 13px; height: 13px; background: url('../img/ico/new_ico.png') no-repeat center / cover; position: absolute;  top: 0%; right: -15px; animation: flash 2s infinite; }*/

@keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

/* 모달팝업 */
.modal_layer { padding: 0 20px; position:fixed; top:0; left:0; z-index:101; width:100%; height:100%; overflow-x:hidden; overflow-y:auto; outline:0; display: none; }
.modal_layer.active { display: block; }
.modal_layer.active::after { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); display: block; content: ''; width: 100%; height: 100%; z-index: 100; }
.modal_layer .modal { max-height: 83vh; position: absolute; z-index: 101; width: calc(100% - 40px); border-radius: 10px 10px 0 0; left: 50%; transform: translateX(-50%); bottom: 0; overflow-y: auto; }
.modal_layer.active .modal { animation: animatebottom 0.25s; }
.modal_layer .modal .cont_top { padding: 0; border: 0; margin-bottom: 20px; }
.modal_layer .modal .modal_cont { display: none; }
.modal_layer .modal .modal_cont .modal_text { font-size: 13px; margin-bottom: 20px; letter-spacing: -0.05em; line-height: 1.4; }
.modal_layer .modal .modal_cont .form_wrap { margin-bottom: 18px; }
.modal_layer .modal .modal_cont .form_wrap .input_wrap { margin-bottom: 10px; }
.modal_layer .modal .modal_cont .form_wrap .input_wrap .btn { padding: 10px 6px; font-size: 13px; font-weight: 500; background-color: #029aee; }
.modal_layer .modal .modal_cont .form_wrap .input_wrap input { width: calc(100% - 98px); margin-right: 10px; }
.modal_layer .modal .modal_cont .btn_wrap .btn { font-size: 13px; font-weight: 500; letter-spacing: -0.05em; }

.modal_layer .modal .modal_cont.modal_photo .form_wrap { padding: 17px 15px 10px 15px; }
.modal_layer .modal .modal_cont.modal_photo .photo_btn_wrap { margin-bottom: 20px; }
.modal_layer .modal .modal_cont.modal_photo .photo_btn_wrap .photo_btn { width: 48%; font-size: 13px; color: #999999; font-weight: 500; letter-spacing: -0.05em; justify-content: space-between;  padding: 10px; border: 1px solid #dddddd; border-radius: 5px; }
.modal_layer .modal .modal_cont.modal_photo .photo_btn_wrap .photo_btn:not(:last-child) { margin-right: 4%; }
.modal_layer .modal .modal_cont.modal_photo .photo_btn_wrap .photo_btn img { width: 25px; }
.modal_layer .modal .modal_cont.modal_photo .form_bt p { font-size:15px; }

.modal_layer .modal .modal_cont.modal_esg .form_wrap { padding: 0; }
.modal_layer .modal .modal_cont.modal_esg .form_wrap .input_wrap input { width: calc( 100% - 85px ); }
.modal_layer .modal .modal_cont.modal_esg .form_wrap .input_wrap .btn { width: 75px; }
.modal_layer .modal .modal_cont.modal_esg .search_wrap h3 { font-size: 15px; padding: 12px 0; margin-bottom: 15px; font-weight: 600; border-bottom: 1px solid #dddddd; }
.modal_layer .modal .modal_cont.modal_esg .search_wrap { margin-bottom: 25px; }
.modal_layer .modal .modal_cont.modal_esg .search_wrap .search_result p { justify-content: space-between; align-items: center; }
.modal_layer .modal .modal_cont.modal_esg .search_wrap .search_result p:not(:last-of-type){ margin-bottom: 5px; }
.modal_layer .modal .modal_cont.modal_esg .search_wrap .search_result .title { font-size: 13px; margin-right: 10px; }
.modal_layer .modal .modal_cont.modal_esg .search_wrap .search_result .btn { font-size: 13px; width: 80px; padding: 7px; background-color: #029aee; display: block; }


@keyframes animatebottom {
    0% {
        bottom:-100%;
        opacity:0;
    }
    100% {
        bottom:0;
        opacity:1;
    }
}


.popup_layer { padding: 0 20px; position:fixed; top:0; left:0; z-index:1050; width:100%; height:100%; overflow-x:hidden; overflow-y:auto; outline:0; background-color: rgba(0, 0, 0, .5); display: none; }
.popup_layer .popup { opacity: 1; transform: scale(1); position: absolute; width: calc(100% - 40px); top: 80px; }
.popup_layer .popup.active { animation: pop 0.25s; }
.popup_layer .popup .cont_top { padding: 0; border: 0; margin-bottom: 20px; }
.popup_layer .popup .cont_top h1 { color: #01b7cf; }
.popup_layer .popup .cont_top .cont_title2 { font-size: 13px; color: #222; font-weight: 400; margin-top: 13px; }
.popup_layer .popup .pop_list { padding-bottom: 35px; border-bottom: 1px solid #dddddd; }
.popup_layer .popup .pop_list .wrap:not(:last-of-type) { margin-bottom: 10px; }
.popup_layer .popup .pop_list .wrap .title { width: 70px; margin-right: 15px; font-size: 15px; font-weight: 600; }
.popup_layer .popup .pop_list .wrap .txt { width: calc( 100% - 85px ); font-size: 15px; letter-spacing: -0.05em; }
.popup_layer .popup .b_img { height: 110px; max-width: 190px; margin: 0 auto 20px auto; }
.popup_layer .popup .b_table { width: 100%; margin-top: 20px; margin-bottom: -20px; }
.popup_layer .popup .b_table thead tr th { background-color: #f1f1f1; font-size: 15px; font-weight: 500; }
.popup_layer .popup .b_table thead tr th,
.popup_layer .popup .b_table tbody tr td { padding: 5px 0; text-align: center; }


.popup_layer2 .txt_box .title { font-size: 20px; margin-bottom: 15px; text-align: center; font-weight: 600; }
.popup_layer2 .txt_box .txt { font-size: 14px; text-align: center; }
.popup_layer2 .txt_box .btn { margin-top: 25px; padding: 10px 0; }

.popup_ok .popup .pop_list { border-bottom: 0; }
.popup_ok .txt2 { font-size: 13px; letter-spacing: -0.05em; }

@keyframes pop {
    0% {
        transform: scale(0.5);
        opacity:0;
    }
    100% {
        transform: scale(1);
        opacity:1;
    }
}

.recall_pop .pop_list { margin-bottom: 30px; }
.recall_pop .txt_box .title { font-size: 17px; }
.recall_pop .txt_box .txt { font-size: 12px; margin-top: 15px; }


.common-overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #222;
    z-index: 9000;
    opacity: 60%
}

.common-overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}