#header { position:fixed; padding:0 0 0 80px; box-sizing:border-box; z-index:100; width:100%; background-color:#fff; }
#header h1 { display:inline-block; }
#header h1 a { display:inline-block; padding:36px 0; transition-duration:0.5s; }
#header h1 a img { height:70px !important; }
#header .nav { position:absolute; top:50%; left:calc(50% + 6px); transform:translate(-50%,-50%); width:1280px; }
#header .nav > ul { display:inline-block; }
#header .nav > ul > li { display:inline-block; margin:0 -4px; }
#header .nav > ul > li > a { font-size:20px; font-family:'Pretendard'; color:#222; display:inline-block; padding:20px 100px 20px 20px; letter-spacing:0; }
#header .nav > ul > li > ul { position:absolute; background-color:#fff; padding:10px 0; display:none; border:1px solid #ccc; }
#header .nav > ul > li > ul li {  }
#header .nav > ul > li > ul li a { display:inline-block; text-align:center; font-size:17px; font-family: 'Pretendard'; padding:15px 80px 15px 20px; }

#header.on { border-bottom:1px solid #eee; transition-duration:0.5s; }
#header.on h1 a { padding:20px 0; transition-duration:0.5s; }
#header.on .nav > ul > li > a { font-size:18px; transition-duration:0.5s; }
#header.on .nav > ul > li > ul { margin:-5px; }

#header .aside { position:absolute; top:0; right:0; width:70px; z-index:101; }
#header .aside .sitemap {  }
#header .aside .sitemap a { display:block; height:72px; background-color:#004098; position:relative; }
#header .aside .sitemap a div { position:absolute; bottom:13px; left:0; width:100%; }
#header .aside .sitemap a div span { margin:6px auto 0; display:block; width:28px; height:2px; background-color:#fff; }
#header .aside ul {  }
#header .aside ul li {  }
#header .aside ul li a { display:block; color:#fff; padding:56px 0; text-align:center; }
#header .aside ul li.inquire a { background-color:#004098; }
#header .aside ul li.introduction a { background-color:#0f0f0f; }
#header .aside ul li a span { display:block; font-size:18px; line-height:24px; font-weight:300; }
#header .aside ul li a img { margin:15px 0 0; }
#header .aside .mobile_plus_btn { display:none; }


#header.on .aside .sitemap { box-shadow:-5px 10px 10px rgba(0,64,152,0.22); transition-duration:0.5s; }
#header.on .aside ul li.inquire a { box-shadow:-5px 10px 10px rgba(0,64,152,0.2); transition-duration:0.5s; }
#header.on .aside ul li.introduction a { box-shadow:-5px 10px 10px rgba(15,15,15,0.2); transition-duration:0.5s; }

.site_map { background-color:rgba(0,0,0,0.5); position:fixed; width:100%; height:100%; top:0; left:0; z-index:1000; display:none; }
.site_map.on { display:block; animation:sitemap 0.5s 1; }

@keyframes sitemap {
  0% { opacity:0; }
  100% { opacity:1; }
}

.site_map .div { background-color:#fff; width:90%; max-width:900px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background-image:url('../img/main/onetech_decotext.png'); background-position:right bottom; background-repeat:no-repeat; background-size:50%; }
.site_map .div h5 { background-color:#004098; padding:0 20px; box-sizing:border-box; position:relative; }
.site_map .div h5 b { color:#fff; font-size:20px; font-family:'Pretendard'; line-height:60px; display:none; font-weight: 500;}
.site_map .div h5 b.pc { display:inline; }
.site_map .div h5 b.mobile { display:none; }
.site_map .div h5 a { position:absolute; top:calc(50% - 5px); right:0; transform:translate(0,-50%); display:inline-block; padding:20px; }
.site_map .div h5 a span { display:inline-block; background-color:#fff; width:26px; height:2px; }
.site_map .div h5 a span:nth-child(1) { transform:rotate(45deg); margin:0 -30px 0 0; }
.site_map .div h5 a span:nth-child(2) { transform:rotate(-45deg); }
.site_map .div div { max-height:calc(100vh - 60px); overflow-y:auto; }
.site_map .div div > ul { overflow:hidden; }
.site_map .div div > ul > li { float:left; width:20%; min-height:320px; border-left:1px solid #eee; box-sizing:border-box; padding:28px 0 0 25px; }
.site_map .div div > ul > li:first-child { border:0; }
.site_map .div div > ul > li > a { font-size:15px; color:#222; font-family: 'Pretendard'; padding:0 0 10px; display:block; }
.site_map .div div > ul > li ul { padding:5px 0 0; }
.site_map .div div > ul > li ul > li {  }
.site_map .div div > ul > li ul > li a { color:#333; font-size:15px; font-weight:300; padding:5px 0; display:block; }


@media screen and (max-width:1750px) {  
  #header .nav { left:calc(50% + 135px); width:780px; }
  #header .nav > ul > li > a { padding:20px 50px 20px 20px; }
  #header .nav > ul > li > ul li a { padding:15px 50px 15px 20px; }
}


@media screen and (max-width:1500px) {
  #header { padding:0 0 0 30px; }
  #header h1 a { padding:30px 0; }
  #header .nav { left:calc(50% + 80px); }
}




@media screen and (max-width:1024px) {
  #header .aside { position:static; top:auto; right:auto; }

  #header .aside .sitemap { top:50%; right:20px; transform:translate(0,-50%); position:absolute; }
  #header .aside .sitemap a { background-color:inherit; height:auto; padding:5px 0; }
  #header .aside .sitemap a div { position:static; bottom:auto; left:auto; }
  #header .aside .sitemap a div span { background-color:#222; margin:6px auto; }

  #header .aside ul { position:fixed; right:15px; width:82px; height:171px; opacity:1; transition-duration:0.3s; opacity:0; bottom:-40px; display:none; }
  #header .aside ul.mobile_on { display:block; }
  #header .aside ul.stop { opacity:0; z-index:-1; transition-duration:0.3s; }
  #header .aside ul.on { opacity:1; bottom:103px; transition-duration:0.3s; }
  #header .aside ul.on.stop { opacity:0; z-index:-1; transition-duration:1s; bottom:-200px; }
  #header .aside ul li { margin:5px 0 0; }
  #header .aside ul li:first-child { margin:0; }
  #header .aside ul li a { padding:0; width:80px; height:80px; border-radius:100%; border:1px solid rgba(255,255,255,0.1); }
  #header .aside ul li a span { line-height:80px; text-align:center; font-size:15px; }
  #header .aside ul li a span br { display:none; }
  #header .aside ul li a img { display:none; }
  #header.on .aside ul li.inquire a { box-shadow:none; }
  #header.on .aside ul li.introduction a { box-shadow:none; }

  #header .aside .mobile_plus_btn { display:none; width:80px; height:80px; border-radius:100%; background-image:linear-gradient(to bottom, #004098, #131169); position:fixed; bottom:20px; right:15px; cursor:pointer; transition-duration:0.3s; box-shadow:5px 5px 5px rgb(0 64 152 / 20%); }
  #header .aside .mobile_plus_btn.mobile_on { display:block; }
  #header .aside .mobile_plus_btn.stop { opacity:0; z-index:-1; transition-duration:1s; bottom:-100px; }
  #header .aside .mobile_plus_btn div { position:relative; width:80px; height:80px; transition-duration:0.3s; transform:rotate(0deg); }
  #header .aside .mobile_plus_btn.on div { transition-duration:0.3s; transform:rotate(135deg); }
  #header .aside .mobile_plus_btn span { width:2px; height:30px; background-color:#fff; display:inline-block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
  #header .aside .mobile_plus_btn span:nth-child(1) {  }
  #header .aside .mobile_plus_btn span:nth-child(2) { width:30px; height:2px; }

  .site_map .div { width:100%; height:100%; background-image:none; max-width:100%; top:0; left:0; transform:none; }
  .site_map .div div > ul > li { width:100%; min-height:inherit; border-bottom:1px solid #eee; padding:30px 20px; }
  .site_map .div div > ul > li:first-child { border-bottom:1px solid #eee; }
  .site_map .div div > ul > li:last-child { margin:0 0 70px; }
  .site_map .div div > ul > li > a { padding:0 0 5px; }
  .site_map .div h5 b.pc { display:none; }
  .site_map .div h5 b.mobile { display:inline; }

  #header.on .aside .sitemap { box-shadow:none; }

  #header .nav { display:none; }

  #header h1 a { padding:22px 0; }
  #header h1 a img { height:45px !important; }
}

@media screen and (max-width:640px) {
  .site_map .div div > ul > li ul > li a { font-size:16px; }

  #header { padding:0 0 0 20px; }
  #header h1 a img { height:35px !important; }
  #header.on h1 a { padding:15px 0; }
}



/**/