@charset "UTF-8";
@import url('./base.css');
/**************************************************/
/* ================================= base */
*{ 
    font-weight: 400; color: #000; font-size: 14px;   
}
input:not( [type="checkbox"], [type="radio"], [type="range"] ), select{
    height: 40px; padding: 0 20px; border: 1px solid #A7A7A7; padding-right: 30px
}

/**************************************************/
/* ================================= layout */
/* === popup === */
.popup{
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center;
    width: 100%; height: 100vh; padding: 0 8px; margin: 0 auto;
    background: #56565699; backdrop-filter: blur(1px);
    opacity: 0; visibility: collapse;
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
    -webkit-transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
    -moz-transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
    -ms-transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
    -o-transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
}
.popup.active{ opacity: 1; visibility: visible; }

.wrap_pop{ 
    position: relative;
    width: 100%; max-width: 414px; max-height: 80vh; padding: 0 18px 24px; margin: 0 auto;
    background: #FFF; overflow: hidden auto;
}

.wrap_pop{ display: none;}
.wrap_pop.active{ display: block;}

.wrap_pop h3{ 
    position: relative; left: -18px;
    width: calc(100% + 36px); height: 56px; margin-bottom: 14px; border-bottom: 1px solid rgba(51, 51, 51, 0.33);
    line-height: 57px; font-size: 20px; font-weight: 600; text-align: center;
}

.wrap_pop .btn_close{
    position: absolute; z-index: 10; top: 0; right: 0; width: 55px; height: 55px; 
    background: url(/img/common/ico_close.svg)#fff no-repeat center/ 28%;   
}
.wrap_pop .btn_submit{
    display: block; min-width: 94px; height: 34px; padding: 0 16px; margin: 10px 0 0 auto;   
    box-shadow: 0px 4px 4px 0px rgba(184, 184, 184, 0.25) inset;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    font-weight: 500;
}

/* curd */
.wrap_curd{
    width: calc( 100% - 240px);
}

.wrap_curd .curd{
    position: relative;
    width: 580px !important;
    margin: 0 auto;
    border: 1px solid var(--primary);
    border-radius: 20px;
    padding-bottom: 10px;
}

.wrap_curd h3{ 
     height: 56px; margin-bottom: 14px; border-bottom: 1px solid var(--primary);
    line-height: 57px; font-size: 20px; font-weight: 600; text-align: center;
}

.wrap_curd .wrap_table{
    padding: 10px;
}

.wrap_table button[disabled=""]{
    background-color:lightgray;
}

.wrap_curd .btn_close{
    position: absolute; z-index: 10; top: 0; right: 0; width: 55px; height: 55px; 
    background: url(/img/common/ico_close.svg)#fff no-repeat center/ 28%;   
}

.wrap_curd table{
    border-spacing: 0 8px; border-collapse: separate;
}

.wrap_curd th{
background: #333F50;
font-weight: 500; color: #fff;
border-radius: 10px;
}
.wrap_curd table td { padding-left: 8px; border: 0; text-align: left;}

.wrap_curd select{width: calc(100% - 10px); margin-left: 10px; border-radius: 10px;}
.wrap_curd select option{font-size:18px}
.wrap_curd  input:not( [type="checkbox"], [type="radio"], [type="range"] ){width: calc(100% - 10px); margin-left: 10px; border-radius: 10px;}
.wrap_curd input[type="file"]{padding: 7px; background-color: #fff;}
.wrap_curd input[type="file"]::-webkit-file-upload-button{ padding:2px 30px; background-color: #D9D9D9; border-radius: 10px; border: 0;}
.wrap_curd :is(.landing,.reply,.user,.status,.intergrate){display: flex; justify-content: flex-start; align-items: center; gap: 0 30px; margin-left: 14px;}
.wrap_curd :is(.landing,.reply,.user,.status,.intergrate) label{display: flex;}
.wrap_curd :is(.landing,.reply,.user,.status,.intergrate) label input{margin-right:5px;}
.wrap_curd textarea{width: 100%; border-radius: 10px; margin-top: 10px;}
.wrap_curd .btn_submit{ width: 100%; height: 50px; border-radius: 10px; background: var(--primary); color: #fff; margin-top: 10px;} 

.wrap_curd .survey td{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.wrap_curd .survey td img,.wrap_curd .survey_sub td img{
    cursor: pointer;
    width: 20px;
}

.wrap_curd .survey input:not( [type="checkbox"], [type="radio"], [type="range"] ){
    margin: 0;
    width: calc(100% - 50px);
}
.wrap_curd .survey_sub td{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0 10px;
    width: 375px;
    margin-left: auto;
}

.wrap_curd .survey_sub th{
    position: relative;
    left: 50px;
}

.wrap_curd .survey_sub input:not( [type="checkbox"], [type="radio"], [type="range"] ){
    width: calc(100% - 100px);
    padding: 0 10px;
    margin: 0;
}


/* mediaSelect modal */

td {
    position: relative;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px 0;
    background-color: #fff;
    border-radius: 10px;
}


.modal-content  ul{
    margin-top: 10px;
}

.modal-content  ul li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding: 10px 20px;
    cursor: pointer;
}

.modal-content  ul li:hover{
    background-color: #737373;
    color: #fff;
}

.modal-content  ul li button{
    width: 60px;
    height: 25px;
    border-radius: 10px;
    background: #C91416;
    color: #fff;
}

.modal-content > div{
    display: flex;
    align-items: center;
    gap: 0 10px;
    padding: 10px;
    margin-top: 10px;
}

.modal-content > div button{
    width:80px; height:30px; background-color:var(--primary); 
    border-radius: 5px;
    color:#fff;
}

.modal-content > div input{
    border-radius: 10px;
}

.modal-content .media-close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 30px;
    cursor: pointer;
}

/* swal2 */

.swal2-styled.swal2-confirm{
    background-color: var(--primary) !important; 
}
.swal2-styled.swal2-confirm:focus{
    box-shadow: none;
}

/* === header === */
header{ position: fixed; top: 0; left: 0; width: 100%; max-width: 1920px; height: 80px; background: #333f50; padding-right: 20px; z-index: 999;}
header .flexbox{display: flex; justify-content: space-between; align-items: center; height: 80px; padding-left: 250px;} 
header .flexbox button img{ width: 35px; height: 35px;} 
header .flexbox a{text-align: center;}
header .flexbox a img{width: 80%;}
header .flexbox .flexbox > p,header .flexbox .flexbox > a {font-size: 16px; color: #fff;
}
header .flexbox .flexbox > p{margin-right: 15px;}

/* gnb */
.gnb{
    position: fixed; top: 0; left: 0;
    width: 240px; height: 100%;
    background: var(--primary);
}

.gnb > a, .gnb summary{ display: flex; align-items: center; width: 100%; height: 70px; padding: 0 10px 0 40px; background: var(--primary); font-size: 18px; color: #fff;}

.gnb > a:nth-of-type(1){
    padding: 0;
    justify-content: center;
    height: 80px;
}

.gnb > a:nth-of-type(1) img{
    width: 80%;
}

.gnb summary:after{ margin-left: auto; margin-right: 8px; content: '▼'; font-size: 10px; }
.gnb details[open] summary:after{ content: '▲';}
.gnb summary:hover{ filter: brightness(95%); -webkit-filter: brightness(95%); }
.gnb details div{ background: linear-gradient(90deg, #333 0%, #000 100%); }
.gnb details div a{ width: 100%; padding: 18px 10px 18px 52px; color: #FFF; font-size: 13px; }
.gnb details div a:hover{ color: var(--primary);}

/**************************************************/
/* === main === */
main{ width: 1920px; padding-left: 240px; margin-top: 80px; background-color: #fff;}

/* --- text */
main h2{ 
    width: 100%; height: 55px; padding-left: 20px; background: #E6E6E6;
    font-size: 25px; font-weight: 700; line-height: 55px;  color: #444;
}

/* --- wrap */
.wrap_contents{ width: 100%; min-height: 100%; padding: 20px 70px; }

.wrap_td{ display: flex; align-items: center; justify-content: center; gap: 6px 4px; width: 100%; height: 100%; }

/* --- box */
/* bx_paginate */
.bx_paginate{
    display: flex; align-items: center; justify-content: center; width: 100%; margin-top: auto;
}
.bx_paginate .wrap{
    display: flex; align-items: center; justify-content: center; gap: 0 5px;
    padding: 5px 10px;
    background: #FFF;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.bx_paginate button{
    width: 20px; height: 20px; margin: 0 2.5px;
    background-color: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    color: #737373; font-size: 14px; font-weight: 400;
}
.bx_paginate button.active{ background-color: #262626; color: #fff; }

.bx_paginate button:is([class*="btn_"]){
    background: url(/img/common/ico_paginatestep.png) no-repeat center top 48%/35%; background-size: 30%;
}
.bx_paginate .btn_next{ transform: scaleX(-1); -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); }

/* bx_details */
.bx_details{ position: relative;}
.bx_details div{
    position: absolute; top: 44px; right: 0; z-index: 10;
    min-width: 210px;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.10);
    border: 1px solid #eee;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    overflow: hidden;
}
.bx_details div > *{ width: 100%; height: 44px; padding: 0 18px; background-color: #fff; text-align: left; }
.bx_details div > *:nth-of-type(n+2){ border-top: 1px solid #eee;}

/* bx_btnTop */
.bx_btnTop{ display: flex; align-items: center; justify-content: flex-end; gap: 6px 12px; width: 100%; padding-bottom: 14px; }
.bx_btnTop > *{ 
    display: flex; align-items: center; justify-content: center; 
    min-width: 80px; height: 38px; 
    border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; 
    font-weight: 600;
}

/* --- table */
/* tb_main */
.tb_main{ border-bottom: 1px solid rgba(115, 115, 115, 0.33); }
.tb_main tr > *{  border-top: 1px solid rgba(115, 115, 115, 0.33); text-align: center; }
.tb_main th{ height: 40px; background: #EDEDED; }
.tb_main td{ height: 60px; padding: 0 12px; }
.tb_main .btn{
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 56px; height: 36px; padding: 0 12px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   text-align: center;
}

.tb_main .btn.active{ border: 2px solid var(--point); background-color: #fff; color: var(--point); font-weight: 700; box-shadow: 0 0 3px 3px #0000001a;}
.tb_main .btn:hover{ filter: brightness(95%); -webkit-filter: brightness(95%); }

.tb_main .tr_more:not(.active){ display: none; }
.tb_main .tr_more .wrap_td{ justify-content: space-around; padding: 12px 0; }
.tb_main .tr_more textarea{ width: 80%; height: 96px; }


#selectedBranchContainer{
    white-space: normal;
    line-height: 23px;
}
/**************************************************/
/* ================================= responsive */

@media screen and (max-width: 1024px){
    /* html, body{ zoom: 1;} */

    /* .gnb, main{ min-height: calc(100vh - 86px);} */
    /* .wrap_contents{ min-height: calc(100vh - 86px - 60px);} */
}


/* 이벤트 관리 - 수정 */
.delete_top, .delete_bottom {
	position:absolute;
	right:5%;
	top:50%;
	transform:translateY(-50%);
	padding:5px;
}