@charset "utf-8";
/* CSS Document */
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, 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, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: top;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary, form,fieldset { display: block;}
fieldset { min-width: 100%; }
audio,canvas,progress,video {display: inline-block;vertical-align: top;}
audio:not([controls]) {display: none;height: 0}
[hidden],template {display: none}
body {}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-spacing: 0; }
a {color:inherit;}
a, a:hover, a:active, a:focus {text-decoration: none;}
abbr[title] {border-bottom: 1px dotted}
em, address { font-style: normal;}
b,strong {font-weight: 500}
small {font-size: 80%}
img {vertical-align: top; max-width:100%;}
hr {box-sizing: content-box;height: 0}
pre {overflow: auto}
button {padding:0; border:0; cursor: pointer;overflow: visible; background:transparent;}
button,input,optgroup,select,textarea {color: inherit; font: inherit;margin: 0;}
button,select {text-transform: none}
button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button;cursor: pointer;border:0;}
button[disabled],html input[disabled] {cursor: default}
input {line-height: normal}
input[type="checkbox"],input[type="radio"] {box-sizing: border-box; padding: 0;}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto}
input[type="search"] {-webkit-appearance: textfield;box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0}

table {border-collapse: collapse;border-spacing: 0}
td,th {padding: 0}
html {-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; height:100%;} /* -webkit-tap-highlight-color:transparent; */
*{-webkit-tap-highlight-color:transparent;}
html, body {font-family: 'Noto Sans KR', sans-serif; font-size:18px; color:#666666; line-height:1.4; font-weight:400; word-break:keep-all;}
* {-webkit-box-sizing: border-box !important;-moz-box-sizing: border-box !important;box-sizing: border-box !important;}
*:before,*:after {-webkit-box-sizing: border-box !important;-moz-box-sizing: border-box !important;box-sizing: border-box !important;}
a:tel {text-decoration:none;}
* {outline:none;}

img {max-width:100%;}

.blind, caption, legend{padding: 0; margin: 0; font-size: 0; width: 0; height: 0; line-height: 0; text-indent: -9999px;}
.d_none {display:none;}

.t_center { text-align: center !important; }
.t_left { text-align: left !important; }
.t_right { text-align: right !important; }
.v_top { vertical-align: top !important }
.v_middle { vertical-align: middle !important; }
.f_left { float: left !important }
.f_right { float: right !important }
.clear_b { clear: both; }
.clearfix{*zoom:1}.clearfix:after{content:""; display:block; clear:both}
.relative {position:relative;}



#skip_nav {position: fixed; left: 0; top: -50px; width: 100%; text-align: center; line-height: 40px; background: rgba(0, 0, 0, 0.5); color: #ffffff; font-size: 17px; z-index: 10000; transition: top 0.3s;}
#skip_nav:focus {top: 0;}




/* common */
.block {display:block;}
.underline {text-decoration:underline;}
.sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon {display:inline-block; overflow:hidden; text-indent:-999px; vertical-align:middle; background:no-repeat center;}

/* button */


#header {position:absolute; top:0; left:0; z-index:1000; width:100%; letter-spacing:0.1em;}
#header .inwrap {position:relative; max-width:1280px; margin:auto;}
#header h1 {display:none;}
#header h1 a {display:block; width:179px; height:51px; background:url('../images/logo.png') no-repeat center;}
#header .gnb_list {position:absolute; top:41px; right:0; overflow:hidden; white-space: nowrap;}
#header .gnb_list li {float:left; margin-left:48px;}
#header .gnb_list a {display:block; font-size:16px; color:#232020; letter-spacing:0;}
#header .gnb_list a span {display:block; position:relative; line-height:34px;}
#header .gnb_list a span::after {position:absolute; left:50%; right:50%; opacity:0; bottom:0; height:2px; background:#232020; content:''; transition:all 0.3s;}
#header .gnb_list li.active a {font-weight:900;}
#header .gnb_list li.active a span::after,
#header .gnb_list a:hover span::after {left:0; right:0; opacity:1;}

.sub #header {height:110px;}
.sub #header h1 a {background-image:url('../images/logo_sub.png')}
.sub #header .gnb_list a {color:#000;}
.sub #header .gnb_list a span::after {background:#000;}
.sub #main {margin-top:110px;}

#footer {padding:35px 0;  background:#232020;}
#footer .inwrap {position:relative; width:1280px; margin:auto; padding-left:0px; color:#fff;}
#footer h2 {position:absolute; top:30px; left:25px; width:124px; height:87px; background:url('../images/b_logo.png') no-repeat center;}
#footer strong {font-size:18px; font-weight:700;}
#footer .adress {margin-top:12px; font-size:14px; line-height:24px; letter-spacing:-0.025em}
#footer .sns_link {position:absolute; top:6px; right:0; display:flex; align-items:center; gap:14px;}
#footer .sns_link a {position:relative; display:block; width:42px; height:42px; border:1px solid rgba(255,255,255,0.35); border-radius:50%; transition:background-color 0.25s ease, border-color 0.25s ease;}
#footer .sns_link a::before {content:''; position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; transition:background-color 0.25s ease;}
#footer .sns_link a.instagram::before {--icon:url('../images/icon_instagram.svg');}
#footer .sns_link a.pinterest::before {--icon:url('../images/icon_pinterest.svg'); width:19px; height:19px; margin:-9.5px 0 0 -9.5px;}
#footer .sns_link a.youtube::before   {--icon:url('../images/icon_youtube.svg'); width:22px; height:22px; margin:-11px 0 0 -11px;}
#footer .sns_link a.blog::before      {--icon:url('../images/icon_blog_mask.png'); width:21px; height:21px; margin:-10.5px 0 0 -10.5px;}
@supports ((-webkit-mask-image:url('')) or (mask-image:url(''))) {
	#footer .sns_link a::before {background-color:#fff; -webkit-mask:var(--icon) no-repeat center / contain; mask:var(--icon) no-repeat center / contain;}
	#footer .sns_link a:hover::before {background-color:#232020;}
}
#footer .sns_link a:hover {background-color:#fff; border-color:#fff;}

#main_visual {overflow:hidden; position:relative; height:742px; padding-top:268px; font-size:17px; line-height:26px; color:#fff; text-align:center; letter-spacing:0.1em;}
#main_visual p,
#main_visual img {position:relative; z-index:5;}
#main_visual .bg {position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; transform:scale(1.2); background:url('../images/main_visual.jpg') no-repeat center; background-size:cover; transition:all 6s;}
#main_visual.play .bg {transform:scale(1);}
#main_visual .t01 {margin-top:22px; font-weight:700;}
#main_visual .t02 {display:inline-block; margin-top:90px; text-align:right;}
#main_visual .t02+.t02 {margin-left:60px;}

#brand {width:1280px; margin:50px auto 150px; letter-spacing:0.1em;}
#brand h2 {border-bottom:2px solid #fff; font-size:28px; color:#fff; font-weight:900; line-height:80px; text-align:center;}
#brand ul {overflow:hidden; margin:60px -20px 0;}
#brand li {float:left; width:33.333%; padding:0 20px; text-align:center;}
#brand .img {overflow:hidden; position:relative; height:722px;}
#brand .img::after {position:absolute; top:0; left:0; right:0; bottom:0; background:no-repeat center; background-size:cover; content:''; transition:all 0.4s;}
#brand .s01 .img::after {background-image:url('../images/brand01_bg.jpg');}
#brand .s02 .img::after {background-image:url('../images/brand02_bg.jpg');}
#brand .s03 .img::after {background-image:url('../images/brand03_bg.jpg');}
#brand .img img {position:absolute; top:50%; left:50%; z-index:4;}
#brand .s01 .img img {margin:-76px;}
#brand .s02 .img img {margin:-42px -99px;}
#brand .s03 .img img {margin:-43px -77px;}
#brand .tit {margin-top:25px; font-size:20px; color:#000000; font-weight:900;}
#brand .txt {margin-top:5px; font-size:15px; color:#000000;}
#brand a:hover .img::after {transform:scale(1.1);}

#wrap {overflow:hidden; min-width:1300px;}

#sub_visual {overflow:hidden; position:relative; height:633px; color:#fff; letter-spacing:0.1em; line-height:1; text-align:center;}
#sub_visual .bg {position:absolute; top:0; left:0; right:0; bottom:0; transform:scale(1.2); background:no-repeat center; background-size:cover; transition:all 6s;}
#sub_visual.play .bg {transform:scale(1);}
#sub_visual.krone .bg {background-image:url('../images/krone_visual.jpg');}
#sub_visual.glory_door .bg {background-image:url('../images/glory_door_visual.jpg');}
#sub_visual.lusso .bg {background-image:url('../images/lusso_visual.jpg');}
#sub_visual.krone {padding-top:204px}
#sub_visual.glory_door {padding-top:275px;}
#sub_visual.glory_door .t01 {margin-top:30px;}
#sub_visual.lusso {padding-top:275px;}
#sub_visual.lusso .t01 {margin-top:30px;}
#sub_visual img {position:relative; z-index:5;}
#sub_visual .t01 {position:relative; z-index:4; margin-top:22px; font-size:20px; font-weight:900}
#sub_visual .t02 {line-height: 25px; position:relative; z-index:4; margin-top:13px; font-size:17px;}
#sub_visual .t03 {position:relative; z-index:4; margin-top:45px; font-size:28px; font-weight:700}

.ctit {font-size:28px; color:#000000; font-weight:700; line-height:155px; text-align:center;}

.ctxt .tit {margin-bottom:25px; font-size:28px; font-weight:700; letter-spacing:0.1em;}
.ctxt .cont {font-size:14px; line-height:22px;}


.krone_c01 {display: -ms-flexbox!important;  display: flex!important; -ms-flex-align: center!important; align-items: center!important; height:584px; background:no-repeat center; background-size:cover;}
.krone_c01.s01 {background-image:url('../images/krone_c01_bg01.jpg');}
.krone_c01.s02 {background-image:url('../images/krone_c01_bg02.jpg');}
.krone_c01.s03 {background-image:url('../images/krone_c01_bg03.jpg');}
.krone_c01.s04 {background-image:url('../images/krone_c01_bg04.jpg');}
.krone_c01.s05 {background-image:url('../images/krone_c01_bg05.jpg');}
.krone_c01.s06 {background-image:url('../images/krone_c01_bg06.jpg');}
.krone_c01.s08 {background-image:url('../images/krone_c01_bg08.jpg');}
.krone_c01.s09 {background-image:url('../images/krone_c01_bg09.jpg');}
.krone_c01.s10 {background-image:url('../images/krone_c01_bg10.jpg');}
.krone_c01.s07 {background-image:url('../images/krone_c01_bg07.jpg');
                height: 600px;}
.krone_c01 > div {position:relative; padding-left:50%; left:150px; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width:100%; color:#fff;}
.krone_c01 .cont strong {display:inline-block; width:125px; font-size:20px; font-weight:700; vertical-align:top;}
.krone_c01 .cont span {display:inline-block; vertical-align:top;}
.krone_c01 .cont+.cont {margin-top:35px;}
.krone_c01.img_right > div {padding:0; padding-right:50%; left:auto; right:150px; text-align:right; color:#000; font-weight:400;}
.krone_c02 img {display:block; margin:auto;}

.glory_door_c01 {display: -ms-flexbox!important;  display: flex!important; -ms-flex-align: center!important; align-items: center!important; height:1112px; background:url('../images/glory_door_c01.jpg') no-repeat center #625246;}
.glory_door_c01 > div {position:relative; padding-left:50%; left:130px; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width:100%; color:#fff;}

.glory_door_c02 img {display:block; margin:auto;}

.glory_door_c03 {display: -ms-flexbox!important;  display: flex!important; -ms-flex-align: center!important; align-items: center!important; height:664px; background:url('../images/glory_door_c03.jpg') no-repeat center; background-size:cover;}
.glory_door_c03 > div {position:relative; padding-left:50%; left:90px; top:50px; color:#000;}

.glory_door_c04 img {display:block; margin:auto;}
.glory_door_c06 img {display:block; margin:auto;}
.glory_door_c07 img {display:block; margin:auto;}
.glory_door_c05 {display: -ms-flexbox!important;  display: flex!important; -ms-flex-align: center!important; align-items: center!important; height:1112px; background:url('../images/glory_door_c05.jpg') no-repeat center #7b6f66;}
.glory_door_c05 > div {position:relative; padding-left:50%; left:130px; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width:100%; color:#fff;}

.lusso_c01 {display: -ms-flexbox!important;  display: flex!important; -ms-flex-align: center!important; align-items: center!important; height:625px; background:url('../images/lusso_c01.jpg') no-repeat center #625246;}
.lusso_c01 > div {position:relative; padding-left:50%; left:130px; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width:100%; color:#000000;}

.lusso_c02 {background-color: #f7f4ee;}
.lusso_c02 img {display:block; margin:auto; text-align-last: center; background-color: #f7f4ee; max-height: 700px;}
.lusso_c03 img {display:block; margin:auto; text-align-last: center;}
.lusso_c04 {background-color: #f7f4ee;}
.lusso_c04 img {display:block; margin:auto; text-align-last: center; background-color: #f7f4ee;}
.lusso_c05 {display: -ms-flexbox!important;  display: flex!important; -ms-flex-align: center!important; align-items: center!important; height:500px; background:url('../images/lusso_c05.jpg') no-repeat center #625246;}
.lusso_c05 > div {position:relative; padding-left:50%; left:130px; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width:100%; color:#000000;}
.lusso_c06 img {display:block; margin:auto; text-align-last: center;}
.lusso_c07 img {display:block; margin:auto; text-align-last: center;}
#topBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  font-size: 14px;
  padding: 10px 15px;
  background-color: #555;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

#topBtn:hover {
  opacity: 1;
}

.more-link{
  text-align: center;
  margin: 60px 0;
}

.btn-more{
  display: inline-block;
  padding: 14px 36px;
  border: 1px solid #111;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #111;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-more:hover{
  background: #111;
  color: #fff;
}


/* =========================================================
   Mobile: force-fit (scale desktop layout) + crisp FAB stack
   핵심:
   - 모바일에서는 #wrap을 '강제 축소'해서 보여준다.
   - transform 경로(iOS 등)에서는 #wrap을 absolute로 빼고 #wrapSpacer로 높이만 확보한다. (무한스크롤 방지)
   - topBtn은 텍스트 숨기고 ::before로 아이콘을 넣는다.
========================================================= */
:root{
  --m-scale: 1;
  --wrap-h: 0px;
}

/* PC 기본: 숨김 */
.fab-stack{ display:none; }
#wrapSpacer{ display:none; width:1px; height:0; }

/* 모바일 공통 */
body.is-mobile{ overflow-x:hidden; }

/* 모바일에서는 #wrap 폭을 1300px 기준으로 고정 */
body.is-mobile #wrap{
  width:1300px;
  transform-origin: 0 0;
}

/* ===== 1) zoom 경로(Android/Chrome 등) ===== */
body.is-mobile.is-zoom #wrap{
  zoom: var(--m-scale);
  transform:none !important;
  position:static;
}
body.is-mobile.is-zoom #wrapSpacer{
  display:none !important;
}

/* ===== 2) transform 경로(iOS/Safari 등) ===== */
body.is-mobile.is-transform #wrap{
  transform: scale(var(--m-scale));
  position:absolute;      /* ✅ 무한스크롤 방지 핵심: 문서 흐름에서 #wrap 제거 */
  top:0; left:0;
}
body.is-mobile.is-transform #wrapSpacer{
  display:block;          /* ✅ 문서 높이는 스페이서가 담당 */
  height: var(--wrap-h);
}

/* ===== FAB Stack (Top + Call) ===== */
body.is-mobile .fab-stack{
  display:flex;
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:99999;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
}

/* 공통 버튼 스타일 */
body.is-mobile .fab-stack .call-fab,
body.is-mobile .fab-stack #topBtn{
  position:static !important;
  width:56px !important;
  height:56px !important;
  border-radius:50% !important;

  background:#232020 !important;
  box-shadow:0 10px 28px rgba(0,0,0,.28) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  color:#fff !important;
}

/* topBtn: 텍스트 숨기고 아이콘 표시 */
body.is-mobile .fab-stack #topBtn{
  font-size:0 !important;
  line-height:0 !important;
  opacity:1 !important;
}

/* Top 아이콘(chevron-up) */
body.is-mobile .fab-stack #topBtn::before{
  content:"";
  width:26px;
  height:26px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 14l6-6 6 6' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.is-mobile.is-transform #wrap{
  position:absolute;      /* 문서 흐름에서 제거 */
  top:0; left:0;
}
body.is-mobile.is-transform #wrapSpacer{
  display:block;
  height: var(--wrap-h);
}