@import 'common.css';

/* header */
.newsbrige-admin{
    height: 100%;
    width: 100% ;
    background-color: #fafafa;
    position: relative;
}
.newsbrige-admin .header-wrap{
    position: fixed;
    top: 0;
    background-color: #212121;
    height: 5.9rem;  
    width:100%;
    padding:0 1.6rem 0 1.4rem;
    /* overflow: hidden; */
    z-index: 20;
}

.header-wrap .d-flex-items{
    padding-top: 1.25rem;
}

.header-top{
    display: flex;
    align-items: center;
}

.header-top h1{
    color: #fff;
    font-size: 1.8rem;
    margin-right: 8px;
}

.hamburger-menu {
    display: inline-block;
    cursor: pointer;
    width: 2.4rem;
}

.hamburger-menu .bar1, 
.hamburger-menu .bar2,
.hamburger-menu .bar3{
    display: block;
    width:1.8rem;
    height:1px;
    background-color: #fff;
    margin:5px auto;
    transition:0.4s;
}

.hamburger-menu.active .bar1 {
    -webkit-transform: rotate(-45deg) translate(-7px, 5px);
    transform: rotate(-45deg) translate(-7px, 5px);
}
  
.hamburger-menu.active .bar2 {
    opacity: 0;
}
  
.hamburger-menu.active .bar3 {
    -webkit-transform: rotate(45deg) translate(-4px, -2px);
    transform: rotate(45deg) translate(-4px, -2px);
}

.main-container{
    margin-top:5.9rem;
    padding-bottom: 8.6rem;
}

.ad-article-wrap{
    padding:0 1.5rem
}

.userinfo .btn-outline-round.orange{
    background-color: #fff;
    height: 3.6rem;
    padding:0 2rem;
}

/* .userinfo-wrap {
    display: none;
} */

.userinfo-wrap{
    display: none;
    position: absolute;
    top: 8.2rem;
    right: 0;
    z-index: 24;
}

.userinfo-wrap.active{
    display: block;
}

.inner-round{
    position: relative;
    background-color: #fff;
    width: 270px;
    padding:1.8rem;
    border:1px solid #c8c8c8;
    color: #333;
    background: #fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.inner-round.top:before {
    top: -9px;
    bottom: auto;
    left: auto;
    right: 23px;
    border-width: 0 10px 9px;
}

.inner-round:before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 40px;
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: #c8c8c8 transparent;
    display: block;
    width: 0;
}

.inner-round.top:after {
    top: -8px;
    bottom: auto;
    left: auto;
    right: 24px;
    border-width: 0 9px 8px;
}

.inner-round:after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 47px;
    border-width: 13px 13px 0;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;
}

.inner-round.left:before {
    top: 14px;
    bottom: auto;
    left: -10px;
    border-width: 11px 10px 11px 0;
    border-color: transparent #c8c8c8;
}

.inner-round.left:after {
    top: 16px;
    bottom: auto;
    left: -9px;
    border-width: 9px 9px 9px 0;
    border-color: transparent #fff;
}

.inner-round.right:before {
    top: 14px;
    bottom: auto;
    right: -10px;
    left:auto;
    border-width: 11px 0 11px 10px;
    border-color: transparent #c8c8c8;
}
.inner-round.right:after {
    top: 16px;
    bottom: auto;
    left:auto;
    right: -9px;
    border-width: 9px 0 9px 9px;
    border-color: transparent #fff;
}

.userinfo-wrap .inner-round .info-item{
    color:#929292;
    padding: 1.6rem 0;
}

.userinfo-wrap .inner-round .info-item ~ .info-item{
    border-top: 1px solid #d3d3d3;
}

.userinfo-wrap .inner-round .info-item:last-child{
    padding-bottom: 0
}

.info-item .personal-name{
    font-size:1.8rem;
    color: #212121;
    font-weight: 700;
    padding-bottom:8px;
    line-height:2.7rem ;
}

.info-item .d-flex{
    justify-content: space-between;
    align-items: center;
}

.info-item .email-address{
    font-family: 'Roboto';
}

.userinfo .user-avatar{
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 1.6rem;
    margin-left: 1.3rem;
}

.userinfo .alert-bell{
    position:relative;
    width:3.2rem;
    height: 3.2rem;
    background: url('../image/alram_white.png') no-repeat 0 3px;
    background-size: 3.2rem auto;
    display: inline-block;
}

.userinfo .alert-bell .label-circle{
    position: absolute;
    top: -4px;
    right: 0;
    font-family: 'Spoqa Han Sans Neo';
}

.access-wrap{
    color: #fff;
    font-size: 1.2rem;
}

.access-wrap {
    margin-left:6.8rem;
    line-height: 2.4rem;
}

.access-wrap .date-box{
    position: relative;
    display: inline-block;
    padding-left:10px;
    margin-left: 10px;
}

.access-wrap .date-box:before{
    content:'';
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color:#fff;
    position: absolute;
    top: 6px;
    right: 100%;
}

.access-wrap .date-box span{
    display: inline-block;
    vertical-align: middle;
} 

.access-wrap .date-box .access-date{
    padding-left:4px
}

/*데스크 요청*/
.desk-panel{
    position: absolute;
    top: 2.5rem;
    left: 9rem;
    background-color: #fff;
    border-radius: 8px;
    z-index: 21;
    display: none;
}

.desk-panel .inner-round {
    padding-bottom: 0;
    position: relative;
}

.desk-panel .sub-title{
    font-weight: 400;
}

.desk-panel-item{
    border-radius:4px;
    background-color:#fafafa;
    margin-bottom: 8px;
    padding:8px;
    font-size: 1.2rem;
}

.desk-panel-item .d-flex-row{
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.desk-request-txt{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 18px;
}

.desk-panel-cont{
    margin-top: 1.4rem;
}

.desk-panel-cont .btn-colse{
    position: absolute;
    top: 1.6rem;
    right:1.6rem;
    width:1.8rem;
    height: 1.8rem;
    background: url('../image/close_18x18.png') no-repeat 0 0;
    text-indent: -9999em;
    display: block;
}

.desk-request {
    display: inline-flex;
    background-color: #fff;
    height: 8rem;
    margin-top: 1.4rem;
    width: 100%;
}

.desk-request .gray-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.25);
    padding:1.2rem 0;
    /* float: left; */
    min-width: 11.9rem;
    width: 31.3%;
    flex:1 1 11.9%;
    background-color: #f2f2f2;
    position: relative;
}

.desk-request .gray-box .sub-title{
    font-weight: 700;
}

.sub-title{
    font-size: 1.6rem;
}

.sub-title + button {
    margin-top: 6px;
}

.sub-header-area .desk-request .sub-title + button{
    margin-top: 0;
}

.sub-write-info .btn:nth-child(1){
    margin-right: 5px;
}

.today-data-view{
    position: relative;
    width: calc(100% - 11.9rem);  
    -webkit-overflow-scrolling: touch;
    /*float:left;*/
}

.slide-row-wrap {
    /* width: inherit;
    border-bottom: 1px solid #dedede;
     */
}

.slide-row-wrap .d-flex-scroll{
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
    /* width:calc(100% - 280px);
    flex: 1 1 auto; */
}

.slide-row-wrap .d-flex-scroll .item-cont{
    min-width: 12.2rem;
    border-right:1px solid #dedede;
    /* width:10.3rem; */
    width: 25%;
}

.slide-row-wrap .d-flex-scroll .item-cont:last-child{
    border-right: none;
}

.item-cont{
    padding:1.2rem 0 0.9rem 1.2rem
}

.item-cont .data-view-item{
    color:#929292;
    font-size: 1.4rem;
    display: block;
    margin-top: 4px;
}

.item-cont .d-flex {
    flex-direction: column;
}

/*nav*/
.sidebar{
    overflow-y: scroll;
    width: 100%;
    height: 100vh;
    transform: translateX(-100%);
    transition: all 0.3s ease-out ;
    position: fixed   ;
    top: 8.9rem;
    background-color: #fafafa;
    z-index: 16;
}

.sidebar.active{
    transform: translateX(0%);
    transition: all 0.3 ease-in;
}

.sidebar-inner{
    padding:2.5rem 1.6rem 9rem 1.6rem;
    position: relative;
    /*height: calc(100% - 89px);*/
    height: auto;
    overflow-y: auto;
}

.sidebar .copyright{
    width: 100%;
    margin:0 -1.6rem;
    position: fixed;
    height:6rem;
    bottom: 9rem;
    padding:2.2rem 0;
    text-align: center;
    border-top: 1px solid #dedede;
    background: #fafafa;
    font-size: 1.2rem;
}

.info-menu-list{
    margin-top: 8px;
}

.info-menu-list .d-flex{
    flex-direction: row;
    flex: 1 1 auto;
    justify-content: space-between;
}

.info-menu-list li{
    border-radius:4px;
    border: 1px solid #c8c8c8 ;
    padding:1.75rem 1.6rem;
    width: calc(50% - 1rem);
}

.info-menu-list li:first-child{
    background-color: #fff;
}


.info-menu-list li a {
    display: inline-block;
    vertical-align:middle;
    font-weight: 400;
}

.info-menu-list li a .ico{
    margin-right: 8px;
}

.nav-list li a {
    font-size: 1.6rem;
    position: relative;
    display: block;
    font-weight: 700;
}

.nav-list li a:hover{
    color:#aaa
}

.nav-list li .item-nav::after{
    content: '';
    display: block;
    width:1.8rem;
    height: 1.8rem;
    background: url('../image/arrow_down.png') no-repeat 95% 45%;
    position: absolute;
    top: 4px;
    right: 0;
    transform: rotateY(0);
    transition: all 0.3s ease-out;
}

.nav-list li.active .item-nav::after{
    transform: rotate(-180deg);
    transition: all 0.3s ease-in;
}

.nav-list li a .ico{
    vertical-align: -6px;
    margin-right: 8px;
}   

.nav-list li{
    padding:0.9rem 0.7rem 0.9rem 0.9rem
}

.nav-list li.active{
    border-radius:5px;
    border: 1px solid #c8c8c8;
    background-color:#fff;    
    margin-bottom: 8px;
}

.nav-list li.active .sub-depth{
    display: block;
}

.info-menu-list li a{
    font-size:1.6rem;
}

.sub-depth{
    padding-top:0.8rem;
    display: none;
}

.sub-depth .dot-type li a{
    position: relative;
    color:#929292;
    padding-left: 1.2rem;
    font-weight: 500;
    line-height: 1.4;
}

.sub-depth .dot-type li a:before{
    content:'';
    display: block;
    width: 2px;
    height: 2px;
    background:#929292;
    border-radius: 50%;
    position: absolute;
    top: 11px;
    left: 0;
}

content{

}

.function-wrap{
    margin-top: 6px;
}

.function-wrap .card {
    min-height: 14.7rem;
}

.function-wrap .card ~ .card{
    margin-left:1.5rem;
}

.function-wrap .card .ico-dec{
    display: none;
}                               

.function-wrap .row-group .card{
   min-width: 21.5rem;
    height: auto;
}

.function-wrap .card .card-title{
   height:2.4rem
}

.function-wrap .card.bg-gray .card-title{
    font-size: 2rem;
}

.function-wrap .card.bg-gray .card-text{
    color:#212121
}

.function-wrap .card .btn{
    /* margin-top:8px */
    position: absolute;
    left: 1.6rem;
    bottom: 1.6rem;
}

.function-wrap .card .card-text{
    height:5.4rem;
    margin-top: 1rem;
    color:#929292;
    font-size: 1.2rem;
    line-height: 1.8rem;
}

.function-wrap .card.bg-gray{
    width:48.94%;
    background-color:transparent;
    min-width: 34rem;
    background-image: url("/image/notice_bg.jpg");
}

.sub-cont-area .card{
    width: 100%;
    margin-bottom: 10px;
}

.sub-cont-area .row-group{
    flex-wrap: wrap;
    justify-content: space-between;
}

.function-wrap.sub-cont-area .card ~ .card{
    margin-left:0;
}


.row-group{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.row-group.d-flex-scroll{
    white-space: normal;
    overflow-x: scroll;
}

.deskrequest-wrap{
    padding-top: 4rem;
    position: relative;
}

.card-group-item{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.card-group-item .card{
    width:calc(50% - 8px);
    color:#929292;
    margin-bottom: 8px;
}

.card-group-item .card .card-body{
    padding:0 1.25rem 1.25rem;
    min-height:145px;
}


.card-group-item .card .label-tit{
    margin-right: 8px;
}   

.card-group-item .card .card-text{
    color:#212121;
    line-height: 23px;
    margin-top: 8px;
}

.card-group-item .card .txt-link{
    font-size: 1.2rem;
    margin-top: 3rem;
    display: block;
}

.card-group-item .card-footer{
    font-size: 1.2rem;
}

.card-group-item .card-footer .d-flex{
    display: flex;
    flex-direction: column;
}

.card-group-item .card-footer .d-flex dt{
    line-height: 24px;
}

.deskrequest-cont{
    margin-top: 1.6rem;
}

.tab li ~ li{ 
    margin-left: 1.6rem;
}

.tab > li > a{
    display: block;
    font-weight: 700;
    color:#191919;
    padding:8px 0;
    font-size: 1.6rem;
    margin-bottom:1rem;
}

.tab > li.active > a {
    position: relative;
    display: block;
   
}

.tab.tab-orange > li.active > a {
    color:#FA9600;
}

.tab > li.active > a:before{
    content:'';
    display: block;
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.tab.tab-orange > li.active > a:before{
    background-color: #FA9600;
}

.tab.tab-orange > li.active > a {
    color:#FA9600;
}

.tab.tab-orange > li.active > a:before{
    background-color: #FA9600;
}

.tab.tab-black > li.active > a:before{
    background-color: #212121;
}

.tab.tab-black > li.active > a {
    color:#212121;
}

.tab.tab-black > li.active > a:before{
    background-color: #212121;
}

.tab.tab-noline > li.active > a:before{
    background-color: transparent
}

.tab.tab-noline > li.active > a {
    color:#212121;
}

.news-item-wrap{
    position: absolute;
    top: 5rem;
    right: 0;
    display: flex;
    align-items: center;
}

.news-item-wrap{
    color:#929292
}

.pagination-item{
    margin-left: 8px;
}

.pagination-item .num-txt{
    margin:0 8px;
    color: #929292;
    display: inline-block;
    line-height: 1.2;
}

.request-wrap{
    padding-top: 2.8rem;
}

.request-wrap > .d-flex{
    flex-direction: column;
    flex: 1 1 auto;
}

.request-wrap .request-list{
    display: flex;
    flex: 1 1 auto;
    justify-content: space-around;
    text-align: center;
}

.request-wrap > .item-box{
    flex: 1 1 auto;
}

.request-wrap .item-box .sub-title{
    margin-right:8px;
}

.request-wrap .item-box > .d-flex{
    align-items: center;
}

.request-wrap .item-box.newsbrige-cont{
margin-top: 3rem;
}

.request-wrap .item-box.newsbrige-cont .card-body{
    padding-top: 0;
}

.request-wrap .item-box.newsbrige-cont .card-header .f-float {
    overflow: hidden;
    width: 100%;
    color: #929292;
}

.request-wrap .item-box.newsbrige-cont .row-group .card{
    width: 50%;
}

.request-wrap .item-box.newsbrige-cont .row-group .card + .card{
    margin-left:8px
}

 .f-float .sort-label{
     float: left;
 }

 .f-float .date-label{
     float:right
 }

.request-wrap .item-box .border-bottom{
    padding-bottom:8px;
    border-color:#212121 !important
}

.request-list{
    padding:1.6rem 0;
}

.request-list .d-inline-flex {
    flex-direction: column;
    justify-content: space-between;
}

.request-list .d-inline-flex dt{
   margin-bottom:1.2rem;
   font-weight: 700;
}

.request-list .d-inline-flex dd{
    font-weight: 300;
    font-size: 3.6rem !important;
}

.item-title-area{
    display: flex;
    padding-bottom: 1.2rem;
    justify-content: space-between;
}

.staff-board {
    margin-top: 4rem;
}

.staff-board .no-label{
    display: none;
}

.staff-board .item-box .card-body .d-flex{
    flex-direction: column;
}

.staff-board .border-view-info{
    color: #929292;
    margin-top: 8px;
}

.staff-board .border-view-info span{
    font-size: 1.2rem;
    font-weight: 300;
}

.staff-board .card ~ .card{
    margin-top: 8px;
}

.staff-board .border-view-info span:nth-child(2){
    padding:0 8px
}

/*푸터*/
.btn-footer{
    position: fixed;
    bottom: 0;
    width: 100%;
}

/*서브*/

.sub-header-area .desk-request{
    justify-content: space-between;
    align-items: center;
    padding:0 1.6rem;
    border-bottom: 1px solid #e9e9e9;
    margin-top: 0;
}

.sub-title-cont{
    background-color:#fafafa ;
    border-radius: 6px;
    border:1px solid #c8c8c8;
    padding:1.8rem 1.5rem;
    background-repeat: no-repeat;
    background-position: right 0;
}

.sub-title-cont.sub-bg1{
    background-image: none
}

.sub-title-cont .label-title{
    font-weight: 600;
    color: #212121;
    font-size: 1.4rem;
    line-height: 1.6;
}

.sub-title-cont .title{
    font-size:2.4rem;
    font-weight: 300;
}

.sub-title-cont .desc{
    font-family: 'Roboto';
    margin: 1.9rem 0 1.7rem;
    font-weight: 700;
}

.sub-container{
    padding-top: 3rem;
}

.sub-title-cont + .sub-cont-wrap{
    margin-top: 1.6rem;
}

/*table*/
.txt tr, .txt td {
    border: 1px solid;
    padding:1rem !important;
    vertical-align:middle;
}

.search-sort{
    display: flex;
    align-items: center;
    /* width: 35.3%; */
    justify-content: flex-end;
    position: relative;
    padding-right:5.7rem;
}

.search-sort .input-control{
    position: relative;
}

.calendar-wrap {
    position: relative;
}

.calendar-wrap .calendar{
    position: absolute;
    top: 9px;
    right:6px;
}

.search-sort .select-control , 
.search-sort .select-control + .input-control,
.article-sort-type1 .select-control,
.article-sort-type1 .select-control + .input-control{
    margin-left:-1px;
}

.search-sort .btn{
    position: absolute;
    top: 0;
    right: 0;
}

.search-sort{
    margin-top: 2.4rem;
    margin-left:auto;
}

.search-sort .select-control select ,
.article-sort-type1 .select-control select , 
.article-sort-type1 .input-control input[type="text"]{
    border-radius: 0px;
}

.article-sort-type1 .input-control input[type="text"]{
    margin-left: -1px;
}

.search-sort .input-control input[type="text"]{
    border-radius: 0;
}


.search-sort + .tbl-list{
    margin-top:1.6rem;
}

.tbl-list{
    border-top: 2px solid #000;
}

.tbl-list thead tr th{
    background-color: #f2f2f2;
    border-bottom: 1px solid #dedede;
    padding:1.5rem 1.6rem;
    /*line-height: 5rem;*/
    text-align: center;
    font-weight: 700;
}

.tbl-list tbody tr td{
    color:#929292;
    padding:1.8rem 1.6rem;
    /* line-height: 55px; */
    border-bottom: 1px solid #dedede;
    text-align: center;
    vertical-align: middle;
}

.tbl-list .txt-black-link .orange-color{
    margin-left:5px
}

.tbl-view thead th {
    border-top: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
    background-color: #f2f2f2;
    padding: 1.5rem 1.6rem;
    /*line-height: 5rem;*/
    text-align: center;
    font-weight: 700;
    vertical-align:middle;
}

.tbl-view tbody td{
    padding:1.4rem 1.2rem;
    text-align: center;
    border-bottom: 1px solid #d5d5d5;
    border-left: 1px solid #d5d5d5;
    vertical-align:middle;
}

.tbl-view tbody td:first-child{
    border-left:none
}

.tbl-sort-view tbody td , .tbl-sort-view tfoot td{
    border-bottom: 1px solid #d5d5d5;
    padding:1.5rem 1.2rem;
    text-align: center;
    border-left:1px solid #d5d5d5;
}

.tbl-sort-view tbody td:first-child , .tbl-sort-view tfoot td:first-child{
    border-left:none;
   
}

.tbl-sort-view{
    border-top: 1px solid #d5d5d5;
}

.tbl-half-wrap{
    overflow: hidden;
}

.tbl-half-wrap table{
    float:left;
    width:100%;
}

.tbl-half-wrap table:last-child{
    width:calc(100% - 1.6rem);
    margin-left: 1.6rem;
    margin-top: 1.6rem;
}

.sub-cont-title{
    padding:1.6rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #212121;
}

.list-title-cont h3{
    font-size: 2.4rem;
    line-height: 2.9rem;
}

.list-title-cont .desc{
    margin-top: 8px;
}

.board-cell {
    border-bottom:1px solid #c8c8c8;
    padding:2.2rem 0 1.7rem;
    display: flex;
    justify-content: flex-start;
}

.board-cell .board-cell-cont{
    width:77.3%;
}

.board-cell .board-cell-top{
    font-size: 1.2rem;
    line-height: 1.8rem;
}

.board-cell .board-cell-top span{
    padding-right:1rem;
}

.board-cell .board-cell-top span.line{
    display: inline-block;
    padding-left:1rem;
    position: relative;
}

.board-cell .board-cell-top span.line:before{
    content: '';
    display: block;
    width:1px;
    height: 8px;
    background-color: #212121;
    position: absolute;
    top: 5px;
    left:0
}
.board-cell .board-cell-title{
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: 700;
    margin:1.4rem 0;
}

.board-cell .desc{
    color:#929292;
    margin-bottom: 1.4rem;
}

.board-cell-image div{
    width:18.3rem;
    height: 18.3rem;
    border-radius: 6px;
    background:#fff;
    margin-left:2.1rem;
}

.dash-list li{
    position: relative;
    padding-left:8px;
    color:#929292;
}

.dash-list li:before{
    content:'';
    display: block;
    width:4px;
    height: 1px;
    background-color:#929292;
    position: absolute;
    top: 8px;
    left: 0;
}

/*erp*/
.erp-wrap{
    margin-top: 2.4rem;
}

.erp-wrap .search-sort{
    margin-top: 0rem;
}

.erp-wrap .tbl-half-wrap{
    margin-top:1.6rem;
}

/* 설정 */
.ad-article-wrap {
    min-width: 1170px;
    padding: 8px 0 0 0;
}

.ad-article-wrap .card.card-lg{
    padding:25px 15px;
    background-color: #fff;
    border-color: #c8c8c8;
    height: auto;
    position: relative;
}

.ad-article-wrap .card.card-lg .select-control{
    /* position: absolute;
    top:4.5rem;
    left: 19.4rem; */
    width:50%;
    margin:0 auto;
}

.ad-article-wrap .card.card-lg .select-control + .tac{
    margin-top: 0.5rem;
}

.ad-article-wrap .card-lg .desc{
    color:#929292;
    margin-bottom: 1.8rem;
}

.ad-article-wrap .article-top .card-log{
    width: 66%;
}

    .ad-article-wrap .article-top {
        width: 76.8rem;
        margin: 0 auto;
    }

.card-add-box{
    width:74%;
    margin:1.5rem auto 0;
}

.card-add {
    border:1px solid #c8c8c8;
    padding:1.6rem;
    border-radius:8px;
    /* width: 74%;
    margin:0 auto; */
    background:#fff
}

.card-add-btns{
    display:flex;
    align-items: center;
}

.card-add-btns .btn{
    width:1.6rem;
    height: 1.6rem;
    background-repeat:no-repeat;
    background-position: 0 -3px;
}

.card-add-btns .btn + .btn{
    margin-left:6px;
}

.card-add-btns .btn.clear{
    background-image: url('../image/clear_sm.png');
}

.card-add-btns .btn.write{
    background-image: url('../image/edit_sm.png');
}

.card-add .d-flex-items .banner-title{
    margin-right:auto;
    font-size: 1.2rem;
    line-height:19px;
}

.d-flex-row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 6px;
}

.d-flex-row .card-add.flex-grow-1{
    width: calc(50% - 5px);
}

.d-flex-row .card-add.flex-grow-1:first-child{
   margin-right: 10px;
}

.d-flex-row .card-add.flex-grow-2{
    width: 100%;
}

.btn-file-add{
    display: block;
    width: 100%;
    margin: 0 auto;
    background:#fff url('../image/ico_plus_lg.png') no-repeat center center;
    border-radius: 8px;
    border:1px dotted #FA9600;
    height: 3.2rem;
}

.card-add + .btn-file-add , 
.btn-file-add + .btn-area , 
.btn-area + .card-add{
    margin-top: 5px;
}

.card.card-lg + .btn-area{
    margin-top: 1.2rem;
}

.card.card-lg ~ .card.card-lg{
    margin-top: 8px;
}   

.articel-box {
    max-width: 1170px;
    width: 100%;
    margin:0 auto;
    overflow:hidden;
    padding-top: 12px;
    /* display: flex;
    justify-content: space-between; */
}

.articel-box > .side-right{
     width: 38.7rem;
     float:right; 
     /* clear: both; */
     /*margin-top: 8px;*/
}

    .articel-box .center-area {
        width: 56.9rem;
        float: left;
    }

.articel-box .center-area .d-flex-half{
    margin-top: 8px;
}

/*.articel-box .center-area .card.card-lg .btn-file-add{
    width:169px
}*/

.articel-box .center-area .d-flex-half .card-add:first-child{
    margin-right: 3rem;
}

    .articel-box .side-left {
        width: 15.8%;
        margin-right: 1.7rem;
        float:left;
    }

.side-inner-right {
    float: left;
    padding-right: 8px;
    /*width: 36.7rem;
    float: right;*/
}

/*.articel-box .side-left .card-add , 
.articel-box .side-right .card-add,
.articel-box .side-right .btn-file-add
 {
    width: 100%;
}*/

.articel-box .card-add{
    margin-bottom:6px;
}

/*모달 창*/
.modal-dialog.modal-md{
    max-width: 570px;
}
.modal-header{
    padding:2rem 2.6rem 1.2rem 2.6rem;
    border-bottom: none;
}

.modal-title{
    font-size: 2.1rem;
}

.modal-body{
    padding:0 2.6rem 3rem 2.6rem;
}

.form-row.flex3 .select-control{
    width: 32%;
}

.form-row.flex3 {
    margin-right: 0;
    margin-left: 0;
}

.form-row.flex3 .select-control ~ .select-control{
    margin-left: 1rem;
}

.category-sort{
    border: 1px solid #dedede;
}

.category-wrap .select-line-wrap select{
    border-bottom-color: #212121;
    border-width:0 0 1px 0;
    width: 100%;
    padding-bottom: 1.6rem;
    color:#929292;
}

.recently-category{
    margin:1.6rem 0
}

.recently-category .desc-txt{
    margin-bottom: 0.8rem;
}

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

.category-sort .item-cell{
    width: 33.3%;
}

.category-sort .item-cell.gray{
    background-color:#f2f2f2
}

.category-sort .item-cell:nth-child(2){
    border-left:1px solid #dedede;
    border-right:1px solid #dedede;
}

.category-sort .item-cell li{
    padding:3px 8px;
}

.category-sort .item-cell li a{
    line-height: 2.3rem;
    display: block;
}

.category-sort .item-cell:not(:first-child) li a{
    color:#929292
}

.category-sort .item-cell li a.active{
    background-color:#c8c8c8;
}

/**/
.tabs-wrap-type {
    padding:1.6rem 0 0;
}
.tabs-wrap-type .tab{
    width: 100%;
    flex: 1;
}

.tabs-wrap-type .tab li{
    width: 50%;
}

.tabs-wrap-type .tab li a{
    text-align: center;
}

.defaultinfo-wrap{
    margin-top:2.5rem;
}

.white-round-box ~ .white-round-box{
    margin-top: 1.4rem;
}

.white-round-box {
    padding:2.4rem 3rem;
    background-color:#fff;
    border-radius: 8px;
}

.desc-wrap .item-title{
    font-size: 1.6rem;
    color:#212121;
    font-weight: 700;
    line-height: 22px;
}

.desc-wrap .item-value{
    color:#929292;
    line-height:24px;
    margin-top: 10px;
}



.half-box{
    margin-top: 2.4rem;
    border-top: 1px solid #c8c8c8;
    padding-top:3rem;
    justify-content: space-between;
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
}

.half-box .desc-wrap{
    width: 100%;
}

.half-box .logo-graybox{
    margin-top: 1.9rem;
}

.box-file-wrap .btn-sm-del{
    display: inline-block;
    vertical-align: middle;
    width:1.8rem;
    height: 1.8rem;
    background:url('../image/clear_sm.png') no-repeat 0 0;
    text-indent: -999em;
}

.logo-graybox{
    background-color:#fafafa;
    height: 123px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-area{
    position: relative;
}

.img-area .watermark{
    position: absolute;
    top: 50%;
    left:50%;
    z-index: 9;
    transform: translate(-50%, -50%);
}

.advanced-function-wrap{
    border-bottom: 1px dashed #c8c8c8;
    padding-bottom: 2.4rem;
}

.advanced-function-wrap .float-wrap{
    margin-top: 2.4rem;
    border-top: 1px dashed #c8c8c8;
    padding-top:3rem;
}

.float-wrap{
    overflow: hidden;
}

.advanced-function-wrap .float-wrap:first-child{
    border-top: none;
    margin-top: 0;
}

.float-wrap dl.desc-wrap{
    width: 100%;
    float:none;
}

.float-wrap > div{
    float:none;
}

.float-wrap .form-half-size{
    float:right
}

.float-wrap .w36{
    width: 100%;
}

.advanced-function-wrap .half-box{
    border-style: dashed;
    flex-direction: column;
}

.advanced-function-wrap .half-box:first-child{
    border-top: none;
    margin-top: 0;
}

.advanced-function-wrap .form-half-size .select-control{
    width: 142px;
}

.advanced-function-wrap .half-box .w36{
    width: 100%;
}

.tit-desc{
    color:#212121;
}

.txt-link + .tit-desc{
    margin-top: 8px;
}

.desctxt-list > li.list-item{
    position: relative;
    padding-left:1.8rem;
    color:#212121;
    font-weight: 700;
    font-size: 1.6rem;
}

.desctxt-list > li.list-item ~ li.list-item{
    margin-top: 2.8rem;
}

.desctxt-list > li.list-item > span{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    
}

.desctxt-list .dash-list li, .dash-list li{
    font-size: 1.4rem;
}

.desctxt-list ul {
    color: #929292;
    font-weight: normal;
    margin-top: 0.5rem;
}

.desctxt-list ul li{
    font-size: 1.2rem;
}

.desc-txt{
    color:#929292
}

.light-blue-box{
    padding:20px 16px;
    border-radius: 8px;
    background-color: #f2faff;
}

.light-blue-box strong{
    display: block;
    font-weight: 700;
}

.light-blue-box .desc-txt{
    padding-left:2.4rem ;
}

.article-service > .desc-txt {
    padding-bottom:1.6rem;
    border-bottom: 1px solid #212121;
    font-size: 1.2rem;
    line-height: 1.4;
}

.article-service .desctxt-list {
   margin-top: 2.4rem;
   padding-bottom: 2.4rem;
}

.article-service .light-blue-box{
    margin-bottom: 2rem;
}

/*로그인*/
.login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background-color: #fafafa;
}
.login-wrap .card{
    padding:32px;
    background-color:#fff;
    width: 57rem;
    height: 41.2rem;
    
}

.logoin-body .light-gray-box{
    padding:1.8rem 3.6rem;
}


.logoin-body .light-gray-box .login-title{
    color: #212121;
   display: table-cell;
   width:12.0rem;
   word-break:keep-all;
}
.list-accordion-item .light-gray-box .write-search-type input {
    width: calc(100% - 40px);
}

.light-gray-box + .d-flex-items,
.light-gray-box .d-table + .d-table {
    margin-top: 1.6rem;
}

.logoin-body{
    padding:2.4rem 0;
}

.logoin-body .light-gray-box .input-control{
    width: 27.6rem;
    
}

.logoin-footer {
   border-top: 1px solid #c8c8c8;
   text-align: center;
   padding-top: 1.6rem;
}

.article-write{
    display: flex;
    flex-direction: column;
    margin-top: 2.5rem;
}

.article-write .write-left{
    width:100%;
}

.article-write .btn-area{
    text-align: center;
    margin: 3rem 0;
}

.orange-box{
    background-color: #FA9600;
    padding:8px 8px 11px 8px;
    border-radius:8px;
}

.orange-box p{
    color:#fff;
   
}

.orange-box .time-txt{
    display: block;
    padding-left: 3rem;
   
}

.orange-box + .article-write-box{
    margin-top: 1.6rem;
}

/* 비주얼 탑 관련 css*/
#visualtop .config-info-box {
    margin-top: 0;
    padding-bottom: 1rem;
    padding-left: 0;
    border-top: 1px solid #dedede;
    padding-top: 1rem;
}

    #visualtop .config-info-box h5 {
        color: #929292;
        font-size: 13px;
        margin-bottom: 8px;
    }
    #visualtop .config-info-box span {
        color: #929292;
        font-size: 13px;
        margin-top: 5px;
        flex: 1;
        font-size: 14px;
        color: #555;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        padding-left:1.5rem;
    }

    #visualtop .form-inline {
        margin-top: 5px;
        padding-left:2rem;
        justify-content: space-between;
    }

.menu-options-wrapper {
    overflow: hidden; /* 내용을 넘기지 않음 */
    max-height: 0; 
    transition: max-height 0.4s ease-in;
}

    .menu-options-wrapper.on {
        max-height: 400px;
        transition: max-height 0.6s ease; 
    }


.video-option {
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.video-upload, .bgimage-upload {
    padding-left: 1rem;
}
.bgimage-option {
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #ddd; /* 옵션 구분을 위한 경계선 */
    border-radius: 5px;
    background-color: #f9f9f9;
}


/* 파일 업로드 필드 스타일 */
.bgimage-upload label:hover {
    background-color: #f0f0f0;
}

.bgimage-option .append-file {
    font-size: 14px;
    color: #777;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#visualtop .btn-outline-round.gray.small {
    height: 3rem;
    line-height: 3rem;
    padding: 0 1rem;
    font-size: 1.2rem;
}

/* 텍스트와 버튼 간격 */
.bgimage-preview, .video-preview {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 1rem;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.preview-video, .preview-image {
    flex: 1 1 auto;
    max-width: calc(100% - 2rem);
    height: auto;
    display: block;
    border-radius: 4px;
}

#visualtop .btn-del {
    border: none;
    width: 1.8rem;
    height: 1.8rem;
    background: url(../image/clear_lg.png) no-repeat center center;
    background-size: contain;
    text-indent: -9999em;
    cursor: pointer;
    flex-shrink: 0;
}

    #visualtop .btn-del:hover {
        opacity: 0.7;
    }
/* /// 비주얼 탑 관련 css 끝 */


.article-write-box {
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    padding: 5px 10px;
}
.write-search-type {
    display: flex;
    align-items: center;
}

    .write-search-type input {
        border: 1px solid #929292;
        padding: 4.8px 1rem;
        width: calc(100% - 64px);
        flex-grow: 1;
        box-sizing: border-box;
    }

.write-search-type input::placeholder{
    font-size:1.2rem;
}

.write-search-type .gray-btn {
    background-color: #929292;
    color: #fff;
    font-size: 1.2rem;
    border-radius: 0;
    height: 3rem;
    margin-left: -3px;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}

.upload-btn-wrapper {
    text-align: center;
    margin-top: 10px;
    padding-bottom: 1.7rem;
    border-bottom: 1px solid #c8c8c8;
}

.upload-btn-wrapper .txt-small{
    display: block;
    color:#c8c8c8;
    padding:4px 0 13px 
}

.upload-btn-wrapper .btn-area{
    margin: 10px 0;
}

.custom-control + .write-search-type{
    margin-top:1rem;
}

.write-items{
    /*margin-top: 1.4rem;*/
}

.write-items-list > li{
    padding:6px 3px;
    border-bottom: 1px solid #dedede;
}

.write-items-list > li .target-arrow , .cartegory-tit {
    display: block;
    line-height: 4rem;
}    

.write-items-list > li .target-arrow{
    position: relative;
}

.write-items-list > li .target-arrow:before , .cartegory-tit:before{
    content: '';
    display: block;
    width:2.4rem;
    height: 2.4rem;
    position: absolute;
    top: 10px;
    right: 10px;
}

.write-items-list > li .target-arrow:before{
    background:url('../image/arrow_down_lg.png') no-repeat 0 0;
    transform: rotateY(0);
    transition: transform 0.3s ease-in;
}

.write-items-list > li .target-arrow.active:before{
    transform: rotate(180deg);
    transition: transform 0.3s ease-in;
}

.cartegory-tit{
    position: relative;
}


.cartegory-tit:before{
    background:url('../image/ico_category.png') no-repeat 0 0;
}

.write-items .inner-panel{
    display: none;
}

.sort-type-wrap {
    margin-top: 1.4rem;
}

.sort-type-wrap .d-flex-row {
    padding:0.4rem 0;
    /*border-bottom: 1px dashed #929292;*/
    justify-content: space-between;
}

.sort-type-wrap .d-flex-row.flex4 button{
    min-width: 4.5rem;
    width: 25%;
}

.sort-type-wrap .d-flex-row.flex5 button{
    width: 4.5rem;
    width: 20%;
}

.sort-type-wrap .d-flex-row.flex3 button{
    width: 33.3%;
}

.sort-type-wrap .d-flex-row:last-child{
    border-bottom: none;
}

.sort-type-wrap + .article-send {
    margin-top:8px;
}

.sort-type-wrap .btn-outline-round{
    border-radius: 0;
}

.sort-type-wrap > .d-flex-row > .btn-outline-round:first-child{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.sort-type-wrap > .d-flex-row > .btn-outline-round ~ .btn-outline-round{
    margin-left: -1px;
    border-left: none;
}

.sort-type-wrap > .d-flex-row > .btn-outline-round:last-child{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.sort-type-wrap .btn-outline-round.white.on{
    background-color: #FA9600;
    color: #fff;
    border-color: #FA9600;
}

/*.article-send .title , .article-send + .article-send {
    margin-top: 1.6rem;
}*/

.article-send .title {
    margin-bottom:1.8rem;
    margin-top:3rem;
}

.send-option-item {
    border-bottom: 1px dashed #c8c8c8;
}

.send-option-item:last-child{
    border-bottom: none;
}

.send-option-item ~ .send-option-item{
    margin-top: 16px;
    padding-bottom: 8px;
    padding-left:20px;
}

.send-option-item .subtitle{
    font-size: 1.2rem;
    margin-bottom:8px;
}

.send-option-item .custom-control{
    margin-right: 1.5rem;
}

.date-area , .white-box{
    overflow:hidden;
    background-color: #fff;
    padding:8px;
}

.date-area .date-area-tabs{
    display: flex;
    float:left;
}

.date-area .date-area-tabs li:first-child{
    padding-right:8px;
    margin-right: 8px;
    position: relative;
}

.date-area .date-area-tabs li:first-child:before{
    content:'';
    display: block;
    width: 1px;
    height:8px;
    background-color:#d5d5d5;
    position: absolute;
    top: 7px;
    right: 0;
}

.date-area .date-area-tabs li a{
    display: inline-block;
    vertical-align: middle;
    line-height: 24px;
    font-size: 1.2rem;
    color: #929292;
    font-weight: 700;
}

.date-area .date-area-tabs li.active a{
    color:#212121;
}

.date-area .time-cont{
    float:right;
}

.white-d-flex {
    display: flex;
}

.white-d-flex .date-year input[type="text"] {
    width:8rem;
    border: 1px solid #212121;
    margin-right:2px
}

.white-d-flex .date-time input[type="text"] {
    width: 3rem;
    border: 1px solid #212121;
}

.white-d-flex .date-time span{
    margin:0 2px
}

.inner-panel .white-box {
    padding: 8px 3px;
}

.inner-panel .white-box input.write-name {
    width: 7.1rem;
    padding: 4px 10px;
    box-sizing: border-box;
}

.inner-panel .white-box input.write-email{
    width: calc(100% - (71px + 38px));
    margin-left: -4px;
    padding: 4px 10px;
}

.write-search-type + .emailtag{
    margin-top: 1.6rem;
}

.memo-box textarea{
    padding:8px;
    border-radius: 4px;
    border:1px solid #c8c8c8;
    width: 100%;
}

.article-write-box + .memo-box{
    margin-top: 1.6rem;
}

.inner-panel .light-gray-box {
    background-color: #f2f2f2;
    padding: 10px 10px 10px 10px;
    border: 1px solid #e3e3e3;
}

.inner-panel .list-cont-item {
    padding:1.6rem 0.8rem;
    background-color: #fff;
}

.inner-panel .list-cont-del .list-cont-item{
    padding-right:36px;
    position: relative;
}

.inner-panel .list-cont-del .list-cont-item .btn-del{
    position: absolute;
    top: calc(50% - 1.8rem);
    right: 10px;
}
.inner-panel .list-cont {
    margin-top: 1rem;
    overflow-y:auto;
    max-height: 19.6rem;
}

.inner-panel .list-cont .list-cont-item {
    border-bottom: 1px solid #f2f2f2;
}

.inner-panel .list-cont .list-cont-item div.custom-control{
    margin-right:0;
    height: auto;
    word-break: break-all;
    padding: 0 0 0 3rem;
}

.article-view {
    margin-top: 2.4rem;
}

.article-view-detail{
    padding:2rem 0;
}

.article-view-header .title{
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom:8px;
}

.article-view-header{
    margin-bottom:2rem;
}

.article-view-header .label-alpha{
    padding-right:8px;
}

.article-view-header .d-table .label-alpha{
  vertical-align: middle;
}

.article-view-header .d-flex .name{
    color:#212121;
    margin-right:2.1rem;
    display: flex;
    align-items: center;
}

.article-view-header .attach-area{
    margin-top: 8px;
    color:#929292;
}

.article-view-detail{
    position: relative;
}

.progressbar{
    position: absolute;
    top: 2rem;
    right: 0;
}

.progressbar .progressbar-item li span{
    display: none;
}

.progressbar .progressbar-item li {
    display: inline-block;
    min-width: 3rem;
    height: 3rem;
    background-color: #fff;
    border-radius: 1.5rem;
    border:1px solid #c8c8c8;
    padding:0 8px;
    line-height:2.6rem;
    text-align: center;
    margin-left:8px;
}

.progressbar .progressbar-item li.active{
    background-color: #FA9600;
    color: #fff;
    padding: 0 16px;
    border-color: #FA9600;
}

.progressbar .progressbar-item li.active span{
    display: inline-block;
    color: #fff;
}

.progressbar .btn-area{
    margin-top: 1.9rem;
}

.article-info{
    color:#929292;
    margin-left: 2.1rem;
}

.artice-view-cont{
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color:#c8c8c8;
    padding:2.9rem 2.8rem 4.4rem 2.8rem;
}

.artice-view-cont .txt p{
    color:#929292;
    line-height: 26px;
}

.artice-view-cont .tac{
    margin-top: 3.3rem;
}

.comment-write{
    margin:2.4rem 0;
    display: flex;
}

.comment-write .textarea{
    width:calc(100% - 13rem);
    padding:0 8px 0 2.5rem;
}

.comment-write .textarea textarea{
    width: 100%;
    border-radius: 8px;
    padding:1.3rem;
    border:1px solid #c8c8c8
}

.btn-outline-round.dark-gray.btn-register{
    height:8rem;
    width: 8rem;
}

.btn-round-solid{

}


.comment-view{
    border-top: 1px solid #c8c8c8;
    border-bottom: 1px solid #c8c8c8;
}

.label-alpha{
    display: block;
    border-radius: 1.8rem;
    width: 3.6rem;
    height: auto;
}

.label-alpha img{
    border-radius: 1.8rem;
}

.comment-view{
    position: relative;
    padding:2.4rem 0 2.4rem 6.1rem;
}

.comment-view .label-alpha{
    position: absolute;
    top: 2.6rem;
    left: 0;
}

.comment-view-user{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-txt{
    margin-top: 10px;
    line-height:2.2rem;
}

.image-area{
    margin-top: 2rem;
}

.btn-center-area{
    text-align: center;
    margin-top:3.6rem;
}

.btn-square-full button{
    width: 100%;
    margin:6px 0;
}

.btn-square-full .btn-outline-round{
    border-radius: 3px;
}

.article-sort-area{
    padding:1rem;
    background-color: #e4e4e4;
    position: relative;
    margin: 1.6rem 0 3rem;
}

.article-search-sort{
    display: flex;
    position: relative;
}

.article-sort-type , .article-sort-type1{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

.article-sort-type1{
    margin: 1.6rem 0;
}

.article-sort-type1 .d-flex-items div:not(:last-child){
    width:31%
}

.article-sort-type1 .d-flex-items div:last-child{
    width:40%;
}

.article-sort-type1 .input-control{
    margin-top: 1.6rem;
}

.article-sort-type .select-control{
    width: 33.3%;
}

.article-sort-type div:first-child .d-flex div:last-child{
    margin-right: 0;
}

.article-sort-type > div + div{
    margin-top: 1.5rem;
}

.artcle-search-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.6rem;
}

.artcle-search-inner > div{
    width:100%
}

.artcle-search-inner .btn-solid-search{
    width: 100%;
    height: 4.2rem;
    line-height: 4.2rem;
}

.btn-solid-search{
    background-color: #000;
}

.article-search-sort .input-control input[type="text"]{
    border-radius: 0;
}

.article-sort-type div:first-child .d-flex div{
	margin-right: 0.9rem;
}

/*table flex*/
.d-flex-tbl{
}

.d-flex-tbl .d-flex-theader{
    border-top: 2px solid #000;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #f2f2f2;
    line-height: 5rem;
    justify-content: space-between;
}

.d-flex-tblinner{
    display: none;
}

.d-flex-tbl .d-flex-theader div strong{
    font-weight: 700;
}

.d-flex-tbl .d-flex-theader div:nth-child(1){
    width:18%;
    text-align: center;
}

.d-flex-tbl .d-flex-theader div:nth-child(2){
    width:auto;
    flex:1 1 auto;
    text-align: center;
}

.d-flex-tbl .d-flex-tblinner .d-flex-theader div:nth-child(3){
    width:24%;
    text-align: center;
}

.d-flex-tbl .d-flex-tbody > .row-item{
    padding:0.5rem;
    min-height: 5.6rem;
    border-top: 1px solid #dedede;
}

.d-flex-tbl .d-flex-tbody{
    border-bottom: 1px solid #dedede;
}

.flex-txt-area{
   width: calc(100% - 60px);
   margin-left: 60px; 
   /* overflow: hidden; */
   display: flex;
   align-items: center;
}

.flex-txt-area p{
    width: auto;
    /* float: left; */
    min-width: 77%;
    margin-right: 8px;
    line-height: 1.6;
}

.flex-txt-area .btn-area{
    width: 18rem;
    display: none;
}

.status-label .ico-status{
    display: inline-block;
    border-width: 1px;
    border-radius: 4px;
    border-style: solid;
    text-align: center;
    font-weight: 700;
    width: 1.4rem;
    height: 1.4rem;
    line-height: 1rem;
    font-size: 8px;
}

.ico-status.color1{
    border-color:#179f3d;
    color:#179f3d
}

.status-label .ico-status ~ .ico-status{
    margin-left: 0px;
}

.ico-status.color2{
    border-color:#14aafe;
    color:#14aafe;
}

.ico-status.color3{
    border-color:#1aa0a0;
    color:#1aa0a0;
}

.status-area-box{
    display: flex;
    flex-direction: column;
    width: 12rem;
    position: absolute;
    top: 10px;
    left: 5px;
}

.status-area-box .d-flex{
    flex-direction: column;
}

.status-area-box .d-flex .circle-area{
    align-items: center;
}

.row-item{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding:0.5rem;
    min-height: 5.6rem;
    width: 100%;
    position: relative;
    justify-content: flex-start;
}

.last-infoarea{
    width: 100%;
}

.last-infoarea .article-infoarea{
    display: flex;
    justify-content: flex-end;
    color:#929292;
}

.flex-txt-area .mark{
    margin-right: 8px;
}