/* font */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
 *{
    font-family: 'Pretendard';
 }
   
html {
  font-size: 62.5%;
  height:100%;
}
/* 위로가기 버튼 */
#topBtn{
  position:fixed;
  top:90vh;
  left:94vw;
  width:2vw;
  height:2vw;
  background-image: url(../img/top-btn.png);
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent:-9999em;
  margin-top: 1rem;
  border-radius: 50%;
  
}
/* header */
header{z-index: 998;position:fixed;top:0;width:100%;}

/* header1 */
.header1{display:flex;width:100%;position:relative;color:white;height:11.01vh; }
.header1::before{opacity: 100%;}
#logo{flex:1; position:relative;height:100%;width:25vw;}
#logo a{position: absolute; top:50%;left:15%;transform: translate(0%,-50%);}
#logo a img{width:12.9rem;height:auto; }

#menu{flex:2;position:relative;height:100%;}
#menu .menu1{width:50vw; text-align: center;display:flex;justify-content: space-between;position: relative;height:100%;}
.menu1 a{font-size: 1.8rem; text-decoration: none;color:white;font-weight: 300;height:11vh;position: relative;top:50%; }
.menu1 a:hover{font-weight: 600;}

#siteMap{ flex:1;width:25vw;position:relative;} 
#siteMap a i{font-size:5.1rem;position: absolute; top:60%;right:10%;color:white; transform: translate(-50%,-50%);}

.header2{display:flex;height:7.41vh;width:100%;display:none;background-color: white;margin:0 auto;}
.menu2{width:50%;height:fit-content;display:flex;justify-content: space-between; position: relative;top:50%;transform: translateY(-50%);}
.menu2 a{font-size: 1.8rem; text-decoration: none;color:black; }
.menu2 a:hover{font-weight: 600;}

#h-about .menu2{position: absolute;left:5.5%; transform: translate(0%,-50%);}
#h-product .menu2{position: absolute;left:25.5%; transform: translate(0%,-50%);}
#h-technology .menu2{position: absolute;left:45.5%; transform: translate(0%,-50%);}
#h-news .menu2{position: absolute;left:66.5%; transform: translate(0%,-50%);}
#h-education .menu2{position: absolute;left:68%; transform: translate(0%,-50%);}


.select-menu:hover {
  border-bottom: 4px solid #154B9A;
}
.select-menu {
  height:100%;flex-basis: 20%;text-align: center;
}
.menu2 hr{border:1px solid black}

/* ========== site map ========= */
#mapShow{display:none; height:100vh;width:100%;background-color:black;position:absolute;z-index: 5;top:0;overflow: hidden;}

.map-line1{display:flex; margin: 0 auto; justify-content: space-between;width:60vw;color:white;position:relative;z-index: 20;}
.map-line1 p{font-size:4vw;font-weight: 600;position:relative;top:15vh;}
.x{font-size: 2.5vw;position:relative;top:17vh;}

.map-line2{width:60vw;padding-top:25vh;z-index: 15;margin: 0 auto; position:relative;display:flex;justify-content: space-between;}
.map-line2-1 p{font-size:1.67vw; color:#ffffff}
#education{text-decoration: none;color:#ffffff }
.map-line2-1 ul {list-style: none;padding-left: 0;padding-top:3vmax;}
.map-line2-1 ul li {line-height: 5rem;}
.map-line2-1 ul li a{font-size:1.05vw;text-decoration: none; color:#ACACAC}
.map-line2-1 ul li a:hover{color:#ffffff}


.back-letter{position:absolute;bottom:0%;z-index: 10;width:100%;}
.back-letter img{width:100%; height:100%;}



/*@media all and (max-height:774px) { 
  .back-letter{position:absolute;bottom:-50%;color:grey;font-size: 68rem;font-weight: 600;opacity: 5%;z-index: 10;width:100%;}
  
}
*/
  
  


@media all and (min-width:731px)  and (max-width:1250px) { 
  
  #menu{display:none;}
  .map-line1 p{top:10vh;}
  .x{font-size: 8rem;position:relative;top:7vh;}

.map-line2{width:60;flex-direction: column;padding-top:15vh;}
.map-line2-1{display:flex;width:100%;flex-wrap: wrap;}
.map-line2-1 p{flex-basis:100%; height:5vmax;font-size: 2rem;}
.map-line2-1 ul{display:flex;padding-top:0;flex-basis:100%;justify-content: space-between;}
.map-line2-1 ul li{width:auto;line-height: 2rem;padding-bottom:2rem;}
.map-line2-1 ul li a{font-size:2.5rem;text-decoration: none; color:#ACACAC}
#topBtn{
  position:fixed;
  top:85vh;
  left:85vw;
  width:8vw;
  height:8vw;
  
}
  
}

  
@media all and (max-width:730px) { 
  #menu{display:none;}
  .map-line1{width:80vw;}
  .map-line1 p{top:10vh;}
  .x{font-size: 3rem;position:relative;top:8vh;}

.map-line2{flex-direction: column;padding-top:15vh;width:90vw;}
.map-line2-1{display:block;width:100%; padding-top:3rem;}
.map-line2-1 p{flex-basis:100%; height:3vmax;font-size: 2rem;}
.map-line2-1 ul{display:flex;padding-top:0;flex-basis:100%;flex-wrap:wrap;justify-content: space-between;text-align: center;}
.map-line2-1 ul li{flex-basis:23%;line-height: 2rem;width:22%;}
.map-line2-1 ul li a{font-size:2rem;text-decoration: none; color:#ACACAC}
#de{flex-basis: 50%;width:50%;}
#topBtn{
  position:fixed;
  top:85vh;
  left:85vw;
  width:8vw;
  height:8vw;
  
}
}