@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Nunito+Sans:wght@200;300&display=swap');
*{padding: 0; margin: 0;font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.02em; font-size: 16px; box-sizing: border-box;}
a {text-decoration: none; color: inherit;}


.wrap {width: 100%; max-width: 1920px;}
.header{ width: 100%; padding-top:14px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 1% 10%;}
.header .logo{ width: 10%; text-align: center; }
.header .logo a {display: block; width: 100%;}
.header .logo a img {width: 200px; display: block;}
.navi{ width: 90%; text-align: center; }
.navi ul{ text-align: right; list-style-type: none; height: 100%; }
.navi ul li { font-size: 15px;  margin: 10px 30px; display: inline-block; font-weight: 200;}
.navi ul li a {  color: #ffffff; text-decoration: none; display: block; position: relative; text-align: center;}
.navi ul li a::after { content: "";  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 0; height: 1px; transition: all .3s ease-out;}
.navi ul li a:hover::after { width: 100%; }

/*헤더*/
.navi ul li a::after{background:#BF0413;  height: 2px;}
.nav_toggle_btn {display: none;}
.hader_wrap {position: fixed; width: 100%; z-index: 100; }

#header.up {opacity: 1; animation: up 0.5s ease-in-out 0s 1 normal forwards; } 
 @keyframes up { 0% {opacity: 0;top:-130px; } 50% {opacity: 0; } 100% {opacity: 1; top: 0; background-color:rgba(0,0,0,0.8); }}
.navi_mobile {display: none;}
#header.up .navi ul li a {color:#ffffff; font-weight: 300;}
.mobile_bar {display: none;}
#header.up .mobile_bar {display:block ;width: 100%; height: 1px; background: rgb(224,3,3); background: linear-gradient(90deg, rgba(45,0,0,1)  7%, rgba(121,9,9,1) 34%, rgba(124,2,2,1) 77%, rgba(45,0,0,1) 100%);}

/*푸터*/
footer {width: 100%; background-color:#111111;  color:#ffffff; padding:32px 0; box-sizing: border-box;}
.foot_inner { width: 100%; margin: 0 auto;}
.ft_top {display: flex; justify-content: space-between; position: relative; padding:20px; margin: 0 auto; width: 70%; align-items: center;}
.ft_top_inner::after,
.ft_top_inner::before  {content: ''; width: 100%; height: 1px; background-color: #1e1e1e; position:absolute}

.ft_top img {width: 158px; height: auto;}
.ft_top .top a {display: block; width: 50px; position: relative;}
.ft_top .top a::before{content: ''; background-image: url(../img/ico-arrow-top.png); width:13px; height: 8px; position: absolute;  top: 50%;  transform: translateY(-50%); right: 0; background-repeat: no-repeat; background-size: cover; display: block;}

.ft_top a {text-decoration: none; color: #ffffff; font-family: 'Nunito, Sans'; font-weight: 100;}

.copy_right {width: 80%; text-align: center; margin: 0 auto;}
.address {display: flex; padding:44px 0 50px 0;  justify-content: space-between;}
.font {font-style: 15px;}
.font span:nth-child(1) {font-family: 'Nunito, Sans'; font-weight: 200; color:white; padding-right: 5px;}
.font span:nth-child(2) {font-size: 20px; opacity: .75;  font-weight: 200; color:white; padding-right: 15px;}

/* *************************반응형************************ */


 /* **********************모바일****************************/
 @media screen and (max-width:767px) {
.wrap {width: 100%;}

  /*해더*/
  
  .header {display: flex; justify-content: space-between; padding:4%; width: 100%; }
  .header .logo {margin: 0; width:40%; margin-left: 20px; padding-top:6px}  
  .header .logo a {display: block; }
  .header .logo a img {display: block;}
  .navi {display: none;}
  .nav_toggle_btn {width:8%; display: block; position: absolute; cursor:pointer; margin-right: 20px; height: 22px; border:none; background-color: transparent; z-index: 1;
    top:50%; right: 5%; transform: translateY(-50%);
  }
  
  /*토글 버튼*/
  .nav_toggle_btn span {width:100%; background:#e01504; position:absolute; height: 2px; left:0; transition: all .4s;}
  .nav_toggle_btn span:nth-child(1) {top:0;}
  .nav_toggle_btn span:nth-child(2) {top:50%; }
  .nav_toggle_btn span:nth-child(3) {top:100%;}
  .nav_toggle_btn.active span:nth-of-type(1) { transform: translateY(8px) rotate(-45deg);}
  .nav_toggle_btn.active span:nth-of-type(2) {opacity: 0;}
  .nav_toggle_btn.active span:nth-of-type(3) {transform: translateY(-13px) rotate(45deg);}

  /*토글메뉴 클릭시 네비게이션*/
  .navi_mobile {position: fixed; top:0; left: 0; background-color:#000000; width:100%; height: 100vh;}
  .navi_mobile.on { display: block;}
  .navi_mobile ul {width: 100%; position: absolute; top:10%; padding:5%} 
  .navi_mobile ul li {list-style: none; color:#ffffff; display: flex; height: 3.5em;}
  .navi_mobile ul li i {border-radius: 100%; width: 50px; height: 50px; border:1px solid #570801; position: relative;
 font-size: 20px; color:#e01504}
  .navi_mobile ul li i::before {position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);}

  .navi_mobile ul li a {display: inline-block; padding-left: 7%; color:inherit; text-decoration:none; font-size: 1.3em; line-height: 4em; display: block; font-weight: 100;}
  
  .hader_bottom {width: 100%; position: absolute; bottom: 10%; border-top: 1px solid #e01504; box-sizing: border-box; 
    color: #757575;
    
    text-align: center;}
  .hader_bo_box {padding-top:5%}
  .m_ex_box span:nth-child(1) { font-weight: bold; color:#a29d9c}
  .m_ex_box span {line-height: 2em;}

  .main_content1 {width: 100%;}

  .footer {width: 100%; padding-bottom: 0; padding-top: 30px; }
  .ft_top {width: 90%; padding:20px 0;}
  .copy_right {width: 90%;}
  .address {display: block; text-align: center;} 
 }
 /************************************* 타블렛 *************************************/
 @media screen and (max-width:480px) {

  .navi_mobile ul li::before {
    width: 30px; height: 30px; 
  }

  .navi_mobile ul li a {font-size: 1em; line-height: 3em;}
  


 }