@charset "utf-8";

/* CSS Reset */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');
/* font-family: "Noto Sans KR", sans-serif; */
/* font-family: "Roboto", sans-serif; */
:root{
  --font-size-h2:5rem;
  --font-size-h3:3rem;
  --font-size-h4:2rem;
  --font-size-h5:1.5rem;
  --font-size-h6:1.2rem;

  --font-color-main:#053863;
  --font-color-point1:#01a5e0;
  --font-color-point2:#ffc400;
  --font-color-point3:#0dcdfd;


--font-color-sub1:#f0f0f0;
--font-color-sub2:#bebebe;
--font-color-sub3:#cfe9ff;


  --font-color1:#333;
  --font-color2:#666;
  --font-color3:#999;
}
html, body, div , span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{margin: 0; padding: 0; border: 0; font-size: 100%;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{display: block;}
html{font-size: 16px;}
body{font-family: "Noto Sans KR", sans-serif; 
     color: #333}
ol, ul{list-style: none;}
table{border-collapse: collapse; border-spacing: 0;}
address{font-style: normal}
a{color: #333; text-decoration: none; display: block;}
img{border: 0; vertical-align: top}

.hidden{display: block; position: absolute;
 left: -1000%; width: 1px; height: 1px;
  overflow: hidden; color: #fff}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}  

#wrap{width: 100%; overflow:hidden ;}


/* skipNav 바로가기 */
#skipNav{position: relative; width: 100%; overflow: hidden; z-index: 110;}

#skipNav a{height: 1px; margin-bottom: -1px; 

           overflow: hidden; text-align: center;

           color: #fff; font-size: 1.2rem; 

           font-weight: 600;} 

#skipNav a:focus{height: auto; padding: 15px 0; background: var(--font-color-main)}

/* 헤더공통 영역 */
#headerArea{
  width: 100%; 
  height: 80px; 
  position: fixed; 
  z-index: 100; 
  left: 0; 
  top: 0; 
  background: rgba(255, 255, 255, .7); transition: background .5s ease-out;}


#headerArea .header_inner{
  width: 1400px; 
  margin: 0 auto; 
  display: flex;} 
/* 섹션들도 배경이 100%일경우 _inner라고 묶어주고 가로크기 다시, margin  */


#headerArea .logo{
  width: 350px; 
  height: 80px;}
#headerArea .logo a{
  width: 100%; 
  height: 100%; 
  background: url(../images/logo.png) no-repeat left center; 
  text-indent: -999px; 
  overflow: hidden;
  display: block; 
  }/* IR기법 로고를 배경으로 */
  
/* 글로벌 네비게이션 영역 */
#gnb{clear:both;width:1200px; flex-grow: 1;} 
	
#gnb ul.dropdownmenu{float:left; width: 100%; }
#gnb ul.dropdownmenu li.menu{position:relative;float:left;width:16.66%;  }



	
#gnb ul.dropdownmenu li a.depth1{display:block;
  padding: 28px 0 27px;  
  color:#333;
  text-align: center; 
  transition: all .5s;
  font-weight:600;
  font-size: 1.1rem;
 }
#gnb ul.dropdownmenu li.menu a.depth1::after{
  content: '';
  height: 3px;
  width: 0;
  background: var(--font-color-point1);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 60px;
  transition: all .5s;
  }
  #gnb ul.dropdownmenu li.menu:hover a.depth1::after,
  #gnb ul.dropdownmenu li.menu:hover a.depth1.current{
    width: 70%;
  }


 
	
	
    /* 2depth */
#gnb ul.dropdownmenu li ul{width:100%; height:100px; position:absolute;top:70px;left:0;
		  padding:0px 0 10px; line-height:2em; display:none; }

#gnb ul.dropdownmenu li ul li{ text-align:center; font-weight:bold;}
#gnb ul.dropdownmenu li ul li a{display:block;  color:#333; /* transition: all .5s; */
padding: 2px 0; display: flex; align-items: center; justify-content: center;font-weight:500 }
#gnb ul.dropdownmenu li ul li a:hover{color:#fff; background: rgba(5, 56, 99, 1); font-weight: 400  
;}







#headerArea .top_menu{
  width: 220px; 
  display: flex; 
  justify-content: right; 
  align-items: center; }

#headerArea .top_menu li{}

#headerArea .top_menu a{
  color: #333; 
  text-align: right; 
  margin-left: 20px;
  display: flex;
  transform: translateY(5%);
  font-weight: 500;
  transition: all .5s;
  
}
#headerArea .top_menu a:hover{
  color: #777;

}

/* 푸터공통 영역 */
#footerArea{
  width: 100%;
  background:#222
}

/* top이동버튼 */
#footerArea .top_move{
    width: 60px; height: 60px; background: var(--font-color-point1);
    color: #fff; font-size: 1rem;font-weight: 600;
    border-radius: 50%; 
    text-align: center;
    box-shadow: 0 0 10px 1px rgba(0,0,0,.2);
    position: fixed; left:50%; bottom: 100px; z-index:90;
    margin-left: 770px; transition: color,background .5s ease-out;
    display: none;
  }

#footerArea .top_move>span{display: block; text-align: center; margin-top: 17px;}

#footerArea .top_move:hover {color: var(--font-color-point1); background: #fff;}


#footerArea .footer_inner{
  width: 1400px; 
  margin: 0 auto;
  display: flex; 
  justify-content: space-between;
  padding: 40px 0 50px 0;
}

  
#footerArea .footer_inner .footer_left{width: 1100px;}
#footerArea .footer_inner .bottom_menu{
display: flex; 
justify-content: space-between;
width: 450px;
font-size: 1.2rem;
}


#footerArea .footer_inner .bottom_menu a{
  display: inline-block;
  color: var(--font-color-sub1);
  margin-right: 14px;
  align-items: center;
}

#footerArea .footer_inner .bottom_menu a:hover{
  color: #666;
}

#footerArea .footer_inner .bottom_menu span{
   color: #666;
   display: inline-block;
   transform: translateY(-1px);

 
}


#footerArea .footer_inner address{
    margin-top: 15px;
    line-height: 1.8rem;
    color: var(--font-color-sub1);
  }

#footerArea .footer_inner .sns{
    display: flex; 
    gap: 5px;
    margin-top: 15px;
  }
#footerArea .footer_inner .sns li a{
    border-radius: 50%; 
    width: 30px; height: 30px;
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#footerArea .footer_inner .sns li a:hover i{
  color: var(--font-color-point1);
}


  
  
#footerArea .footer_inner .footer_right{
    width: 300px; }
#footerArea .footer_inner .footer_right table{
    width: 100%;
    margin-bottom: 20px;
    color: var(--font-color-sub1);
  }
#footerArea .footer_inner .footer_right table td,th{
    padding: 0 5px 5px 15px;}
  
 


#footerArea .familly{width: 100%;}
#footerArea .select{width:100%; background:#fff; border:1px solid #ccc;
    position:relative; }
#footerArea .family .select .arrow{ display:block; font-size:1em; padding: 10px 0 10px 20px;
    text-align: left; transition: all 1s;}
#footerArea .family .select .arrow i{font-size:1em ; color: red; margin-left: 110px;}
#footerArea .family .select .arrow:hover{color:#fff; background: #222;}
#footerArea .footer_inner .family .select .aList{position:absolute; top:-225px; left:-1px; width:100%; 
    border:1px solid #333; display:none; background:#fff;}
#footerArea .family .select .aList li{ line-height:1.5em; border-bottom:1px solid #ccc; }
#footerArea .family .select .aList li a{display:block; padding: 10px 0 10px 20px; transition: all 1s;}
#footerArea .family  .select .aList li a:hover{color:#fff; background: #333;}