body {overflow-x:hidden; }
:root {
  --main_c : #276EF1;
}
:root {
  --bg1 : #f5f9ff;
}

#header {position:absolute; z-index:999999999;  top:0; left:0; width:100%; transition: all 0.2s ease-out;}
#header  * {transition: all 0.3s ease-out;}
#header .in {width:100%; display:flex; justify-content:space-between; align-items:Center; box-sizing:border-box; height:90px;  }
/* #header h1 {cursor:pointer; line-height:0}
#header h1 img {width:103px; }
#header h1 img.color {display:none}
 */
#header h1 {cursor:pointer; line-height:0; }
#header h1 svg {width:200px}
#header h1 svg path { fill: #fff;}
#header:hover h1 svg path { fill: var(--main_c) ;}

#header ul { display:flex;  }
#header ul li {padding:0 50px; position:relative}
#header ul li a {color:#fff; line-height:90px; display:inline-block; font-size:18px; font-family:'Poppins'; font-weight:600; position:relative}
#header ul li a:after {content:''; width:7px; height:7px; border-radius:50%; background-color:var(--main_c); position:absolute; top:25px; right:-10px; display:none}
#header ul:after {content:''; width:100%; height:200px; background-color:#fff; border-top:1px solid #ddd; top:90px; position:absolute; left:0; z-index:-9; transition: all 0.3s ease-out; display:none}



#header ul li ul.cate2 {display:inline-block; padding:20px 0;    position:absolute; left:0; top:90px; width:100%; display:none}
#header ul li ul.cate2 li {padding:10px; box-sizing:border-box; text-align:Center }
#header ul li ul.cate2 li a { line-height:1; font-size:16px; font-family: 'Pretendard'; font-weight:400}
#header ul li ul.cate2:after {display:none  !important}
#header ul li ul.cate2 li a:after { display:none !important}

#header:hover {background-color:#fff; }

#header:hover ul li a {color:#111; }

#header ul:hover li:hover a {color:var(--main_c)}
#header ul:hover li:hover a:after {display:inline-block }

#header ul:hover li ul.cate2 {display:block;  animation-name: opacity_any;    animation-duration:.5s;}
#header ul:hover li ul.cate2 li a {color:#424242}
#header ul:hover li ul.cate2 li:hover a {color:var(--main_c) }
#header ul:hover:after {display:block; animation-name: height_any2; animation-duration:.5s;  }
 
 

#header div.right {display:flex; align-items:center;  }
#header div.right .search_i {  padding:0 30px 0 30px; margin-right:-10px;    display:inline-block;  }
#header div.right .search_i i {color:#fff; ; line-height:90px }
#header div.right .top_search {  width:100%; background-color:#fff; border-top:1px solid #ddd; top:90px; position:absolute; left:0; z-index:-99;  transition: all 0.3s ease-out;   height:230px; display:none; overflow:hidden;}
#header div.right .search_i:hover + .top_search  {  display:block; animation-name: height_any; animation-duration:.5s; }
#header div.right .top_search:hover  {  display:block }



#header div.right p.ham {width:20px; margin-left:20px}
#header div.right p.ham span {width:100%; height:2px; border-radius:3px;  background-color:#fff; float:left;}
#header div.right p.ham span + span {margin-top:3px}
#header div.right .span_wrap {position:relative; width:60px; display:inline-block;  text-align:center; padding:10px 0; }
#header div.right .span_wrap  span {cursor:pointer; font-family:'Poppins'; font-weight:600; color:#fff }
#header div.right .down_div {position:absolute; background-color:#fff; border-radius:10px; box-shadow: 0px 3px 20px 1px rgba(0, 0, 0, 0.10);  padding:10px 0;  width:100%;  left:0; top:40px; display:none; }
#header div.right .span_wrap:hover .down_div {display:block; }
#header div.right .span_wrap:hover .down_div svg path  {fill:#D0D0D0}
#header div.right .span_wrap:hover .down_div svg:hover path  {fill:var(--main_c)}

#header div.right .down_div a {display:inline-block; width:100%; text-align:center; padding:3px 0; color:#999; font-family:'Poppins'; font-weight:600}
#header div.right .down_div a:hover  {color:var(--main_c)}
 
 

#header:hover div.right i  {color:#000}
#header:hover div.right p.ham span  {background-color:#000}
#header:hover h1 img.color {display:block}
#header:hover h1 img.w {display:none}
#header:hover div.right .span_wrap  span  {color:#222}

@keyframes height_any {
    0% { height:0 } 
	100% { height:230px } 
}
@keyframes height_any2 {
    0% { height:0 } 
	100% { height:200px } 
}
@keyframes opacity_any {
    0% { opacity:0 } 
	100% { opacity:1 } 
}



@media all and (max-width:1547px) {
		#header ul li {padding:0 2vw; white-space:nowrap }
		#header div.right .span_wrap { width:50px;  }

}


 @media all and (max-width:900px) {
		#header .in {  height:70px;   }
		#header ul  {display:none}
		#header div.right .search_i  {display:none}
		#header div.right .span_wrap {display:none}
}

.quick { }
.quick  * {transition: all 0.3s ease-out;}
.quick a {margin-bottom:10px; width:70px; background-color:var(--main_c); display:inline-block; height:70px; display:flex; align-items:center; justify-content:center; border-radius:50%; box-shadow: 0px 3px 9.9px 0px rgba(0, 0, 0, 0.25); width:70px; }
.quick a path {stroke:#fff}
.quick a:hover { background-color:#fff;}
.quick a:hover path {stroke:var(--main_c)}

.quick a:nth-child(2) {bottom:170px; position:fixed; right:40px; z-index:9999;}
.quick a:nth-child(3) {bottom:80px; position:fixed; right:40px; z-index:9999; background-color:#fff }
.quick a:nth-child(3) path {stroke:var(--main_c)}
.quick a:nth-child(3):hover { background-color:var(--main_c)}
.quick a:nth-child(3):hover path {stroke:#fff}

.quick .call_wrap {width:70px; height:70px; display:inline-block; position:relative; right:0;  position:fixed; right:40px; bottom:270px; z-index:9999; }
.quick .call_wrap  a {right:0; position:absolute;  }
.quick .call_wrap:hover  {width:120px}
.quick .call_info_div {padding:20px; font-weight:300; border-radius:10px;  background-color:var(--main_c); color:#fff; position:absolute; right:90px; top:-150px; display:none}
.quick .call_info_div  b {font-weight:600; margin-bottom:3px; display:inline-block; width:100%}
.quick .call_info_div P + p {margin-top:15px}
.quick .call_wrap:hover .call_info_div {display:block}

@media all and (max-width:900px) {
	.quick  {display:none}

}



footer {background-color:#FFF; font-size:16px; position:Relative; z-index:99;padding:80px 0; color:#333;  }
footer h2 {   width:240px; flex-shrink:0}
footer h2 img {width:100%}
footer .flex {  gap:40px;  align-items:flex-start }
footer .info {  color:#56595c}
footer .info hr {height:30px}
footer .info p + p {margin-top:14px}
footer .info a {color:#56595c}

footer .family {margin-left:auto; padding:10px 15px; width:230px; background-color:#fff; border:1px solid var(--main_c); border-radius:10px; box-sizing:border-box; position:relative; } 
footer .family * {transition: all 0.3s ease-out;}
footer .family  p {display:flex; justify-content:space-between; color:#111;   align-items:center; font-size:20px; } 
footer .family .down_box {position:absolute; bottom:44px; left:-1px;  overflow:hidden;  height:0; padding:0 20px; }  
footer .family:hover {border-radius:0 0 10px 10px; } 
footer .family:hover i {transform: rotate(180deg); color:var(--main_c)}
footer .family:hover p { color:var(--main_c)}
footer .family:hover .down_box {padding:20px 20px; height:auto; box-sizing:border-box;  background-color:#fff; width:calc(100% + 2px); border-radius:10px 10px 0 0; border:1px solid var(--main_c); border-bottom:none; } 
footer .family:hover .down_box a {color:#333; display:inline-block; width:100%; margin:5px 0;  } 
footer .family:hover .down_box a:hover {color:var(--main_c)  } 

footer ul  {margin-left:auto; display:flex;  justify-content:flex-end   }
footer ul li {margin-right:70px}
footer ul li b {  color:#56595c; font-family:'Poppins';  font-size:18px; font-weight:600; letter-spacing:0;display:block; }
footer ul li a {display:block; margin-top:10px} 
footer .copy {color:#868686; font-size:13px; letter-spacing:0}
footer .info p.flex b {margin-right:5px}
footer p.contact_t {letter-spacing:0.3px}

 @media all and (max-width:1300px) {
 		footer ul  {display:none; }

}
 @media all and (max-width:900px) {
		footer {font-size:14px; border-radius:30px 30px 0 0}
 footer .flex {gap:20px}
 		footer .family p {font-size:16px}
		footer .info p + p {margin-top:10px}
		footer .info p.flex  {flex-wrap:nowrap; justify-content:flex-start}
		
		footer .r {width:100%; margin-top:20px; }
		footer .r a {color:#A8A8A8}
		footer .copy {margin-top:6px; width:100%; display:inline-block}
		
}