@media(max-width:1200px){
nav{
display:flex;
justify-content:space-between;
gap:var(--gap);
}
.nav-center-con{
flex:1;
}
.nav-left,
.nav-right{
padding:0;
}
}
@media(max-width:600px){
nav{
position:relative;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:var(--gap);
flex-wrap:wrap;
}
.nav-left{
order:0;
position:absolute;
left:50%;
transform:translateX(-50%);
}
.nav-right{
order:1;
margin-left:auto;
}
.nav-center{
order:-1;
width:var(--gx2);
min-width:var(--gx2);
max-width:var(--gx2);
height:var(--gx2);
min-height:var(--gx2);
max-height:var(--gx2);
flex:0 0 var(--gx2);
padding:0;
margin:0;
cursor:pointer;
}
.nav-center .nav-center-in{
width:var(--gx2);
height:var(--gx2);
padding:0;
justify-content:center;
align-items:center;
pointer-events:none;
}
.nav-center .note-btn-content,
.nav-center .note-btn-text,
.nav-center .note-upload-btn,
.nav-center .note-exp-header{
display:none !important;
}
.nav-center .note-plus-icon{
position:relative;
left:auto;
top:auto;
transform:none;
margin:0;
pointer-events:none;
}
.nav-center.exp .note-plus-icon svg{
display:none;
}
.nav-center.exp .note-plus-icon::before{
content:'';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:20px;
height:3px;
background:var(--ac1);
border-radius:2px;
}
.mobile-note-area{
display:none;
order:2;
width:100%;
flex:1 1 100%;
background:#0f0f0f;
border-radius:var(--br1);
border:var(--bw1) solid #000;
box-shadow:0 0 3px #000;
flex-direction:column;
}
.mobile-note-area.act{
display:flex;
}
.mobile-note-area .note-title-input{
padding:var(--gap) var(--gap) var(--gd2);
font-size:1.4rem;
font-weight:640;
background:transparent;
border:0;
color:var(--cl1);
width:100%;
box-sizing:border-box;
outline:none;
}
.mobile-note-area .note-title-input::placeholder{
color:#aaa;
}
.mobile-note-area .note-input{
padding:var(--gd2) var(--gap) var(--gap);
resize:none;
min-height:100px;
font-size:var(--fz1);
background:transparent;
border:0;
color:var(--cl1);
width:100%;
box-sizing:border-box;
outline:none;
}
.mobile-note-area .note-input::placeholder{
color:#aaa;
}
.mobile-note-area .note-bottom-area{
width:100%;
display:flex;
align-items:center;
justify-content:center;
padding:15px var(--gap);
box-sizing:border-box;
}
.mobile-note-area .add-note-btn{
display:block;
}
}