/**
* File Name : index_layout.css
* Description : 메인스타일시트
* Author : Wed Project Team / Design
* Update : 2026.09.11
**/

@charset "utf-8";


#navArea {
 display: flex;
 justify-content: space-between;
 padding: 0px 0;
 position: fixed;
 width: 100%;
 top: 0px;
 background: rgba(0,0,0,.0);
 transition: background 0.5s;
 z-index:99;
 height:90px;
 border-bottom:1px solid rgba(255,255,255,0.1);
}



#navArea.is-sticky {background: #000;}
#navArea.is-sticky a {color:#fff;}
#navArea.is-sticky a:hover {color:#f8980f;}




/* header */

.header {margin:0 auto; width: 100%; padding:0 2%; z-index: 99;}
.header ul {margin: 0; padding: 0; list-style: none; overflow: hidden; line-height:90px;}
.header li a { display: block; padding: 0 30px; text-decoration: none; color:#fff; font-weight:600; font-size:1em!important;}
.header li a:hover,
.header .menu-btn:hover {color:#f8980f;}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 0 10px 0 20px;
  text-decoration: none;
}


.hdphone {float:left;}
.mhdphone { display:none;}


/* mobile menu */

.header .menu {
  clear: both;
  z-index:999;
  max-height: 0;  
  transition: max-height .2s ease-out;
}

/* mobile menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 42px 20px!important;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #fff;
  display: block;
  height: 4px;
  position: relative;
  transition: background .2s ease-out;
  width: 28px;
  z-index:999;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before { top: 8px;}
.header .menu-icon .navicon:after { top: -8px;}

/* mobile menu btn */
.header .menu-btn {display: none;}
.header .menu-btn:checked ~ .menu { max-height: 600px;}
.header .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}
.header .menu-btn:checked ~ .menu-icon .navicon:before {transform: rotate(-45deg);}
.header .menu-btn:checked ~ .menu-icon .navicon:after {transform: rotate(45deg);}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {top: 0;}

/*993px */
@media (min-width: 63em) {  
  .header li {float: left;}
  .header li a { display: block; padding: 0 16px; text-decoration: none; color:#fff; font-weight:600; font-size:1em!important;}
  .header .menu {clear: none; float: right; max-height: none;  }
  .header .menu-icon {display: none;}
}


/* 992px */
@media (max-width: 62.125em) { 
  #navArea {border-bottom:0px solid rgba(255,255,255,0.1); padding: 0;}
  .header {width: 100%; z-index: 999; background:rgba(0,0,0,1); padding:0; }
  .header ul {line-height:35px; padding:0;   }
  .header li a {padding: 8px 30px; color:#fff; background:rgba(0,0,0,0.8); font-size:0.98em!important;	 }
  .header .logo {height:90px; font-size: 2em; padding: 0 0 0 20px; color:#fff}

  .hdphone {display:none; }
  .mhdphone {float:left; margin-top:22px; margin-left:6px; display:block; }
  
}