@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* reset */
*{margin: 0;padding: 0; box-sizing: border-box;}
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, font, 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, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}

body{font-family: 'Pretendard', sans-serif;}
.wrap{width: 100%;}


/* HEDEAR */
header {width: 100%;margin: 0 auto;height: 72px;align-items: center; z-index: 100; background-color: transparent;transition: background-color 0.3s ease;}
header.scrolled { background-color: rgba(255, 255, 255, 0.8);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
.logo svg path {fill: black;transition: fill 0.3s ease;}


/* 스크롤 시 로고만 검정으로 변경 */
.black-logo svg path {fill: black;}
header .innerHeader {width: 85%;;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;height: 72px;position: relative;}
header .innerHeader .menu { display: flex;gap: 40px;list-style: none;height: 100%;align-items: center}
header .innerHeader .menu li a {font-size: 16px;font-weight: 500;transition: 0.3s;}
.menu li a:hover {color: #a3e635;}

/* 햄버거 버튼 스타일 */
.menu-toggle {display: none;flex-direction: column;cursor: pointer;width: 30px;height: 22px;justify-content: space-between;}
.menu-toggle span {height: 3px;background: black;border-radius: 3px;transition: 0.3s;}




/*INFO*/
.info {height: 110vh;;background-color: #fff;color: #333;}
.info .inner {max-width: 100%;margin: 0 auto;text-align: center;}
.info .top > p {font-size: 1.2rem;line-height: 1.8;color: #444;padding: 80px 0;}
.info .top .img img {width: 100%;height: auto;margin-bottom: 80px;}

.info .bottom {width:50%;display: flex;justify-content:space-between;flex-wrap: wrap;gap: 30px;margin: 0 auto;  }
.info .bottom li img {width: 50px;height: auto;margin-bottom: 20px;}
.info .bottom li h3 {font-size: 1.1rem;padding-bottom:8px;}

.info .bottom li p {font-size: 0.95rem;color: #666;}


/* CONTACT */
.contact {padding: 100px 20px;background: #fff;color: #222;}
.contact .inner {max-width: 1200px;margin: 0 auto;display: flex;flex-wrap: wrap;gap: 40px;justify-content: space-between;}

.contact-info {flex: 1 1 400px;}
.contact-info h2 {font-size: 2rem;margin-bottom: 20px;}
.contact-info h2 span {color: #60c12f;font-weight: bold;}
.phone .highlight {color: #60c12f;font-size: 1.8rem;font-weight: bold;}

.hours, .address {
  margin-top: 30px;
  line-height: 1.6;
}

.note {
  font-size: 0.9rem;
  color: #888;
}

.address strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.sns-icons {
  margin-top: 30px;
  display: flex;
  gap: 12px;
}

.sns-icons img {
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.contact-map {flex: 1 1 750px;object-fit: cover;}
.contact-map .map {overflow: hidden;}



/* FOOTER */
footer {width: 100%;background-color: #111;}
footer .inner {display: flex;flex-wrap: wrap;justify-content: space-between;padding: 60px 0;gap: 40px;max-width: 1200px;;margin: 0 auto;}
.footer-left {height: 360px;background-color: #c0ff4e;padding: 50px 40px;flex: 1 1 300px;display: flex;flex-direction: column;justify-content: space-between;}

.footer-brand h3 {font-size: 22px;color: #111;margin-bottom: 6px;}
.footer-brand p {color: #111;font-size: 14px;margin-bottom: 40px;}
.footer-links {display: flex;flex-direction: column;gap: 30px;}

.footer-link {color: #111;font-size: 20px;text-decoration: none;border-bottom: 1px solid rgba(0, 0, 0, 0.2);display: flex;justify-content: space-between;align-items: center;padding-bottom: 10px;transition: all 0.3s;}

.footer-link:hover {color: #2e2e2e;transform: translateX(5px);}
.arrow {font-size: 20px;}

/* footer right */
.footer-right {flex: 2 1 600px;display: flex;flex-direction: column;justify-content: center;gap: 24px;}
.footer-right .top{display: flex;justify-content: space-between;}
.footer-nav {display: flex;gap: 40px;margin-bottom: 20px;}

.footer-nav a {color: #fff;text-decoration: none;font-size: 16px;position: relative;}

.footer-nav a:hover::after {content: '';display: block;width: 100%;height: 2px;background-color: #c0ff4e;position: absolute;bottom: 8px;left: 0;}


footer .bottom {display: flex;justify-content: space-between;align-items:center;}
footer .footer-message {text-align: right;}
footer .footer-message p {font-size: 18px;line-height: 1.5;color: #fff;}

.footer-contact {margin: 24px 0;color: #fff;text-align: right;}
.footer-contact p:first-child {margin-bottom: 8px;}
.footer-contact .tel span {color: #adb1ba;font-size: 16px;}
.footer-contact .tel {color: #c0ff4e;font-size: 24px;font-weight: bold;font-weight: 500;line-height: 1.5;}

.footer-info {font-size: 14px;line-height: 1.6;color: #ccc;}

.footer-copy {font-size: 13px;color: #888;margin-top: 10px;}


@media (max-width: 768px) {
  /* INFO SECTION */
  .info {height: auto;}
  .info .top > p {font-size: 1rem;line-height: 1.5;padding: 110px 24px 20px;}
  .info .top .img img {height: 200px;;padding: 0 24px;}
  .info .bottom {width: 100%;margin-bottom: 60px;}
  .info .bottom li {margin: 0 auto 8px auto;}
  .info .bottom li img {margin-bottom: 12px;}
  .contact {padding: 32px 0 48px 0;height: auto;}
  .contact .inner {display: block;width: 100%;padding: 0 24px;}
  .contact-info {margin: 0 auto 32px auto;padding: 0;text-align: center;}
  .contact-info h2 {font-size: 1.4rem;line-height: 1.3;}
  .note {margin-top: 8px;}
  .sns-icons {justify-content: center;}
  .sns-icons svg, .sns-icons img {
    width: 40px;
    height: 40px;
  }

  .contact-map {
    margin: 0 auto;
    background: #F6F6F6;
    border-radius: 10px;
    overflow: hidden;}
    
  footer .inner {width: 100%;}

}