@charset "utf-8";

:root{
  --line-color:#e0e0e0;
  --main-color:#F36523;
  --main2-color:#FA9D1C;
}
html, body{font-family: "Noto Sans KR",'Pretendard', sans-serif; color: #333;}
li, p ,a,th,td{word-break:keep-all ;}
a{text-decoration: none; color: #333;}
.bold{font-weight: bold;}
.line{color: #e0e0e0;}
.main_color{color: #f36523;}
.main_color2{color: #FA9D1C;}
.sub_color{color: #FFC62C;}
.green{color: #0C8E72;}

@keyframes bounce{
  0%{transform: translateY(0px);}
  50%{transform: translateY(-5px);}
  100%{transform: translateY(0px);}
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeUp {
  0% {transform: translateY(50px); }
  100% { transform: translateY(0);}
}
@keyframes gradientMove {
  0% { background-position: 0 0; }
  50% { background-position: 0 100%; }
  100% { background-position: 0 0; }
}

/* common.css */

/* header */
header{width: 100%; height: 60px; background: none; border-bottom: 1px solid #e0e0e09d; position: fixed; z-index: 9999; padding: 5px 0px; overflow: hidden; transition: height 0.35s ease, background 0.3s ease;}
.header_inner{width: 1400px; height: 60px; margin: 0 auto; display: flex; justify-content: space-between; position: relative;}
.header_inner .gnb{width: 900px; height: 60px; display: flex; justify-content: space-around; align-items: center; position: relative;}
.header_inner .gnb li{font-size: 1.25rem; font-weight: 400;}
.header_inner .gnb li a{color:#fff;  transition: all 0.3s ease;}

header.active{background: #fff;}
header.active .gnb li a{color:#333;}
header:hover{background: #fff; height: 250px;}
header:hover .gnb li a{color:#333;}
header .gnb li a:hover{color: var(--main-color); font-weight: bold; padding-bottom: 3px; border-bottom: 1px solid var(--main-color); }

header .gnb > li{position: relative;}
header .gnb > li > .lnb{position: absolute; top: 30px; left: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease; padding: 15px 0px;}
header .gnb > li > .lnb li{margin: 20px 0px; width: 150px;}
header .gnb > li > .lnb li a{font-size: 1rem;}
header:hover .gnb > li > .lnb{opacity: 1; visibility: visible; pointer-events: auto;}

/* 햄버거 서식 */
.burger{background: none; border: none; font-size: 1.5rem; cursor: pointer; color:#fff; transition: 0.3s;}
header.active .burger {color: #333;}
header:hover .burger{color: #333;}
.burger:hover .fa-bars{color: var(--main-color);}

/* 풀네비게이션 */
.fullmenu-overlay {position: fixed; top: 0; left: 0;  width: 100%;  height: 100%;  background: #ffffff;  z-index: 9999;  display: none; overflow-y: auto;  padding: 80px 60px;  }
.fullmenu-overlay.active {right: 0;}
.fullmenu-overlay .overlay_logo{position: absolute; top:0.5%; left: 12.5%;}
.fullmenu-close {position: absolute; top: 21px; left: 78.8%; background: none;  border: none;  font-size:1.5rem;  cursor: pointer;  z-index: 10000;}
.fullmenu-close i.fa-xmark{transition: transform 0.3s ease;}
.fullmenu-close i.fa-xmark:hover{transform: rotate(180deg);}
.fullmenu-inner {max-width: 1400px; margin: 0 auto;}
.fullmenu-gnb {display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(2,auto); gap: 30px; margin-top: 50px;}
.fullmenu-gnb > li > strong { display: block; font-size: 1.875rem;  font-weight: 700; color: var(--main-color); margin-bottom: 15px; border-bottom: 1px solid var(--line-color); padding-bottom: 10px; width: 330px;}
.fullmenu-gnb ul li {margin: 20px 0 20px 20px; list-style:disc;}
.fullmenu-gnb ul li a {font-size: 1.5rem; color: #333; transition: 0.3s;}
.fullmenu-gnb ul li a:hover {color: var(--main-color); }


/* quick-mnu */
.quick_mnu{position: fixed; height: 300px; width: 100px; right: 2%; top: 35%; text-align: center; align-items: center; background: linear-gradient(to bottom, #ff7200, #FFD54F); border-radius: 50px;  z-index: 99999; background-size: 100% 200%; animation: gradientMove 3s linear infinite; padding:25px 0;}
.quick_mnu ul li{border-bottom: 1px solid rgba(255,255,255,0.3); width: 70%; height: 60px; margin: 20px auto; align-items: center; padding: 10px 0;}
.quick_mnu ul li:last-child{border-bottom: none;}
.quick_mnu ul li a {color: #fff;}
.quick_mnu ul li a p{display: none; color: #fff; font-weight: bold; font-size: 0.9rem;}
.quick_mnu ul li a img {transition: transform 0.3s ease;}
.quick_mnu ul li a:hover img {transform: translateY(-10px);}
.quick_mnu ul li a:hover p {display: block; animation: fadeIn 0.5s ease forwards;}


/* quick_consult */
.quick_consult{width: 100%; height: auto;  position: fixed; bottom: 0; left: 0; transition: opacity 0.3s ease; z-index: 99999;}
.quick_inner{width: 1400px; height: 60px; margin: 0 auto;}
.quick_inner h3{width: 700px; height: 60px; background: #F36523; padding: 3.5px 10px; clip-path: polygon(0 0, 85% 0, 100% 100%,0 100%); color: #fff; font-size: 2rem; font-weight: bold; border-radius: 5px 0 0 0; position: relative;}
.quick_inner h3 img{padding-right: 10px; transform: translateY(5px);}
.quick_inner h3 span{ font-size: 0.875rem; font-weight: normal; padding: 0px 8px; margin-left: 5px; border-left: 1px solid #fff;}
.quick_inner h3 button{ border: none; background: none; font-size: 1.175rem; color: #fff;}
.quick_btn{transition: 0.3s; cursor: pointer;}
.quick_btn.rotated {transform: rotate(180deg);}
#toggleForm:hover{animation: bounce 0.6s ease infinite;}

.quick_inner2{width: 100%; background:#F36523; overflow: hidden; max-height: 500px; transition: max-height 0.5s ease; position: relative;}
.quick_inner2 form{width: 1400px; margin: 0 auto; padding: 0px 0px 10px;  color: #fff;}
.quick_inner2 form .pd{padding: 10px; border-radius: 5px; border: none; margin: 5px;}
.quick_inner2 form input.pd{width: 120px;}
.quick_inner2 form select{width: 150px;}
.quick_inner2 form .check{transform: translateY(10px); display: inline-block; color:#e0e0e0c9}
.quick_inner2 form button{padding: 8px 20px; font-size: 1.25rem; background: #000; color: #fff; border: none; border-radius: 10px; transform: translateY(5px); margin: 0px 10px; transition:0.3s;}
.quick_inner2 form button:hover{background: #333;}
.quick_inner2.closed{max-height: 0;}
.consel_img{ font-size: 1.25rem; border: 1px solid rgba(255,255,255,0.5); padding: 15px 5px 17px 5px; border-radius: 50px; font-weight: bold;}
.consel_img .small{font-size: 1rem;}
.consel_img img{text-align: center; transform: translateY(18px);}
/* 폼 검증 스타일 */
.quick_inner2 form .pd.error {border: 2px solid #ff0000;background-color: #fff5f5;}
.quick_inner2 form .pd.error::placeholder {color: #ff0000; font-weight: bold;}
.quick_inner2 form .pd::placeholder {color: #999;transition: color 0.3s ease;}
.error-msg {position: absolute; font-size: 0.875rem;color: #e00;pointer-events: none;  z-index: 1000;}

 /* 탑버튼 */
 .top_btn button{border: none; background: #fff; position: fixed; bottom: 10%; right: 2.5%; padding: 20px 18px; border-radius: 50%; border: 1px solid var(--line-color); cursor: pointer; }
  .top_btn .fa-circle-up{transition: 0.3s; font-size: 2rem; color: #333;}
  .top_btn:hover .fa-circle-up{color: var(--main-color); transform: translateY(-5px);}

/* footer */
footer{width: 100%; background: #222; color: #ffffff96; padding: 30px 0px;}
.footer_inner{width: 1400px;height:250px; margin: 0 auto; line-height: 30px;}
.footer_inner .f_nav .nav1{display: flex; justify-content: left; }
.footer_inner .f_nav li{padding-right: 30px;}
.footer_inner .f_nav .nav2{display: flex; justify-content: left;}

/* 1025px 이상 해상도 데스크탑  */
@media screen and (max-width: 1499px) {
  .header_inner h1 .logo{padding-left: 10px;}
.footer_inner{width: 100%;height:250px; margin: 0 auto; line-height: 30px;}
.footer_inner .f_nav{padding-right:0; padding-left: 30px;}
.footer_inner address{padding-right:0; padding-left: 30px;}
.footer_inner h2{padding-left: 30px;}
}

/* Desktop */
@media (max-width: 1279px) {
header .header_inner{width: 100% !important;}
.header_inner .gnb{width: 800px;}
.header_inner .gnb li{font-size: 1.125rem;}
.quick_inner{width: 100%; height: 60px; margin: 0 auto;}
.quick_inner2{width: 100%;}
.quick_inner2 form{width: 100%;}
.consel_img{border: none;}
.consel_img span{display: none;}

.footer_inner{width: 100%;height:250px; margin: 0 auto; line-height: 30px;}
.footer_inner .f_nav{padding-right:0; padding-left: 30px;}
.footer_inner address{padding-right:0; padding-left: 30px;}
.footer_inner h2{padding-left: 30px;}

/* quick_consult */
.quick_inner2 form .pd{width: 120px; margin: 0 0 0 5px;}
.quick_inner2 form select{width: 120px;}
.quick_inner2 form .check{font-size: 0.875rem;}
.quick_inner2 form button{padding: 8px 25px; font-size: 1.125rem; margin-left: 10px;}
}

/* Tablet */
@media (max-width:1024px){
.quick_mnu, .quick_consult, #header_area{display: block;}
#m_header_area{display: none;}
header .header_inner{width: 100% !important; height: 60px; margin: 0 auto; display: flex; justify-content: space-between; position: relative;}
header .header_inner .gnb{width: 50px; flex:1; height: 60px; display: flex; justify-content:right; align-items: center; position: relative; margin-right: 5px;}
.header_inner .gnb li{display: none;}
.header_inner .gnb li:last-child{display: block;}
.header_inner .gnb li a{color:#fff;  transition: all 0.3s ease;}
header:hover{height: 70px;}

/* quick_consult */
.quick_inner{width: 100%; height: 60px; margin: 0 auto;}
.quick_inner2{width: 100%;}
.quick_inner2 form{width: 100%;}
.quick_inner2 form .pd{width: 120px; margin: 0 0 0 5px;}
.quick_inner2 form select{width: 120px;}
.quick_inner2 form .check{font-size: 0.875rem;}
.quick_inner2 form button{padding: 8px 15px; font-size: 1.125rem; margin-left: 10px;}

/* 풀네비게이션 */
.fullmenu-overlay{width: 100%; height: 100%;}
.fullmenu-overlay .overlay_logo{position: absolute; top:5px; left: 0;}
.fullmenu-close {position: absolute; top: 21px; left: 81.5%; background: none;  border: none;  font-size:1.5rem;  cursor: pointer;  z-index: 10000;}
.fullmenu-close i.fa-xmark{transition: transform 0.3s ease;}
.fullmenu-gnb {display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(3,auto); gap: 30px; margin-top: 50px;}
.fullmenu-gnb > li > strong { display: block; font-size: 1.5rem;  font-weight: 700; color: var(--main-color); margin-bottom: 15px; border-bottom: 1px solid var(--line-color); padding-bottom: 10px; width: 330px;}
.fullmenu-gnb ul li {margin: 20px 0 20px 20px; list-style:disc;}
.fullmenu-gnb ul li a {font-size: 1.25rem; color: #333; transition: 0.3s;}

/* quick-mnu */
.quick_mnu{width: 80px; top: 50%; transform: translateY(-50%);  padding:15px 0;}

/* footer */
.footer_inner{width: 100%;height:250px; margin: 0 auto; line-height: 30px;}
.footer_inner h2 a img{padding-left: 20px;}
.footer_inner .f_nav{padding-right:0; padding-left: 30px;}
.footer_inner address{padding-right:0; padding-left: 30px;}
.footer_inner h2{padding-left: 0;}
}

/* Mobile Large */
@media (max-width:767px){
.quick_mnu, .quick_consult{display: none;}
#m_header_area #m_header {position: fixed; top: 0; left: 0; width: 100%; height: 60px;background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); z-index: 1000; display: flex; align-items: center;  justify-content: space-between; box-sizing: border-box;}
#m_header h1 { margin: 0; line-height: 1;}
#m_header h1 a {display: block;}
#m_header h1 img {height: 35px; width: auto; display: block; padding-left: 10px;}

.btn_menu{width: 30px; height: 30px; background: none; border: none; cursor: pointer; padding: 0; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1001; margin-right: 10px;}
.btn_menu span {display: block; width: 100%; height: 4px; background-color: #333;  border-radius: 2px; transition: all 0.3s ease;}
.btn_menu.active span:nth-child(1) {transform: translateY(13.5px) rotate(45deg);}
.btn_menu.active span:nth-child(2) {opacity: 0;}
.btn_menu.active span:nth-child(3) {transform: translateY(-13.5px) rotate(-45deg);}
.m_nav {position: fixed; top: 60px; left: 0; width: 100%; height: calc(100vh - 60px); background-color: #fff;  overflow-y: auto;  transform: translateX(-100%);  transition: transform 0.3s ease; z-index: 999;}

.fullmenu-gnb {display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(3,auto); gap: 30px; margin-top: 50px;}

.m_nav.active {transform: translateX(0);}
.m_gnb {list-style: none;  margin: 0; padding: 20px 0;}
.m_gnb > li { border-bottom: 1px solid #eee;}
.m_gnb > li > a {  display: block; padding: 18px 20px; font-size: 16px; font-weight: 600;  text-decoration: none;  transition: background-color 0.2s ease;}
.m_gnb > li > a:hover {background-color: #f8f8f8;}
.m_lnb {list-style: none;  margin: 0;  padding: 0;  background-color: #f8f8f8;
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease;}
.m_gnb > li.open .m_lnb { max-height: 500px;}
.m_lnb li a {display: block; padding: 12px 20px 12px 40px;  font-size: 14px;
  color: #666;  text-decoration: none;  transition: background-color 0.2s ease;}

.m_lnb li a:hover {background-color: #eee; color: #333;}

body.menu-open {overflow: hidden;}

/* footer */
footer{width: 100%; background: #222; color: #ffffff96; padding: 30px 0px;}
.footer_inner{width: 100%;height:280px;}
.footer_inner .f_nav{padding-left: 0px;}
.footer_inner .f_nav .nav1{display: inline;}
.footer_inner .f_nav li{padding-right:0; padding-left: 10px;}
.footer_inner address{padding-right:0; padding-left: 10px;}
.footer_inner .f_nav .nav2{display: inline;}

/* 모바일 퀵메뉴 */
.m_quick{width: 100%; background: var(--main2-color); position: fixed; bottom: 0; left: 0; height: 60px;padding-top: 15px; box-shadow: 0px 10px 30px rgba(0,0,0,.8);}
.m_quick ul{width: 100%; display: flex; justify-content: space-around; text-align: center;}
.m_quick ul li{width: 70px; height: 50px;}
.m_quick ul li p{width: 60px; position: absolute; bottom: 5px; color: #fff; text-align: center; transform: translateX(5px);}
.m_quick ul li img{transform: translateY(-5px);}
}
/* Mobile Small */
@media (max-width:460px){ 
.btn_menu {width: 30px; height: 30px; background: none; border: none; cursor: pointer; padding: 0; display: flex; flex-direction: column;  justify-content: space-between; position: relative; z-index: 1001;}
/* footer */
footer{width: 100%; background: #222; color: #ffffff96; padding: 30px 0px;}
.footer_inner{width: 100%;height:330px; padding-left: 0;}
.footer_inner h2{text-align: center; padding-bottom: 20px;}
.footer_inner .f_nav .nav1{display: inline;}
.footer_inner .f_nav li{padding-right:0; padding-left: 30px;}
.footer_inner address{padding-right:0; padding-left: 30px;}
.footer_inner .f_nav .nav2{display: inline;}
}

@media (max-width:390px){
.footer_inner .f_nav li{font-size: 0.9rem;}
}