@charset "UTF-8";

/* CSS reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 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, caption, tbody, tfoot, thead, tr, th, td 
{margin:0; padding:0; border:0;	font-size:14px;	vertical-align:baseline; background:transparent; -webkit-text-size-adjust:none;	font-family: 'Noto Sans KR', sans-serif; list-style:none; line-height:1;}
em,address{font-style:normal;}
hr{display:none}
body{line-height:1;word-break: break-all;}
ol, ul{list-style:none;}
blockquote, q{quotes: none;}
blockquote:before, blockquote:after,q:before, q:after{content:'';content:none;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;word-break:break-all;}
table th, table td{vertical-align:middle; background-clip: padding-box; }
html, body,input,button,textarea{font-size:14px; color:#333; font-family: 'Noto Sans KR', 'sans-serif'; letter-spacing: -1px;}
a {color:#333; text-decoration:none; cursor:pointer;}
button{cursor: pointer;}
h1,h2,h3,h4,h5,h6,th,strong {font-weight:600;}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption, canvas{display:block; margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}
html:not(.is-loading) body{transition:opacity .25s ease}
body { overflow-x: hidden;}
.allwrap {width:100%; margin:0 auto; height:100%; -webkit-overflow-scrolling: touch;}
.wrap {position:relative; width:100%;}
.innerbox {position:relative; max-width:1560px; height:100%; margin:0 auto; }
.innerbox:after {content:""; display:block; clear:both;}
[data-scroll-container] { overflow: hidden; }
[data-scroll-section] { will-change: transform; }
html.gaos-js [data-anim]{ opacity:0; } 
.gaos-lock [data-parallax] { visibility: hidden !important; }
[data-parallax], [data-anim] { transition: none !important; will-change: transform, opacity; }
.gs-char, .gs-word { display:inline-block; font: inherit; line-height: inherit; letter-spacing: inherit; }
.mobile_only {display: none;}
html, body {
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    touch-action: pan-y !important;
    touch-action: pan-y !important;
    -ms-touch-action: pan-y !important;
}
* {
    -webkit-tap-highlight-color: transparent;
}

/* -------- header -------- */
header {
    transition: transform 0.35s ease, opacity 0.35s ease;
}
header.hide { transform: translateY(-100%); opacity: 0;}
header.fixed { position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 9999; opacity: 1;}

header {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:90px;
    transform:translate3d(0,0,0);
    z-index:80;
    -webkit-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    overflow:hidden;
    padding: 0 30px 0 30px;
    isolation: isolate;
    z-index: 9999;
}
header:before {
    opacity:0;
    content:'';
    position:absolute;
    left:0;
    top:89px;
    width:100%;
    height:1px;
    /* background:url('../img/header_ho_line.png') left top repeat-x; */
    background-color: #222;
    -webkit-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
header:after {
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    z-index:1;
    background:url('../img/header_main_line.png') left bottom repeat-x;
}
header * {z-index:10;}
header h1 {
    position:absolute;
    left:0;
    top:14px;
    width:150px;
    height:60px;
    z-index:14;
}
header h1 a {display:block; width:100%; height:100%;}
header h1 a img {
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    position:absolute;
    left:0;
    top:0;
    transition: opacity .35s ease;
    pointer-events: none;
}

/* 기본 상태 = 흰배경 없음 → white logo visible */
header .logo-white { opacity:1; }
header .logo-black { opacity:0; }

/* fixed 상태 */
header.fixed .logo-white { opacity:1; }
header.fixed .logo-black { opacity:0; }

/* hover 상태 */
header.hover .logo-white { opacity:1; }
header.hover .logo-black { opacity:0; }

header #gnb {position:relative; width:100%; text-align:center;}
header #gnb > ul:after {content:""; display:block; clear:both;}
header #gnb > ul > li {display:inline-block;}
header #gnb > ul > li > a {display:inline-block; padding:0 34px;}
header #gnb > ul > li > a > span {
    font-family: 'Noto Sans KR', sans-serif;
    font-size:1.2rem;
    color:#fff;
    letter-spacing:0px;
    line-height:90px;
    transition: color 0.3s ease;
}
header #gnb div[id*="topSubm"] {
    display:none;
    position:absolute; left:0; top:89px;
    width:100%; height:200px;
    text-align:left;
}
header #gnb div[id*="topSubm"] .topTit {position:absolute; left:0; top:18px;}
header #gnb div[id*="topSubm"] .topTit strong {
    display:block;
    font-family: 'Noto Sans KR', sans-serif;
    font-size:2.66666rem;
    color:#999;
    font-weight:normal;
    line-height:1.2;
    letter-spacing:2.4px;
    padding:0 0 10px 0;
}
header #gnb div[id*="topSubm"] .topTit span {display:block; font-size:1.2rem; color:#999; line-height:1.2; letter-spacing:-0.5px;}
header #gnb div[id*="topSubm"] .menu {
    position:absolute; left:28%; top:42px;
    border-left: solid 1px #e5e5e5 ;
    padding-left: 30px;
}
header #gnb div[id*="topSubm"] .menu > ul:after {content:""; display:block; clear:both;}
header #gnb div[id*="topSubm"] .menu > ul > li {display:block; float: left;}
header #gnb div[id*="topSubm"] .menu > ul > li a {
    display:block;
    padding:0 50px 0 0;
    font-size:1.2rem;
    color:#f8f8f8;
    line-height:1.6;
    letter-spacing:-0.5px;
    transition:all 0.3s ease-in-out;
}
header #gnb div[id*="topSubm"] .menu > ul > li a:hover {color:#999;}
header #gnb div[id*="topSubm"] .menu > ul > li:last-child a {padding:0;}

header .util {
    position:absolute; right:0; top:36px;
}
header .util ul:after {content:""; display:block; clear:both;}
header .util ul li {float:left; margin:0 0 0 22px;}
header .util ul li a {
    font-family: 'Noto Sans KR', sans-serif;
    font-size:1rem;
    color:#fff;
    letter-spacing:0px;
}
header .util ul li a strong {font-family: 'Noto Sans KR', sans-serif; font-size:1rem; font-weight:normal;}

header.hover {height:200px; background:#000;}
header.hover:before {opacity:1;}
header.hover:after {display:none;}
header.hover #gnb > ul > li > a > span {color:#fff;}
header.hover .util ul li a {color:#fff;}

header.fixed {background:#000;}
header.fixed:before {opacity:1;}
header.fixed:after {
    top:auto; bottom:0;
    height:0px; background-color: #d9d9d9;
}
header.fixed #gnb > ul > li > a > span {color:#fff;}
header.fixed .util ul li a {color:#fff;}
header.fixed.hover:after {display:block;}
header.fixed #mNavi span {background:#fff;}

header #gnb > ul > li > a.hover > span {color:#999}
#mNavi {display:none;}
#mutil {display:none;}


/* ------------------------------------------------------------------
   🔥 수정 1) mNavi 전역 고정 위치 (PC + 모바일 공통)
   ------------------------------------------------------------------ */
#mNavi {
    position: fixed !important;
    top: 18px !important;
    right: calc(env(safe-area-inset-right) + 24px) !important;
    z-index: 999999 !important; 
    display: none;
}

/* header 내부의 기존 position 간섭 제거 */
header .innerbox #mNavi {
    position: fixed !important;
    right: calc(env(safe-area-inset-right) + 24px) !important;
    top: 18px !important;
}

/* ------------------------------------------------------------------
   반응형 - 모바일 열릴 때
   ------------------------------------------------------------------ */
@media all and (max-width: 1200px) {
header {overflow:visible; height:60px;}
header:before {top:59px;}
header .innerbox {position:static;}
header h1 {top:0px; margin: 0 0 0 30px;}
header #gnb {
    position:absolute;
    right:-100%;
    top:0;
    width:100%;
    background:#000;
    z-index:60;
}
header #gnb > ul {
    overflow-y:auto;
    margin: 0; padding: 0;
    list-style: none;
}
header #gnb > ul > li {display:block; text-align:left; border-bottom: 1px solid #555;}
header #gnb > ul > li > a {display:inline-block; padding:0 60px;}
header #gnb > ul > li > a > span {font-size:2rem; color:#fff; line-height:60px;}
header #gnb div[id*="topSubm"] {display:block; position:relative; left:0; top:0; width:100%; height:auto;}
header #gnb div[id*="topSubm"] .menu {display:none; position:relative; left:0; top:0; width:100%; padding:0 0 0 60px; box-sizing:border-box; overflow:hidden;}
header #gnb div[id*="topSubm"] .menu > ul {margin:0 0 30px 0;}
header #gnb div[id*="topSubm"] .menu > ul > li a {display:block; padding:0 80px 30px 0; font-size:1.2rem; line-height:1.1; }
header #gnb div[id*="topSubm"] .topTit {display:none;}
header .util {display:none;}
header.fixed:after {display:none;}

header #gnb div[id*="topSubm"] .menu {    
    border-left: solid 0px #e5e5e5 ;
}


/* ------------------------------------------------------------------
   🔥 수정 2) 모바일에서 mNavi 활성화 + 정확한 위치
   ------------------------------------------------------------------ */
#mNavi {
    display:block !important;
    right: calc(env(safe-area-inset-right) + 24px) !important;
    top: 14px !important;
}

#mNavi:hover {cursor: pointer;}
#mNavi > a{ position: relative; display:block; width:30px; height:30px; }
#mNavi span{
    position:absolute;
    left:50%; top:40%;
    width:30px; height:2px;
    background:#fff;
    border-radius:2px;
    transform-origin:center;
    transition: transform .25s ease, opacity .2s ease, background-color .2s ease;
}
#mNavi .line:nth-child(1){ transform: translate(-50%, -10px); }
#mNavi .line:nth-child(2){ transform: translate(-50%,   0px); }
#mNavi .line:nth-child(3){ transform: translate(-50%,  10px); }
#mNavi.active{ transform:none; }
#mNavi.active span{ background:#fff !important; height:2px; }
#mNavi.active .line:nth-child(2){ opacity:0; transform: translate(-50%, 0) scaleX(0.5);}
#mNavi.active .line:nth-child(1){ transform: translate(-50%, 0) rotate(45deg);}
#mNavi.active .line:nth-child(3){ transform: translate(-50%, 0) rotate(-45deg);}

#mutil {display:block; position:relative; width:100%; height:60px;  border-bottom:1px #555 solid; box-sizing:border-box; text-align:left;}
#mutil .lang {position:absolute; right:100px; top:4px;}
#mutil .lang ul:after {content:""; display:block; clear:both;}
#mutil .lang ul li {float:left; margin:0 0 0 30px;}
#mutil .lang ul li a {
    font-family: 'Noto Sans KR', sans-serif;
    font-size:1.2rem;
    color:#f2f2f2;
    line-height:50px;
    letter-spacing:0px;
    padding:0 10px;
}

}

@media (max-width: 768px){
header h1 { width:100px; height:40px; top:10px; }

header #gnb > ul > li > a {
    display:inline-block;
    padding:0 0 0 40px;
}
header #gnb > ul > li > a > span {font-size:1.4rem; }
header #gnb div[id*="topSubm"] .menu > ul > li a {font-size:1.2rem;}
header #gnb div[id*="topSubm"] .menu > ul {display: block; }
header #gnb div[id*="topSubm"] .menu > ul > li {
    display: block;
    float: none;
    margin-bottom: 16px;
}
header #gnb div[id*="topSubm"] .menu > ul > li:last-child { margin-bottom: 0;}
header #gnb div[id*="topSubm"] .menu > ul > li a {padding:0 0 0 0; }
#mutil .lang ul li a {padding:0;}
}


/* -------- footer -------- */

footer {width:100%; padding:70px 30px 100px; background:#000; clear: both; z-index: 20;}
footer .f_sel {position:absolute; right:0; top:0;}
footer .f_sel .f_selbox:after {content:""; display:block; clear:both;}
footer .f_sel .f_selbox ul:after {content:""; display:block; clear:both;}
footer .f_sel .f_selbox ul li {float:left; width:80px; text-align:center;}
footer .f_sel .f_selbox ul li span {display:block; font-size:1.083333rem; color:#fff; line-height:1.2; letter-spacing:-0.5px; padding:10px 0 0 0;}
footer .f_sel .f_selbox ul li.familygroup {position:relative; width:auto; margin:0 0 0 80px; padding:0 54px 0 0;}
footer .f_sel .f_selbox ul li.familygroup button {cursor:pointer; display:inline-block; position:absolute; right:0; top:0; width:48px; height:47px; font-size:1.083333rem; color:#fff; line-height:48px; text-align:center; background:#333; border:0; padding:0px; border-radius: 10px; }
footer .selectbox {min-width:150px; padding:17px 46px 16px 24px; font-family:'Noto Sans KR'; font-size:1rem; color:#fff; line-height:1; letter-spacing:-0.5px; font-weight:300; background:#333; border:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius: 10px;  }
footer .f_info:after {content:""; display:block; clear:both;}
footer .f_info address {font-size:1.2rem; color:#999; line-height:1.2; letter-spacing:-0.5px; padding:0 0 10px 0;}
footer .f_info address strong {font-size:1.2rem; font-weight:500; padding:0 14px 0 0; color:#fff;}
footer .f_info ul:after {content:""; display:block; clear:both;}
footer .f_info ul li {display:block; font-size:1.2rem; color:#999; line-height:1.2; letter-spacing:-0.5px; font-weight:300; padding:0 0 8px 0;}
footer .f_info ul li:last-child {padding:0;}
footer .f_info ul li span {font-family: 'Noto Sans KR', sans-serif; font-size:1.2rem; color:#999; line-height:1.2; letter-spacing:1px;}
footer .copyright {font-family: 'Noto Sans KR', sans-serif; font-size:1rem; color:#999; line-height:1.2; padding:35px 0 0 0;}
footer .selectbox,
footer .f_sel .f_selbox ul li.familygroup button { outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent;}
footer .selectbox:focus,
footer .selectbox:focus-visible,
footer .f_sel .f_selbox ul li.familygroup button:focus,
footer .f_sel .f_selbox ul li.familygroup button:focus-visible { outline: none !important; box-shadow: none !important; border-color: transparent !important;}
footer .f_sel .f_selbox ul li.familygroup button::-moz-focus-inner {  border: 0;}
/* 커스텀 아래화살표: 완전 URL-인코딩 + 한 줄 */
footer .selectbox{
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath d='M5.8 7.5a1 1 0 0 1 1.4 0L10 10.3l2.8-2.8a1 1 0 1 1 1.4 1.4l-3.5 3.5a1 1 0 0 1-1.4 0L5.8 8.9a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: right 14px center;
}
footer .selectbox:hover{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23f5f5f5'%3E%3Cpath d='M5.8 7.5a1 1 0 0 1 1.4 0L10 10.3l2.8-2.8a1 1 0 1 1 1.4 1.4l-3.5 3.5a1 1 0 0 1-1.4 0L5.8 8.9a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
}


@media (max-width: 1024px){
  footer { padding: 56px 20px 56px; }
  footer .f_sel { position: static; text-align: right; margin-bottom: 12px; }
  footer .f_sel .f_selbox ul li.familygroup { margin: 0; }
  footer .selectbox { min-width: 150px; padding: 14px 42px 14px 18px; font-size: .95rem; }
  footer .f_sel .f_selbox ul li.familygroup button { height: 42px; line-height: 42px; }
  footer .f_info address,
  footer .f_info ul li,
  footer .f_info ul li span { font-size: 1.05rem; }
  footer .copyright { font-size: .95rem; padding-top: 28px; }
  footer .f_info address {padding-top: 30px;}
}

@media (max-width: 768px){
  footer .f_sel { text-align: left; margin-bottom: 16px; }
  footer .selectbox { min-width: 100%; padding: 12px 40px 12px 14px; font-size: .95rem; }
  footer .f_sel .f_selbox ul li.familygroup { width: 100%; padding-right: 54px; } /* 버튼 자리 */
  footer .f_sel .f_selbox ul li.familygroup button { right: 0; top: 0; height: 40px; line-height: 40px; }
  footer .f_info address { font-size: 1rem; line-height: 1.8; }
  footer .f_info ul li, footer .f_info ul li span { font-size: 1rem; }
  footer .copyright { font-size: .9rem; padding-top: 22px; }
  .mobile_only {display: block; }
}


/* scroll-indicator */
.scroll-indicator { 
    position: absolute;
    left: 40px;
    bottom: 40px;
    /* transform: translateX(-50%); */
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    color: #fff;
    opacity: 1;
    z-index: 5;
}

.scroll-indicator::before {
    content: '';
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 16px;
    position: relative;
    display: block;
}

.scroll-indicator .wheel {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 8px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    transform: translateX(-50%);
    animation: wheelMove 1.6s ease-in-out infinite;
}

.scroll-indicator p {
    font-size: 13px;
    margin-top: 10px;
    letter-spacing: 0.1em;
    opacity: 1;
    animation: fadeText 2.4s ease-in-out infinite;
}

@keyframes wheelMove {
    0% {
        opacity: 0.8;
        transform: translate(-50%, 0);
    }

    40% {
        opacity: 1;
        transform: translate(-50%, 8px);
    }

    80% {
        opacity: 0.5;
        transform: translate(-50%, 16px);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
@media (max-width: 768px){
    .scroll-indicator { left: 20px; bottom: 20px;}
}
.btn-more {
    --dur: .75s;          /* 1글자 애니메이션 길이 */
    --stagger: .045s;     /* 글자 간 지연 */
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.15em;
    padding:1.2em 1.8em;
    border:1px solid #c7c7c7;
    border-radius:9999px;
    background:transparent;
    color:#fff;
    font: 600 14px/1 "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, Arial;
    letter-spacing:-2px;
    text-decoration:none;
    user-select:none;
    will-change:transform;
    transition:border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.btn-more:hover {border-color:#c7c7c7; box-shadow:0 6px 18px rgba(0,0,0,.04);}
.btn-more .char {display:inline-block; transform:translateX(0); opacity:1; will-change:transform,opacity;}
.btn-more.w { color:#333 !important;}
/* hover 때만 글자 시퀀스 재생 */
.btn-more.is-anim .char{animation: outIn var(--dur) cubic-bezier(.2,.6,.2,1) both; animation-delay: calc(var(--i) * var(--stagger));}
/* 0~40%: 살짝 오른쪽으로 밀리며 사라짐
   41% 프레임에서 왼쪽 밖으로 순간 이동
   100%: 살짝 오른쪽에서 제자리로 오며 나타남 */
@keyframes outIn{
  0%   { opacity:1; transform:translateX(0) }
  36%  { opacity:0; transform:translateX(6px) }
  37%  { opacity:0; transform:translateX(-10px) }
  100% { opacity:1; transform:translateX(0) }
}
img {
  user-drag: none;         /* Safari */
  -webkit-user-drag: none; /* Chrome, Edge */
  -moz-user-drag: none;    /* Firefox */
  -o-user-drag: none;      /* 구형 Opera */
  pointer-events: none;    /* (선택) 클릭도 막고 싶을 때 */
}
#scrollTopBtn {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 52px;
  height: 52px;
  background: #333;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, transform 0.3s ease;
  z-index: 9999;
}
#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#scrollTopBtn:hover {
  background: #222;
  transform: translateY(-3px);
}

@media (max-width: 768px){
    #scrollTopBtn {
        right: 20px;
        bottom: 20px;
        width: 40px;
        height: 40px;
        font-size: 12px;
    }
}