@charset "utf-8";
html, body {}
html.show-modal { overflow: hidden; }

#wrap { position: relative; width: 100%; min-width: var(--inner-wrap); background: var(--bg-color); }
#wrap.white { background: #fff; }
.inner-wrap{ width: var(--inner-wrap); margin-left: auto !important; margin-right: auto !important; clear: both; }

#header { width: 100%; min-width: var(--inner-wrap); position: fixed; top: 0; z-index: 10; background: rgba(0,0,0,0.01); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.12); }
#header::after { content: ''; position: absolute; width: 100%; height: 0; background: #fff; left: 0; top: 0; z-index: -1; transition: all .2s ease-in-out; border-bottom: 1px solid transparent; }
#header > div { width: min(100%, 1920px); height: 91px; margin: 0 auto; padding: 0 70px; display: flex; justify-content: space-between; align-items: center; }
#header .logo { width: 160px; height: 28px; background: url('../img/common/logo.svg'); }
#header .logo > a { display: block; width: 100%; height: 100%; }
#header .gnb { font-family: 'Outfit'; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; height: 100%; display: flex; align-items: center; }
#header .gnb > ul { display: flex; gap: 0 36px; }
#header .gnb > ul > li { width: 120px; position: relative; }
#header .gnb > ul > li > a { color: var(--gold); display: block; text-align: center; letter-spacing: 1.4px; }
#header .gnb > ul > li.on > a { color: #fff; text-decoration: underline !important; text-underline-offset: 3px; }
#header .gnb > ul > li > dl { position: absolute; left: 0; top: 45px; text-align: center; width: 100%; height: 0; overflow: hidden; }
#header .gnb > ul > li > dl > dd {}
#header .gnb > ul > li > dl > dd~dd { margin-top: 15px; }
#header .gnb > ul > li > dl > dd > a { font-size: 13px; font-weight: 400; color: #494949; position: relative; }
#header .gnb > ul > li > dl > dd > a::after { content: ''; transition: all .2s ease-in-out; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: #000; }
#header .gnb > ul > li > dl > dd > a:hover::after { width: 100%; }

#header .tnb { display: flex; align-items: center; height: 91px; gap: 0 12px; }
#header .tnb > p { font-size: 14px; font-weight: 600; font-family: 'Outfit'; }
#header .tnb > p > a { color: var(--gold); }
#header .tnb > p.on > a { color: #fff; text-decoration: underline !important; text-underline-offset: 3px; }

#header.active {}
#header.active::after { height: 200px; }
#header.active .logo { background: url('../img/common/logo2.svg'); }
#header.active .gnb > ul > li > a { color: #000; }
#header.active .gnb > ul > li.on > a { color: var(--gold2); }
#header.active .gnb > ul > li > dl { height: 100px; transition: all .2s ease-in-out; }
#header.active .tnb {}
#header.active .tnb svg path { stroke: #000; }
#header.active .tnb > p > a { color: #000; }
#header.active .tnb > p.on > a { color: var(--gold2); text-decoration: underline !important; text-underline-offset: 3px; }

#wrap.white #header { background: #fff; border-bottom: 1px solid rgba(0,0,0,0.12); }
#wrap.white #header.active::after { border-bottom: 1px solid rgba(0,0,0,0.12); }
#wrap.white #header.active { border-bottom: 1px solid transparent; }
#wrap.white #header .logo { background: url('../img/common/logo2.svg'); }
#wrap.white #header .gnb > ul > li > a { color: #000; }
#wrap.white #header .gnb > ul > li.on > a { color: var(--gold2); }
#wrap.white #header .tnb svg path { stroke: #000; }
#wrap.white #header .tnb > p > a { color: #000; }
#wrap.white #header .tnb > p.on > a { color: var(--gold2); text-decoration: underline !important; text-underline-offset: 3px; }


#container { width: 100%; position: relative; min-height: 800px; }


#footer { background: var(--gold2); position: relative; }
#footer > div { width: min(100%, 1920px); padding: 70px; margin: 0 auto; }
#footer > div > div { display: flex; justify-content: space-between; align-items: center; color: #fff; }
#footer > div > div~div { margin-top: 60px; }
#footer > div > div:nth-of-type(1) { align-items: flex-start; }
#footer > div > div:nth-of-type(1) > div:nth-of-type(1) { display: flex; gap: min(9.3750vw, 180px); }
#footer > div > div:nth-of-type(1) > div:nth-of-type(1) > p { width: 168px; }
#footer > div > div:nth-of-type(1) > div:nth-of-type(1) > ul { display: flex; gap: 90px; font-family: 'Outfit'; }
#footer > div > div:nth-of-type(1) > div:nth-of-type(1) > ul > li { text-transform: uppercase; flex: 0 0 auto; }
#footer > div > div:nth-of-type(1) > div:nth-of-type(1) > ul > li > p,
#footer > div > div:nth-of-type(1) > div:nth-of-type(1) > ul > li > a { font-size: 20px; font-weight: 700; color: #fff; line-height: 1; }
#footer > div > div:nth-of-type(1) > div:nth-of-type(1) > ul > li > dl { margin-top: 40px; }
#footer > div > div:nth-of-type(1) > div:nth-of-type(1) > ul > li > dl > dd {}
#footer > div > div:nth-of-type(1) > div:nth-of-type(1) > ul > li > dl > dd~dd { margin-top: 15px; }
#footer > div > div:nth-of-type(1) > div:nth-of-type(1) > ul > li > dl > dd > a { color: #fff; font-size: 16px; font-weight: 600; opacity: 0.6; line-height: 1; transition: all .2s ease-in-out; position: relative; }
#footer > div > div:nth-of-type(1) > div:nth-of-type(1) > ul > li > dl > dd > a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; transition: all .2s ease-in-out; background: #fff; }
#footer > div > div:nth-of-type(1) > div:nth-of-type(1) > ul > li > dl > dd > a:hover { opacity: 1; }
#footer > div > div:nth-of-type(1) > div:nth-of-type(1) > ul > li > dl > dd > a:hover::after { width: 100%; }
#footer > div > div:nth-of-type(1) > div:nth-of-type(2) {}
#footer > div > div:nth-of-type(1) > div:nth-of-type(2) > p { font-size: 18px; font-weight: 400; line-height: 1.2; word-break: keep-all; text-align: right; }
#footer > div > div:nth-of-type(1) > div:nth-of-type(2) > a { margin-top: 40px; display: flex; align-items: center; gap: 7px; justify-content: flex-end; font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.6); text-transform: uppercase; }
#footer > div > div:nth-of-type(2) {}
#footer > div > div:nth-of-type(2) > p { font-size: 14px; font-weight: 600; text-transform: uppercase;  }
#footer > div > div:nth-of-type(2) > div { display: flex; gap: 12px; align-items: center; }
#footer > div > div:nth-of-type(2) > div > a { font-size: 14px; font-weight: 600; text-transform: uppercase; color: rgba(255,255,255,0.6); }
#footer > div > div:nth-of-type(2) > div > a.on { color: #fff; text-decoration: underline !important; text-underline-offset: 4px; }


#video_pop { position: fixed; width: 100%; height: 100vh; left: 0; top: 0; z-index: 99999999; justify-content: center; align-items: center; display: none; }
#video_pop.active { display: flex; }
#video_pop .popup-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); }

#video_pop .video_pops_wrap { display: flex; align-items: flex-start; gap: 0 20px; }

#video_pop .video_pops { position: relative; z-index: 2; width: 620px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(208, 153, 141, 0.10); background: #080506; }
#video_pop .video_pops::after { content: ''; position: absolute; width: 870px; height: 870px; left: -455px; top: -455px; background: #fff; border-radius: 870px; opacity: 0.16; background: radial-gradient(44.04% 44.04% at 50% 50%, #D0998D 0%, #080506 100%); }
#video_pop .video_pops.none { display: none; }

#video_pop .video_pops .video_pops_con { position: relative; z-index: 2; }
#video_pop .video_pops .video_pops_con > p { position: absolute; left: 0; top: 0; background: #fff; width: 100%; height: 100%; }
#video_pop .video_pops .video_pops_con > p > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
#video_pop .video_pops .video_pops_con > a { position: relative; z-index: 2; text-align: center; padding: 80px 60px; display: block; cursor: default; }
#video_pop .video_pops .video_pops_con > a.cursor { cursor: pointer; }
#video_pop .video_pops .video_pops_con > a > p { font-size: 36px; font-weight: 800; color: var(--gold); line-height: 1.2; }
#video_pop .video_pops .video_pops_con > a > div { margin-top: 40px; font-size: 18px; font-weight: 400; line-height: 30px; color: #c4c4c4; white-space: pre-wrap; }

#video_pop .video_pops .video_pops_footer { position: relative; z-index: 2; background: #fff; width: 100%; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
#video_pop .video_pops .video_pops_footer > div { display: flex; }
#video_pop .video_pops .video_pops_footer > div > input { display: none; }
#video_pop .video_pops .video_pops_footer > div > input+label { padding-left: 39px; font-size: 16px; position: relative; }
#video_pop .video_pops .video_pops_footer > div > input+label::after { content: ''; position: absolute; left: 0; top: 0; width: 27px; height: 27px; background: url('../img/common/chk.svg'); top: 50%; transform: translate(0, -50%); }
#video_pop .video_pops .video_pops_footer > div > input:checked+label::after { background: url('../img/common/chk-on.svg'); }
#video_pop .video_pops .video_pops_footer > button { border: 0; font-size: 16px; color: #000; font-weight: 400; background: transparent; }