@charset "UTF-8";

/* 프리텐다드 */
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard/Pretendard-Regular.subset.woff2') format('woff2'),
       url('../font/Pretendard/Pretendard-Regular.woff2') format('woff2'),
       url('../font/Pretendard/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard/Pretendard-Medium.subset.woff2') format('woff2'),
       url('../font/Pretendard/Pretendard-Medium.woff2') format('woff2'),
       url('../font/Pretendard/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard/Pretendard-Bold.subset.woff2') format('woff2'),
       url('../font/Pretendard/Pretendard-Bold.woff2') format('woff2'),
       url('../font/Pretendard/Pretendard-Bold.woff') format('woff'); 
  font-weight: 700;
  font-style: normal;
} 

/* 가라몬드 */
@font-face {
  font-family: 'EB Garamond';
  src: url('../font/EBGaramond-Italic.ttf') format('ttf'); 
  font-style: italic;
  font-weight: 800;
  font-display: swap;
}

/*reset*/
* { font-family: 'Pretendard',"AppleSDGothicNeo",'sans-serif'; padding: 0; margin: 0; font-style: normal; font-weight: 700; line-height: 140%; }

html { font-family: 'Pretendard',"AppleSDGothicNeo",'sans-serif' !important; }

body { font-family: 'Pretendard',"AppleSDGothicNeo",'sans-serif' !important; top: 0; left: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #fff; }

a { text-decoration: none; }

li { list-style: none; }

em { font-style: normal; }

ul, li, ol { list-style: none; }

img { display: block; }



:root{
    color-scheme: light only;
    /* color */

    /* 스케일 */
    --main-001 : #EA548C;
    --main-002 : #FC85BF;
    --main-003 : #F56DA6;
    --main-004 : #FFF0F6;
    --gray-000 : #FFFFFF;
    --gray-001 : #FCFAF8;
    --gray-002 : #F3F0ED;
    --gray-003 : #E4E1DE;
    --gray-004 : #D1CDC9;
    --gray-005 : #AFA8A5;
    --gray-006 : #6E6864;
    --gray-007 : #504A46;
    --gray-008 : #262320;
    --gray-009 : #110F0D;
    --system-error : #FF3750;
    --system-link : #38A82D;
    --system-success : #2974B9;

    /* 시멘틱 */

    /* text */
    --text-primary : var(--gray-009);
    --text-secondary : var(--gray-007);
    --text-unselected : var(--gray-005);
    --text-disabled : var(--gray-004);
    --text-reverse : var(--gray-001);
    --text-accent1 : var(--main-001);
    --text-accent2 : var(--main-004);
    --text-error : var(--system-error);
    --text-seccess : var(--system-link);
    --text-link : var(--system-success);

    /* Surface */
    /* background */
    --bg-base : var(--gray-001);
    --bg-pure : var(--gray-000);
    --bg-accent1 : var(--main-004);
    --bg-accent2 : var(--main-002);

    /* button */
    --btn-default : var(--main-002);
    --btn-secondary : var(--main-004);
    --btn-pressed : var(--main-003);
    --btn-disabled : var(--gray-002);
    --btn-unselected : var(--gray-001);

    /* icon */
    --icon-default : var(--gray-006);
    --icon-unselected : var(--gray-004);
    --icon-disabled : var(--gray-003);
    --icon-reverse : var(--gray-000);
    --icon-error : var(--system-error);
    --icon-seccess : var(--system-link);
    --icon-link : var(--system-success);
    --icon-accent : var(--main-001);

    /* border */
    --border-default : var(--gray-002);
    --border-disabled : var(--gray-003);
    --border-accent : var(--main-001);
    --border-accent2 : var(--main-002);

    /* 그림자 */
    /* Shadow */
    --shadow-color: rgba(0, 0, 0, 0.14);
    --shadow-Levle-1 :  0 1px 1px 0 var(--shadow-color);
    --shadow-Levle-2 :  0 3px 4px 0 var(--shadow-color);
    --shadow-Levle-3 :  0 6px 10px 0 var(--shadow-color); 

    /* PC (기본값) */
    /* font */
    --Font-Size-Display : 48px;  
    --Font-Size-Headline : 28px;
    --Font-Size-Title : 20px;
    --Font-Size-Body_Short : 18px;
    --Font-Size-Body_Long : 16px;  
    --Font-Size-Font-Size-Assist_L : 14px;
    --Font-Size-Label : 12px;

    /* 레이아웃 */
    /* Radius */
    --Radius-full : 1000px;
    --Radius-L : 24px;
    --Radius-M : 16px;
    --Radius-S : 12px;
    --Radius-XS : 8px;

    /* Spacing (Padding, Margin, Gap) */
    --Spacing-XXL : 120px;
    --Spacing-XL : 64px;   
    --Spacing-L : 48px;   
    --Spacing-M : 24px;   
    --Spacing-S : 16px;  
    --Spacing-XS : 8px;
}

/* 모바일 */
@media (max-width: 767px) {
  :root {
    /* font */
    --Font-Size-Display : 22px;  
    --Font-Size-Headline : 20px;
    --Font-Size-Title : 16px;
    --Font-Size-Body_Short : 14px;
    --Font-Size-Body_Long : 12px;  
    --Font-Size-Font-Size-Assist_L : 12px;
    --Font-Size-Label : 9px;


    /* 레이아웃 */
    /* Radius */
    --Radius-full : 1000px;
    --Radius-L : 16px;
    --Radius-M : 12px;
    --Radius-S : 8px;
    --Radius-XS : 4px;

    /* Spacing (Padding, Margin, Gap) */
    --Spacing-XXL : 40px;
    --Spacing-XL : 40px;   
    --Spacing-L : 20px;   
    --Spacing-M : 16px;   
    --Spacing-S : 8px;  
    --Spacing-XS : 4px;
  }
}

/* 태블릿 */
@media (max-width: 1199px) {
  :root {
    /* 테블릿 화면은 개발 중에 깨지게 된다면 추가 */
  }
}


/* 공용 */
main.main { padding-top: 100px; }
main.main img { width: 100%; }

/* 헤더 */
header.header { width: 100%; height: 100px; padding: var(--Spacing-S) 80px; background: var(--bg-pure); display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; z-index: 1000; box-sizing: border-box;}
header.header h1.logo { margin-right: 10%; }
header.header h1.logo a { display: block; width: 232px; height: 50px;  background: url(../img/BI/logo.svg); }

header.header nav.gnb-top { flex: 1; }
header.header nav.gnb-top ul { display: flex; justify-content: center; padding: var(--Spacing-XS) 0; justify-content: center; gap: var(--Spacing-L);  }
header.header nav.gnb-top ul li { width: 20%; }
header.header nav.gnb-top ul li a { color: var(--text-secondary); text-align: center;  font-size: var(--Font-Size-Body_Short); }
header.header nav.gnb-top ul li a.on { color: var(--main-003); }
@media (max-width: 1199px) { header.header nav.gnb-top ul li a { font-size: var(--Font-Size-Body_Long); }}

header.header nav.gnb-top ul li ul.dropdown { padding-top: var(--Spacing-S); margin-top: var(--Spacing-S); position: absolute; flex-direction: column; width: 100%; }
header.header nav.gnb-top ul li ul.dropdown li { width: 12%; display: flex; justify-content: flex-start; }
header.header nav.gnb-top ul li ul.dropdown li a { font-weight: 500;}
header.header nav.gnb-top ul li ul.dropdown li:hover > a { color: var(--main-003); }
.dropdown-bg { width: 100%; height: 332px; position: fixed; z-index: 100; background-color: var(--bg-pure); }

header.header nav.gnb-top ul li ul.dropdown, .dropdown-bg { display: none; }
header.header nav.gnb-top:hover .dropdown, header.header nav.gnb-top:hover ~ .dropdown-bg { display: flex; }

header.header .gnb-top-side { display: flex; align-items: center; gap: var(--Spacing-S); }
header.header .gnb-top-side a.inquiry { background: var(--main-003); border-radius: var(--Radius-full); padding: 8px var(--Spacing-S); display: flex; justify-content: center; align-items: center; font-size: var(--Font-Size-Body_Short); color: var(--text-reverse); }
header.header .gnb-top-side .link { display: flex; gap: 6px; }
header.header .gnb-top-side .link a { width: 26px; height: 26px; align-items: center; }

header.header .gnb-top-side-M { display: none; }
header.header .gnb-top-side-M .burger { position: relative; width: 35px; height: 35px; padding: 0; border: none; background-color: transparent; cursor: pointer; }
header.header .gnb-top-side-M .burger .burger-bar { position: absolute; left: 50%; width: 80%; height: 8%; background-color: #E62F88; border-radius: 2px; display: block; transform: translate(-50%, 0); transition: all 0.4s ease; }
header.header .gnb-top-side-M .burger .burger-bar:nth-child(1) { top: 20%; }
header.header .gnb-top-side-M .burger .burger-bar:nth-child(2) { top: 50%; transform: translate(-50%, -50%); }
header.header .gnb-top-side-M .burger .burger-bar:nth-child(3) { bottom: 20%; }
header.header .gnb-top-side-M .burger.open .burger-bar:nth-child(1) { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
header.header .gnb-top-side-M .burger.open .burger-bar:nth-child(2) { opacity: 0; }
header.header .gnb-top-side-M .burger.open .burger-bar:nth-child(3) { bottom: 50%; transform: translate(-50%, 50%) rotate(-45deg); }

.dropdown-bg-M { display: none; width: 100%; height: 100%; box-sizing: border-box; padding: calc( var(--Spacing-XXL) + 100px ) 18px var(--Spacing-XXL); position: fixed; background-color: var(--bg-pure); z-index: 100; }
.dropdown-bg-M .gnb-menu { display: flex; flex-direction: column; align-items: flex-start; gap: var(--Spacing-XL); }
.dropdown-bg-M .gnb-menu li a { color: var(--text-secondary); font-size: var(--Font-Size-Title); font-weight: 500; }
.dropdown-bg-M .link { display: flex; align-items: center; gap: 6px; padding-top: var(--Spacing-XXL); }
.dropdown-bg-M .link a { width: 26px; height: 26px; }

/* 푸터 */
footer.footer { width: 100%; box-sizing: border-box; background: var(--bg-accent2); display: flex; padding: var(--Spacing-XXL) 64px; align-items: center; align-content: center; gap: var(--Spacing-XL); align-self: stretch; flex-wrap: wrap; }
footer.footer .boundary { background-color: var(--bg-pure); width: 1px; height: 136px; }
footer.footer div { flex: 1; color: var(--text-reverse); display: flex; font-size: var(--Font-Size-Body_Long); flex-direction: column; gap: var(--Spacing-M); } 
footer.footer div.left b:first-child{font-size: var(--Font-Size-Body_Short);}
footer.footer div p {  font-weight: 400; } 

@media (max-width: 767px) {
    main.main { padding-top: 80px; }
    /* 헤더 */
    header.header { height: 80px; }

    /* 푸터 */
    footer.footer { padding: var(--Spacing-XXL) 5%; }
}
@media (max-width: 1199px) {
    /* 헤더 */
    header.header { padding: var(--Spacing-L) var(--Spacing-M); }
    header.header nav.gnb-top { display: none; }
    header.header .gnb-top-side { display: none; }
    .dropdown-bg { display: none !important; }  
    header.header .gnb-top-side-M { display: block; }


    /* 푸터 */
    footer.footer { flex-direction: column; align-content: flex-start; align-items: flex-start; }
    footer.footer .boundary { display: none; }
} 
/* 가맹문의 팝업 */
aside.pop-franchise-inquiry { position: fixed; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.50); }
aside.pop-franchise-inquiry form { width: 75%; height: 75%; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; padding: var(--Spacing-XL) var(--Spacing-L); background-color: var(--bg-pure); border-radius: var(--Radius-M);}
aside.pop-franchise-inquiry form::-webkit-scrollbar { display: none; }
aside.pop-franchise-inquiry form .btn-close-wrap {width: 100%; display: flex; justify-content: flex-end; margin-bottom: var(--Spacing-M); }
aside.pop-franchise-inquiry form .btn-close-wrap a { width: 40px; height: 40px; background: url(../img/icon/close.svg)no-repeat; }
aside.pop-franchise-inquiry form h2 { color: var(--text-primary); font-size: var(--Font-Size-Headline); padding-bottom: var(--Spacing-L); display: flex; justify-content: flex-start; }
aside.pop-franchise-inquiry form .form-group { display: flex; flex-direction: column; align-items: flex-start; }
aside.pop-franchise-inquiry form .form-group label { display: flex; align-items: center; color: var(--text-secondary); font-size: var(--Font-Size-Body_Short); font-weight: 500; }
aside.pop-franchise-inquiry form .form-group .form-box { width: 100%; display: flex; align-items: center; gap: var(--Spacing-S); margin: var(--Spacing-XS) 0 var(--Spacing-L);}

aside.pop-franchise-inquiry form .form-group .form-box input, aside.pop-franchise-inquiry form .form-group .form-box select { width: -webkit-fill-available; font-size: var(--Font-Size-Body_Long); display: flex; padding: var(--Spacing-S) var(--Spacing-XS) var(--Spacing-S) var(--Spacing-M); align-items: center; align-self: stretch; border-radius: var(--Radius-S); border: 1px solid var(--border-default); background: var(--bg-base); }
aside.pop-franchise-inquiry form .form-group .form-box input::placeholder {color: var(--text-unselected); font-size: var(--Font-Size-Body_Long); font-weight: 400; }

aside.pop-franchise-inquiry form .form-group .form-box select:invalid { color: var(--text-unselected); font-size: var(--Font-Size-Body_Long); font-weight: 400; }
aside.pop-franchise-inquiry form .form-group .form-box select { color: var(--text-primary); font-weight: 700; background: var(--bg-base) url(../img/icon/down-arrow.svg) no-repeat 95% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

aside.pop-franchise-inquiry form .form-group .form-box label { display: flex; align-items: center; gap: 6px; }
aside.pop-franchise-inquiry form .form-group .form-box label input[type="radio"] { width: 20px; height: 20px; margin: 2px; }

aside.pop-franchise-inquiry form .submit-wrap { display: flex; flex-direction: column; align-items: center; }
aside.pop-franchise-inquiry form .submit-wrap .form-group { padding: var(--Spacing-L) 0; align-items: center !important; }
aside.pop-franchise-inquiry form .submit-wrap .form-group label { padding: var(--Spacing-S) 0; gap: 8px; }
aside.pop-franchise-inquiry form .submit-wrap .form-group label input { color: var(--text-secondary); font-size: var(--Font-Size-Font-Size-Assist_L); font-weight: 400; }
aside.pop-franchise-inquiry form .submit-wrap a.submit-btn { pointer-events: none; color: var(--text-unselected); font-size: var(--Font-Size-Body_Long); display: flex; padding: var(--Spacing-S) var(--Spacing-L); justify-content: center; align-items: center; border: none; border-radius: var(--Radius-full); background: var(--btn-disabled);}
aside.pop-franchise-inquiry form .submit-wrap a.submit-btn.on { pointer-events: auto; color: var(--text-reverse); background: var(--btn-pressed);}

/* 체크 버튼 */
aside.pop-franchise-inquiry form .submit-wrap .form-group label input[type='checkbox'] {  appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 20px; height: 20px; flex-shrink: 0; aspect-ratio: 1/1; border-radius: var(--Radius-XS); border: 1.6px solid var(--gray-005);}
aside.pop-franchise-inquiry form .submit-wrap .form-group label input[type='checkbox']:checked { border: none; background: url(../img/icon/ic-checkbox.svg) no-repeat;}

/* 라디오 버튼 */
aside.pop-franchise-inquiry form .form-group .store-option input[type="radio"] { display: none !important; }
aside.pop-franchise-inquiry form .form-group .store-option { margin: calc(var(--Spacing-XS) + var(--Spacing-S)) 0 var(--Spacing-L);  }
aside.pop-franchise-inquiry form .form-group .store-option label { display: inline-flex; align-items: center; cursor: pointer; margin-right: 16px; position: relative; } 
aside.pop-franchise-inquiry form .form-group .store-option label span { padding-left: 24px; position: relative; color: var(--text-primary); font-size: var(--Font-Size-Body_Short); font-style: normal; font-weight: 400; }
aside.pop-franchise-inquiry form .form-group .store-option label span::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: url("../img/icon/radio-off.svg") no-repeat center/cover; }
aside.pop-franchise-inquiry form .form-group .store-option input[type="radio"]:checked + span::before { background: url("../img/icon/radio-on.svg") no-repeat center/cover; }

/* 이용동의 */
aside.pop-franchise-inquiry form .form-group label .policy-btn { display: inline-block; transition: transform 0.3s ease; width: 24px; height: 24px; background: url(../img/icon/down-arrow.svg) no-repeat; }
aside.pop-franchise-inquiry form .form-group label .policy-btn.rotate { transform: rotate(180deg); }
aside.pop-franchise-inquiry form .form-group .policy-text { color: var(--text-secondary); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--Spacing-S);padding: 30px 18px 30px 36px; background: var(--gray-002); border-radius: var(--Radius-S);}
aside.pop-franchise-inquiry form .form-group .policy-text b { font-size: var(--Font-Size-Body_Short ); font-weight: 700; }
aside.pop-franchise-inquiry form .form-group .policy-text p { padding-right: 10px; overflow-y: scroll; height: 200px; font-size: var(--Font-Size-Body_Long); font-weight: 400; }
/* 스크롤바 */
aside.pop-franchise-inquiry form .form-group .policy-text p::-webkit-scrollbar { width: 10px; } 
aside.pop-franchise-inquiry form .form-group .policy-text p::-webkit-scrollbar-thumb { background-color: #E62F88; border-radius: 3.2px; }
aside.pop-franchise-inquiry form .form-group .policy-text p::-webkit-scrollbar-track { background-color: var(--bg-pure); border-radius: 4px; }

.no-scroll { overflow: hidden; }
/* 모바일 */
@media (max-width: 767px) { 
    aside.pop-franchise-inquiry form .form-group .form-box.select { flex-direction: column; }   
    aside.pop-franchise-inquiry form .btn-close-wrap a { width: 24px; height: 24px; background: url(../img/icon/M-close.svg) no-repeat; } 

    aside.pop-franchise-inquiry form .form-group .policy-text { padding: 25px 11px 25px 20px;}
    aside.pop-franchise-inquiry form .form-group .policy-text p { padding-right: 6px; }
    aside.pop-franchise-inquiry form .form-group .policy-text p::-webkit-scrollbar { width: 8px; }

}