.fc-9c9698 {
  color: #9c9698;
}
.bg-9c9698 {
  background-color: #9c9698;
}
.fc-090228 {
  color: #090228;
}
.bg-090228 {
  background-color: #090228;
}
.bd-090228 {
  border: 1px solid #090228;
}

.bg-3e7ffe{
  background-color: #3e7ffe;
}

.fc-95 {
  color: #959595;
}
.fc-888 {
  color: #888;
}
.fc-333 {
  color: #333;
}
.fc-ddd {
  color: #ddd;
}
.fc-bbb {
  color: #bbb;
}
header {
  height: 5vw;
  background: white;
  position: fixed;
  z-index: 99;
  width: 100vw;
}

.hd {
  height: 5vw;
  width: 84%;
  background: white;
  position: fixed;
}

.hd_btns input {
  padding: 5px 17px;
}

.hd_btns input:nth-child(2) {
  background: linear-gradient(to right, #000000, #585858);
}

/*.hd.scrolled .hd_sunny {*/
/*display: none;*/
/*}*/

/*.hd.scrolled .hd_btns input {*/
/*background: unset;*/
/*  color: #090228;*/
/*  border:none;*/
/*}*/


main
{
  margin-top:5.2vw;
}

.m_menu_box{
visibility: hidden;
  display: none;
}
.logo{
    width: 3vw;
    height: auto;
}


/* mobile */
@media screen and (max-width: 767px) {

  .m_menu_box {
    display: none;
  }

  .m_menu_box.show {
    display: block;
  }


  header {
    height: 50px;
  }

  main {
    margin-top: 59px;
  }

  .hd {
    height: 50px;
  }

  .logo {
    width: 36px;
  }


  /* 모바일 메뉴 */
  .m_menu_btn,
  .m_menu_box {
    display: block;
  }

  .m_menu_btn {
    position: fixed;
    top: 2.5vh;
    right: 5%;
    width: 25px;
    height: 18px;
    z-index: 1000;
  }

  .m_menu_btn span {
    width: 25px;
    height: 2px;
    display: block;
    background-color: #111;
    position: absolute;
  }

  .m_menu_btn.change span {
    background-color: #fff;
  }

  .m_menu_btn span:first-child {
    top: 0;
    left: 0;
    transition: all .5s;
  }

  .m_menu_btn span:nth-child(2) {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: opacity .5s, background-color .5s;
  }

  .m_menu_btn span:last-child {
    bottom: 0;
    right: 0;
    transition: all .5s;
  }

  .m_menu_btn.on span:first-child {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background-color: #fff;
  }

  .m_menu_btn.on span:nth-child(2) {
    opacity: 0;
    background-color: #000;
  }

  .m_menu_btn.on span:last-child {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
    background-color: #fff;
  }

  .m_menu_box {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 998;
    top: 121px;
    left: 0;
    padding: 0 10%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    visibility: hidden;
    transition: visibility 1.2s;
  }

  .m_menu_box.show {
    visibility: visible;
  }

  .m_menu_box:after {
    content: " ";
    width: 100px;
    height: 100px;
    border-radius: 2000px;
    background: linear-gradient(to right, #090228, #7597ef);
    position: absolute;
    top: -100px;
    right: -100px;
    transition: transform 1.2s;
  }

  .m_menu_box.show:after {
    transform: scale(20);
  }

  .m_menu_box ul {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 30px 0;
    position: relative;
    z-index: 998;
    opacity: 0;
  }

  .m_menu_box.show ul {
    opacity: 1;
    transition: opacity 1s .5s;
  }

  .m_menu_box ul li {
    font-size: 23px;
    font-family: 'SUITE-ExtraBold', sans-serif;
    color: #fff;
    cursor: pointer;
  }
}

/* tablet 세로*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  header {
    height: 7vw;
  }

  .hd {
    height: 7vw;
  }

  main {
    margin-top: 7.2vw;
  }

  .logo {
    width: 22%;
  }

  header nav{
    gap:15px!important;
  }

  header nav ul{
    gap:15px!important;
  }

  .m_menu_box, .m_menu_btn {
    display: none !important;
  }


}