div, ul, header, main, nav, section, footer{
    display: flex;
}

body{
    font-size: 16px;
    color:#fff;
    background-color: #000000;
    line-height: 1.7rem;
}

.wrap{
    flex-flow: column nowrap;
    min-height:100vh;
}

header{
    height: 65px;
    background-color: #2a2b2d;
    flex-flow: row nowrap;
}

header .logo{
    background: url("img/logo.png") no-repeat center;
    width:150px;
    height:65px;
    justify-content: flex-end;
    align-items: center;
}

header .logo_arrow{
    background: url('img/logo_arrow.png') no-repeat;
    width:26px;
    height: 30px;
}
header .logo_arrow:hover{
    cursor: pointer;
    background-position: 0 -30px ;
}

header .tab{
    flex-grow: 1;
    height:65px;
    background-image: url("img/1-1.png"); 
}




header .login{
    width:400px;
    height:65px;
    background: url("img/1-3.png") no-repeat right;
}

header .close{
    width:150px;
    height:65px;
    background: url("img/1-4.png") no-repeat center;
}

.container_wrap{
    flex-grow: 1;
    flex-flow: row nowrap;
}

main{
    flex-grow: 1;
    flex-flow: column nowrap;
}

.chat{
    min-width:360px;
    /* background: white url("img/chat.png") no-repeat top; */
    flex-flow: column nowrap;
    background-color:black;
}

.chat_wrap{
    justify-content: space-between;
    background-color: #f1f4f6;
    border-radius: 10px 0 0 0;
}
.chat .chat_title{
    height:45px;
    line-height: 2.5rem;
    color: black;
    padding-left:10px;
    font-weight: bold;
}

.chat_close{
    width:90px;
    background: url("img/chat_title_icon.png") no-repeat right;
}

.chat_group{
    height:70px;
    border-bottom:1px solid #ebeef4;
    background: white url("img/chat_member.png") no-repeat left;
}

.chat_content{
    flex-grow: 1;
    background-color: white;
    overflow-y:auto;
    color: black;
    flex-flow: column nowrap;
    padding: 10px;
}

.chat_content .new{
    color: #4d7ddd;
}

.chat_textarea{
    height:80px;
    border: 1px solid #ebeef4;
}

.chat_textarea textarea{
    width:100%;
    border:none;
    padding:5px;;
}

.chat_icon_wrap{
    height:40px;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 0 0 0 10px ;
}

.chat_icon{
    flex-grow: 1;
    background: url("img/chat_icon.png") no-repeat left;
}

.chat_send{
    width:50px;
    margin-right:10px;
    background:  url("img/chat_icon2.png") no-repeat right;
}

.member{
    height:110px; 
    background-color: rgb(0, 0, 0);
    flex-flow: row nowrap;
    justify-content:center;
    align-items:center;
    gap:10px
}

.member img{
    border-radius: 10px;
}

.member .pic1,.pic2,.pic3,.pic4,.pic5{
    width:161px;
    height: 95px;
    border-radius: 10px;
    background: url("img/member.png");
    align-items:flex-end;
    padding: 0 0 1px 9px;
    font-size: 0.72rem;
    color:rgb(0, 0, 0)
}

.first,.last{
    width:25px;
}

section{
    flex-grow: 1;
    justify-content:center;
    align-items:center;
    background-color: black;
}

section div{
    background-color: #11141b;
    border:1px solid #151b29;
    border-radius: 10px;
    width:90%;
    height:90%;
    justify-content:center;
    align-items:center;
}

section div span{
    display: block;
}

.nav_warp{
    height:70px;
    flex-flow: row nowrap;
    background: #000;
}

.nav_left{
    width:150px;
    align-items:center;
}

.nav_left ul{
    align-items:center;
    gap:5px;
    padding-left:10px;
}

.nav_left li svg{
    margin:0 0 4px 8px;
    }

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

.nav_center ul{
    flex-flow: row nowrap;
    align-items:center;
    gap: 30px;
}

.nav_center svg{
    margin:0 0 4px 2px;
    }

.nav_center .nav01 svg{
    margin:0 0 4px 8px;
    }

.nav_center .nav02 svg{
    margin:0 0 4px 2px;
    transform: rotate(25deg);
    }

.nav_center .nav03 div{
    margin:0 0 4px 2px;
    background:#24d458; 
    width:30px; 
    height:20px; 
    border-radius:3px;
}

.nav_center .nav03 svg{
    margin-left:4px;
    color: black;
}

.nav_center .nav05 svg{
    margin-left:14px;
}

.nav_center .nav07 svg{
    margin-left:8px;
}

.nav_right{
    width:80px;
    background: black;
    justify-content:flex-end;
    align-items:center;
    padding-right:20px
}

.nav_right .nav08 svg{
    margin-left:4px;
    color:red;
}

.btn-dark, .btn-secondary{
    background-color: black;
    border: none;
}

.btn-secondary.show, .btn-secondary:hover, .btn-dark:hover,.btn-secondary:active, .btn-dark:active,.btn-secondary:active, .btn-dark:active{
    background-color: #222;
}

.btn{
    font-size:0.7rem;
}

.btn-group ul{padding:10px}

.dropdown-menu{
    background-color: #222;
    padding: 0 0 0 10px;
    font-size: 0.8rem;
    color: #fff;
}

.dropdown-menu a{
    padding-left:10px
}

.dropdown-menu li:hover{
 background-color: blue;
}

/* 미디어 쿼리 */
@media screen and (max-width: 1220px) {
    .chat{display: none}
}

@media screen and (max-width: 855px) {
    .nav06{display: none}
}
@media screen and (max-width: 780px) {
    .member div.pic5,
    .nav05{display: none}
    }
@media screen and (max-width: 700px) {
    .member div.pic4,
    .nav04{display: none}
    }
@media screen and (max-width: 600px) {
    .member div.pic3,
    .login,
    .nav03{display: none}
    }
@media screen and (max-width: 500px) {
    .member div.pic2,
    .nav02{display: none}
}

@media screen and (max-width: 400px) {
    .wrap{min-width: 340px;}
    .nav01,
    .nav02,
    .nav03,
    .nav04,
    .nav05,
    .nav06{display: none}
}