@charset "UTF-8";

.body-container { border-top: 1px solid var(--line-color); margin-top: 30px; }
.header-container { position: relative; }

.aside-wrap { flex-basis: 200px; padding-top: 70px; }
.aside-wrap .nav-title { font-size: 3rem; letter-spacing: 0; padding-bottom: 20px; border-bottom: 1px solid #333; font-weight: 900; }
.aside-wrap .nav-area ul.nav { padding: 15px 0; }
.aside-wrap .nav-area ul.nav li a { display: block; padding: 14px 15px 10px 15px; font-size: 1.4rem; font-weight: 500; background: transparent; }
.aside-wrap .nav-area ul.nav li a img { width: 17px; height: 17px; margin-right: 13px; position: relative; top: -1px; }
.aside-wrap .nav-area ul.nav li a:hover { background:rgba(0,0,0,0.04); }
.aside-wrap .nav-area ul.nav li.on a { background:var(--navy-color); color: #fff; }


.my-container { display: flex; flex-wrap: nowrap; gap: 50px; position: relative; width: 1200px; margin: 0 auto; padding: 0; }
.my-container .mycontent-wrap { flex-basis: calc(100% - 250px); min-height: 700px; padding: 80px 0 70px 50px; border-left: 1px solid var(--line-color); }
.my-container .mycontent-wrap .title-area { position: relative; padding-bottom: 15px; border-bottom: 1px solid #aaa; }
.my-container .mycontent-wrap .title-area .tit { font-size: 1.7rem; font-weight: 500; display: inline-block; }
.my-container .mycontent-wrap .title-area .btn-wrap { position: absolute; top: -10px; right: 0; }
.my-container .mycontent-wrap .title-area .btn-wrap button { height: auto; padding: 3px 10px; font-size: 1.1rem; background: transparent; letter-spacing: 0; color: #acacac; }


.form-area .row .title { flex-basis: 150px; }
.form-area .row .content { flex-basis: calc(100% - 150px); }
.board-wrap .board-head > span.board-head-tit.num {	width: 5%; }


@media (max-width: 1200px) {
  .my-container { width: 100%; padding: 0 30px; }
}

@media (max-width: 890px) {
  .my-container { padding: 0 20px; }
  .body-container { margin-top: 0; }
  .aside-wrap { padding: 12px 30px; position: absolute; top:0; left: 0; z-index: 5; width: 100%; height: 50px; padding-right: 60px; cursor: pointer; border: 0; background: #031423; }
  .aside-wrap:before { content: ''; position: absolute; top: 20px; right: 30px; width: 10px; height: 6px; transform: rotate(0); transition: transform .25s; background-image: url(../../img/common/dropdown_arr_w.svg); background-repeat: no-repeat; background-size: 100%; }
  .aside-wrap .nav-title { position: relative; top:5px; font-size: 1.6rem; padding-bottom: 0; border-bottom: 0; color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
  .aside-wrap .nav-area { display: none; background: #fff; position: absolute; top:100%; left:0; width: 100%; border-top: 1px solid var(--line-color); padding: 10px 0; border-bottom: 1px solid var(--line-color); box-shadow: 0 3px 4px rgba(0,0,0,0.08); }
  .aside-wrap .nav-area ul.nav { padding: 0; }
  .aside-wrap .nav-area ul.nav li a { padding:13px 30px; font-size: 1.3rem; font-weight: 600; }
  .aside-wrap .nav-area ul.nav li.on a { background:rgba(0,0,0,0.05); color: #000; }
  .aside-wrap.mo-nav-open:before { transform: rotate(180deg); }
  .aside-wrap.mo-nav-open .nav-area { display: block; }

  .my-container { display: block; }
  .my-container .mycontent-wrap { padding: 100px 0 0; border: 0; }
  .my-container .mycontent-wrap .title-area { border: 0; }
}