@charset "utf-8";

#top_menu_area{width:100%;height:90px;position:fixed;top:0;left:0;z-index:999/* 887 */;box-sizing:border-box;transition:all .3s}
#top_menu_area *{box-sizing:border-box}

#top_menu_area .top_menu{width:100%;height:100%;position:relative}

/*탑메뉴 로고*/
#top_menu_area .top_menu .logo{position:absolute;left:100px;top:50%;transform:translateY(-50%);z-index:100}
#top_menu_area .top_menu .logo .logo_w{display:block}
#top_menu_area .top_menu .logo .logo_bk{display:none}

/*탑메뉴 네비*/
#top_menu_area .top_nav{height:100%;display:flex;gpa:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100}
#top_menu_area .top_nav > li{height:100%;position:relative}
#top_menu_area .top_nav .nav_name{display:flex;align-items:center;height:100%;padding:0 30px;font-weight:500;font-size:18px;color:#fff;position:relative}
#top_menu_area .top_nav .nav_name span{display:inline-block;position:relative;white-space:nowrap}/*효과를 넣기위한 span*/
#top_menu_area .top_nav .nav_name span:before{content:'';width:0;height:2px;background:#254286;position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);transition:all .3s}
#top_menu_area .top_nav .nav_name .nav_hot{width:37px;height:17px;border-radius:5px;font-weight:700;font-style:normal;font-size:10px;background:#c00;line-height:17px;text-align:center;color:#fff;position:absolute;top:12px;left:50%;transform:translateX(-50%);animation:hot 3s infinite;}
#top_menu_area .top_nav .nav_name.a_btn{padding:0 15px}

@keyframes hot{0%{opacity:0}50%{opacity:1}100%{opacity:0}}



#top_menu_area .top_nav .top_btn{width:130px;height:50px;border-radius:5px;background:#fff;font-size:17px;font-weight:600;color:#333;display:flex;flex-wrap:wrap;align-items:center;gap:5px;justify-content:center;animation: flashBg 4s infinite;
  animation-timing-function: ease-in-out;
  transition: background-color 0.3s ease;}
  
#top_menu_area .top_nav .top_btn img{width:20px}
 
#top_menu_area .top_nav .top_btn:before{display:none}

@keyframes flashBg {
  0%   { background-color: #20B2AA; color: #fff; }
  33%  { background-color: #6A5ACD; color: #fff; }
  66%  { background-color: #FF6F61; color: #fff; }
  100% { background-color: #20B2AA; color: #fff; }
}


/*네비 오버*/
#nav_list{display:none;width:700px;padding:70px 60px;background:#fff;position:absolute;top:90px;left:50%;z-index:90;transform:translateX(-50%);box-shadow:0 10px 10px rgba(0,0,0,.1)}
#nav_list:before{content:'';width:0;height:2px;background:#3f558f;position:absolute;top:0;left:0;transition:all .5s}
#nav_list:after{content:'';width:0;height:2px;background:#3f558f;position:absolute;bottom:0;right:0;transition:all .5s}
#nav_list.on:before{width:100%}
#nav_list.on:after{width:100%}

#nav_list .list_inner{display:flex;width:100%;align-items:center;}
#nav_list .txt_box{width:300px}
#nav_list .nav_box{width:calc(100% - 300px)}

#nav_list .txt_box .nav_s_tit{margin-bottom:10px;font-weight:700;font-size:14px;color:#3f558f}
#nav_list .txt_box .nav_tit{margin-bottom:10px;font-weight:700;font-size:35px;color:#333}
#nav_list .txt_box .nav_txt{font-size:16px;line-height:28px;color:#888}
#nav_list .txt_box .nav_icon{width:120px;height:120px;margin-top:10px;border-radius:120px;background:#f7f7f7}
#nav_list .txt_box .nav_icon img{width:100%}

#nav_list .nav_box li{padding:0 0 13px 10px;margin-bottom:13px;border-bottom:1px dashed #ddd;font-size:17px;color:#666;position:relative}
#nav_list .nav_box li:before{content:'';width:3px;height:3px;border-radius:3px;background:#3f558f;position:absolute;left:0;top:9px}
#nav_list .nav_box li:after{content:'';width:0;height:1px;background:#254286;position:absolute;left:0;bottom:-1px;transition:all .3s}
#nav_list .nav_box li:last-child{margin-bottom:0;border-bottom:0}
#nav_list .nav_box li a{display:block;width:100%;height:100%;color:#666}
#nav_list .nav_box li:hover a{color:#254286}
#nav_list .nav_box li:hover:after{width:100%}


#nav_list .nav_box li.bold_hot a{font-weight:600;color:#333;display:flex;align-items:center}
#nav_list .nav_box li.bold_hot a .hot{width:37px;height:17px;margin-left:10px;border-radius:5px;font-weight:700;font-style: normal;font-size:10px;background:#c00;line-height:17px;text-align:center;color:#fff}


/*개별배경*/
#nav_list.b_menu01_area{background:url(../../hd/top_menu/menu01_bg.jpg) left bottom #fff no-repeat}
#nav_list.b_menu02_area{background:url(../../hd/top_menu/menu02_bg.jpg) left bottom #fff no-repeat}
#nav_list.b_menu04_area{background:url(../../hd/top_menu/menu04_bg.jpg) left bottom #fff no-repeat}
#nav_list.b_menu05_area{background:url(../../hd/top_menu/menu05_bg.jpg) left bottom #fff no-repeat}
#nav_list.b_menu06_area{background:url(../../hd/top_menu/menu06_bg.jpg) left bottom #fff no-repeat}
#nav_list.b_menu07_area{background:url(../../hd/top_menu/menu07_bg.jpg) left bottom #fff no-repeat}
/*-------------------메뉴 전체보기 ------------------------*/
/*-----메뉴 오픈 버튼 -----*/
#top_menu_area .all_menu_btn{position:absolute;top:50%;right:50px;transform:translateY(-50%);z-index:9999;cursor:pointer}
#top_menu_area .all_menu_btn .menu_icon{position:relative; width:25px; height:25px;transition: 0.3s cubic-bezier(.8, .5, .2, 1.4) 0s;}
#top_menu_area .all_menu_btn .square{display:block; position:absolute; width:5px; height:5px; background-color:#000; }
#top_menu_area .all_menu_btn .square:nth-child(1){left:0; top:0; background-color:#00c6ff;}
#top_menu_area .all_menu_btn .square:nth-child(2){left:10px; top:0;}
#top_menu_area .all_menu_btn .square:nth-child(3){right:0px; top:0;}
#top_menu_area .all_menu_btn .square:nth-child(4){left:0; top:10px;}
#top_menu_area .all_menu_btn .square:nth-child(5){left:10px; top:10px;}
#top_menu_area .all_menu_btn .square:nth-child(6){right:0px; top:10px;}
#top_menu_area .all_menu_btn .square:nth-child(7){left:0px; bottom:0px;}
#top_menu_area .all_menu_btn .square:nth-child(8){left:10px; bottom:0px;}
#top_menu_area .all_menu_btn .square:nth-child(9){right:0px; bottom:0px;}
#top_menu_area .all_menu_btn.open .menu_icon{transform: rotate(180deg);}
#top_menu_area .all_menu_btn.open .square{background-color:#333 !important/*여러변수로인해 강제*/;transition: 0.3s ease 0s;}
#top_menu_area .all_menu_btn.open .square:nth-child(2) {left: 5px; top: 5px;}
#top_menu_area .all_menu_btn.open .square:nth-child(4) {left: 5px; top: 15px;}
#top_menu_area .all_menu_btn.open .square:nth-child(6) {right: 5px; top: 5px;}
#top_menu_area .all_menu_btn.open .square:nth-child(8) {left: 15px; bottom: 5px;}


#top_menu_area.on .all_menu_btn .square{background:#333}
#top_menu_area.on .all_menu_btn .square:nth-child(1){background-color:#00c6ff;}


/*---------전체메뉴보기----------*/
/* menu_all */
#all_wrap{width:100%;height:0;position:fixed;left:0;top:0;z-index:1000;}

#all_wrap .menu_all {position:relative;top:-100px;z-index:1}
#all_wrap .menu_all:before, .menu_all:after{content: "";z-index:-1;width:101vw;height:100vh;background-color:#254286;position:fixed;left:0;top:0;transition:-webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition:transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;-webkit-transform: translateX(0%) translateY(-100%);transform: translateX(0%) translateY(-100%)}
#all_wrap .menu_all:after{background:#fff;transition-delay:0s}
#all_wrap .menu_all:before{transition-delay:.1s}
#all_wrap .menu_all_content{display:none;width:100%;font-weight:200;text-align:center;position:relative;top:calc(50% - 250px);left:50%;transform:translateX(-50%)}

#all_wrap.nav-active{height:100%}
#all_wrap.nav-active .menu_all{width:100%;height:100%;top:0;position:relative;z-index:1000}
#all_wrap.nav-active .menu_all:before, #all_wrap.nav-active .menu_all:after{-webkit-transform: translateX(0%) translateY(0%);transform: translateX(0%) translateY(0%)}
#all_wrap.nav-active .menu_all:after{transition-delay:.1s}
#all_wrap.nav-active .menu_all:before{transition-delay:0s}

/*menu_list*/
#menu_all_list{max-width:1280px;width:100%;margin:0 auto;overflow:hidden}
#menu_all_list > li{display:inline-block;width:14.2%;height:340px;padding:0 20px;float:left;position:relative}
#menu_all_list > li:before{content:'';width:1px;height:100%;background:#ddd;position:absolute;right:0}
#menu_all_list > li:last-child:before{display:none}
#menu_all_list .list_tit {display:block;margin-bottom:30px;font-weight:700;font-size:19px;letter-spacing:-2px;color:#333;position:relative;transition:all .3s}
#menu_all_list .list_tit span{display:inline-block;position:relative;word-break:keep-all}/*효과로 인한 span*/
#menu_all_list .list_tit span:before{content:'';width:0;height:2px;background:#254286;position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);transition:all .3s}
#menu_all_list .list_tit span:after {display:none;content: '';width:10px;height:6px;background:url(../../img/arrow_color.svg) center/cover ;position: absolute;top: 50%;right: -20px;transform-origin: top;transform: translateY(-50%);transition: .2s;}
#menu_all_list > li:hover .list_tit{color:#254286}
#menu_all_list > li:hover .list_tit span:before{width:100%}

/*소메뉴*/
#menu_all_list .all_nav_list li{padding-bottom:15px;margin-bottom:15px;border-bottom:1px dashed #ddd;font-weight:500;font-size:17px}
#menu_all_list .all_nav_list li:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
#menu_all_list .all_nav_list li a{color:#666;word-break:keep-all}
#menu_all_list .all_nav_list li:hover a{color:#254286}

/*올메뉴 링크버튼*/
#all_wrap .info_box{width:1024px;margin:40px auto 0;padding:0 20px}
#all_wrap .link_area{overflow:hidden}
#all_wrap .link_area li{width:23.5%;height:55px;border-radius:5px;background:#254286;font-weight:500;font-size:16px;line-height:55px;text-align:center;float:left;transition:all .3s}
#all_wrap .link_area li + li{margin-left:2%}
#all_wrap .link_area li a{display:block;width:100%;height:100%;color:#fff}
#all_wrap .link_area li img{display:inline-block;margin-right:5px;vertical-align:middle}
#all_wrap .link_area li:hover{background:#333}


#all_wrap .info_txt{margin-top:20px}
#all_wrap .info_txt li{display:inline-block;margin:0 20px;font-weight:500;font-size:18px;color:#333}
#all_wrap .info_txt .icon{display:inline-block;width:40px;height:40px;margin-right:10px;border-radius:40px;background:#f7f7f7;position:relative;vertical-align:middle}
#all_wrap .info_txt .icon img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
/*----------전체보기 끝----------*/

/*------------각종 오버, 페이지별 조건---------*/
#top_menu_area.on{background:#fff;box-shadow:0 0 10px rgba(0,0,0,.1);top:0;z-index:999}
#top_menu_area.on .top_menu .logo .logo_w{display:none}
#top_menu_area.on .top_menu .logo .logo_bk{display:block}

/*탑메뉴 네비*/
#top_menu_area.on .top_nav > li > a{color:#333}

/*-----최상단에서 마우스오버시 대비----*/
#top_menu_area.on2{background:#fff;box-shadow:0 0 10px rgba(0,0,0,.1)}
#top_menu_area.on2 .top_menu .logo .logo_w{display:none}
#top_menu_area.on2 .top_menu .logo .logo_bk{display:block}
#top_menu_area.on2 .top_nav .nav_name{color:#333}


/*-----스크롤시, 회사소개를 제외한 서브일때----*/
#top_menu_area.sub_top{background:#fff;box-shadow:0 0 10px rgba(0,0,0,.1)}
#top_menu_area.sub_top .top_menu .logo .logo_w{display:none}
#top_menu_area.sub_top .top_menu .logo .logo_bk{display:block}
#top_menu_area.sub_top .top_nav .nav_name{color:#333}
#top_menu_area.sub_top.on{box-shadow:none}
#top_menu_area.sub_top.on:before{content:'';width:100%;height:1px;background:#ddd;position:absolute;bottom:-1px;left:0}





/*메뉴 마우스오버시*/
#top_menu_area .top_nav .nav_name.on span:before{width:100%;}
#top_menu_area .top_nav .nav_name.on{color:#254286}

/*현재메뉴*/
#top_menu_area .top_nav .nav_name.active span:before{width:100% !important}
#top_menu_area .top_nav .nav_name.active{color:#254286}

/*회사소개 일때*/
#top_menu_area.company_top .all_menu_btn .square{background:#fff}
#top_menu_area.company_top .top_nav .nav_name.active{color:#00d8ff}
#top_menu_area.company_top .top_nav .nav_name.active span:before{background:#00d8ff}

#top_menu_area.company_top.on .top_nav .nav_name.active, #top_menu_area.company_top.on2 .top_nav .nav_name.active{color:#254286}
#top_menu_area.company_top.on .top_nav .nav_name.active span:before, #top_menu_area.company_top.on2 .top_nav .nav_name.active span:before{background:#254286}

#top_menu_area.company_top.on .all_menu_btn .square, #top_menu_area.company_top.on2 .all_menu_btn .square{background:#333}
#top_menu_area.company_top.on .all_menu_btn .square:nth-child(1), #top_menu_area.company_top.on2 .all_menu_btn .square:nth-child(1) {background:#00c6ff}

@media(max-width:2048px){
#top_menu_area .top_menu .logo{left:50px}
}
@media(max-width:1500px){
/*1280까지 가기위한 1500 구간추가*/	
#top_menu_area .top_menu .logo{left:30px}
#top_menu_area .all_menu_btn{right:30px}
#top_menu_area .top_nav{left:auto;right:100px;transform:translateY(-50%)}
#top_menu_area .top_nav .nav_name{padding:0 20px}
#top_menu_area .top_nav > li:last-child #nav_list{left:-70%}
}
@media(max-width:1280px){
#top_menu_area{height:70px}
#top_menu_area .top_menu .logo img{max-height:56px; width:auto; max-width:none}
#top_menu_area .top_nav{display:none}
#top_menu_area .all_menu_btn .square{background:#fff}
#top_menu_area.sub_top .all_menu_btn .square{background:#333}
#top_menu_area.sub_top .all_menu_btn .square:nth-child(1){background:#00d8ff}


}
@media(max-width:1024px){
#all_wrap .info_box{max-width:480px;width:100%}
#all_wrap .info_box li{width:49%;}
#all_wrap .info_box li:nth-child(-n + 2){margin-bottom:2%}
#all_wrap .info_box li:nth-child(3){margin-left:0}
#all_wrap .info_txt li{display:block;width:100%;margin:0 auto;font-size:16px}

/*전체보기*/
#all_wrap.nav-active .menu_all{overflow-y:scroll}
.menu_all_content{top:50px}
#all_wrap .menu_all_content{top:calc(50% - 265px)}
#menu_all_list > li{width:100%;height:auto;padding:0;float:none}
#menu_all_list > li:before{display:none}
#menu_all_list .list_tit{height:45px;font-size:17px;line-height:45px;margin-bottom:0}
#menu_all_list .list_tit span:before{bottom:7px}
#menu_all_list .list_tit span:after{display:block}
#menu_all_list .list_tit.open span:after{margin-top:4px;transform:rotate(-180deg)}
#menu_all_list .all_nav_list{display:none;padding:15px 20px;background:#f7f7f7}
#menu_all_list .all_nav_list li{font-size:15px;line-height:28px;padding-bottom:0;margin-bottom:0;border-bottom:0}
#menu_all_list .all_nav_list.open{display:block}

#all_wrap .link_area li a{font-size:14px}
#all_wrap .link_area li img{width:16px;height:auto}

}
@media(max-width:767px){
#top_menu_area{height:60px}	
#top_menu_area .top_menu .logo img{max-height:48px; width:auto; max-width:none}
#top_menu_area .top_menu .logo{left:20px}
#top_menu_area .all_menu_btn{right:20px}

#top_menu_area .all_menu_btn .menu_icon{width:20px;height:20px}
#top_menu_area .all_menu_btn .square{width:4px;height:4px}
#top_menu_area .all_menu_btn .square:nth-child(2){left:8px}
#top_menu_area .all_menu_btn .square:nth-child(4){top:8px}
#top_menu_area .all_menu_btn .square:nth-child(5){left:8px;top:8px}
#top_menu_area .all_menu_btn .square:nth-child(6){top:8px}
#top_menu_area .all_menu_btn .square:nth-child(8){left:8px}
#top_menu_area .all_menu_btn.open .square:nth-child(2) {left:4px;top:4px;}
#top_menu_area .all_menu_btn.open .square:nth-child(4){left:4px;top:12px}
#top_menu_area .all_menu_btn.open .square:nth-child(6) {right:4px;top:4px;}
#top_menu_area .all_menu_btn.open .square:nth-child(8){left:12px;bottom:4px;}
}