/* 폰트 */
@font-face {
  font-family: 'SeoulAlrimTTF-Heavy';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/SeoulAlrimTTF-Heavy.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'SUIT-Regular';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* media */
@media screen and (min-width:1440px){
  .menu_wrap {gap: 80px;}
  .top_menu {font-size: 19px;}
  .sub_menu {font-size: 16px; width: 100px;}
  #menu_background h1{font-size: 48px;}
}
@media screen and (max-width:1440px){
  .menu_wrap {gap: 60px;}
  .top_menu {font-size: 19px;}
  .sub_menu {font-size: 16px; width: 100px;}
  #menu_background h1{font-size: 48px;}
}
@media screen and (max-width:1280px){
  .menu_wrap {gap: 40px;}
  .top_menu {font-size: 17px;}
  .sub_menu {font-size: 15px; width: 90px;}
  #menu_background h1 {font-size: 32px;}
}
@media screen and (min-width:1024px){
  .f_wrap {font-size: 15px;}
  #f_logo {width: 145px;}
  #f_copyright span{display: inline-block;}
}
@media screen and (max-width:1024px){
  .menu_wrap {gap: 18px;}
  .top_menu {font-size: 16px;}
  .sub_menu {font-size: 11px; width: 80px;}
  #menu_background h1 {font-size: 24px;}
  .f_wrap {font-size: 13px;}
  #f_logo {width: 120px;}
  #f_copyright span{display: none;}
}
@media screen and (min-width:768px){
  #icon_menu,#button_top_s {display: none;}
}
@media screen and (max-width:768px){
  #icon_menu,#button_top_s {display: block;}
  .h_wrap nav,#button_top,#menu_background {display: none !important;}
}


/* 공통 */
html{background-color: white; min-width: 740px}
html::selection {background: #333; color: #ee5800;}
body{background-color: white; margin: 0px; padding: 0; font-family: 'SUIT-Regular';}
hr{clear: both; margin: 0; padding: 0;}
a{color: black; text-decoration: none;}
h1,h2,h3,h4,h5,h6{margin: 0;}
h1{font-size: 60px; font-family: 'SeoulAlrimTTF-Heavy';}
h2{font-size: 40px;}
h5{font-size: 18px; font-weight: 400;}
h6{color: rgb(110, 110, 110); font-size: 16px; font-weight: 400;}


/* header */
header{
  background-color: white; border-bottom: 1px solid rgba(211, 211, 211, 0.5);
  width: 100%; height: 100px;
  position: fixed; z-index: 99;
}
.h_wrap{
  width: 100%; height: 100%;
  display: flex; justify-content: space-between; align-items: center;
  position: relative;
  #icon_menu{width: 32px; padding-bottom: 3px;}
}
.h_menu{
  width: 100%; padding: 0 5%;
  display: flex; justify-content: space-between; align-items: center;
}
.menu_wrap{
  display: flex; justify-content: right; align-items: center;
  position: relative;
}
.top_menu{
  padding: 0; list-style: none;
}
.top_menu:hover{
  a{color: #ee5800; font-weight: bold;}
  ul a{color: white; font-weight: normal;}
}
.sub_menu{
  margin-top: 45px; padding: 0; 
  list-style: none; display: none;
  position: absolute; z-index: 2;
  li{margin: 10px 0;}
  li a{color: white;}
}
.sub_menu li:hover a{
  border-bottom: 2px solid white;
  padding-bottom: 1px;
  font-weight: bold;
}
#menu_background{
  background: #ee5800; border-bottom: 1px solid rgba(211, 211, 211, 0.5);
  height: 0px; pointer-events: none; z-index: 1;
  opacity: 0; transition: opacity 0.5s ease, height 0.5s ease;
  display: flex; align-items: center;
  position: fixed; left: 0; right: 0; top: 100px;
  h1{margin-left: 5%; color: white; line-height: 120%;}
}
.h_wrap:hover #menu_background{
  height: 180px;
  opacity: 1;
}
#icon_menu{
  cursor: pointer;
}


/* aside */
#button_top{
  position: fixed; right: 3%; bottom: 5%; z-index: 99;
  width: 90px; height: 350px; background-color: rgba(0, 0, 0, 0.8); border-radius: 10px;
  padding: 20px 0px; text-align: center;
  a{color: white;}
}
#button_top table{
  margin: 0px auto; text-align: center;
  color: rgb(223, 223, 223); font-size: 14px;
  span{font-size: 26px;}
  hr{border: 1px solid gray;}
  td{padding: 5px 0;}
}
#button_top_s{
  position: fixed; right: 3%; bottom: 5%; z-index: 99;
  width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.8); border-radius: 10px;
  padding: 20px; text-align: center; font-size: 15px;
  a{color: white;}
}


/* footer */
footer{
  background-color: #ffeebb;
  width: 100%; min-height: 300px;
}
.f_wrap{
  padding: 10px 5% 3% 5%;
  color: #ee5800;
  hr{border: none; border-top: 1px solid #ee570070;}
  ul{padding: 0; list-style: none;}
  li{padding-right: 30px; cursor: pointer; display: inline-block;}
}
#f_text{
  margin-top: 25px;
  display: flex; justify-content: left; gap: 10px;
}
#f_left{
  display: flex; flex-direction: column; gap: 25px;
  #f_logo{margin-right: 50px;}
  #f_sns img{width: 30px; padding-right: 8px;}
}
#f_copyright{
  line-height: 170%;
  p{margin: 0;}
  span{margin-left: 10px;}
  table{
    border-collapse: collapse;
    margin: 10px 0;
    th{width: 100px; padding: 0; text-align: left;}
  }
}