/* css 초기화 */ 
html, body, div, span, footer, header, nav, section {
  margin:0;
  padding:0;
  border:0;
  user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

}

body{
  background-color:var(--bg-body);
  color:var(--txt-color);
  padding: 0 !important;
}

html, body {
  height:100%;
  font-family:var(--font-bold);
}

article, aside, footer, header, nav, section {
  display:block;
}
ul li {
  list-style:none;
}
a {
  margin:0;
  padding:0;
  text-decoration:none;
  vertical-align:baseline;
  color:var(--a-color);
}

input:focus, input:active {
  outline:none!important;
  box-shadow:none;
}
div.card {
  border-radius:15px;
  box-sizing:border-box;
  overflow:hidden;
  background-color: var(--color-bg-base);
  border: 1px solid var(--border-card);	
}

/* --------------------col width 조절 속성 시작 */
.flex-g0{
  flex-grow : 0;   
}

.flex0{
  flex-grow : 1;   
}
.flex1 {
  flex-grow : 1;
  flex-basis : 80px;  
}

.flex1a{
  flex-grow : 1;
  flex-basis : 120px;
}  

.flex1b{
  flex-grow : 1;
  flex-basis : 200px;
} 

.flex1c{
  flex-grow : 1;
  flex-basis : 300px;
} 

.flex1d{
  flex-grow : 1;
  flex-basis : 400px;
} 

.flex2-0 {
  flex-grow : 2;
  flex-basis : auto;
}

.flex2 {
  flex-grow : 2;
  flex-basis : 150px;
}

.flex2a{
  flex-grow : 2;
  flex-basis : 200px;
}  

.flex2b{
  flex-grow : 2;
  flex-basis : 300px;
}            
.flex3 {
  flex-grow : 3;
  flex-basis : 200px;     
} 

.flex3a {
  flex-grow : 3;
  flex-basis : 250px;     
} 

.flex4 {
  flex-grow : 4;
  flex-basis : 120px;    
}   

.flex5 {
  flex-grow : 5;
  flex-basis : 150px;    
}

.flex6 {
  flex-grow : 6;
  flex-basis : 180px;     
}

.flex7{
  flex-grow : 7;
  flex-basis : 210px;
}

.flex8 {
  flex-grow : 8;
  flex-basis : 240px;   
}
.flex9 {
  flex-grow : 9;
  flex-basis : 270px;    
}
.flex10 {
  flex-grow : 10;
  flex-basis : 300px;      
}
.flex12 {
  flex-grow : 12;
  flex-basis : 500px;      
}

.d-flex{
  display:flex ;
}

.flex-column {
  display: flex ; 
  flex-direction: column ;      
}

.flex-row {
  display: flex ; 
  flex-direction: row ;   
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-nowrap{
  flex-wrap: nowrap !important;
}

.flex-align-left{
  justify-content: flex-start ;
}

.flex-align-right{
  justify-content: flex-end ;
}

.flex-align-center{
  justify-content: center;
  align-items: center;
}

.flex-align-between{
  justify-content: space-between;
}

.flex-align-items-center{
    align-items: center;
}

.flexbox-item{
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.group{
  display: flex ;
}

.block-group{
  display: block;
}


.hide, .d-none{
  display: none !important;
}

.open_menu{
  margin: auto 0.5rem !important;  
}


.w-100{
  width: 100% !important;
}


.menu > div {
  font-size:16px;
  font-family:var(--font-bold);
  border-bottom:1px solid var(--bg-menu1-bottom);
  color:var(--bg-white);
  cursor:pointer;
}
.menu > div a {
  width:100%;
  display:inline-block;
  position:relative;
  color:var(--bg-white);
  text-decoration:none;
  margin:0;
  padding:0;
}

.menu > div a.nav-link{

  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.menu > div a:hover, .menu > div a.active {
  color:var(--bg-menu-active);
}    
.nav-link.active{
color:var(--bg-menu-active);
}
.menu-item a.on span{
color:var(--bg-menu-active);
}

.menu > div.menu-item.menu-accordion > a:after {
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\f0da";
  font-style:normal;
  display:inline-block;
  font-style:normal;
  font-variant:normal;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-align:center;
  background:0 0;
  position:absolute;
  right:25px;
  top:23px;
}
.menu > div.menu-item.active > a:after, .menu > div.menu-item:hover > a:after {
  content:"\f0d7" !important;
}
.nav-link.active::after{
content:"\f0d7" !important;
}

.menu > div.menu-item:not(.active) .menu-sub-accordion{
  display:none;
}
.menu > div.menu-item:not(.active).on .menu-sub-accordion{
  display:block;
}   
.menu > div i {
  vertical-align:-1px;
}
.menu-sub {
  background-color:var(--bg-menu2);
  padding:10px 0 15px;;
}
.menu-sub > div {
  padding:10px 45px;
}
.menu-sub > div.active {
  color:var(--yellow);;
}

.menu-sub > div a {
  width:100%;
  display:inline-block;
  position:relative;
  color:var(--bg-white);
  text-decoration:none;
  margin:0;
  padding:0;
}

.menu-sub .menu-sub2 {
  padding:5px 0 0 15px;
  font-size:13px;
  font-weight:600;
}   

.title-group{
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin-bottom: 1rem !important;
  margin-top: 0.5rem !important;
  flex-wrap: nowrap !important;
  display: flex !important;
}

.row-group{
  display: flex !important;
  margin-top: 1.5rem !important;
}


table.dataTable {
  clear: both;
  /* margin-top: 15px !important; */
  margin-bottom: 15px !important;
  max-width: none !important;
  border-collapse: collapse !important;
  border-spacing: 0;
  width: 100% !important;
}

.icon_menu i {
  font-size: 18px;
  color: var(--bg-modal);
}

.icon_menu > div button span {
  display: inline-block;
  width: 18px;
  height: 18px;
  font-size: 12px;
  color: #fff;
  background-color: #e90607;
  line-height: 18px;
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
}


.top_head2 .menu_btn_group{
  justify-content: space-between !important;
}

.top_head2 .menu_btn{
  justify-content: flex-end ;
}

.top_head2 .menu_btn button{
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.top_head2 .menu_btn button:nth-child(2){
margin-right: 0.5rem !important;
margin-left: 0.5rem !important;
}


.row-group1{  
  gap: 1.5rem !important;
}

.row-group2{
  gap: 0.5rem !important;
}

.container{
  max-width:100%;
  padding: 0 !important;
}

.gender button{
  width:100px;
}

.gender button:nth-child(2){
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}


.noti_label{
  font-size : 0.7rem;
  color:var(--txtch-color4);
}



/*toast 관련 css*/
.toast{
    display: flex;
    flex-flow: column;
}

@media (min-width:768px) {


  .header {
    position: fixed;
    display: flex ;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 65px;
    padding: 0.7rem 0;  
    border-bottom:1px solid var(--bg-border);
    box-sizing:border-box;
    background-color: var(--bg-body);
  }
  
  .header .header-utility {
    padding-right: 1.5rem ;
    padding-left: 1.5rem ;
    align-items: stretch ;
    justify-content: space-around ;
    height: auto ;
    width:100%;      
  } 
  
  .head_search{
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  
  }


  .pd-none {
    display: none !important;
  }  

  .title-group{
    flex-direction: column !important;
  }
  .row-group{
    margin-bottom: 1.5rem !important;  
  }
  .m_none.row-group{
  margin-bottom:0 !important;  
  
  }

   /* header */

  .header .top-logo{
      width:290px;
  }
  .header .top-logo a{
    margin-top: 7.3px;
    display: inline-block;
    font-size: 0;
  }

  .head_search .input-group {
    border-radius:20px;
    height:35px;
    border:1px solid var(--bg-border);
    overflow:hidden;
	margin-top: 3.31px
  }
  .head_search .input-group input[type="search"] {
      width: calc(100% - 34px);
	  max-width: 250px;
      border:0;
      padding:0 16px;
  }
  .head_search .input-group input[type="search"]::-webkit-input-placeholder {
      font-family:var(--font-regluar);
      color:var(--head-sc-color);
      font-size:16px;
  }
  .head_search .input-group button {
      width:35px;
      border:0;
      background-color:var(--bg-modal);
  padding-top: 5px;
  }
  .head_search .input-group button i {
      color:var(--bg-white);
      font-size:14px;
      vertical-align:5px;
  }

  .nav-user {
      font-size:14px;
      line-height:35px;
      height:35px;
      padding:0;
      color:var(--bg-basefc);
	  margin-top: 3.31px;
  }
  .nav-user li:nth-child(2) {
      margin:0 20px 0 8px;
  }
  .nav-user li:nth-child(3) button {
      width:100px;
      height:35px;
      border-radius:5px;
      background-color:var(--bg-modal);
      color:#fff;
      border:0;
      font-size:14px;
      font-family:var(--font-regular);
  }
  .nav-user button i {
      font-size:16px;
      vertical-align:-1px;
  }
  .nav-user .user_name {
      display:inline-block;
      width:auto;
      font-family:var(--font-bold);
      font-weight:600;
  }
  .nav-user .user_tx {
      display:inline-block;
      margin-left:3px;
      font-family:var(--font-regular);
      padding-top:1px;
  }
  .aside {
      position:fixed;
      top:65px;
      bottom:0;
      left:0;
      z-index:100;
      width:290px;
      background-color:var(--bg-menu1);
      
  }

  .content {
      margin-top:65px;
      padding-left:290px;
      background-color:var(--bg-main);
      flex-basis:100%;
  }

  .content-sub {
    padding:60px 30px 70px 30px;
  }

  /* 햄버거 버튼 클릭해서 aside 메뉴를 숨길때 스타일 */
  .nav-small .header .top-logo {
    width: 80px !important;
    padding-left: 15px !important;
  }


  .nav-small #sidebar-menu{
    background: none !important;
    /*border-right: none !important;*/
    z-index:10 !important;     
    width: 80px ;   
  }

  .nav-small #sidebar-menu.active{
    width: 290px ;  
  }

  .nav-small #sidebar-menu .menu_small{
    width:80px !important;
    height: 100% !important;
	 overflow:hidden;
	  overflow-y: auto;
    background-color: var(--bg-menu1) !important;
  }


  .nav-small #sidebar-menu .nav-link i{
    font-size:25px !important;
    margin-bottom: 7px !important;
  }
  .nav-small #sidebar-menu .nav-link span{
    font-size:13px !important;
    margin-left: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;        
  } 

  .nav-small #sidebar-menu .menu-item .menu-sub{
  display:none;
  }    

  .nav-small #sidebar-menu .menu-item:hover .menu-sub{
    position: absolute !important;
    top: calc(auto - 80px) !important ;
    /*left: 80px !important;*/
    z-index: 50 !important;
    display: block !important;
    width: 175px !important;
    font-size: 13px !important;
    padding-left: 0 !important;
  }
  .nav-small #sidebar-menu .menu-sub .menu-item{
    padding-left: 15px !important;
    padding-top: 5px !important;/*padding-top: 15px !important;*/
  }    

  .nav-small #sidebar-menu .menu-sub2 .menu-item{
    padding-left: 0px !important;
    padding-top: 5px !important;
  }      
  .nav-small #content-area{
    padding-left:80px !important;
  }

  .nav-small #sidebar-menu .menu > div > a {
    padding:10px 0 !important;
    text-align: center !important;

  }    

  .nav-small #sidebar-menu .menu > div.menu-item > a:after {
    display:none !important;
  }  

.aside-menu{
	height: 100%;
	border-right: 1px solid var(--bg-menu1-bottom);    
	 overflow:hidden;
	  overflow-y: auto;

	color:var(--daily-frame-color);
}
.aside-menu::-webkit-scrollbar {
        background-color:var(--daily-frame-bg-color);
        width:5px;
        background-clip:padding-box;
    }
.aside-menu::-webkit-scrollbar-thumb {
        width:5px;
        background-clip:padding-box;
        box-shadow:inset 0 0 0 5px;
    }










}
@media (max-width:1200px) {
  .aside {
      width:205px;
  }

  .content {
      padding-left:205px;
  }

  	.menu-sub > div {
		  padding:10px 25px;/*padding:10px 45px;*/
    }

}


@media (max-width:1170px) {
.head_search{display:none;}


}
@media (max-width:900px) {
.nav-user .user_name, .nav-user .user_tx{
    display: none !important;
}

}

@media (max-width:767px) {
  body {
      overflow-y:scroll;
  }
  body, html {
      overflow-x:hidden;
  }
  body::-webkit-scrollbar {
      display:none;
  }


  .header {
    position: relative;
    display: flex ;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 65px;
    padding: 0.7rem 0;  
    border-bottom:1px solid var(--bg-border);
    box-sizing:border-box;
    background-color: var(--bg-body);
  }
  
  .header .header-utility {
    padding-right: 1.5rem ;
    padding-left: 1.5rem ;
    align-items: stretch ;
    justify-content: flex-end;
    height: auto ;
    width:100%;      
  } 
  
  .head_search{
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  
  }

  .content {
    padding:1rem ;
    margin-bottom: 70px;
}

  .top_head2{
    width:100%;
  }

  .sub4_frame{
    border-radius: 0 !important;
  }

  .title-group{
    flex-direction: column !important;
  }

  .md-none{
    display: none !important;
  }

  .icon_menu > div {
    justify-content: flex-end;
    margin-right: 0.7rem;
	    margin-right: 1.5rem !important;
  }
  .btn_more{
    margin-top: 0.3rem;
  }

  .top-logo{
    margin-left:0.5rem;
  }
.header .top-logo a {
    margin-top: 7.3px;
    display: inline-block;
    font-size: 0;
}


  .aside {
    position:fixed;
    top:0px;
    bottom:0;
    left:0;
    z-index:100;
    overflow:hidden;
    width:100%;
    background-color:var(--bg-menu1);
    border-right: 1px solid var(--bg-menu1-bottom);    
  }

  .m_block{
    display: block !important;
  }


  .flex2{
    flex-basis: auto;
  }
}