@charset "utf-8";
/* Reset */
 /* * {outline:0 !important;} */
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,
dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption,main{margin:0;padding:0;outline:none;-webkit-tap-highlight-color:transparent; }
html, body{width:100%;}
/*html{-webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}*/
body{width:100%; min-width:320px; -webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all;font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;}
html[lang="ja"] body,
html[lang="ja"] input,
html[lang="ja"] select,
html[lang="ja"] textarea,
html[lang="ja"] button{font-family: "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", Pretendard, "Hiragino Sans", Meiryo, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;}
body,input,select,textarea,button {border:none;font-size:12px; color:#46312c;background: none;}
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
img,fieldset{border:0;}
address,cite,code,em{font-style:normal;font-weight:normal;}
/* label,img,input,select,textarea,button{vertical-align:middle;} */
.hide,caption,legend{line-height:0;font-size:1px;overflow:hidden;}
hr{display:none;}
main,header,section,nav,footer,aside,article,figure{display:block;}
a{color:#000;text-decoration:none;}
::selection {color:#fff;background-color: #000;}
::-moz-selection {color:#fff;background-color: #000;}
::-webkit-selection{color:#fff;background-color: #000;}
::-webkit-scrollbar{display:none;}

/* Form */
textarea { border:1px solid #dbdbdb;}
select { height:32px; font-size:13px; color:#373737; border:1px solid #e9e9e9; background:#fff;border-radius: 5px;}
input[type=tel],
input[type=time],
input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=file],
input[type=url],
input[type=number],
input[type=date],textarea {font-family: "Pretendard Variable", Pretendard, sans-serif;width:100%; height:30px; font-size:13px; color:#373737; border:1px solid #e9e9e9; background:#fff; text-indent:20px; vertical-align:middle;-webkit-appearance: none;-webkit-border-radius:0;}
input::-webkit-input-placeholder{color:#b5b5b5; font-size:12px; line-height:100%;}
textarea { padding:5px 0;}
select:focus,
textarea:focus,
input:focus { border: 1px solid #727272;}
select { -webkit-appearance: none; -moz-appearance: none; appearance: none;}
input, textarea, button {-webkit-appearance:none; -moz-appearance:none; appearance:none;}
input, textarea, button, select {-webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0;}

button{cursor:pointer;}
input[type=tel][readonly],
input[type=text][readonly],
input[type=password][readonly],
input[type=email][readonly],
input[type=search][readonly],
input[type=tel][disabled],
input[type=text][disabled],
input[type=password][disabled],
input[type=search][disabled],
input[type=email][disabled]{background:#eaeaea; border-color:#c0c0c0; color:#666; -webkit-appearance:none;font-size:12px;}
textarea[readonly],
textarea[disabled]{font-size:16px;font-weight:normal; line-height:140%; background:#eaeaea;border:1px solid #c0c0c0;}
.blind{display:none;}

.clear {clear:both;}
.clear:after { content:""; display:block; clear:both;}

:root {
    --black: #241f1f;
}

#wrap{height: 100vh;position: relative;}
/* 좌우 여백은 5vw 한 값으로 통일한다 — 설정 콘솔(.design-console)의 90vw 폭과 같은 안내선을
   쓰기 위해서다. 아래 반응형 구간에서 이 padding 을 다시 덮지 말 것. */
.header{position: fixed;top: 0;left: 0; width: 100%;display: flex;justify-content: space-between;align-items: center;z-index: 10;box-sizing: border-box;padding: 30px 5vw;z-index: 1000;transition: transform .3s ease;}
body.nav-hidden .header{transform: translateY(-100%);}
.header .h_w{position: relative;z-index: 10;margin-right: auto;}
.header .h_w a{color: #fff; }
.header .h_question{margin-right: 0;display: flex;align-items:center;position: relative;z-index: 10; opacity: 1; transition: all .4s ease-in-out;}
.header .h_question a{display: block;color: #fff;font-size: 16px;font-weight: bold; letter-spacing: -.6px;text-align: center;line-height: 36px;padding: 0 1.2em;}
.header .h_question a:first-child~a{margin-left: .3em;}
.header .h_question .lang-switcher{margin-left:.8em;color:#fff;}
.header .h_question .lang-switcher__label{border-color:rgba(255,255,255,.62);background:rgba(0,0,0,.16);}
.header .h_question--language-only{margin-right:42px;}
.header .h_question .language { display: flex; justify-content: center; align-items: center; padding: 0 1.2em; margin-left: 0.3em; }
.header .h_question .language figure { margin-top: 4px; }
.header .h_question .language figure img { width: 16px; }
.header .h_question .language a { line-height: 1; }
.header .h_question .language a span { font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 16px; font-weight: bold; cursor: pointer; }
.header .h_question .language figure img { filter: invert(1); }
.header .h_question .language a span { color: #777; }
.header .h_question .language a.active span { color: #fff; }
.header .h_question .language svg path { fill: #fff; }
.header .h_question .language a:nth-child(2), .header .h_question .language a:nth-child(3) { border-right: 1px solid #777; }
.header .h_question .language a:nth-child(2) { padding-right:10px; }
.header .h_question .language a:nth-child(3) { padding:0 10px; }
.header .h_question .language a:nth-child(4) { padding-left:10px; }
.header .n_btn{padding: 7px 5px;cursor: pointer;position: relative;z-index: 10;}
.header .n_btn button{display:block; position: relative;width: 30px;height: 26px;box-sizing: content-box;cursor: pointer;}
.header .n_btn span{display: block;height: 3px;background-color: #fff;position: absolute;}
.header .n_btn span:nth-child(1){width: 15px;top:0;z-index: 2;}
.header .n_btn span:nth-child(2){width: 100%;top: 50%;z-index: 1;transform: translateY(-50%);}
.header .n_btn span:nth-child(3){width: 15px;bottom: 0;right:0;z-index: 3;}
.header .g_nav{position: fixed;top: 0%;right: 0%;width: 0;height: 0;display: flex;align-items: center;justify-content: center;transition: .5s ease-in-out ;box-sizing: border-box;overflow: hidden;background-image: url(/img/bg.webp);background-repeat: repeat-x;background-size: auto 100vh;background-position: -100vw 0;will-change: contents,top,left,width,height,background-position;}
.header .g_nav>div{position: relative;top: 0;left: 0;width: 100vw;height: 100vh; overflow: hidden;}
.header .g_nav>div>div{width: 100vw;display: flex;align-items: center;justify-content: center; height: 100vh;transform: translate(-50vw, 0);will-change: contents,transform;opacity: 0;}
.header .g_nav .m_in_wrap{display: flex;justify-content: space-between; width: 100%;max-width: 1434px; flex-direction: column;}
.header .g_nav .m_nav{display: grid; grid-template-columns: 1fr 1fr;gap: 200px;}
.header .g_nav .m_nav li{transform: translateX(-10%);opacity: 0;}
.header .g_nav .m_nav a{position: relative; color: #fff;font-size: 70px;font-weight: bold;letter-spacing: -3px;font-family: "acumin-pro-wide";transition: .3s;line-height: 1.5;}
.header .g_nav .m_nav a::after{display: block;content: '';position: absolute; bottom: -.1em;left: 0;width: 0;border-bottom: .07em solid #fff;transition: .3s;} 
.header .g_nav .m_nav a span{font-size: .343em;margin-left:1em;color:#dcdcd7;letter-spacing:normal;}
.header .g_nav .m_sns{align-self: flex-end; margin-top: 10px;}
.header .g_nav .m_sns li{transform: translateX(10%);opacity: 0;transition: .3s;}
.header .g_nav .m_sns a{color: #fff;font-size: 30px;font-weight: bold;letter-spacing: -.6px;font-family: "acumin-pro-wide";}
/* 자사 링크(INQUIRY). SNS 와 같은 줄에 두되 한글 설명을 옆에 붙인다 — 30px 표시체는 라틴 전용이라 한글은 본문 서체로 떨어진다. */
.header .g_nav .m_sns .m_sns_own a span{font-size: clamp(12px, .5em, 15px);margin-left: .5em;color: #dcdcd7;letter-spacing: normal;font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;}
html[dir="rtl"] .header{flex-direction:row;direction:rtl;padding:30px 5vw;}
html[dir="rtl"] .header .h_w{margin-right:0;margin-left:auto;}
html[dir="rtl"] .header .h_question{margin-right:66px;margin-left:0;flex-direction:row-reverse;}
html[dir="rtl"] .header .h_question a:first-child~a{margin-left:0;margin-right:.3em;}
html[dir="rtl"] .header .h_question .lang-switcher{margin-left:0;margin-right:.8em;}
html[dir="rtl"] .header .h_question--language-only{margin-right:42px;margin-left:0;}
html[dir="rtl"] .header .n_btn span:nth-child(1){right:0;}
html[dir="rtl"] .header .n_btn span:nth-child(3){right:auto;left:0;}
html[dir="rtl"] .header .g_nav{right:auto;left:0;background-position:100vw 0;}
html[dir="rtl"] .header .g_nav>div>div{transform:translate(50vw, 0);}
html[dir="rtl"] .header .g_nav .m_nav li{transform:translateX(10%);text-align:right;}
html[dir="rtl"] .header .g_nav .m_nav a::after{left:auto;right:0;}
html[dir="rtl"] .header .g_nav .m_nav a span{margin-left:0;margin-right:1em;}
html[dir="rtl"] .header .g_nav .m_sns{align-self:flex-start;}
html[dir="rtl"] .header .g_nav .m_sns li{transform:translateX(-10%);}
html[dir="rtl"] #wrap.on .header .g_nav>div>div{transform:translateX(0);}
html[dir="rtl"] #slideContainer,
html[dir="rtl"] .section_2 .swiper-container,
html[dir="rtl"] .section_2 .swiper-wrapper,
html[dir="rtl"] .section_2 .swiper-slide{direction:ltr;}
html[dir="rtl"] .section_2 .brand_text_wrap,
html[dir="rtl"] .section_2 .brand_text_wrap .s_w{direction:rtl;text-align:right;}
html[dir="rtl"] .section_0 .main_title h2,
html[dir="rtl"] .section_0 .main_title span,
html[dir="rtl"] .section_2 .brand_text_wrap h2,
html[dir="rtl"] .section_2 .brand_text_wrap h2 a,
html[dir="rtl"] .section_2 .brand_text_wrap h2 .brand-title,
html[dir="rtl"] .section_4 .instagram_wrap h2,
html[dir="rtl"] .section_4 .instagram_wrap h2 a,
html[dir="rtl"] #footer a[href^="mailto:"],
html[dir="rtl"] #footer .f_r p,
html[dir="rtl"] .email-split input,
html[dir="rtl"] .email-split span,
html[dir="rtl"] .product-sticky-cta--foreign .product-cta-link a{direction:ltr;unicode-bidi:isolate;}
html[dir="rtl"] .product-sticky-cta--foreign .product-cta-links{direction:ltr;}
body.blue .header .h_w a{color: #241f1f;}
body.blue .header .h_w .cls-2{fill:#241f1f}
body.blue .header .n_btn span{background-color: #241f1f;}
body.blue .header .h_question a{color: #46312c;}
body.blue .header .h_question .language figure img { filter: invert(0); }
body.blue .header .h_question .language a span { color: #777; }
body.blue .header .h_question .language a.active span { color: #46312c; }
body.blue .header .h_question .language svg path { fill: #46312c !important; }
.h_faq{ font-family: "Pretendard Variable", Pretendard, sans-serif; }
body.blue #wrap.on .header .h_w a{color: #fff;}
body.blue #wrap.on .header .h_w .cls-2{fill:#fff}
body.blue #wrap.on .header .n_btn span{background-color: #fff;}
body.blue #wrap.on .header .h_question a{color: #fff;}
body.blue #wrap.on .header .h_question .language figure img { filter: invert(1); }
body.blue #wrap.on .header .h_question .language a span { color: #777; }
body.blue #wrap.on .header .h_question .language a.active span { color: #fff; }
body.blue #wrap.on .header .h_question .language svg path { fill: #fff !important; }

/* 24.02.29 [정윤석] GSAP Transition을 위한 Class명 분리 */
body.theme .header .h_w a{color: #241f1f;}
body.theme .header .h_w .cls-2{fill:#241f1f}
body.theme .header .n_btn span{background-color: #241f1f;}
body.theme .header .h_question a{color: #46312c;}
body.theme .header .h_question .language figure img { filter: invert(0); }
body.theme .header .h_question .language a span { color: #777; }
body.theme .header .h_question .language a.active span { color: #46312c; }
body.theme .header .h_question .language svg path { fill: #46312c !important; }
body.theme #wrap.on .header .h_w a{color: #fff;}
body.theme #wrap.on .header .h_w .cls-2{fill:#fff}
body.theme #wrap.on .header .n_btn span{background-color: #fff;}
body.theme #wrap.on .header .h_question a{color: #fff;}
body.theme #wrap.on .header .h_question .language figure img { filter: invert(1); }
body.theme #wrap.on .header .h_question .language a span { color: #777; }
body.theme #wrap.on .header .h_question .language a.active span { color: #fff; }
body.theme #wrap.on .header .h_question .language svg path { fill: #fff !important; }

#wrap.blue .header .h_w a{color: #241f1f;}
#wrap.blue .header .h_w .cls-2{fill:#241f1f}
#wrap.blue .header .n_btn span{background-color: #241f1f;}
#wrap.blue .header .h_question a{color: #46312c;}
#wrap.blue .header .h_question .language figure img { filter: invert(0); }
#wrap.blue .header .h_question .language a span { color: #777; }
#wrap.blue .header .h_question .language a.active span { color: #46312c; }
#wrap.blue .header .h_question .language svg path { fill: #46312c !important; }
#wrap.blue.on .header .h_w a{color: #fff;}
#wrap.blue.on .header .h_w .cls-2{fill:#fff}
#wrap.blue.on .header .n_btn span{background-color: #fff;}
#wrap.blue.on .header .h_question a{color: #fff;}
#wrap.blue.on .header .h_question .language figure img { filter: invert(1); }
#wrap.blue.on .header .h_question .language a span { color: #777; }
#wrap.blue.on .header .h_question .language a.active span { color: #fff; }
#wrap.blue.on .header .h_question .language svg path { fill: #fff !important; }
#wrap.theme .header .h_w a{color: #241f1f;}
#wrap.theme .header .h_w .cls-2{fill:#241f1f}
#wrap.theme .header .n_btn span{background-color: #241f1f;}
#wrap.theme .header .h_question a{color: #46312c;}
#wrap.theme .header .h_question .language figure img { filter: invert(0); }
#wrap.theme .header .h_question .language a span { color: #777; }
#wrap.theme .header .h_question .language a.active span { color: #46312c; }
#wrap.theme .header .h_question .language svg path { fill: #46312c !important; }
#wrap.theme.on .header .h_w a{color: #fff;}
#wrap.theme.on .header .h_w .cls-2{fill:#fff}
#wrap.theme.on .header .n_btn span{background-color: #fff;}
#wrap.theme.on .header .h_question a{color: #fff;}
#wrap.theme.on .header .h_question .language figure img { filter: invert(1); }
#wrap.theme.on .header .h_question .language a span { color: #777; }
#wrap.theme.on .header .h_question .language a.active span { color: #fff; }
#wrap.theme.on .header .h_question .language svg path { fill: #fff !important; }

body.top .header{background-color: rgba(255,255,255,1);border-bottom: 1px solid #ededed;}
body.top .header .h_w a{color: #241f1f;}
body.top .header .h_w .cls-2{fill:#241f1f}
body.top .header .n_btn span{background-color: #241f1f;}
body.top .header .h_question a{color: #46312c;}
body.top .header .h_question .language figure img { filter: invert(0); }
body.top .header .h_question .language a span { color: #777; }
body.top .header .h_question .language a.active span { color: #46312c; }
body.top .header .h_question .language svg path { fill: #46312c !important; }
body.top #wrap.on .header .h_w a{color: #fff;}
body.top #wrap.on .header .h_w .cls-2{fill:#fff}
body.top #wrap.on .header .n_btn span{background-color: #fff;}
body.top #wrap.on .header .h_question a{color: #fff;}
body.top #wrap.on .header .h_question .language figure img { filter: invert(1); }
body.top #wrap.on .header .h_question .language a span { color: #777; }
body.top #wrap.on .header .h_question .language a.active span { color: #fff; }
body.top #wrap.on .header .h_question .language svg path { fill: #fff !important; }
body.top #wrap.on .header{background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;}
body.blue .header .h_question .lang-switcher,
body.theme .header .h_question .lang-switcher,
#wrap.blue .header .h_question .lang-switcher,
#wrap.theme .header .h_question .lang-switcher,
body.top .header .h_question .lang-switcher{color:#46312c;}
body.blue .header .h_question .lang-switcher__label,
body.theme .header .h_question .lang-switcher__label,
#wrap.blue .header .h_question .lang-switcher__label,
#wrap.theme .header .h_question .lang-switcher__label,
body.top .header .h_question .lang-switcher__label{border-color:rgba(70,49,44,.38);background:rgba(255,255,255,.78);}
body.blue #wrap.on .header .h_question .lang-switcher,
body.theme #wrap.on .header .h_question .lang-switcher,
#wrap.blue.on .header .h_question .lang-switcher,
#wrap.theme.on .header .h_question .lang-switcher,
body.top #wrap.on .header .h_question .lang-switcher{color:#fff;}
body.blue #wrap.on .header .h_question .lang-switcher__label,
body.theme #wrap.on .header .h_question .lang-switcher__label,
#wrap.blue.on .header .h_question .lang-switcher__label,
#wrap.theme.on .header .h_question .lang-switcher__label,
body.top #wrap.on .header .h_question .lang-switcher__label{border-color:rgba(255,255,255,.62);background:rgba(0,0,0,.16);}
#wrap.on .header .g_nav{inset:0;width:100vw;height:100vh;background-position:0 0;}
#wrap.on .header .g_nav.on{transition-property: none;}
#wrap.on .header .g_nav>div>div{transform: translateX(0);opacity: 1;}
#wrap.on .header .g_nav .m_nav li{opacity: 1;transform: translateX(0%);transition-duration: .3s;transition-timing-function: ease-in-out;}
#wrap.on .header .g_nav .m_nav li:nth-child(1){transition-delay:.4s;}
#wrap.on .header .g_nav .m_nav li:nth-child(2){transition-delay:.5s;}
#wrap.on .header .g_nav .m_nav li:nth-child(3){transition-delay:.6s;}
#wrap.on .header .g_nav .m_nav li:nth-child(4){transition-delay:.7s;}
#wrap.on .header .g_nav .m_nav li:nth-child(5){transition-delay:.8s;}
#wrap.on .header .g_nav .m_nav li:nth-child(6){transition-delay:.9s;}
#wrap.on .header .g_nav .m_nav li:nth-child(7){transition-delay:1.1s;}
#wrap.on .header .g_nav .m_nav li.opactiy a{opacity: .3;}
#wrap.on .header .g_nav .m_nav li.hover a{opacity: 1;}
#wrap.on .header .g_nav .m_nav a:hover:after{width: 100%;}
#wrap.on .header .g_nav .m_sns li{transform: translateX(0);opacity: 1;}
#wrap.on .header .g_nav .m_sns li:nth-child(1){transition-delay:.4s;}
#wrap.on .header .g_nav .m_sns li:nth-child(2){transition-delay:.5s;}
/* 세 번째 항목(한국어 메뉴의 INQUIRY). 없으면 앞 두 개만 차례로 들어오고 이것만 즉시 나타난다. */
#wrap.on .header .g_nav .m_sns li:nth-child(3){transition-delay:.6s;}
#wrap.on .header .g_nav .m_sns li:nth-child(4){transition-delay:.7s;}
/*
 * 폰에서는 SNS 줄에 항목이 셋이면 300px 안에 꽉 차서 글자끼리 붙는다(측정 여백 2px).
 * 줄바꿈을 허용하고, 한글 설명은 다른 메뉴 항목처럼 이름 아래로 내린다.
 */
@media screen and (max-width: 600px) {
  .header .g_nav .m_sns{flex-wrap: wrap; justify-content: center; gap: .8em 1.6em;}
  #wrap.on .header .g_nav .m_sns .m_sns_own a span{display: block; margin-left: 0; font-size: .72em;}
}
#footer{background-color: #241f1f;padding: 56px 0 138px;position: relative;z-index: 100;}
#footer .f_w {max-width: 1434px;width: 100%;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}
#footer .f_w h2 svg{width: 161px;height: 43px;}
#footer .f_w h2,
#footer address,
#footer small{color: #dcdcd7;}
#footer .f_l address{font-size: 14px;letter-spacing:-.42px;margin: 36px 0 16px}
#footer .f_l ul{display: flex;margin-bottom: 16px;}
#footer .f_l ul li:first-child~li{margin-left: 8px;}
/*
 * 4 : 3 : 3 — 사업자정보 | Contact us | Get the app + Follow us.
 *
 * ★`.f_contact`·`.f_app` 은 `.f_r` 안에 있다. 그래서 바깥을 40/60 으로 나누고 안을 반씩
 *   쪼갠다(60 ÷ 2 = 30). 세 칸을 형제로 끌어내려면 `.f_r` 에 걸린 규칙과 해외 로케일
 *   푸터 변형까지 같이 손봐야 해서, 중첩을 유지한 채 비율만 맞췄다.
 * ★`flex-basis` 만 쓴다. 1494px 이하에서는 `.f_w` 가 block 이 되는데(세로로 접힌다),
 *   flex 속성은 그때 무시되므로 기존 반응형 동작을 안 건드린다. `width` 를 쓰면 깨진다.
 */
#footer .f_l{flex: 0 0 40%;min-width: 0;}
/*
 * ★`.f_r` 는 **grid** 다. flex 로는 폭에 따라 칸 구성을 바꿀 수 없다 — 넓은 화면은
 *   Follow us 가 Get the app **아래**, 중간 폭은 **세 번째 칸**, 모바일은 **세 번째 줄**이다.
 *   grid-template-areas 면 같은 마크업으로 셋을 다 만든다.
 * ★Follow us 를 `.f_app` 안에 중첩하면 중간 폭에서 못 꺼낸다. CSS 는 자식을 형제 자리로
 *   옮기지 못한다. 그래서 형제로 두고 배치만 바꾼다.
 */
#footer .f_r{display: grid;flex: 0 0 60%;min-width: 0;gap: 34px 24px;align-content: start;}
#footer .f_r article{min-width: 0;}
#footer .f_r .f_contact{grid-area: contact;}
#footer .f_r .f_app{grid-area: app;}
#footer .f_r .f_follow{grid-area: follow;}
#footer .f_r h3{font-size:14px;color: #fff;font-family: "Pretendard Variable", Pretendard, sans-serif;margin-bottom: 25px;}
#footer .f_r article a,
#footer .f_r p{font-family: "Pretendard Variable", Pretendard, sans-serif;font-size:28px;font-weight: bold;color: #fff;}
#footer .f_r p{color: #fff;}
/*
 * 2026-08-25: 4열 → 3열. 앱 배지 두 장이 들어오며 남은 칸이 눌려 'INSTAGRAM' 이
 * 'INSTAGR/AM' 으로, 이메일이 'brief@briefcompan/y.net' 으로 잘렸다. Follow us 를 배지
 * 아래로 내려 배지 칸의 남는 세로 공간을 쓰게 하고 가로 폭을 풀었다.
 *
 * ★칸을 `nth-child` 로 잡지 않는다. 순서를 바꾸는 순간 조용히 어긋난다 — 실제로 Follow us
 *   를 옮기면서 예전 nth-child(1)·(2) 규칙이 전부 밀렸다. 클래스로 못박는다.
 */
/* 칸 사이 간격은 `.f_r` 의 gap 이 준다. padding 을 쓰면 그 칸만 넓어져 비율이 어긋난다
   (실제로 33.8% : 32.2% 로 갈렸다). */
#footer .f_r .f_contact a{text-decoration: underline;}
#footer .f_r .f_contact a:hover{background-color: #fff;color: #46312c;}
#footer .f_r .f_follow a{color: #dcdcd7;}
#footer .f_r .f_follow li.active a{color: #fff;}
/* SNS 이름은 고유명사라 중간에서 끊기면 못 읽는다. 칸이 좁아도 통째로 유지한다. */
#footer .f_r .f_follow li a{white-space: nowrap;}
/*
 * 앱 다운로드 배지(2026-08-24 iOS 출시). 애플·구글이 제공하는 **공식 아트워크**를 그대로 쓴다.
 * ★배지를 고쳐 그리면 두 스토어의 상표 가이드라인 위반이다. 색·비율·문구·여백을 손대지 말 것.
 *
 * ★두 파일은 여백 규격이 다르다. 같은 `height` 를 주면 반드시 어긋난다.
 *
 *   | 파일 | 상자 | 아트워크 | 여백 |
 *   | 구글 webp | 646x250 | 564x168, (41,41) 에서 시작 | 사방 41px 이 **파일에 들어 있다** |
 *   | 애플 svg  | 119.66x40 | 상자와 같음 | **없다** |
 *
 *   그래서 아트워크를 40px 로 맞추려면 애플은 `height:40px`, 구글은 `40 x 250/168 = 59.52px`.
 *   구글의 여백은 그 배율에서 `41 x 40/168 = 9.76px` 로 줄어든다.
 *
 * ★배치는 2열이고 애플이 왼쪽이다. 구글의 여백을 `margin-left:-9.76px` 로 상쇄해 **아트워크 상자**가
 *   레이아웃에 잡히게 한다. 그래야 두 배지의 왼쪽 끝이 위의 h3 과 한 줄에 맞고, `gap` 이 눈에 보이는
 *   간격과 같아진다. 상쇄하지 않으면 구글만 9.76px 안쪽에서 시작한다 — 실제로 그렇게 나갔었다.
 *   위아래는 `align-items:center` 로 맞는다. 구글 아트워크는 상자 정중앙이다(41+168+41=250).
 *
 * ★`flex-wrap:wrap` 은 좁은 칸을 위한 것이다. 461~1494px 구간에서 이 칸은 푸터 3분의 1(600px 화면에서
 *   168px)까지 좁아지는데 2열은 270px 을 쓴다. 안 감싸면 문서가 가로로 삐져나간다(실측: 900px 화면에서
 *   scrollWidth 907). 감싸도 상쇄 덕분에 세로로 쌓인 두 배지의 왼쪽 끝은 그대로 맞는다.
 *
 * ★여백을 상쇄해도 가이드라인은 지켜진다. 2열일 때 애플과 구글 아트워크 사이는 gap 16px,
 *   쌓였을 때는 6px + 구글 자체 여백 9.76px 이라 어느 쪽도 요구치(구글 9.76px, 애플 4px)를 넘는다.
 */
/* 넓은 화면에서는 이 칸을 줄이지 않는다 — 줄어들면 wrap 이 걸려 2열이 도로 풀린다.
   좁은 구간(≤1494px)에서는 아래 미디어쿼리가 이 값을 되돌려 다시 줄어들 수 있게 한다. */
#footer .f_r article:nth-child(3){flex-shrink: 0;}
/*
 * Contact us · Get the app · Follow us 는 오른쪽 정렬이다.
 *
 * ★배지 줄은 flex 라 `text-align` 이 안 먹는다 — `justify-content` 로 따로 밀어야 한다.
 *   이걸 빼먹으면 글자만 오른쪽으로 가고 배지 두 장은 왼쪽에 남는다.
 * ★`.f_l`(사업자정보)은 왼쪽 정렬 그대로다. 상속으로 딸려가지 않게 `.f_r` 안에서만 건다.
 */
#footer .f_r .app-badges{display: flex;flex-wrap: wrap;align-items: center;gap: 6px 16px;}
/*
 * ★우측 정렬은 **3열이 실제로 서는 구간에서만** 건다(1495px 이상). 그 아래에서는 `.f_w` 가
 *   block 이 되어 세로로 접히는데, 접힌 상태에서 오른쪽으로 밀면 왼쪽 사업자정보와 글줄
 *   시작점이 어긋나 정렬이 깨진 것처럼 보인다. 모바일은 전부 왼쪽 정렬 그대로다.
 */
@media screen and (min-width:1495px) {
  /* 4:3:3 — 바깥 40/60, 안쪽 2열이라 각 30%. Follow us 는 배지 아래 남는 세로를 쓴다. */
  #footer .f_r{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "contact app"
      "contact follow";
  }
  #footer .f_r article{text-align: right;}
  /* 배지 줄은 flex 라 `text-align` 이 안 먹는다 — 빼먹으면 글자만 오른쪽으로 가고
     배지 두 장은 왼쪽에 남는다. */
  #footer .f_r .app-badges{justify-content: flex-end;}
}
#footer .f_r .app-badges a{display: inline-flex;background: none;}
#footer .f_r .app-badges a:hover{background: none;}
#footer .f_r .app-badges img{display: block;width: auto;}
/*
 * ★두 배지는 **파일 여백이 다르다**. 구글 webp 는 646x250 상자 안에 564x168 아트워크가
 *   사방 41px 여백을 두고 들어 있고, 애플 svg 는 여백이 없다. 같은 `height` 를 주면
 *   반드시 어긋난다. 그래서 상자를 키우고 **음수 여백으로 파일 여백을 잘라낸다.**
 *
 * ★나란히 놓일 때는 **아트워크 높이**를 40px 로 맞춘다(사방 -9.76px 이라 줄 높이도 40 이 되고
 *   두 배지의 세로 중심이 정확히 맞는다). 예전에는 가로 여백만 잘라 줄 높이가 60 이었고
 *   애플 배지가 위아래 10px 씩 떠 있었다.
 */
#footer .f_r .app-badges .badge-apple img{height: 40px;}
#footer .f_r .app-badges .badge-google img{height: 59.52px;margin: -9.76px;}

/*
 * ★쌓일 때는 반대로 **아트워크 폭**을 맞춘다(134.3px = 구글 아트워크 실폭). 두 배지의
 *   가로세로비가 달라(애플 2.99:1, 구글 3.36:1) 폭과 높이를 동시에 맞출 수는 없다.
 *   나란하면 높이가, 쌓이면 폭이 눈에 걸리므로 배치에 따라 기준을 바꾼다.
 *
 * ★언제 쌓이는가는 칸 폭이 정한다. 배지 두 장이 한 줄에 들어가려면 120+16+154=290px 이
 *   필요하다. 3분할 구간에서 칸 폭은 (92vw-48)/3 이라 뷰포트가 약 1000px 아래로 내려가면
 *   못 들어간다. 아주 좁은 모바일(≤340px)도 같다. 그 두 구간에서만 세로로 세운다.
 */
@media screen and (min-width:921px) and (max-width:1010px) {
  #footer .f_r .app-badges{flex-direction: column;align-items: flex-end;gap: 10px;}
  #footer .f_r .app-badges .badge-apple img{height: auto;width: 134.3px;}
}
@media screen and (max-width:340px) {
  #footer .f_r .app-badges{flex-direction: column;align-items: flex-start;gap: 10px;}
  #footer .f_r .app-badges .badge-apple img{height: auto;width: 134.3px;}
}
#footer a{color: #fff;}
/* brief-korean-footer-readability */
#footer:not([data-brief-localized-footer]) .f_l{max-width: 780px;}
#footer:not([data-brief-localized-footer]) .f_l address{max-width: 100%;font-size: 15px;line-height:1.72;letter-spacing:0;margin: 32px 0 20px;color:#eee9e3;font-style: normal;font-weight: 500;}
#footer:not([data-brief-localized-footer]) .f_l address span{display:block;}
#footer:not([data-brief-localized-footer]) .f_l address em{font-style:normal;color:#a99f98;margin:0 5px;}
#footer:not([data-brief-localized-footer]) .f_l address strong{color:#fff;font-weight:800;margin-right: 3px;}
#footer:not([data-brief-localized-footer]) .f_l address a{color:#fff;text-decoration: none;}
/*
 * ★한국어는 기본값(break-word)이면 어절 한가운데서 끊긴다. 실제로 '제2026-서울서대문-0493호'
 *   의 `호` 만 다음 줄로 떨어지고 '070-4217-1198' 이 `070` 뒤에서 갈렸다. keep-all 로 어절
 *   단위로 끊고, 번호·상호처럼 통째로 읽어야 하는 것은 nowrap 으로 묶는다.
 */
#footer:not([data-brief-localized-footer]) .f_l address{word-break: keep-all; overflow-wrap: anywhere;}
#footer:not([data-brief-localized-footer]) .f_l address a,
#footer:not([data-brief-localized-footer]) .f_l address strong{white-space: nowrap;}
#footer:not([data-brief-localized-footer]) .f_l ul{gap: 8px 14px;flex-wrap: wrap;margin-bottom: 20px;}
#footer:not([data-brief-localized-footer]) .f_l ul li:first-child~li{margin-left: 0;}
#footer:not([data-brief-localized-footer]) .f_l ul a{color:#f8f4ee;font-weight:700;}
#footer:not([data-brief-localized-footer]) .f_l small{display:none;}
#loading_wrap{position: fixed;top: 0;left: 0;background-color: #fff;width: 100%;height: 100%; z-index: 9999;overflow: hidden;transition: .6s ease-in-out;display:flex;align-items: center;justify-content: center;}
#loading_scene{width: 30vw;transition: .6s ease-in-out;}
#loading_wrap.on{opacity: 0;}

/**팝업창 css*/
.advertisement_layout{position: fixed; top: 110px; right: 30px; z-index: 100; display: flex; align-items: center; justify-content: center; z-index:1000;}
.advertisement_layout .advertisement_wrap{ width: 100%; min-width: 230px; max-width: 330px; }
.advertisement_layout .advertisement_img {position: relative;}
.advertisement_layout .advertisement_img a,
.advertisement_layout .advertisement_img a img{display: block;}
.advertisement_layout .advertisement_img img {display: block; max-width: 100%; height: auto;}
.advertisement_layout .btns{display: flex; justify-content: space-between;}
.advertisement_layout .btns button{display: flex; flex: 0 0 50%; font-size: 12px; color: #fff; justify-content: center; align-items: center; height: 48px;background: #666; cursor: pointer;}
.advertisement_layout .btns button:last-child{background: #000;}
.advertisement_layout .advertisement_img .link {position: absolute; background: transparent; }
.advertisement_layout .advertisement_img .app_link { height: 2.3792vw; width: 7.4vw; bottom: 1.5vw; left: 0.9375vw; max-width: 142px; max-height: 45px; min-width: 101px; }
.advertisement_layout .advertisement_img .smart_link { height: 2.3792vw; width: 7.4vw; bottom: 1.6vw; right: 0.9075vw; max-width: 142px; max-height: 45px; min-width: 101px; }
.advertisement_layout .advertisement_img .kakao_link { height: 1.9792vw; width: 15.4167vw; bottom: 1.9792vw; right: 0.8854vw; max-width: 296px; max-height: 38px; min-width: 206px; }
/* img[usemap]{ border: none; height: auto; max-width: 100%; width: auto; } */

.advertisement_layout.second{right:auto;left:30px;}
.advertisement_layout.second .advertisement_wrap{width: 100%; max-width: 750px;}

@media screen and (max-width:1494px) {
    /* .header padding 은 기본값(30px 5vw)을 그대로 쓴다 — 여기서 덮으면 5vw 안내선이 깨진다. */
    .header .g_nav .m_in_wrap{width: 80vw;}
    .header .g_nav .m_nav{margin-right: 0;}
    .header .g_nav .m_nav{gap: 0.3869vw;}
    #footer .f_w{width: 92vw;display: block;}
    #footer:not([data-brief-localized-footer]) .f_l{max-width: 100%;}
    /*
     * 중간 폭: 사업자정보가 위로 빠지고 아래에 **Contact us · Get the app · Follow us 3분할**.
     * 넓은 화면의 2열(Follow us 가 Get the app 아래)과 다른 배치라 areas 를 다시 쓴다.
     */
    #footer .f_r{
      margin-top: 44px;
      gap: 24px;
      word-break: keep-all;
      grid-template-columns: repeat(3, 1fr);
      grid-template-areas: "contact app follow";
    }
    /* 3분할에서는 2·3번째 칸을 오른쪽으로 붙인다. 1번째(Contact us)는 왼쪽 그대로다. */
    #footer .f_r .f_app,
    #footer .f_r .f_follow{text-align: right;}
    #footer .f_r .f_app .app-badges{justify-content: flex-end;}
    #footer .f_r article a,
    #footer .f_r p{font-size: 22px;}
}
@media screen and (max-width:1220px) {
	.header .g_nav .m_nav a{font-size: 3.8594vw;letter-spacing: -.03em; line-height: 1.8; }
    .header .g_nav .m_sns a{font-size: 1.9063vw;}
    .header .h_question{margin-right: 30px;}
    .header .g_nav .m_nav { display: block; }
    .header .h_question .language { justify-content: end; padding: 0; margin-top: 10px; }
    .header .h_question .language a:nth-child(2) { padding-left: 5px; }
    .header .h_question .lang-switcher{margin-left:0;margin-top:.75em;align-self:flex-end;}
    .header .h_question .lang-switcher__label{height:34px;min-width:112px;padding:0 10px;}
    .header .h_question.fade { opacity: 0; }
    
    .header .g_nav .m_in_wrap{display: block;}
    .header .g_nav .m_nav a span{font-size: .44em;margin-top:-.8em}
    #wrap.on .header .g_nav .m_nav li{text-align: center;}
    #wrap.on .header .g_nav .m_nav li a span{display: block;margin-left: 0;}
    .header .g_nav .m_nav a::after{display: none;}
    .header .g_nav .m_sns{display: flex;justify-content: space-around;margin-top: 3em;}
    
    .header .h_question{position:absolute;top:94px;right:30px;flex-direction:column;align-items:flex-end;margin-right:0;z-index: 0;}
    .header .h_question a{padding:0;text-align: right;}
    .header .h_question a:first-child~a{margin-left: 0;margin-top:.4em;}
    html[dir="rtl"] .header .h_question{right:auto;left:30px;margin-right:0;align-items:flex-start;}
    html[dir="rtl"] .header .h_question a{text-align:left;}
    html[dir="rtl"] .header .h_question .lang-switcher{margin-right:0;align-self:flex-start;}
    body.top .header .h_question{display:none !important;}
}

@media screen and (max-width:920px) {
    #footer .f_w{width: 92vw;display: block;}
    /*
     * ★모바일에서는 칸을 **한 줄씩** 쌓는다. 나란히 두면 390px 에서 각 180px 이 되어
     *   이메일이 'brief@briefcompany./net' 으로 갈리고 배지 두 장도 눌린다.
     */
    #footer .f_r{
      margin-top: 40px;
      gap: 40px;
      grid-template-columns: 1fr;
      grid-template-areas:
        "contact"
        "app"
        "follow";
    }
    /*
     * 세로로 쌓이면 오른쪽 정렬을 푼다 — Contact us 와 왼쪽 줄을 맞춘다(2026-09-03 사장님 지시).
     * 위 `max-width:1494px` 블록의 오른쪽 정렬은 3분할(contact | app | follow)일 때의 값이고,
     * 여기서는 한 열이라 그 값이 남아 있으면 제목만 오른쪽으로 떨어져 나간다.
     */
    #footer .f_r .f_app,
    #footer .f_r .f_follow{text-align: start;}
    #footer .f_r .f_app .app-badges{justify-content: flex-start;}
    #footer:not([data-brief-localized-footer]) .f_l{max-width: 100%;}
    #footer:not([data-brief-localized-footer]) .f_l address{max-width: 820px;}
}
@media screen and (max-width:600px) {
    .header .g_nav .m_in_wrap{display: block;}
    .header .g_nav .m_nav a span{font-size: .44em;margin-top:-.8em}
    #wrap.on .header .g_nav .m_nav li{text-align: center;}
    #wrap.on .header .g_nav .m_nav li a span{display: block;margin-left: 0;}
    .header .g_nav .m_nav a::after{display: none;}
    .header .g_nav .m_sns{display: flex;justify-content: space-around;margin-top: 3em;}
    
    .header .h_question{position:absolute;top:94px;right:30px;flex-direction:column;align-items:flex-end;margin-right:0;z-index: 0;}
    .header .h_question a{padding:0;text-align: right;}
    .header .h_question a:first-child~a{margin-left: 0;margin-top:.4em;}
    html[dir="rtl"] .header .h_question{right:auto;left:30px;margin-right:0;align-items:flex-start;}
    html[dir="rtl"] .header .h_question a{text-align:left;}
    html[dir="rtl"] .header .h_question .lang-switcher{margin-right:0;align-self:flex-start;}
}
@media screen and (max-width:461px) {
    /* .header padding 은 기본값(30px 5vw)을 그대로 쓴다 — 위 주석 참고. */
    .header .h_w a svg{width: 20.2778vw;}
    .header .n_btn button{width: 6.6667vw;height: 6.1111vw;}
    .header .n_btn span:nth-child(1),
    .header .n_btn span:nth-child(3){width: 3.3333vw;}
    .header .g_nav .m_nav a{font-size: 8vw;line-height: 1.8;}
    .header .g_nav .m_sns a{font-size: 4vw;}
    .header .h_question{right:4.4444vw}
    html[dir="rtl"] .header .h_question{right:auto;left:4.4444vw;}

    #footer{padding: 10vw 0 16.6667vw}
    /* 2026-09-03 사장님 지시: 모바일에서는 로고·Get the app·Follow us 전부 왼쪽(start — RTL 은 오른쪽). */
    #footer .f_w h2{text-align: start;}
    #footer .f_w h2 svg{width: 32.2222vw;height: 8.7778vw;}
    #footer .f_l address{ font-size: 3.0556vw;}
    #footer:not([data-brief-localized-footer]) .f_l address{font-size: clamp(13px, 3.6111vw, 15px);line-height:1.76;margin: 8vw 0 5vw;}
    #footer:not([data-brief-localized-footer]) .f_l ul{gap: 2.2222vw 3.8889vw;}
    #footer:not([data-brief-localized-footer]) .f_l small{font-size: clamp(11px, 3.0556vw, 13px);line-height:1.55;margin-top: 5vw;}
    #footer .f_r{display: block;}
    #footer .f_r h3{font-size: 3.3333vw;margin-bottom: 5.5556vw;}
    #footer .f_r article a,
    #footer .f_r p{font-size: 5.5556vw;}
    #footer .f_r article + article{margin-top: 8.3333vw;}
}




/**팝업창 css 모바일*/
@media screen and (min-width: 1920px) {
    .advertisement_layout .advertisement_img .app_link { bottom: 29px; left: 21px; }
    .advertisement_layout .advertisement_img .smart_link { bottom: 29px; right: 17.424px; }
    .advertisement_layout .advertisement_img .kakao_link { bottom: 38px; right: 17px; }
}
@media screen and (max-width: 1320px) {
    .advertisement_layout .advertisement_img .app_link { height: 30.125px; width: 101px; bottom: 21.4277px; left: 14.375px; }
    .advertisement_layout .advertisement_img .smart_link { height: 30.125px; width: 101px; bottom: 21.4277px; right: 11.979px; }
    .advertisement_layout .advertisement_img .kakao_link { height: 26.125px; width: 206px; bottom: 26.1254px; right: 11.6873px; }

}
@media screen and (max-width: 800px) {
    .advertisement_layout{top: 0; left: 0; background: rgba(0,0,0,.5); width: 100%; height: 100%;}
    .advertisement_layout.second{left: 0;background: none;}
    .advertisement_layout.second .advertisement_wrap{width: 90vw;}
}

/* Header polish: on mobile the cramped top-right links are hidden and the
   secondary links + language switcher move into the hamburger menu (.m_extra),
   set off as a muted secondary group. On desktop .m_extra is hidden. */
.header .g_nav .m_extra { display: none; }
@media screen and (max-width: 1220px) {
    .header .h_question { display: none !important; }
    .header .g_nav .m_in_wrap .m_extra {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        width: 100%;
        max-width: 320px;
        margin: 2.6em auto 0;
        padding-top: 2em;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }
    .header .g_nav .m_extra a {
        color: #dcdcd7;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.4px;
    }
    .header .g_nav .m_extra .lang-switcher { color: #fff; }
    .header .g_nav .m_extra .lang-switcher__face { padding: 0; font-size: 18px; }
}
@media screen and (max-width: 461px) {
    .header .g_nav .m_in_wrap .m_extra { gap: 16px; padding-top: 1.7em; }
}