@charset "utf-8";


/* 헤더 영역 */
#headerArea{width: 100%; height: 107px;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, .7); transition: background-color .5s ease-out; backdrop-filter: blur(5px);}
  #headerArea .header_inner{width: 1400px; margin: 0 auto; display: flex; justify-content: space-between;}
  #headerArea .logo{margin-top: 25px;}
  #headerArea .logo a{width: 197px; height: 75px;
      overflow: hidden;}
  
   
  #gnb{clear:both;width:1000px; height: 100px;} 
  
  #gnb ul.dropdownmenu{float:left; width: 100%; justify-content: space-between;}
  #gnb ul.dropdownmenu li.menu{position:relative; float:left; width:20%; height: 100px;}
  #gnb ul.dropdownmenu li.menu::after{content: ''; display: block; width: 100%; height: 2px;
      background: #6bb0f0; position: absolute; left:0; bottom: 0; transform: scaleX(0); transition: all .5s ease-out;}
  #gnb ul.dropdownmenu li.menu:hover::after{content: ''; transform: scaleX(1);} 
  #gnb ul.dropdownmenu li a.depth1{display:block; padding: 45px 0;
        text-align: center; transition: all .5s; }
        
  
  
    /* 2depth */
  #gnb ul.dropdownmenu li ul{width:100%; position:absolute; top: 100px; left:0; padding: 10px 0; 
      line-height:2em; height: 140px; display: none;}
  
  #gnb ul.dropdownmenu li ul li{ text-align:center; font-weight:bold;}
  #gnb ul li ul li a{display:block;  color:#333; font-weight: 500; transition: all .5s;}
  #gnb ul li ul li a:hover{color:#fff; background: #6bb0f0; border-radius: 15px;}
  
  
       
        
  #headerArea .top_menu{width: 150px; display: flex;}
  #headerArea .top_menu li{width: 50%; text-align: center;}
  #headerArea .top_menu li a{margin: 50px 0;}
/* #headerArea .top_menu li:hover a{background: #004e97; color: #fff; border-radius: 10px; transition: all .5s ease-out;} */

  
  
  /* 푸터 영역 */
  #footerArea{width: 100%; color: #fff; background: #004e97;}
  
  #footerArea .footer_inner{width: 1400px; margin: 0 auto; display: flex;  padding: 50px 0; }
  #footerArea img{margin-right:50px ;}
  #footerArea .bottom_menu{display: flex; gap: 50px; margin:10px 0 20px;}
  #footerArea .bottom_menu li a, .sns li a{color: #fff;}
  #footerArea address{font-size: .95rem; line-height: 1.5rem; margin-bottom: 10px; }
  #footerArea .footer_right{margin-left: 480px;}
  
  
  #footerArea .sns{width:150px ;display: flex; justify-content: space-between;}
  #footerArea .sns i{font-size: 2.5rem;}
  #footerArea .sns li:hover i{ color: #ccc;}
  
  #footerArea .go_to_top{width: 80px; height: 80px; background: url(../images/Top.png); box-shadow: 0 0 15px 1px rgba(0, 0, 0, .3);
    position: fixed; left: 50%; margin-left: 750px; bottom: 150px; 
    border-radius: 50%; z-index: 50; display: none;}
  
  #footerArea .go_to_top span{display: none; text-align: center; color: #fff; font-size: 1.2rem;
    font-weight: bold; margin-top: 25px;}
  #footerArea .go_to_top:hover {background:steelblue; transition: all .4s ease-out; }
  
  
  /* Family site */
  
  #footerArea .select{width: 150px; background: #fff; border-radius: 20px; margin: 10px 0 15px;}
  #footerArea .select a{padding: 10px 0; text-align: center; }
  .select{width:150px;  background:#fff;
    position:relative;  margin:200px 0 0 50px; z-index: 20;}
  .select .arrow{ display:block; font-size:1em; padding: 10px 0;overflow: hidden; border-radius: 20px; border:1px solid #fff;
    text-align: center; transition: all 1s; }
  .select .arrow i{font-size:.8em ; color: red;}
  .select .arrow:hover{background: #000;color: #fff;  border:1px solid #ccc;}
  /* .select .arrow:hover span{color: #fff;} */
  
  
  .select .aList{ position:absolute; top:-185px; left:-1px; width:150px; border-radius: 20px; overflow: hidden;
    border:1px solid #ccc; display:none}
  .select .aList li{ line-height:1.5em; border-bottom:1px solid #ccc;}
  .select .aList li a{display:block;text-align: center; padding: 5px 0; transition: all .3s; background: #fff;}
  .select .aList li a:hover{ background: #333; color: #fff;}
  

/* 비쥬얼 공통 */
.visual{width: 2000px; height: 350px; background: red; position: relative; left: 50%; top: 0;
    transform: translateX(-50%); background-image: url(../images/1.jpg); 
    background-position: center;}
.visual strong{font-size: 30px; color: #fff; position: absolute; width: 100%;
    text-align: center; top: 200px; left: 0;}



/* 서브 네비 공통 */
.sub_nav{width: 100%; border-bottom: 1px solid #ccc;}
.sub_nav ul{width: 1200px; margin: 0 auto;  display: flex; }
.sub_nav ul li{width: 25%; text-align: center; box-sizing: border-box;}
.sub_nav ul li a{font-size: 1.2rem; font-weight: bold; padding: 18px 0;}

/* .sub_nav ul li a:hover{color: #037AFE; border-bottom: 3px solid #037AFE;}
.sub_nav ul li a.current{color: #037AFE; border-bottom: 3px solid #037AFE;} */

.sub_nav ul li a:hover{color: #333; border-bottom: 3px solid #00a484;}
.sub_nav ul li a.current{color: #004e97; border-bottom: 3px solid #00a484;}

/* .sub_nav ul li a.current{background-color: skyblue;} */

/* title_area */
#content{width: 100%;}
#content .title_area{width: 1400px; margin: 0 auto;  position: relative; overflow: hidden; padding-bottom: 100px;}
#content .title_area .line_map{position: absolute; color: #666; right: 15px; top: 20px;}
#content .title_area h2{font-size: 50px; font-weight: bold; text-align: center; margin: 150px 0 120px;}
#content .title_area h2::after{content: ''; height: 100px; width: 1px; background: #ccc; position: absolute;
  left: 50%; transform: translate(-50%); top: 250px; transition: all 1s ease-out; transform: scaleX(2); transition-delay: 1s;
  }
#content .title_area p{font-size: 1.2rem; text-align: center;}

/* 다크모드 */
.dark-mode .sub_nav ul li a{color: #fff;}
.dark-mode .sub_nav ul li a.current{color: yellowgreen;}
.dark-mode #content .title_area .line_map strong{color: #fff;}

.dark-mode .content_area .process1,
.dark-mode .content_area .process2,
.dark-mode .content_area .process3 {background-color: #fff;}