@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%;height: 100vh;}

/* 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;}
header .innerHeader {width: 85%;;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;height: 72px;position: relative;}

/* header .innerHeader .logo {float: left;} */
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;}


/* FORM */
.form {width: 100%;height: 100%;display: flex;}
.form .inner {width: 65%;margin: 0 auto;overflow: hidden;display: flex;justify-content: center;align-items: center;position: relative;}
.form .left .contact-image{width: 700px;border-radius: 8px;overflow: hidden;position: absolute;z-index: -1;top: 50%;left:50%;transform: translate(-80%, -50%);}
.form .left .contact-image img {width: 100%;}

.form .right {position: absolute;left: 50%;}
section.form .right .contact-info {width: 560px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);padding: 50px 45px;border-radius: 12px;background: #fff;border: 1px solid #E1E4ED;}

section.form .info-item img {width: 60px;padding-right: 12px;}
section.form .info-item .txt {color: #4D5159;font-size: 20px;line-height: 1.5;font-weight: 300;}
section.form .info-item .txt span {font-weight: 500;font-size: 18px;}
section.form .contact-info h2 {font-size: 32px;color: #4D5159;margin-bottom: 20px;}
section.form .contact-info p {font-size: 18px;line-height: 1.6;margin-bottom: 30px;font-weight: 400;}
section.form .info-item {display: flex;align-items: center;margin-bottom: 20px;}
.form .right .info-label {font-size: 19px;}


/* footer */
.footer {background-color: #fff;color: #6d7a8b;padding: 40px 0 ;border-top: 1px solid #f0f0f0;}

.footer-top {display: flex;justify-content: center;align-items: center;margin-bottom: 24px;}
.footer-bottom {font-size: 13px;text-align: center;color: #a0a9b8;}
.footer-bottom a {color: #a0a9b8;text-decoration: underline;margin-left: 5px;}





    @media (max-width: 768px) {
      .contact-wrapper {
        flex-direction: column;
        align-items: center;
      }
      .contact-info {
        margin-top: -60px;
      }

      /* FORM */
      .wrap {position: relative;}
      .form {height: 100vh;background: #F3F4F5;}
      .form .inner {width: 100%;margin: 0 auto;padding: 0 24px;}
      .form .contact-image img {display: none;}
      .form .right {position: static;width: 100%;}
      section.form .right .contact-info {width: auto;padding: 40px 24px 24px 20px;}
      section.form .contact-info h2 {font-size: 24px;text-align: center;}
      section.form .contact-info p {font-size: 14px;text-align: center;}
      section.form .info-item .txt {font-size: 1em;}
      section.form .info-item .txt span {font-size: 1em;}
    

      /* FOOTER */
      .footer {position: absolute;bottom: 10px;background: none;border:none;padding: 0 24px;}
      .footer .description {color: #4D5159;font-size: 14px;}
      .footer .footer-bottom,.footer .footer-bottom a {color: #6d7a8b;}
    }