/* font */
@font-face {
    font-family: 'LEMON MILK';
    src: url('../font/LEMONMILK-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
  }


/* wrapper */
body {background-color: #f8f9fa;}
#wrapper {position: relative; max-width: 440px; margin: 0 auto; background-color: #fff;}
#wrapper * {font-family: 'Pretendard Variable';}


/* header */
header {position: absolute; top: 0; left: 0; z-index: 9; width: 100%;}
header .header-inner {padding: 18px 20px 16px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%;}
header .logo a {display: flex; align-items:Center; width: 72px;}
header .gnb ul {display: flex; align-items: center; gap: 10px;}
header .gnb ul li.h-kakao a {display: flex; align-items: center; height: 30px;}
header .gnb ul li.h-share a {display: flex; align-items: center; justify-content: center; height: 30px; border: 1px solid #fff; gap: 3px; width: 66px; border-radius: 50px; font-size: 14px; font-weight: 500; color: #fff;}
header .gnb ul li.h-share a img {width: 14px;}


/* header type2 */
header.type2 .header-inner {padding: 0 20px; height: 70px; border-bottom: 1px solid rgba(204, 204, 204, 0.5); background-color: #fff;}
header.type2 .back-btn {display: block; width: 30px;}
header.type2 .logo a {width: 72px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
header.type2 .gnb ul li.h-kakao a {display: flex; align-items: center; height: 30px;}
header.type2 .gnb ul li.h-kakao a img {height: 30px;}
header.type2 .gnb ul li.h-share a {display: flex; align-items: center; justify-content: center; height: 30px; border: 1px solid #0047AB; gap: 3px; width: 66px; border-radius: 50px; font-size: 14px; font-weight: 500; color: #444;}
header.type2 .gnb ul li.h-share a img {width: 14px;}


/* fixed btn */
#fixed-btn {position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); width: 100%; height: 80px; z-index: 99; max-width: 440px; padding: 0 20px;}
#fixed-btn a {font-size: 24px; font-weight: 600; color : #fff; background-color: #003F68; border-radius: 100px; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;}


/* footer */
footer {padding: 39px 30px 19px;}
footer .footer-logo {width: 186px; margin: 0 auto 17px; display: block;}
footer .privacy {margin: 0 auto 16px; display: block; width: fit-content; font-size: 14px; color: #444; font-weight: 400;}
footer .footer-info p{text-align: center;}
footer .footer-info p span, footer .footer-info p a {font-size: 13px; font-weight: 400; line-height: 160%; color: #222; text-align: center;}
footer .footer-info p span em {font-style: normal; color: #888888;}
footer .footer-info p.address *{ color: #888;}
footer .copy {font-size: 13px; text-align: center; color: #999; display: block; margin-top: 14px;}


/* tab-nav */
.tab-nav-btn {position: absolute; top: 73px; left: 0; width: 100%; z-index: 9;}
.tab-nav-btn ul {display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.5);}
.tab-nav-btn ul li {width: 50%; text-align: center; display: flex; align-items: center; justify-content: center; height: 46px;}
.tab-nav-btn ul li button {font-size: 18px; font-weight: 700; color: #fff; display: block; width: 100%; height: 100%;}
.tab-nav-btn ul li.active button {background-color: #fff; border-radius: 15px 15px 0 0; color: #222;}


/* tab-cont */
.section-inner {padding: 0 20px; box-sizing: border-box;}




/* [contact] */
#contact-wrapper {padding: 110px 20px; min-height: 100vh;}
#contact-wrapper .title-area {text-align: center;}
#contact-wrapper .title-area h2 {font-size: 26px; font-weight: 800; color: #222; display: block; margin-bottom: 8px;}
#contact-wrapper .title-area p {font-size: 20px; font-weight: 400; color: #555; line-height: 160%; margin-bottom: 15px;}
#contact-wrapper .title-area span {font-size: 14px; font-weight: 400; color: #666; padding-bottom: 22px; margin-bottom: 9px; display: block;  border-bottom: 1px solid rgba(204, 204, 204, 0.5);}

.form-wrapper .agree-row {display: flex; align-items: center; gap: 4px; margin-bottom: 2px;}
.form-wrapper input[type="checkbox"]{display: none;}
.form-wrapper .agree-text {display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 500; color: #222;}
.form-wrapper .agree-text::before {content: ''; width: 24px; height: 24px; border-radius: 6px; border: 1px solid #D9D9D9; background-color: #fff; display: block;}
.form-wrapper input[type="checkbox"]:checked + .agree-text::before {background: #fff url('../images/common/check.png') no-repeat center; background-size: 15px 11px;}


.form-wrapper .required {color: #0047AB;}
.form-wrapper .agree-link {color: #0047AB; font-size: 18px; font-weight: 500;}

.form-wrapper .field {display: flex; flex-direction: column; margin-top: 13px;}
.form-wrapper .field label {font-size: 18px; font-weight: 700; color: #222; line-height: 200%; cursor: pointer;}

.form-wrapper .field .two-col {display: flex; align-items: center; gap: 10px;}
.form-wrapper .field .two-col > div {width: calc(50% - 5px);}

.form-wrapper input[type="text"], .form-wrapper input[type="tel"] {border: 1px solid #ccc; outline: none; border-radius: 6px; height: 50px; padding: 0 12px; font-size: 18px; font-weight: 400; width: 100%;}
.form-wrapper input[type="text"]::placeholder, .form-wrapper input[type="tel"]::placeholder{font-size: 18px; color: #999; }
.form-wrapper select {border: 1px solid #ccc; outline: none; border-radius: 6px; height: 50px; width: 100%; padding: 0 12px; font-size: 18px; font-weight: 400; appearance: none; background: url('../images/common/select-arrow-ico.png') no-repeat 95% 50% / 20px 20px; color: #222;}





/* [privacy] */
#privacy-popup {position: fixed; top: 0; left: 50%; width: 100%; height: 100%; max-width: 440px; transform: translateX(-50%); background-color: #fff; z-index: 999; display: none;}
#privacy-popup.on {display: block;}
#privacy-popup .pop-header {height: 70px; display: flex; align-items: center; justify-content: center; text-align: center;position: relative; border-bottom: 1px solid rgba(204, 204, 204, 0.5);}
#privacy-popup .pop-header h1 {font-size: 20px; font-weight: 700; color: #222;}
#privacy-popup .pop-header a {position: absolute; top: 50%; right: 17px; transform: translateY(-50%); width: 35px;}

#privacy-popup .pop-cont {height: calc(100vh - 70px); overflow: hidden; overflow-y: auto; padding: 26px 10px 47px 20px; font-family: 'Pretendard Variable';}
#privacy-popup .pop-cont * {font-size: 16px; line-height: 150%; color: #555;}
#privacy-popup .pop-cont .list-box {margin-top: 40px;}
#privacy-popup .pop-cont .list-box li {font-weight: 700; color: #222;}

#privacy-popup .pop-cont  .agree-box {margin-top: 40px;}
#privacy-popup .pop-cont  .agree-box .title {font-weight: 700; color: #222;}
#privacy-popup .pop-cont  .agree-box a {color: #555; text-decoration: underline;}
#privacy-popup .pop-cont div.nowrap {display: flex; align-items: center; gap: 4px;}
#privacy-popup .pop-cont div.flex-box {display: flex; align-items: baseline; gap: 4px;}
#privacy-popup .pop-cont div.flex-box span {width: calc(100% - 180px); line-height: 1.3; padding-bottom: 4px;}




@media screen and (max-width: 440px){
  /* header */
  header .logo a, header.type2 .logo a {width: 16.3636vw;}

  /* [contact] */
  #contact-wrapper .title-area h2{font-size: 5.9091vw;}
  #contact-wrapper .title-area p{font-size: 4.5455vw;}
  #contact-wrapper .title-area span{font-size: 3.1818vw;}

  .form-wrapper .agree-text, .form-wrapper .agree-link, .form-wrapper .field label, .form-wrapper input[type="text"], .form-wrapper input[type="tel"], .form-wrapper input[type="text"]::placeholder, .form-wrapper input[type="tel"]::placeholder, .form-wrapper select{font-size: 4.0909vw;}


  /* [privacy] */
  #privacy-popup .pop-header h1{font-size: 4.5455vw;}
  #privacy-popup .pop-cont * {font-size: 3.6364vw;}

}