@charset "utf-8"; /* CSS Document */
.box0 { padding:0 var(--pgPD) } 
.boxSub { width: 1380px; margin: 0 auto; max-width: 94%; } 
.boxPro { width: 1600px; margin: 0 auto; max-width: 94%; } 
.boxDetail { width: 1000px; margin: 0 auto; max-width: 94%; } 
.box1 { width:1200px; margin:0 auto; max-width:94% } 
.box2 { padding:0 calc(var(--pgPD) * 2) } 

.gnb li.m_hide { display:none } 
body:not(.pop) { display:flex; flex-direction:column; min-height:100dvh } 

#header { position: fixed; left:0; top:0; width:100%; z-index:1000; border-bottom: 1px solid #ddd; background:#fff; --c1:rgba(0,0,0,.1); --c2:var(--siteC); --c3:#888; --c4:#fff; --c5:#fff; transition:background .3s } 
html.main:not(.scroll) #header { border-bottom: none; } 
#header .top_wrap { position:relative } 
#header .top_wrap .wrapF,
#header .top_wrap .gnb_wrap .dp1 { height:var(--headerH) } 
.headerT { padding-top:var(--headerH) } 
#header .top_wrap .wrapF { display:flex; align-items:center; gap:0 3vw } 
#header .top_wrap .wrapF > * { position:relative; z-index:2 } 
#header .top_wrap .logo > a { display:block; height:3.5em; overflow:hidden } 
#header .top_wrap .logo > a .in { display:block; height:100% } 
#header .top_wrap .logo > a .in.tt { display:flex; align-items:center; gap:1em } 
#header .top_wrap .logo > a .in.tt:after { content:attr(data-tt); border-left:1px solid #ddd; font-weight:700; font-size:1.313em; padding:0 0 .313em .5em; line-height:1.1 } 
#header .top_wrap .logo > a img { height:100%; aspect-ratio:120/29; display:block } 
#header .top_wrap .etc_wrap { display:flex; align-items:center; gap:2.5vmin } 
#header .top_wrap .etc_wrap .mem_wrap { display:flex; gap:2em; align-items:center } 
#header .top_wrap .etc_wrap .mem_wrap > li > a { display:flex; gap:.25em; align-items:center; position:relative; color:var(--c3) } 
#header .top_wrap .etc_wrap .mem_wrap > li > a .t1 { font-size:.938em; font-weight:500 } 
#header .top_wrap .etc_wrap .mem_wrap > li.point > a { color:var(--c2) } 
#header .top_wrap .etc_wrap .mem_wrap > li:not(:first-child) > a:before { content:""; position:absolute; left:-1em; top:50%; transform:translate(0,-50%); width:1px; height:70%; background:var(--c1) } 
#header .top_wrap .etc_wrap .lang_wrap { position:relative; color:var(--c3) } 
#header .top_wrap .etc_wrap .lang_wrap .langBtn { display:flex; align-items:center; gap:.25em; border:1px solid var(--c1); border-radius:.25em; height:2em; padding:0 .5em } 
#header .top_wrap .etc_wrap .lang_wrap .langBtn .t1 { font-weight:700; font-size:.813em } 
#header .top_wrap .etc_wrap .lang_wrap .langBtn .xi { font-size:1em } 
#header .top_wrap .etc_wrap .lang_wrap .langBtn .arrow { transition:.3s } 
#header .top_wrap .etc_wrap .lang_wrap .list { position:absolute; left:0; top:100%; width:100%; box-sizing:border-box; border:1px solid var(--c1); border-top:none; border-radius:0 0 .25em .25em; padding:.5em 1em; padding-top:0; visibility:hidden; opacity:0; display:flex; flex-direction:column; gap:.25em; background:var(--c4) } 
#header .top_wrap .etc_wrap .lang_wrap .list > li > a { display:flex; align-items:center; gap:.5em; height:1.5em; box-sizing:border-box; padding:0 .5em 0 .75em; overflow:hidden } 
#header .top_wrap .etc_wrap .lang_wrap .list > li > a .t1 { font-weight:700; font-size:.813em } 
#header .top_wrap .etc_wrap .lang_wrap .list > li > a .arrow { font-size:1em; margin-left:auto } 
#header .top_wrap .etc_wrap .lang_wrap .list > li > a .arrow:before { content:"\e907" } 
#header .top_wrap .etc_wrap .lang_wrap .list > li.on { order:-1 } 
#header .top_wrap .etc_wrap .lang_wrap .list > li.on > a { background:var(--c2); border-radius:1em; color:var(--c5); } 
#header .top_wrap .etc_wrap .lang_wrap .list > li.on > a .arrow:before { content:"\e92b" } 
#header .top_wrap .etc_wrap .lang_wrap .list > li:not(.on) > a .arrow { opacity:0; transform:translateX(50%) } 
#header .top_wrap .etc_wrap .lang_wrap .list > li:not(.on):hover > a .arrow { opacity:1; transform:translateX(0); transition:.3s } 
#header .top_wrap .etc_wrap .lang_wrap.on .langBtn { border-bottom-color:transparent; border-bottom-left-radius:0; border-bottom-left-radius:0 } 
#header .top_wrap .etc_wrap .lang_wrap.on .langBtn .arrow { transform:rotate(180deg) } 
#header .top_wrap .etc_wrap .lang_wrap.on .list { visibility:visible; opacity:1; transition:.3s } 
#header .top_wrap .etc_wrap .search { } 
#header .top_wrap .etc_wrap .search > .xi { font-size: 1.615em; } 

#header .top_wrap .btnInc { width:2.65em; height:2.65em; display:flex; align-items:center; justify-content:center; border-radius:50% } 
#header .top_wrap .btnInc .ico { font-size:1.515em } 
#header .top_wrap .allBtn { position:relative; border: 1px solid #ddd; } 
#header .top_wrap .allBtn .ico:before { content:"\e903" } 


html:not(.allOn) #header .top_wrap .gnb_wrap { display:flex; align-items:center; flex:1 1 0%; min-width:0; justify-content:end; margin-left:auto; height:100%; z-index:1; max-width:100vmin; margin-right: 5vmin; } 
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb { position:absolute; left:50%; transform:translateX(-50%); top:0; width:100%; justify-content:space-around; box-sizing:border-box; transition:padding .3s } 
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb a { display:flex } 
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li { position:relative; min-width: 10em;} 
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 { display:flex; align-items:center; justify-content:center } 
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:is(:hover, .on) .dp1 { color:var(--siteC); filter:saturate(2) } 
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:is(:hover, .on) .dp1 .va { position:relative } 
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 .va { position:relative; box-sizing:border-box; overflow:hidden; height:3vmin; text-align:center; padding-bottom:4px } 
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 .va .arrow { display: none; } 
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after { content:attr(data-en); width:auto; height:auto; text-transform:uppercase; } 
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after,
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 .tt { font-weight:500; font-size:1.15em; position:relative; height:3vmin; box-sizing:border-box; display:flex; align-items:center; justify-content:center; transition: transform .3s } 
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va:after,
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .tt { transform:translateY(-100%) } 

html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp2 { display:none } 

html.main:not(.scroll):not(.allOn) #header:not(:hover) { background:none } 
html.main:not(.scroll):not(.allOn) #header:not(:hover) .top_wrap .etc_wrap .allBtn { box-shadow:none; color:var(--siteC) } 

html:is(.allOn,.main:not(.scroll)) #header:not(:hover) { color:#fff; --c1:rgba(255,255,255,.5); --c2:#fff; --c3:#fff; --c4:transparent; --c5:var(--siteC) } 
html:is(.allOn,.main:not(.scroll)) #header:not(:hover) .top_wrap .logo .in,
html:is(.allOn,.main:not(.scroll)) #header:not(:hover) .top_wrap .etc_wrap .allBtn{ filter:var(--whiten) } 
html:is(.allOn,.main:not(.scroll)) #header:not(:hover) .top_wrap .gnb_wrap .gnb > li .dp1,
html:is(.allOn,.main:not(.scroll)) #header:not(:hover) .top_wrap .gnb_wrap .gnb > li .dp1 .va:after 

.allOn #header .top_wrap .allBtn .xi:before { content:"\e921" !important } 
.allOn { overflow-y:hidden } 
.allOn #header { height:100vh; background:rgba(0,0,0,.7); backdrop-filter:blur(1em); overflow-y:scroll; scrollbar-width: thin; scrollbar-color: white transparent } 
.allOn #header .top_wrap { height:100% } 
.allOn #header .top_wrap .wrapF { flex-direction:column; height:100%; align-items: normal; position:relative; box-sizing:border-box } 
.allOn #header .top_wrap .logo,
.allOn #header .top_wrap .etc_wrap { height:var(--headerH); display:flex; align-items:center } 
.allOn #header .top_wrap .etc_wrap { filter:var(--whiten) } 
.allOn #header .top_wrap .logo { position:absolute; left:var(--sitePD); top:0 } 
.allOn #header .top_wrap .etc_wrap { margin-left:auto } 
.allOn #header .top_wrap .gnb_wrap { order:1; flex:1; min-height:0; width:100%; display:flex; align-items:center; box-sizing:border-box; padding:0 var(--pgPD); padding-bottom:var(--headerH); position:relative; color:#fff } 
.allOn #header .top_wrap .gnb_wrap .gnb { width:100%; max-height:100% } 
.allOn #header .top_wrap .gnb_wrap .gnb > li { flex:1; padding-bottom:var(--headerH); text-align:center } 
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp1 { height:20vmin; display:flex; align-items:center; justify-content:center } 
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp1 .tt { font-size:1.815em; font-weight:700 } 
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 { flex-direction:column; gap:1em } 
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .tt { opacity:.7; font-weight:400; font-size: 1rem; } 
.allOn #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a:hover .tt { opacity:1 } 
.allOn #header .top_wrap .gnb_wrap .gnb > li.m_guide { display:block; position:absolute; right:0; bottom:0; font-size:.875em } 
.allOn #header .top_wrap .gnb_wrap .gnb > li.m_guide .dp1 { display:none } 
.allOn #header .top_wrap .etc_wrap .allBtn { border: 1px solid rgba(255,255,255, .5); color: #fff; } 
.allOn #header .top_wrap .logo > a img { filter: var(--whiten); } 

#footer { padding:5em 0 4em 0; background:#201b18; color:#fff; border-top:1px solid rgba(0,0,0,.05) } 
#footer .goTop { position:fixed; right:1em; bottom:1em; border-radius:50%; width:3.5em; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; text-align:center; background: inherit; color:#fff; border:1px solid rgba(255,255,255,.2); box-shadow:0 0 1em rgba(0,0,0,.1); opacity:0; transform:translateY(100%); transition:.5s } 
#footer .goTop .xi { font-size:1.5em; transition:.3s } 
#footer .goTop:hover .xi { transform:translateY(-.25em) } 
.scroll #footer .goTop { opacity:1; transform:translateY(0) } 

#footer .wrapF { display:flex; gap:4em } 
#footer .logo_wrap { display:flex; flex-direction:column; align-items:center; gap:2em; transform:translateY(-.5em) } 
#footer .logo img { height:2.825em; filter:brightness(0) invert(1) opacity(.5) } 
#footer .menu_wrap { display:flex; display:flex; flex-direction:column; gap:2em } 
#footer .menu { display:flex; flex-direction:column; gap:1em 0 } 
#footer .menu > li { width:100%; } 
#footer .menu > li > a { display:block; padding-right:2em; position:relative; color:#fff; font-size:.938em; opacity:.7 } 
#footer .menu > li > a:after { content:"\e915"; font-family:xeicon; position:absolute; right:0; top:0; transform:rotate(45deg) } 
#footer .menu > li.point > a { opacity:1; font-weight:700 } 
#footer .info_wrap { display:flex; flex-direction:column; gap:2.5em; flex:1; min-width:0 } 
#footer .info { overflow:hidden } 
#footer .info > li { float:left; margin-right:2em; margin-bottom:.5em; opacity:.7; position:relative } 
#footer .info > li:before { content:""; position:absolute; left:-1em; height:70%; top:50%; transform:translateY(-50%); width:1px; background:#fff; opacity:.2 } 
#footer .info > li.point { font-weight:700 } 
#footer .info > li.br { clear:left } 
#footer .info > li.copyright { font-size:.813em; opacity:.6; margin-top:1em; text-transform:uppercase } 
#footer .cs_wrap { display:flex; gap:0 4em; text-align:right } 
#footer .cs_wrap .wrap_in { position:relative } 
#footer .cs_wrap .wrap_in:not(:first-child):after { content:""; position:absolute; left:-2em; top:0; width:1px; height:100%; background:#fff; opacity:.2 } 
#footer .cs_wrap .t1 { opacity:.7; font-weight:500; margin-bottom:.5em } 
#footer .cs_wrap .t2 { font-weight:700; font-size:1.125em } 

.sns_st { display:flex; gap:.7vmin; } 
.sns_st > li > a { width:4vmin; height:4vmin; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; position:relative } 
.sns_st > li > a:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:inherit } 
.sns_st > li a > * { position:relative } 
.sns_st > li.nv > a:before { background:#07c63a } 
.sns_st > li.fb > a:before { background:#227bef } 
.sns_st > li.ig > a:before { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134B8, #515BD4); } 
.sns_st > li.yt > a:before { background:#e32a25 } 
.sns_st > li.ka > a:before { background:#fbe300 } 
.sns_st > li.ka > a { color: #3b1e1e; } 


#contents { flex:1 1 0%; min-height:0; box-sizing:border-box } 
#contents .sub_top_wrap { height:35vh; position:relative } 
#contents .sub_top_wrap .wrapBg { position:absolute; left:0; top:0; width:100%; height:100%; background-color:#f1f1f1; overflow:hidden } 
#contents .sub_top_wrap .wrapBg .bg { height:100%; background-size:100% auto; position:relative } 
#contents .sub_top_wrap .wrapBg .bg:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.2 } 
#contents .sub_top_wrap .wrapBg .bg.vod_wrap:after { opacity:.4 } 
#contents .sub_top_wrap .wrapCon { display:flex; height:100%; flex-direction:column; position:relative; padding-top:var(--headerH); box-sizing:border-box } 
#contents .sub_top_wrap .wrapF { } 
#contents .sub_top_wrap .subTit { flex:1; min-height:0; justify-content:center; display:flex; align-items:center } 
#contents .sub_top_wrap .subTit .wrapF { height:100%; display:flex; align-items: center; flex-direction:column; justify-content:center; color:#fff; line-height:1; gap:1em; box-sizing:border-box; padding:1em } 
#contents .sub_top_wrap .subTit .t1 { font-size: 2.815em; font-weight:600; line-height:1 } 
#contents .sub_top_wrap .subTab { position:relative } 
#contents .sub_top_wrap .subTab .gnb > li.on { display:flex !important; justify-content:center; width:100% } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 { display:inline-flex; justify-content:center; flex-wrap:wrap } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li { position:relative; flex:1; min-width:0; width:25vmin; max-width:25vmin } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a { height:3.5em; display:flex; align-items:center; justify-content:center; color:#fff; box-sizing:border-box; background:var(--siteC); position:relative } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a:before { content:""; position:absolute; right:0; top:50%; height:30%; transform:translateY(-50%); background:#fff; width:1px; opacity:.2 } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a .va { display:flex; align-items:center; line-height:1.1; position:relative; transition:.3s; word-break:keep-all; text-align:center } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a .va .tt { font-size:1em; font-weight:500; font-size:1em } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a .va .arrow { position:absolute; right:0; top:50%; transform:translateY(-50%); overflow:hidden; font-size:0; transition:.3s } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li > a .va .arrow:before { content:"\e942" } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li.on > a { background:#fff; color:var(--siteC) } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li.on > a .va { opacity:1; transform:translateX(0); padding-right:1.5em } 
#contents .sub_top_wrap .subTab .gnb > li > .dp2 > li.on > a .va .arrow { font-size:1.25em } 
#contents .sub_top_wrap .subTab .gnb > li .dp3 { display:none !important } 

#contents .sub_tit_wrap { padding:5.5vmin 0; border-bottom:1px solid #eee } 
#contents .sub_tit_wrap .wrapF { display:flex; display:flex; flex-direction:column; gap:2vmin; align-items:center } 
#contents .sub_tit_wrap .titW { flex:1; min-width:0 } 
#contents .sub_tit_wrap .titW .t1 { font-weight:500; font-size:2.63em } 
#contents .sub_tit_wrap .nav { display:flex; align-items:center } 
#contents .sub_tit_wrap .nav { display:inline-flex; align-items:center; gap:0 1em } 
#contents .sub_tit_wrap .nav > li { color:#666 } 
#contents .sub_tit_wrap .nav > li:not(.home):before { content:"\e940"; font-family:xeicon; margin-right:.5em; font-size:.938em } 
#contents .sub_tit_wrap .nav > li.home > a { width:1.5em; height:1.5em; border-radius:50%; background:var(--siteC); color:#fff; display:flex; align-items:center; justify-content:center } 
#contents .sub_tit_wrap .nav > li.home > a .xi { font-size:.875em } 

#contents .sub_top_wrap .wrapBg .bg:not(.vod_wrap) { background-position:center 30%; transition:4s } 
#contents .sub_top_wrap.on .wrapBg .bg:not(.vod_wrap) { background-position:center 60% } 

#contents .doc { padding:8vmin 0 20vmin 0 } 

.dp1on .gnb .dp2 { display:none!important } 
.dp2on .gnb > li,
.dp2on .gnb > li .dp1 { display:none!important } 
.dp2on .gnb > li.on { display:block!important } 
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a { display:none!important } 
.dp3on .gnb > li.on,
.dp3on .gnb > li .dp2 > li.on { display:block!important } 

.nav { display: flex; gap: 8px; align-items: center; justify-content: center; } 
.nav li { color: #fff; font-size: 14px; line-height: 1.3; } 
.nav li a { display: block; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.33333 9.77344L4.66927 21.2187H8.66667V16.4401C8.66667 16.4401 8.53333 12.6187 12 12.6187C15.4667 12.6187 15.3333 16.4401 15.3333 16.4401V21.1068L19.3333 21.2187L19.6667 9.77344H20.6667V22.4409H14L14.3333 16.8854C14.3333 16.8854 14.6667 13.6854 12 13.6854C9.33333 13.6854 9.66667 16.8854 9.66667 16.8854L10 22.4409H3.33594V9.77344H4.33333Z' fill='%23404040'/%3E%3Cpath d='M22.6673 11.2201V12.4414L12.002 3.99219L1.33398 12.4414L1.33398 11.2201L12.002 2.22266L22.6673 11.2201Z' fill='%23404040'/%3E%3C/svg%3E%0A") no-repeat center/16px 16px; filter: invert(1); } 
.nav li:nth-child(n+2) { padding-left: 10px; } 
.nav li:nth-child(n+2) { position: relative; } 
.nav li:nth-child(n+2)::before { content: ""; position: absolute; width: 1px; height: 8px; left: 0; position: absolute; top: 50%; transform: translateY(-50%); background: #d2d2d2; } 

/**/
.corner { position:absolute; width:var(--bR); height:var(--bR); } 
.corner path { fill:white } 
.corner.pt { top:0 } 
.corner.pb { bottom:0 } 
.corner.pb100 { bottom:100% } 
.corner.pl { left:0 } 
.corner.pr { right:0 } 

.mainBox { padding:10vmin 0; position:relative } 
.mainBox.bg:before { content:""; position:absolute; inset:0; background:var(--siteC); opacity:.05 } 
.mainBox.bg.c1:before { background:var(--siteC2) } 
.mainBox.p0 { padding:0 } 
.mainBox .wrapBg { position:absolute; left:0; top:0; width:100%; height:100% } 
.mainBox .wrapBg:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.4 } 
.mainBox .wrapF { display:flex; flex-direction:column; gap:2em 16vmin; position:relative } 
.mainBox .wrapF.g1 { column-gap:12vmin } 
.mainBox .wrapF.dRow { flex-direction:row } 
.mainBox .wrapF.dRow.vc { align-items:center } 
.mainBox .wrapF.dRow .grow { flex:1 1 0%; min-width:0 } 

.mainTit { display:flex; flex-direction:column; align-items:flex-start; gap:1em } 
.mainTit.ac { align-items:center; text-align:center } 
.mainTit.ar { align-items:flex-end; text-align:right } 
.mainTit.g0 { gap:0 } 
.mainTit.g1 { gap:2em } 
.mainTit .wIn { display:flex; flex-direction:column; gap:1.5em; } 
.mainTit .tit1 { font-family:var(--fSerif); font-size:8.5vmin; letter-spacing:-.025em; word-spacing:.1em } 
.mainTit .tit1 .ts { opacity:.5; font-size:6.5vmin } 
.mainTit .tit1:not(.tShow) { line-height:1 } 
.mainTit .tit2 { font-weight:700; font-size:1.875em } 
.mainTit .c1 { color:var(--siteC) } 
.mainTit .tt1 { font-size:1.25em; line-height:1.7; opacity:.8 } 
.mainTit .tt1.s1 { font-size:1.5em; font-weight:400 } 
.mainTit .mgL { margin-left:auto } 
.mainTit.white { color:#fff } 
.mainTitW { display:flex; align-items:center; justify-content:space-between } 
.mainTitW.col { flex-direction:column; align-items:flex-start } 
.mainTitW.ac { justify-content:center } 

.mainMore { --c1:var(--siteC); --c2:#fff; --c3:transparent; background:var(--c1); color:var(--c2); height:2.5em; border-radius:2em; padding:0 1.25em; gap:1.25em; display:flex; align-items:center; justify-content:center; box-sizing:border-box; border:2px solid var(--c3); transition:.3s } 
.mainMore .t1 { font-weight:700; font-size:1.063em; font-family:var(--fSerif) } 
.mainMore:after { content:"\e913"; font-family:xeicon; transition:.5s } 
.mainMore:hover { border-color:var(--c1); color:var(--c1); background:var(--c2) } 
.mainMore:hover:after { transform:rotate(360deg) } 
.mainMore.s1 { font-size:1.375em } 
.mainMore.re { --c1:#fff; --c2:var(--siteC); --c3:var(--siteC) } 

.tabSt { display:flex; --tGap:3em; gap:var(--tGap); align-items:center; background:rgba(255,255,255,.5); padding:1em; position:relative; padding-right:3em } 
.tabSt.ac { justify-content:center } 
.tabSt > li > .in { position:relative; background:none; border:none; opacity:.4; padding:0 2em; height:3em; display:flex; align-items:center } 
.tabSt > li > .in .t1 { font-weight:700; font-size:1.375em; position:relative } 
.tabSt > li > .in .t1:before,
.tabSt > li > .in .t1:after { content:""; position:absolute; left:50%; transform:translateX(-50%); width:0; height:.25em; border:1px solid var(--siteC); padding:0 .25em; opacity:0 } 
.tabSt > li > .in .t1:before { border-bottom:none; border-top-width:2px; bottom:100% } 
.tabSt > li > .in .t1:after { border-top:none; border-bottom-width:2px; top:100% } 
.tabSt > li:not(:last-child) > .in:after { content:""; position:absolute; right:calc(var(--tGap) / 2 * -1); top:50%; width:1px; height:80%; background:rgba(0,0,0,.15); transform:translate(0,-50%) } 
.tabSt > li > .in.on,
.tabSt > li:hover > .in { opacity:1; color:var(--siteC) } 
.tabSt > li > .in.on .t1:before,
.tabSt > li > .in.on .t1:after { width:100%; transition:.3s; opacity:1 } 
.tabSt > li .mainMore { position:absolute; right:1em; top:50%; transform:translateY(-50%) } 
.tabSt > li > .in:not(.on) ~ .mainMore { display:none } 

/*flex box*/
.flex_box { } 
.flex_box.s1 { margin: 0 0 -1em -1em; } 
.flex_box.s1.hf { margin: 0 0 -.5em -.5em; } 
.flex_box.s2 { margin: 0 0 -2em -2em; } 
.flex_box.s3 { } 
.flex_box.s4 { } 
.flex_box.s5 { } 

.flex_box .fst1 > li { flex: 1 1 100%; max-width: 100%; } 
.flex_box .fst1 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst2 > li { flex: 1 1 50%; max-width: 50%; } 
.flex_box .fst2 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst3 > li { flex: 1 1 33.33%; max-width: 33.33%; } 
.flex_box .fst3 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst4 > li { flex: 1 1 25%; max-width: 25%; } 
.flex_box .fst4 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst5 > li { flex: 1 1 20%; max-width: 20%; } 
.flex_box .fst5 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst8 > li { flex: 1 1 12.5%; max-width: 12.5%; } 
.flex_box .fst8 > li > .in { margin: 0 0 1em 1em; } 

.flex_box li > a { display: block; } 
.flex_box li > .in.st1 { margin: 0; } 

.vod_wrap { position:relative; height:100% } 
.vod_wrap .vod { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover } 
.inLayer { position:absolute; inset:0; background:#000; opacity:.2 } 
.inLayer.c1 { background:var(--siteC); opacity:.3; mix-blend-mode:difference } 

.mainTop { height:100dvh; box-sizing:border-box; display:flex; flex-direction:column } 

.visualSlide_wrap { position:relative; box-sizing:border-box; width:100%; flex:1 1 0%; min-height:0; --controlH:5em } 
.visualSlide { height: calc(var(--vh, 1vh) * 100); } 
.visualSlide .swiper-slide { position: relative; overflow:hidden; height:100%; transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1); background:#fff } 
.visualSlide .swiper-slide .bg { position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.1) } 
.visualSlide .swiper-slide .vod_wrap { position:absolute; left:0; top:0; width:100%; height:100%; } 
.visualSlide .swiper-slide .vod_wrap:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.2 } 
.visualSlide .swiper-slide.swiper-slide-active .bg,
.visualSlide .swiper-slide.swiper-slide-prev .bg,
.visualSlide .swiper-slide.swiper-slide-duplicate-active .bg { transition:7s; transform:scale(1) rotate(.001deg) } 

.visualSlide_wrap .wInc { position:absolute; width:100%; left:0; color:#fff; z-index:10; box-sizing:border-box; padding:0 calc(var(--pgPD) * 2.5); display:flex } 
.visualSlide_wrap .controlW { height:var(--controlH); bottom:0; gap:1em } 
.visualSlide_wrap .sloganW { height:100%; top:0; gap:1em; padding-bottom:var(--controlH); } 
.visualSlide_wrap .slogan { flex:1 1 0%; min-height:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1em } 
.visualSlide_wrap .slogan .t1 { font-size:6vmin; letter-spacing: -0.03em; font-weight: 600;} 
.visualSlide_wrap .slogan .t2 { font-size:10vmin; font-weight:700 } 
.visualSlide_wrap .slogan .t3 { font-size:3.5vmin; margin-top:8vmin } 
.visualSlide_wrap .slogan .t3.on .el > i { transition:2s; transition-delay:.5s } 

.visualSlide_wrap .swiperControl { justify-content:center; padding-bottom:2em } 

.mainScroll { width:12vmin; position:relative; margin-left:auto; color:#fff; position:absolute; right:1em; bottom:0 } 
.mainScroll .svgtt { width:100%; height:100% } 
.mainScroll .svgtt .tt { text-transform:uppercase; letter-spacing:.125em; word-spacing:.25em; fill:#fff } 
.mainScroll .in { position:absolute; left:10%; top:10%; width:80%; height:80%; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; box-sizing:border-box } 
.mainScroll .in .ico1 { font-size:2em; margin-right:-.25em } 

.mainWrap { overflow:hidden } 

.mainAbout { --g:6vmin; } 
.mainAbout .mainTit { padding-bottom:var(--g) } 
.mainAbout .imgW { display:flex; gap:var(--g) } 
.mainAbout .imgW > li { flex:1 1 0%; min-width:0; height:calc(100% - var(--g)) } 
.mainAbout .imgW > li .bg { height:100% } 
.mainAbout .imgW > li:nth-child(odd) { margin-top:var(--g) } 

.mainProduct { position:relative; --lw:40% } 
.mainProduct .tab { --calcG:.25em; --calcL:2; display:flex } 
.mainProduct .tab > li { box-sizing:border-box; padding:.5em; position:relative } 
.mainProduct .tab > li:before,
.mainProduct .tab > li:after { content:""; position:absolute; left:50%; transform:translateX(-50%); width:0; height:20%; border:.125em solid var(--siteC); opacity:0 } 
.mainProduct .tab > li:before { border-bottom:none; border-top-width:2px; top:0 } 
.mainProduct .tab > li:after { border-top:none; border-bottom-width:2px; bottom:0 } 
.mainProduct .tab > li .in { display:flex; height:4em; background:rgba(255,255,255,.4); color:var(--siteC); border:none; box-sizing:border-box; width:100%; align-items:center; justify-content:center; text-align:center } 
.mainProduct .tab > li .in .t1 { font-weight:700; font-size:1.25em } 
.mainProduct .tab > li .in:is(.on, :hover) { background:var(--siteC); color:#fff; transition:.3s } 
.mainProduct .tab > li:has( .in.on):before,
.mainProduct .tab > li:has( .in.on):after { opacity:1; width:100% } 
.mainProduct .wrapTit { position:absolute; left:0; top:0; width:var(--lw); height:100%; background:rgba(0,0,0,.3); backdrop-filter:blur(1em); z-index:2; box-sizing:border-box; padding:10vmin calc(var(--pgPD) * 2) } 
.mainProduct .wrapCon .prodBg { position:absolute; inset:0; transform:scale(1.05); transform-origin:100% 50% } 
.mainProduct .wrapCon .swiper-slide-active .prodBg { transform:scale(1.05) translateX(5%); transition:1.5s } 
.mainProduct .wrapCon .prodListW { padding:10vmin calc(var(--lw) + var(--pgPD) * 2); padding-right:0; position:relative; transform:translateX(20%) } 
.mainProduct .wrapCon .swiper-slide-active .prodListW { transform:translateX(0); transition:1s } 
.mainProduct .wrapCon .prodListW .wIn { padding:var(--pgPD); padding-right:0; background:rgba(255,255,255,.9); display:flex; flex-direction:column; gap:1.5em } 
.mainProduct .wrapCon .prodListW .wIn > div { width:100%; box-sizing:border-box } 
.mainProduct .wrapCon .prodListW .wHide { overflow:hidden } 
.mainProduct .wrapCon .prodListW .wIn .mainTitW { padding-right:3em } 

.mainBrand .swiper { overflow:visible } 
.mainBrand .swiper-slide .gallSt > div:is(.imgW, .conW) { transition:1s } 
.mainBrand .swiper-slide:not(.swiper-slide-active) .imgW { filter:grayscale(1) } 
.mainBrand .swiper-slide:not(.swiper-slide-active) .conW { opacity:0; transform:translateY(50%) } 
.mainBrand .swiperControl { width:40%; margin:0 auto } 
.mainBrand .swiperBtn.ctrl { position:absolute; top:50%; width:5em; height:5em; background:var(--siteC); color:#fff; display:flex; align-items:center; justify-content:center } 

.mainBasicSlideW { --slideG: 1.5em; margin:0 calc(var(--slideG) * -1) } 
.mainBasicSlideW.shadow { filter:drop-shadow(0 0 1em rgba(0,0,0,.1)); } 
.mainBasicSlideW .swiper-slide { width:33.33% } 
.mainBasicSlideW .swiper-slide > div { margin:0 var(--slideG) } 
.mainBasicSlideW.brand { --slideG: 2em } 
.mainBasicSlideW.brand .swiper-slide { width:40% } 

/*문의 하기*/
.addinfo_tw { margin-bottom: .5em; display: flex; flex-direction: column; align-items: end; } 
.addinfo_tw > .tt { font-size: 1.063em; color: #999; font-weight: 500; } 

.select-wrapper { position:relative; } 
.select-wrapper:before { position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); font-size: 1.5rem; color: #fff; transition: all .4s ease-in-out; font-family: 'xeicon'; z-index: 2; } 
.select-wrapper:not(.selected):before { content: '\e936' } 
.select-wrapper.selected:before { content: '\e930'; } 
#opSelect:focus option { color: black; } 

.form_wrap { } 
.form_wrap .form { gap:1em; font-size:.95em; } 
.form_wrap .form > li { position: relative; } 
.form_wrap .form > li:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; content: ''; background: #f7f7f7; border: 1px solid #e9e9e9; border-radius: 0.25rem; } 
.form_wrap .form > li:not(.w100) { width:calc(50% - .5em); } 
.form_wrap .form > li .inp_wrap { position:relative; } 
.form_wrap .form > li .inp_wrap .tit,
.form_wrap .form > li .inp_wrap .input_st:not(textarea) { height:4.5em; } 
.form_wrap .form > li .inp_wrap .input_st::placeholder { font-size: 1.063em; font-weight: 400; } 
.form_wrap .form > li .inp_wrap .tit { position:absolute; top:0; left:0; padding-left:2em; } 
.form_wrap .form > li .inp_wrap .tit .tt { font-size: 1.15em; font-weight:600; } 
.form_wrap .form > li .inp_wrap .input_st:not(textarea) { width:100%; padding-left:13em; } 
.form_wrap .form > li .inp_wrap textarea.input_st { padding-top:4em; padding-left:1.5em; height:12em; } 
.form_wrap .form > li .inp_wrap .input_st { border:none; background: transparent; border-radius: .15em; outline: 1px solid transparent; transition: all .4s ease-in-out; } 
.form_wrap .form > li .inp_wrap input:focus { outline: 1px solid #fff; } 
.form_wrap .form_chk { margin-top:2em; } 
.form_wrap .form_chk .chk { gap:1em; } 
.form_wrap .form_chk .btn .input_st { background: transparent; color: #fff; width:12em; border: 4px solid rgba(255, 255, 255, .4); transition: all .4s ease-in-out; } 
.form_wrap .form_chk .btn .input_st:hover { border: 4px solid #fff; } 

.form_label_wrap { height: 100%; align-items: center; } 
.form_label_wrap > li { box-sizing:border-box; margin-right: 3em; font-size: 1.1em; } 
.form_label_wrap > li:last-of-type { margin-right: 0em; } 
.form_label_wrap.st1 > li { flex:1 0 33.33%; max-width: 33.33%; } 
.form_label_wrap.st2 > li { flex:1 0 25%; max-width: 25%; } 
.form_label_wrap.st3 > li { flex:1 0 16.66%; max-width: 16.66%; } 

.form_label_st:not(.cssbrowser) input ~ .xi.st1 { padding-right:0; padding-left:.125em; font-size:1em } 
.form_label_st:not(.cssbrowser) input ~ .xi.st1:before { content:"\e929"; opacity:0 } 
.form_label_st:not(.cssbrowser) input:checked ~ .xi.st1:before { content:"\e929"; opacity:1 } 

.form_label_st { display:inline-block; *display:inline; zoom:1; cursor:pointer } 
.form_label_st > * { display:inline-block; *display:inline; zoom:1; vertical-align:middle; cursor:pointer; } 
.form_label_st > .xi { font-size: 1.15em; margin: 0; } 
.form_label_st:not(.cssbrowser) .xi:before { font-family:xeicon!important; font-style:normal; font-size:1.25em; padding-right:.25em } 
.form_label_st:not(.cssbrowser) input ~ span { color:#666; font-weight: 600; } 
.form_label_st:not(.cssbrowser) input ~ .xi:before { color:#aaa } 
.form_label_st:not(.cssbrowser) input:checked ~ span { color:#333 } 
.form_label_st:not(.cssbrowser) input:checked ~ .xi:before { color:var(--siteC); } 
.form_label_st:not(.cssbrowser) input[type=checkbox] ~ .xi:before { content:"\e92e" } 
.form_label_st:not(.cssbrowser) input[type=checkbox]:checked ~ .xi:before { content:"\e92d" } 
.form_label_st:not(.cssbrowser) input:radio ~ span { color:#333 } 
.form_label_st:not(.cssbrowser) input:radio ~ .xi:before { color:var(--siteC); } 
.form_label_st:not(.cssbrowser) input[type=radio] ~ .xi:before { content:"\e92e" } 
.form_label_st:not(.cssbrowser) input[type=radio]:checked ~ .xi:before { content:"\e92d" } 
.form_label_st:not(.cssbrowser) input[type=checkbox],
.form_label_st:not(.cssbrowser) input[type=radio] { width:0; height:0; overflow:hidden; } 

.filebox .upload-name { height: 3.5em; padding: 0 10px; vertical-align: middle; border: none; background: transparent; width: 80%; } 
.filebox .upload-name::placeholder { font-size: 1.15em; font-weight: 500; color: #aaa; } 
.filebox label { padding: 10px 20px; color: #fff; background-color: var(--siteC); cursor: pointer; margin-left: 10px; border-radius: 5px; display: flex; align-items: center; justify-content: center; width: 30%; min-width: 6.25em; } 
.filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; } 

/*찾아오시는 길*/
.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap .cont { display: none; } 
.locationContainer { } 
.locationContainer .loadmap { border-radius: 1rem; overflow: hidden; } 
.locationContainer .loadmap .root_daum_roughmap { width: 100%; } 
.locationContainer .loadmap .wrap_map { width: 100%; height:calc(var(--vh, 1vh) * 60) !important; } 

.locationContainer .mapInfoWrap { position: relative; margin-top: 1rem; border-radius: 1rem; z-index: 2; display: flex; gap: 2rem; padding: 3.5rem; box-sizing: border-box; background: var(--siteC); } 
.locationContainer .mapInfoWrap .leftInfo { width: 60%; } 
.locationContainer .mapInfoWrap .leftInfo > .tit { font-size: 1.515em; font-weight: 600; color: #fff; margin-bottom: 1.5rem; } 
.locationContainer .mapInfoWrap .leftInfo > .contactInfo { display: flex; flex-wrap: wrap; gap: 1rem; } 
.locationContainer .mapInfoWrap .leftInfo > .contactInfo > li { } 
.locationContainer .mapInfoWrap .leftInfo > .contactInfo > li.br { width: 100%; } 
.locationContainer .mapInfoWrap .leftInfo > .contactInfo > li > .con { display: flex; gap: .25rem; align-items: center; font-size: 1.15em; } 
.locationContainer .mapInfoWrap .leftInfo > .contactInfo > li > .con > .xi { position: relative; top: 0rem; color: #fff; font-size: 1.515rem; } 
.locationContainer .mapInfoWrap .leftInfo > .contactInfo > li > .con > .titCon { display: flex; gap: .75rem; } 
.locationContainer .mapInfoWrap .leftInfo > .contactInfo > li > .con > .titCon > .tit { font-weight: 600; line-height: 1.4; color: #fff; } 
.locationContainer .mapInfoWrap .leftInfo > .contactInfo > li > .con > .titCon > .txt { font-weight: 400; line-height: 1.4; color: rgba(255,255,255, .7); } 

.locationContainer .mapInfoWrap .rightInfo { width: 40%; } 
.locationContainer .mapInfoWrap .rightInfo .flex_box { height: 100%; } 
.locationContainer .mapInfoWrap .rightInfo .mapOpen { height: 100%; } 
.locationContainer .mapInfoWrap .rightInfo .mapOpen > li { display: flex; } 
.locationContainer .mapInfoWrap .rightInfo .mapOpen > li > .in { position:relative; border-radius: .5rem; height: 100%; flex: 1; padding: 1.5rem; box-sizing: border-box; background: rgba(255,255,255, .3); transition: .3s; } 
.locationContainer .mapInfoWrap .rightInfo .mapOpen > li > .in > .tt { font-size: 1.15em; font-weight: 600; line-height: 1.4; color: #fff; } 
.locationContainer .mapInfoWrap .rightInfo .mapOpen > li > .in > .plus { position: absolute; right: 1.5rem; bottom: 1.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; } 
.locationContainer .mapInfoWrap .rightInfo .mapOpen > li:first-of-type > .in:hover { background: #29a139; } 
.locationContainer .mapInfoWrap .rightInfo .mapOpen > li:last-of-type > .in:hover { background: #dfc432; } 


/*product*/
.productTop { margin-bottom: 1.5em; } 
.productTop .result { display: flex; align-items: center; } 
.productTop .result .num { position: relative; color: var(--siteC); font-size: 18px; font-weight: 600; } 
.productTop .result .tt { font-size: 18px; font-weight: 600; } 
.productTop .option { display: flex; gap: 1.5rem; align-items: center; } 
.productTop .option > li { } 
.productTop .option > li > .tt { font-size: .936em; color: #999; font-weight: 400; } 
.productTop .option > li.on > .tt { color: var(--siteC); font-weight: 600; } 

.productSubList { display: flex; flex-wrap: wrap; gap: 4rem 1rem; } 
.productSubList .subProList { position:relative; width: calc((100% - 1rem) / 2); } 
.productSubList.w2 .subProList { width: calc((100% - 3rem) / 4); } 
.productContainer { display: block; } 
.productContainer .proTop { position: relative; } 
.productContainer .proTop .proImgBox { position:relative; overflow: hidden; display: flex; justify-content: center; } 
.productContainer .proTop .proImgBox > img { width: 100%; height: 100%; aspect-ratio: 10 / 7; object-fit: cover; transition: .3s ease; } 
.mirror { position: absolute; top: -20%; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; background: linear-gradient(
 90deg,
 transparent 10%,
 rgba(255, 255, 255, 0.1) 30%,
 rgba(255, 255, 255, 0.3) 45%,
 rgba(255, 255, 255, 0.3) 55%,
 rgba(255, 255, 255, 0.1) 70%,
 transparent 90%
); filter: blur(0.1rem); transform: scale3d(1.9, 1.4, 1)
 rotate3d(0, 0, 1, 45deg)
 translate3d(0, -100%, 0); -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; } 

.productContainer .proTop .proImgBox:hover .mirror { transform: scale3d(1.9, 1.4, 1)
 rotate3d(0, 0, 1, 45deg)
 translate3d(0, 120%, 0); } 
 .productContainer .proTop .proImgBox:hover > img { transform: scale(1.05); } 

.productContainer .proBtm { padding-top: 1.35em; } 
.productContainer .proBtm > .con { } 
.productContainer .proBtm > .con.bd { } 
.productContainer .proBtm > .con > .kn { font-size: 22px; font-weight: 600; line-height: 145%; letter-spacing: -0.44px; } 
.productContainer .proBtm .item_money_box { padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; } 
.productContainer .proBtm .item_money_box .item_dc_per { font-size: 14px; color: var(--point-red); font-weight: 600; } 
.productContainer .proBtm .item_money_box .item_sale { padding: 0; font-size: 14px; font-weight: 600; } 
.productContainer .proBtm .item_money_box .item_price { padding: 0; font-size: 14px; font-weight: 600; } 
.productContainer .proBtm .item_money_box em { font-size: inherit; color: inherit; font-weight: inherit; letter-spacing: -0.03em; } 
.productContainer .proBtm .item_money_box del { font-size: 13px; font-weight: 400; } 
.productContainer .proBtm .item_money_box .item_price .time_sale_cost { background: none; padding: 0; font-size: inherit; color: inherit; font-weight: inherit; } 

.mall_view_top { padding:0 0 5em 0; gap: 2em; margin-top: 3em; } 
.mall_view_top .prod_info { width: 45%; padding: 3em 2em; border: 1px solid #ddd; box-sizing: border-box;} 
.mall_view_top .prod_info .tit_wrap .tit { font-weight: 600; font-size: 2.415em; line-height: 1.1; } 
.mall_view_top .prod_info .tit_wrap .simTit { font-size: 1.063em; margin: 1em 0; font-weight: 400; color: #666; } 
.mall_view_top .prod_info .downloadCon { margin-top: 2.5em; } 
.mall_view_top .prod_info .downloadCon > .tit { font-size: 1.215em; font-weight: 600; margin-bottom: .75em; } 

.overviewSlider_wrap { position:relative; display: flex; gap: 1em; flex-direction: column; width: 55%; } 
.overviewSlider_wrap .overviewSlider { position:relative; aspect-ratio: 10 / 7; } 
.overviewSlider_wrap .overviewSlider .galleryImg { width: 100%; height: 100%; cursor: pointer; } 
.overviewSlider_wrap .overviewSlider .galleryImg > img { width: 100%; height: 100%; box-sizing: border-box; object-fit: cover; } 
.overviewSlider_wrap .overview_control { display: flex; align-items: center; gap: 2rem; justify-content: end; } 
.overviewSlider_wrap .overview_control .progress-container { position:relative; width: 10rem; display: flex; align-items: center; gap: 1rem; } 
.overviewSlider_wrap .overview_control .progress-bar { position:relative; position: relative; width: 10rem; background: rgba(0,0,0, .4); height: 2px; } 
.overviewSlider_wrap .overview_control .progress-bar .swiper-pagination-progressbar-fill { background: #fff; } 
.overviewSlider_wrap .overview_control .total-slide { width: 4rem; /* color: #fff; */ font-size: var(--font-size-base); font-weight: 500; line-height: 1; } 
.overviewSlider_wrap .overview_control .swiperBtn { position: absolute; top: 50%; transform: translateY(-50%); width: 2.15rem; height: 3.75rem; background: var(--siteC); color: #fff;} 
.overviewSlider_wrap .overview_control .swiperBtn:before { } 
.overviewSlider_wrap .overview_control .swiperBtn:hover {  } 
.overviewSlider_wrap .overview_control .swiperBtn.prev { left: 0; } 
.overviewSlider_wrap .overview_control .swiperBtn.next { right: 0; } 
.overviewSlider_wrap .overview_control .control { display: flex; gap: .75rem; } 

.overviewSlider_wrap .projectSliderThumb { position:relative; width: 100%; } 
.overviewSlider_wrap .projectSliderThumb .swiper-slide { } 
.overviewSlider_wrap .projectSliderThumb .in { position:relative; width: 100%; height: 100%; background: #fff; } 
.overviewSlider_wrap .projectSliderThumb .in > .thumbImg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: .715; border: 1px solid transparent; transition: .3s ease; } 
.overviewSlider_wrap .projectSliderThumb .in > .thumbImg > img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 10 / 7; filter: grayscale(.5); transition: .3s ease; } 
.overviewSlider_wrap .projectSliderThumb .in:hover > .thumbImg,
.overviewSlider_wrap .projectSliderThumb .swiper-slide.swiper-slide-thumb-active .in > .thumbImg { opacity: 1; border: 1px solid var(--siteC); } 
.overviewSlider_wrap .projectSliderThumb .in:hover > .thumbImg > img,
.overviewSlider_wrap .projectSliderThumb .swiper-slide.swiper-slide-thumb-active .in > .thumbImg > img { filter: grayscale(0) } 
.overviewSlider_wrap .projectSliderThumb .swiper-slide.swiper-slide-thumb-active { } 
.overviewSlider_wrap .projectSliderThumb .swiperControl { /* position: absolute; pointer-events: none; width: 10rem; top: 0; right: 0; height: 100%; */ } 
.overviewSlider_wrap .projectSliderThumb .swiperControl .swiperBtn { position: absolute; left: 50%; transform: translateX(-50%); z-index: 9; width: 2rem; pointer-events: auto; height: 2rem; background: rgba(0,0,0, .415); border-radius: var(--radius-pill); color: #fff; } 
.overviewSlider_wrap .projectSliderThumb .swiperControl .swiperBtn:hover { background: rgba(0,0,0, 1); } 
.overviewSlider_wrap .projectSliderThumb .swiperControl .prev { top: 1rem; transform: translateX(-50%) rotate(90deg); } 
.overviewSlider_wrap .projectSliderThumb .swiperControl .next { bottom: 1rem; transform: translateX(-50%) rotate(90deg); } 

.tagLink { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .5em; } 
.tagLink > li { } 
.tagLink > li > a { display: block; color: #2784c2; font-size: 14px; line-height: 130%; letter-spacing: -0.28px; text-decoration: underline; text-underline-offset: 2px; } 

.downloadCon { } 
.downloadCon .downLay { display: flex; flex-wrap: wrap; gap: 8px; } 
.downloadCon .downLay > a { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 4px; width: 88px; height: 88px; border: 1px solid #d2d2d2; text-align: center; font-size: 14px; font-weight: 500; line-height: 130%; letter-spacing: -0.28px; border-radius: 8px; transition: 0.3s all; } 
.downloadCon .downLay > a.fileN { pointer-events: none; border: 1px dashed #bababa; color: #bababa; background-color: #f5f5f5; } 
.downloadCon .downLay > a.fileN > .icon > img { opacity: .5; } 
.downloadCon .downLay > a > .icon { } 
.downloadCon .downLay > a > .icon > img { height: 23px; transition: .3s all; object-fit: contain; } 
.downloadCon .downLay > a > .tt { } 

.downloadCon .downLay > a:hover { background: var(--siteC); color: #fff; } 
.downloadCon .downLay > a:hover > .icon > img { filter: var(--whiten); } 

.mall_middle { } 
.mall_middle .linkScroll { margin-top: 5.5em; } 
.mall_middle .linkScroll:first-of-type { margin-top: 0; } 
.mall_middle .linkScroll.imgDetail { } 
.mall_middle .linkScroll.imgDetail .detailView { position: relative; max-height: 2000px; overflow: hidden; } 
.mall_middle .linkScroll.imgDetail .detailView::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 12rem; background: linear-gradient(to bottom,rgba(255, 255, 255, 0),#fff); pointer-events: none; } 
.mall_middle .linkScroll.imgDetail .detailView img { display: block; width: 100%; height: auto; } 
.mall_middle .linkScroll.imgDetail .detailMore { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; gap: 1em; min-height: 3.5rem; border: 1px solid #222; border-radius: 0.3rem; background: #fff; top: 0rem; font: inherit; font-weight: 600; cursor: pointer; } 
.mall_middle .linkScroll.imgDetail.open .detailMore .xi { transform: rotate(180deg); } 
.mall_middle .linkScroll.imgDetail.open .detailView { overflow: unset; max-height: fit-content; } 
.mall_middle .linkScroll.imgDetail.open .detailMore { max-height: auto; } 
.mall_middle .linkScroll.imgDetail.open .detailView::after { display: none; } 
.mall_middle .mallTabCon { border-bottom: 1px solid #ddd; background: #f5f5f5; border-top: 1px solid #eee; margin-bottom: 4.5em; } 
.mall_middle .mallTabCon.on { position: sticky; top: var(--headerH); z-index: 99; } 

.proVtit { margin-bottom: 2.5em; } 
.proVtit > .t2 { font-size: 2.415em; font-weight: 600; line-height: 1; } 
.proVtit > .t4 { font-size: 1.063em; line-height: 1.4; color: #444; margin-top: 1em; } 

/**/
.tab_st { } 
.tab_st > li { flex: 1 1 1% } 
.tab_st > li > a { display: flex; justify-content: center; align-items: center; height: 3.75em; position: relative; font-size: 1.125em; font-weight: 500; color: #666; box-sizing: border-box } 
.tab_st > li:not(:first-child):not(.on) > a { border-left: none; padding-left: 2px } 
.tab_st > li:not(:last-child):not(.on) > a { border-right: none; padding-right: 2px } 
.tab_st > li:first-child > a { border-radius: .25em 0 0 .25em } 
.tab_st > li:last-child > a { border-radius: 0 .25em .25em 0 } 
.tab_st > li.on > a { color: var(--siteC); } 
.tab_st > li > a:before { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--siteC); content: ''; transform: scaleX(0); transition: .3s ease; } 
.tab_st > li.on > a:before { transform: scaleX(1); } 
.tab_st.c1 > li > a { background: #fff; border-color: #1f3b77; color: #1f3b77 } 
.tab_st.c1 > li.on > a { background: #1f3b77; color: #fff } 
.tab_st.c2 > li > a { background: #fff; color: #888; border-top: 1px solid #1d4835; border-bottom: 1px solid #ddd; border-radius: 0; border-left: none; border-right: none; box-shadow: none } 
.tab_st.c2 > li.on > a { color: #111; border-bottom-color: #1f3b77 } 
.tab_st.arrow > li.on > a:after { content: "\e935"; font-family: xeicon; position: absolute; left: 50%; top: 100%; transform: translate(-50%, -.313em); color: #333 } 
.tab_st.arrow.c1 > li.on > a:after { color: #1f3b77 } 

/* history */
.history-bg { position: relative; height: 25svh; } 
.history-bg::before { content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.315); } 
.history-bg .txt-wrap { display: flex; align-items: center; justify-content: center; width: 100%; } 
.history-bg .txt-wrap > .tt { position: relative; z-index: 2; color: #fff; font-size: 3em; font-weight: 500; } 
.history-con { padding: 5rem 0; } 
.history-list > li { position: relative; padding-bottom: 8rem; } 
.history-list > li:last-of-type { padding-bottom: 0; } 
.history-list > li::before { content: ''; position: absolute; top: 36px; right: 0; left: 0; width: 1px; height: calc(100% - 2.5rem); margin: auto; background: #ddd; } 
.history-list > li:last-child::before { display: none; } 
.history-list > li > dl { position: relative; display: flex; flex-direction: column; padding-left: calc(50% + 60px); } 
.history-list > li > dl > dt { position: absolute; top: -12px; right: 50%; padding-right: 60px; padding-left: 0; font-weight: 700; } 
.history-list > li > dl > dt.year { color: var(--siteC); font-size: 2.815em; white-space: nowrap; } 
.history-list > li > dl > dt::before { content: ''; position: absolute; top: 0; right: -5px; bottom: 0; width: 10px; height: 10px; margin: auto; background: #ddd; border-radius: 50%; transition: 0.3s; } 
.history-list > li.active > dl > dt::before { background: var(--siteC); box-shadow: 0 0 0 5px rgba(122, 110, 102, 0.15); } 
.history-list > li > dl > dd.history-year { position: relative; margin-bottom: 0.5em; color: #666; font-size: 1.125rem; } 
.history-list > li > dl > dd.history-year:last-child { margin-bottom: 0; } 
.history-list > li > dl > dd.history-year > .month-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .75em; } 
.history-list > li > dl > dd.history-year > .month-item:last-child { margin-bottom: 0; } 
.history-list > li > dl > dd.history-year > .month-item > .event-year { flex: 0 0 auto; color: var(--siteC); font-weight: 600; line-height: 1.6; white-space: nowrap; width: 4.35em; } 
.history-list .event-year > .year,
.history-list .event-year > .month { color: inherit; font: inherit; } 
.history-list > li > dl > dd.history-year > .month-item > .event-list { flex: 1; min-width: 0; } 
.history-list > li > dl > dd.history-year > .month-item > .event-list > p { line-height: 1.6; word-break: keep-all; } 
.history-list > li > dl > dd.history-year > .month-item > .event-list > p + p { margin-top: 0.5em; } 
.history-list > li > dl > dd.history-year .hisImg{ width: 100%; height: 17.5rem; margin-bottom: 1.5rem;}
.history-list > li > dl > dd.history-year .hisImg > img{ width: 100%; height: 100%; object-fit: cover;}

.history-list > li:nth-child(even) > dl { padding-right: calc(50% + 60px); padding-left: 0; }
.history-list > li:nth-child(even) > dl > dt { right: auto; left: 50%; padding-right: 0; padding-left: 60px; }
.history-list > li:nth-child(even) > dl > dt::before { right: auto; left: -5px; }
.history-list > li:nth-child(even) > dl > dd.history-year { padding-right: 1em; padding-left: 0; }
.history-list > li:nth-child(even) > dl > dd.history-year > .month-item { flex-direction: row-reverse; }
.history-list > li:nth-child(even) > dl > dd.history-year > .month-item > .event-list { text-align: right; }


/*product search*/
.searchContainer { margin-top: var(--headerH); } 
.searchContainer .searchTit { text-align: center; margin-bottom: 1.5em; } 
.searchContainer .searchTit > .tt { font-size: 2.15em; font-weight: 600; } 
.prosearchCon { position: relative; padding: 3.5rem; box-sizing: border-box; background: #F4F2F0; } 
.prosearchCon .find_WrapCon { position: relative; width: 35svw; margin: 0 auto; } 
#findPro { display: flex; gap: 1em; position:relative; width: 100%; } 
#findPro .input_st { position: relative; width: 100%; height: 3.45rem; border: 1px solid #ddd; border-radius: .25em; padding: 0 6rem 0 1.25rem; box-sizing: border-box; } 
#findPro .input_st.label { width: 10em; padding: 0 4rem 0 1rem; } 
#findPro .input_st::placeholder { font-size: 1em; font-weight: 500; } 
#findPro .sech { position: absolute; display: flex; align-items: center; justify-content: center; background: transparent; right: 1rem; top: 50%; transform: translateY(-50%); border: none; } 
#findPro .sech > .xi { } 

.prosearchCon .tag_wrap { display: flex; align-items: start; gap: 2em; margin-top: 1.25em; } 
.prosearchCon .tag_wrap .best_sch { display: flex; gap: var(--gap-sm); align-items: center; } 
.prosearchCon .tag_wrap .best_sch > .c_plus { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-point2); color: #fff; } 
.prosearchCon .tag_wrap .best_sch > .c_tit { display: flex; padding: 0 1em; height: 2em; align-items: center; background: var(--siteC); justify-content: center; color: #fff; border-radius: .25em; } 
.prosearchCon .tag_wrap .best_sch > .c_tit > i { font-size: .875em; font-weight: 600; line-height: 1; } 
.prosearchCon .tag_wrap .tag_list { position:relative; top: 5px; display: flex; align-items: center; gap: 2em; } 
.prosearchCon .tag_wrap .tag_list > li { position:relative; } 
.prosearchCon .tag_wrap .tag_list > li:before { position: absolute; right: -1em; width: 1px; height: 12px; top: 50%; transform: translateY(-50%); background: #bfbfbf; content: ''; } 
.prosearchCon .tag_wrap .tag_list > li:last-of-type:before { display: none; } 
.prosearchCon .tag_wrap .tag_list > li > .tt { font-size: .965em; font-weight: 400; color: #444; letter-spacing: -0.08em; } 
.prosearchCon .tag_wrap .tag_list > li > .tt > a:hover { text-decoration: underline; } 

.resultProContainer { margin-top: 4em; } 

/*productview*/
.popWrap .proView_container { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } 
.popWrap .proView_container .proTit { position: absolute; top: 0; left: 0; width: 100%; height: 4rem; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; background: rgba(0,0,0, .25); backdrop-filter: blur(10px); } 
.popWrap .proView_container .proTit .interaction_wrap { display: flex; gap: 1.25em; color: #fff; align-items: center; } 
.popWrap .proView_container .proTit .interaction_wrap .popClose,
.popWrap .proView_container .proTit .interaction_wrap .expand_btn { cursor: pointer; font-size: 1.415em;} 
.popWrap .proView_container .proTit > .swiperControl { } 
.popWrap .proView_container .proTit > .swiperControl .swiper-pagination { position: relative; } 
.popWrap .proView_container .proTit > .swiperControl .swiper-pagination > .total-slide { font-size: 1.15em; font-weight: 600; color: #fff; line-height: 1; } 

html.pop .popWrap.gallery { display: unset; width: unset; height: unset; margin: unset; max-width: unset; } 
.popWrap.gallery .productViewSlide_wrap { position:relative; display: flex; align-items: center; justify-content: center; width: 100vw; height: 85vh; margin: 0 auto; } 
.popWrap.gallery .productViewSlide_wrap .productViewSlider_control { position: absolute; width: 100%; height: 100%; } 
.popWrap.gallery .productViewSlide_wrap .swiperBtn { position: absolute; top: 50%; transform: translateY(-50%); width: 5rem; height: 5rem; } 
.popWrap.gallery .productViewSlide_wrap .swiperBtn.prev { left: 8vw; } 
.popWrap.gallery .productViewSlide_wrap .swiperBtn.next { right: 8vw; } 
.popWrap.gallery .productViewSlide_wrap .swiperBtn:before { font-size: 3.5rem; color: #fff; } 
.popWrap.gallery .productViewSlide_wrap .productViewSlider { position:relative; overflow: visible; height: 100%; -webkit-tap-highlight-color: transparent; display: flex; flex-direction: column; justify-content: center; align-items: center; } 
.popWrap.gallery .productViewSlide_wrap .productViewSlider .el { display: flex; align-items: center; } 
.popWrap.gallery .productViewSlide_wrap .productViewSlider:focus { outline: none !important; } 
.popWrap.gallery .productViewSlide_wrap .productViewSlider .view_container { display: flex; flex-direction: column; align-items: center; justify-content: center; max-height: 100%; width: 100%; } 
.popWrap.gallery .productViewSlide_wrap .productViewSlider .imgCon { position: relative; margin: 0 auto; display: flex; justify-content: center; flex-direction: column; width: 100%; max-width: 55vw; flex-shrink: 1; min-height: 0; } 
.popWrap.gallery .productViewSlide_wrap .productViewSlider .imgCon > img { width: 100%; max-height: 80dvh; object-fit: contain; } 
.popWrap.gallery .productViewSlide_wrap .productViewSlider .proName { position: relative; justify-content: center; display: flex; gap: .25rem; align-items: center; text-align: center; margin-top: .5em; } 
html.backUp .popWrap.gallery .productViewSlide_wrap .productViewSlider .proName > .tt { font-size: 2.315em; } 
html.backUp .popWrap.gallery .productViewSlide_wrap .productViewSlider .proName > .value { font-size: 2.315em; margin-left: 1rem; } 
.popWrap.gallery .productViewSlide_wrap .productViewSlider .proName { margin-top: 1.5em; } 
.popWrap.gallery .productViewSlide_wrap .productViewSlider .proName > .tt { color: #fff; font-size: 1.45em; font-weight: 500; line-height: 1; } 
.productViewSlide_wrap .productViewSlider .proName > .value { color: #fff; font-size: 1.75em; margin-left: .25rem; line-height: 1; font-weight: 300; } 

 .proTable_container { } 
.proTable_container .item { padding-bottom: 4em; } 
.proTable_container .item:last-of-type { padding-bottom: 0; } 
.proTable_container .item > .proTSub { font-size: 1.615em; font-weight: 500; margin-bottom: .75em; } 
.proViewTable tbody tr th,
.proViewTable tbody tr td { padding-top: 24px; padding-bottom: 24px; } 
.proViewTable { table-layout: fixed; width: 100%; border-top: 1px solid #000; } 
.proViewTable tbody tr th,
.proViewTable tbody tr td,
.proViewTable tbody tr dt { font-size: 16px; font-weight: 500; line-height: 140%; letter-spacing: -0.32px; } 
.proViewTable tbody tr th { padding-left: 10px; padding-right: 10px; color: #888888; } 
.proViewTable tbody tr { border-bottom: 1px solid #ddd; } 
.proViewTable tbody tr td { padding-left: 16px; padding-right: 16px; } 
.proViewTable tbody tr td dl { display: inline-flex; flex-direction: column; gap: 16px; width: 200px; padding: 24px 12px; } 
.proViewTable tbody tr td dl dd { color: #404040; font-size: 14px; line-height: 130%; letter-spacing: -0.28px; } 
.proViewTable tbody tr:has(dl) th { padding-top: 40px; padding-bottom: 40px; vertical-align: top; } 
.proViewTable tbody tr:has(dl) td { padding: 0; font-size: 0; } 

/* ====== guide ====== */
.privacy_wrap{ }
.privacy_wrap > .label_st{ font-size: 1.063em;}
.privacy_wrap .guideBox{ margin-top: 1.25em; padding-top: 1.25em; border-top: 1px solid #111;}
.guideBox{}
.guideBox .guide_inner{ padding: 3.5rem; background: #fff; box-sizing: border-box; border: 1px solid #ddd; border-radius: 1rem;}
.guideBox .guide_inner.scroll{ height: 35svh; overflow-y: scroll;}
.guideBox .guide_inner div{ margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #ddd;}
.guideBox .guide_inner div:last-of-type{ border-bottom: none;}
.guideBox .guide_inner p{ font-size: 1.063em; margin-bottom: .25rem; line-height: 1.6;}
.guideBox .guide_inner p:last-of-type{ border-bottom: none;}
.guideBox .guide_inner .tit{ font-size: 1.515em; font-weight: 700; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 2px solid #111;}
.guideBox .guide_inner strong{ font-size: 1.315em; font-weight: 600; margin-top: 1em; margin-bottom: .5em;}



	/*인사말*/
.greeting_wrapper { display: flex; gap: 6em; } 
.greeting_wrapper .left { width: 45%; overflow: hidden; border-radius: 1em; } 
.greeting_wrapper .left > .imgCon { width: 100%; height: 50rem;} 
.greeting_wrapper .left > .imgCon img { width: 100%; height: 100%; object-fit: cover; border-radius: 1em; overflow: hidden;} 
.greeting_wrapper .right { width: 55%; } 
.greeting_wrapper .right > .txtTop { margin-bottom: .5em } 
.greeting_wrapper .right > .txtTop > .tit { font-size: 2.615em; font-weight: 700; color: var(--siteC);} 
.greeting_wrapper .right > .txtTop > .sub_tit { font-size: 1.315em; margin: 1em 0 2em 0; font-weight: 600; margin-top: .75em; } 
.greeting_wrapper .right > .txtArea { } 
.greeting_wrapper .right > .txtArea > .tt { font-size: 1.15em; line-height: 1.6; color: #666; margin-bottom: 1.5em; } 
.greeting_wrapper .right > .txtArea > .tt:last-of-type { margin-bottom: 0em; } 
.greeting_wrapper .right > .txtArea > .ceo { font-size: 1.215em; line-height: 1; font-weight: 500; margin-top: 2em; align-items: end; } 
.greeting_wrapper .right > .txtArea > .ceo > i { font-size: 1.415em; letter-spacing: .2em; font-weight: 700; vertical-align: baseline; margin-left: .25em; } 
.greeting_wrapper .right > .txtArea > .ceo > span { margin-right: .25em; }