@charset "utf-8"; /* CSS Document */
.box0 { padding:0 8vw } 
.box1 { width:1400px; margin:0 auto; max-width:94% } 
.box2 { width:1320px; margin:0 auto; max-width:94% } 
.box3 { width: 1600px; margin: 0 auto; } 

.gnb li.m_hide { display:none } 
body:not(.pop) { display:flex; flex-direction:column; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100) } 

#header { position:fixed; left:0; top:0; width:100%; z-index:1000; color:#fff; transition: transform 1s } 
#header .top_wrap { position:relative } 
#header .top_wrap .wrapH,
#header .top_wrap .gnb_wrap .dp1 { height:6em } 
.headerT { padding-top:6em } 
#header .top_wrap .wrapIn { display:flex; align-items:center; justify-content:space-between; gap:0 2vw } 
#header .top_wrap .wrapIn > * { position:relative; z-index:2 } 
#header .top_wrap .logo > a { display:block; height:3.15em; overflow:hidden; filter:brightness(0) invert(1) } 
#header .top_wrap .logo > a .in { display:block; height:100% } 
#header .top_wrap .logo > a img { height:100%; display:block } 
#header .top_wrap .gnb_wrap { } 
#header .top_wrap .gnb_wrap .gnb { justify-content:center; padding-left: 8.5em; } 
#header .top_wrap .gnb_wrap .gnb > li { width: 11em; position:relative } 
#header .top_wrap .gnb_wrap .gnb > li .dp1 .in { position:relative } 
#header .top_wrap .gnb_wrap .gnb > li .dp1 .in:after { content:""; position:absolute; left:50%; bottom:calc(100% + .5em); width:1px; height:0; border-radius:50%; background:#fff; transition:.3s } 
#header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .in:after,
#header .top_wrap .gnb_wrap .gnb > li.on .dp1 .in:after { height:2em } 

#header .top_wrap .etc_wrap { display:flex; align-items:center; gap:0 3em; } 
#header .top_wrap .etc_wrap .lang { display:flex; gap:0 2em } 
#header .top_wrap .etc_wrap .lang > li > a { display:flex; align-items:center; gap:0 .25em } 
#header .top_wrap .etc_wrap .lang > li > a .tt { font-size:1.125em; font-weight:800; opacity:.5 } 
#header .top_wrap .etc_wrap .lang > li.on > a:before { font-family:xeicon; content:"\e9d1"; font-size:1.125em } 
#header .top_wrap .etc_wrap .lang > li.on > a .tt { opacity:1 } 
#header .top_wrap .etc_wrap .etcBtn { display:flex; align-items:center; justify-content:center; width:2em; height:2em; cursor: pointer } 
#header .top_wrap .etc_wrap .etcBtn .ico { font-size:2em } 

#header .top_wrap .gnb_wrap { position:absolute; left:0; top:0; width:100%; z-index:1; height:auto } 
#header .top_wrap .gnb_wrap .gnb > li { position:relative } 
#header .top_wrap .gnb_wrap .gnb > li .dp1 { padding: 0 1em; } 
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > .layer,
#header .top_wrap .gnb_wrap .gnb > li .dp1.layer { display: none; } 
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va { position:relative; text-transform:uppercase } 
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after { content:""; position:absolute; left:100%; bottom:100%; width:.375em; height:.375em; transform:translate(50%, 0); border-radius:50%; background:#fff; transition:.3s; opacity:0 } 
#header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va:after,
#header .top_wrap .gnb_wrap .gnb > li.on .dp1 .va:after { opacity:1 } 
#header .top_wrap .gnb_wrap .gnb > li .dp1 .tt { font-weight:600; font-size:1.25em } 
#header .top_wrap .gnb_wrap .gnb > li .dp2 { display:none; flex-direction:column; padding:1em 0 2.5em 0; } 
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a { padding:.5em } 
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .in { position:relative } 
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .in:after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:#fff } 
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a:hover .in:after { width:100%; transition:.5s } 
#header .top_wrap .gnb_wrap .gnb > li .dp3,
#header .top_wrap .gnb_wrap .gnb > li .mLink { display:none } 

#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a:hover .va:after { width:100%; transition:.5s } 
#header .top_wrap .gnb_wrap .gnb > li .dp3,
#header .top_wrap .gnb_wrap .gnb > li .mLink { display:none } 

.sub #header { color: #111; } 
.sub #header:hover { color: #fff; } 
.sub #header:hover .top_wrap .logo > a { filter:brightness(0) invert(1) } 
.sub #header .top_wrap .logo > a { filter: none; } 

.sub #header .top_wrap .gnb_wrap .gnb > li .dp1 .in:after { background: var(--siteC); } 
.sub #header:hover .top_wrap .gnb_wrap .gnb > li .dp1 .in:after { background: #fff; } 

#header:hover .gnb_wrap:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); backdrop-filter:blur(1em) } 
#header .gnb_wrap .gnb > li { /*min-width:12em; transition:min-width .5s*/ } 
.load #header .gnb_wrap:not(:hover) .gnb > li { min-width:0 } 
#header .gnb_wrap:hover .gnb > li .dp2 { display:block; text-align: center; } 
#header .gnb_wrap:hover .gnb > li:hover,
#header .gnb_wrap:hover .gnb > li:hover .dp1 { background:rgba(0,0,0,.1) } 

#header .all_wrap .all_layer { position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; transform: translateX(100%); opacity:0; color: #fff; visibility:hidden; pointer-events:none; transition: .65s; } 
#header .all_wrap .all_layer .all_inner { position:relative; width:100%; min-height:100%; overflow:hidden; } 
#header .all_wrap .all_layer .all_inner:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .45); content: ''; } 
#header .all_wrap .all_layer .all_inner > .wrap_in { flex:1; padding:13vh 20em 6vw; overflow:hidden; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .site_mapT { margin-bottom: 6em; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .site_mapT .all_Mbtn { cursor: pointer; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .site_mapT .all_Mbtn > .ico { font-size: 2em; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .site_mapT > p { font-size: 3.65em; font-weight: 900; } 
#header .all_wrap .all_layer .all_inner > .wrap_bg .img { flex:1; } 
#header .all_wrap .all_layer .wrap_in { opacity:0; transform:translateY(2em); } 
#header .all_wrap .all_layer .wrap_middle .gnb { display:block; } 
#header .all_wrap .all_layer .wrap_middle .gnb li a { position:relative; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_products .dp2 { flex-wrap: wrap; gap: 1em 0; } 
#header .all_wrap .all_layer .wrap_middle .gnb li .dp3 { display: none; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li + li { margin-top:4em; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 { display:inline-block; text-align:left !important; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt { font-size:2.000em; font-weight:600; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 { margin-top:1.5em; align-items:center; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li:not(:last-child) > a:after { content:""; margin:0 1.5em; width:1px; height:1em; background:rgba(0,0,0,.2); } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .tt { font-size:1.063em; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li.act > a .tt { text-decoration:underline; } 
#header .all_wrap .all_layer .wrap_bottom { opacity:0; } 
#header .all_wrap .all_layer .all_ph .cs { padding:.5em 0; font-size:1.375em; font-weight:700; } 

.allGnbOn { overflow-y:hidden } 
.allGnbOn body { overflow-y:scroll } 
.allGnbOn #header .all_wrap .all_layer:before { } 
.allGnbOn #header .top_wrap .etc_wrap .etcBtn .xi-bars:before { content:"\e921" !important; } 
.allGnbOn #header .top_wrap .etc_wrap .all_wrap { padding-right: 13em; } 
.allGnbOn #header .top_wrap .etc_wrap .etcBtn { z-index:999; position:fixed; color: #fff; top: 7em; display: none; } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 { padding-bottom: 2.5em; } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1.layer { display: none; } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li { padding: 3em; box-sizing: border-box; border-left: 1px solid rgba(255,255,255, .15); } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li:last-of-type { border-right: 1px solid rgba(255,255,255, .15); } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt { font-size: 2.15em; font-weight: 800; text-transform: uppercase; } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .tt { color: #fff; opacity: .85; } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a:hover .tt { opacity: 1; } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 .layer { display: none; } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li + li { margin-top: 0em; } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 { flex-direction: column; align-items: start; text-align: left; } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li { padding-bottom: 1em; } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li:last-of-type { padding-bottom: 0em; } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li:not(:last-child) > a:after { margin: 0em; } 

.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb { display: flex; flex-wrap: wrap; } 
.allGnbOn #header .all_wrap .all_layer .wrap_middle .gnb > li { flex: 1 1 25%; max-width: 25%; } 

.allGnbOn #header .all_wrap .all_layer { z-index:99; opacity:1; visibility:visible; pointer-events:all; transform: translateX(0%); } 
.allGnbOn #header .all_wrap .all_layer .all_inner > .wrap_bg { opacity:1; transition:4s; transition-delay:.2s; } 
.allGnbOn #header .all_wrap .all_layer .wrap_in { opacity:1; transform:translate(0); transition:.65s; transition-delay:.6s; } 


.gsSplit > i { min-width:.375em; transform:translateY(0); opacity:0 } 
.gsSplit.on > i { animation-name: splitAni; animation-duration: 1s; animation-fill-mode: forwards; } 
@keyframes splitAni { 50% { transform:translateY(-.5em); opacity:0 } 
100% { transform:translateY(0); opacity:1 } 
 }

#contents { } 
#contents .sub_top_wrap { box-sizing:border-box; display:flex; flex-direction:column } 
#contents .sub_top_wrap .visual_wrap { height:55vh; position:relative; overflow:hidden; transition:.5s } 
html:not(.scroll) #contents .sub_top_wrap .visual_wrap { padding:0 } 
#contents .sub_top_wrap .visual_wrap .wrapIn { position:relative; height:100% } 
#contents .sub_top_wrap .visual_wrap .bg { position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000; opacity: 0; transform: translateX(4.5em); transition:.3s; } 
#contents .sub_top_wrap .visual_wrap .bg:before { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0, .15); content: ''; } 
#contents .sub_top_wrap .visual_wrap .con_wrap { height:100%; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; box-sizing:border-box } 
#contents .sub_top_wrap .visual_wrap .con_wrap .t1 { font-size: 3.65em; font-weight: 700; } 
#contents .sub_top_wrap .visual_wrap .slogan { position:relative; flex:1 1 0%; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2em 0 } 
#contents .sub_top_wrap .visual_wrap .slogan .t1 { font-weight:700; font-size:3em; text-transform:uppercase; letter-spacing:-.025em; padding-left:.025em; line-height:1 } 
#contents .sub_top_wrap .visual_wrap .slogan .sub-slogan { font-size: 1.45em; font-weight: 500; padding: 0 4vw; } 
.load #contents .sub_top_wrap .visual_wrap .bg { animation: 1.5s subVisual cubic-bezier(0.39, 0.58, 0.57, 1) forwards; } 

#contents .sub_top_wrap .tit_wrap { } 
#contents .sub_top_wrap .tit_wrap .wrapIn { display:flex; flex-direction: column-reverse; align-items:center; height:20em; } 
#contents .sub_top_wrap .tit_wrap .wrapIn .tit { margin-bottom: 2.5em; } 
#contents .sub_top_wrap .tit_wrap .tit .t1 { font-size:5.85em; font-weight:700 } 
#contents .sub_top_wrap .nav { display:flex; gap: 2.8em; align-items:center; margin-bottom: 1.5em; } 
#contents .sub_top_wrap .nav > li { position:relative; text-transform:uppercase; font-weight: 600; } 
#contents .sub_top_wrap .nav > li:not(.home):before { /*content:"-"; font-family:xeicon; */ width: 20px; height: 1px; background: #111; margin: 0 .5em; content: ''; position: absolute; left: -42px; top: 50%; transform: translateY(-50%); } 
#contents .sub_top_wrap .nav > li.home { color:var(--siteC) } 
#contents .sub_top_wrap .nav > li.home > a { width:1.5em; height:1.5em; border-radius:50%; color: var(--siteC); display:flex; align-items:center; justify-content:center } 
#contents .sub_top_wrap .nav > li.home > a .xi { font-size:1.45em } 
#contents .sub_top_wrap .sub_tab { position: absolute; bottom: 0; width:100%; background: rgba(0,0,0, .2); backdrop-filter: blur(2px); box-shadow: 6px 0 18px rgba(0,0,0,.05); } 
#contents .sub_top_wrap .sub_tab .gnb > li { width:100% } 
#contents .sub_top_wrap .sub_tab .gnb .dp2 { justify-content:center } 
#contents .sub_top_wrap .sub_tab .gnb .dp2 > li { position: relative; flex: 1; max-width: 20%; } 
#contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on:after { position: absolute; top: 0; width: 100%; height: 3px; background: #fff; content: ''; } 
#contents .sub_top_wrap .sub_tab .gnb .dp2 > li:last-of-type:before { display: none; } 
#contents .sub_top_wrap .sub_tab .gnb .dp2 > li:before { position: absolute; right: 0; width: 1px; height: 20px; background: rgba(255,255,255, .35); content: ''; top: 50%; transform: translateY(-50%); } 
#contents .sub_top_wrap .sub_tab .gnb .dp2 > li > a { display:flex; align-items:center; letter-spacing: .03em; justify-content:center; font-size: 1.25em; font-weight: 500; color: #fff; opacity: .65; height:4.25em; padding:0 .5em; transition: .15s; position:relative } 
#contents .sub_top_wrap .sub_tab .gnb .dp2 > li > a:hover { opacity: 1; transition: .15s; } 
#contents .sub_top_wrap .sub_tab .gnb .dp2 > li > a .va { font-weight:600; font-size:1.125em; opacity:.7; position:relative; z-index:1 } 
#contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on > a { color:#fff; opacity: 1; } 
#contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on > a:after { content:""; position:absolute; left:0; bottom:0; width:100%; height:100%; } 
#contents .sub_top_wrap .sub_tab .gnb .dp2 > li:hover > a .va,
#contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on > a .va { opacity:1; } 
#contents .sub_top_wrap .sub_tab .gnb .dp2 > li > .layer { display: none; } 

.dp1on .gnb .dp2 { display:none!important } 
.dp2on .gnb > li,
.dp2on .gnb > li .dp1,
.dp2on .gnb > li .dp3 { 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 } 

.scroll.up #header { background:rgba(0,0,0,.5); color: #fff; } 
.scroll.up #header .top_wrap .logo > a { filter: brightness(0) invert(1) !important; } 
.scroll.up #header .top_wrap .wrapH,
.scroll.up #header .top_wrap .gnb_wrap .dp1 { height:4em } 
.scroll.up .headerT { padding-top:4em } 
.scroll:not(.up) #header { transform:translateY(-100%) } 

/*footer*/
.main #footer { position:relative; } 
#footer { background:#111; color:#fff; } 
#footer .footer_wrap { gap:2em; padding:4em 0; } 
#footer .footer_wrap .info { flex:1; } 
#footer .footer_wrap .info > li { position:relative; float: left; margin-right: 2em; margin-bottom: .75em; } 
#footer .footer_wrap .info > li.br { clear: left; } 
#footer .footer_wrap .info > li .tt { font-size:1.063em; font-weight:300; vertical-align: baseline; display: flex; } 
#footer .footer_wrap .info > li:not(.tit) .tt { opacity:.7; } 
#footer .footer_wrap .info .tit,
#footer .footer_wrap .info .copy { width:100%; } 
#footer .footer_wrap .info .tit .tt { font-weight:500; } 
#footer .footer_wrap .info .copy { margin-top:2.5em; } 
#footer .footer_wrap .info .copy .tt { font-size:.875em; text-transform:uppercase; opacity:.4 !important; } 
#footer .footer_wrap .menu { padding:0 2em; text-align:right; } 
#footer .footer_wrap .menu > li .in { position: relative; display:block; padding:.375em 0; } 
#footer .footer_wrap .menu > li .in .tt { font-size:1.063em; } 
#footer .footer_wrap .info > .logo { margin-bottom: 1em; } 
#footer .footer_wrap .info > .logo > img { width: 14em; filter: var(--white); opacity: .9; margin-bottom: 1.5em;} 
#footer .footer_wrap .menu > li .in > i { position: absolute; padding-left: .5em; } 
#footer .footer_wrap .menu > li .in:hover .tt { text-decoration:underline; } 

.sns_st { display:flex; gap:.5em } 
.sns_st > li > a { display:flex; align-items:center; justify-content:center; width:2.5em; height:2.5em; color:#fff; border-radius:50%; transition:.3s } 
.sns_st > li > a:hover { background:#fff; color:#111 } 

.sns_st > li > a .tt { display: none; } 

#contents .doc { padding: 6.5em 0 10em 0; } 
#contents .doc.pt0 { padding: 0em 0 10em 0; } 
#contents .doc.pb0 { padding: 3em 0 0em 0; } 

/**/
div.visualSlider { position: fixed; left:0; top:0; width:100%; margin:0 } 
.scroll div.visualSlider { z-index:-1 } 
.vod_wrap { position:relative } 
.vod_wrap .vod { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover } 
.vod_wrap .layer { position:absolute; left:0; top:0; width:100%; height:100% } 
.visualSlide_wrap { position: fixed; left:0; top:0; width:100%; margin:0 } 
.scroll div.visualSlide { z-index:-1 } 
.visualSlide .el { position: relative; overflow:hidden; height:100vh; background:#fff } 
.visualSlide .el:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .25); content: ''; z-index: 1; } 
.visualSlide .el .bg { position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.2) } 
.visualSlide .el .vod_wrap { position:relative; height:100% } 
.visualSlide .el.swiper-slide-active .vod_wrap:after,
.visualSlide .el.swiper-slide-duplicate-active .vod_wrap:after { transition:2s; opacity:.2 } 
.visualSlide .el.swiper-slide-active .bg,
.visualSlide .el.swiper-slide-duplicate-active .bg { transition:7s; transform:scale(1) rotate(.001deg) } 
.visualSlide .el:nth-child(3n - 2) .bg { height:110%; transform:scale(1) } 
.visualSlide .el.swiper-slide-active:nth-child(3n - 2) .bg,
.visualSlide .el.swiper-slide-duplicate-active:nth-child(3n - 2) .bg { transform:translateY(-9.0909%) rotate(.001deg) } 
.visualSlide .el:nth-child(3n - 1) .bg { width:110%; transform:scale(1) } 
.visualSlide .el.swiper-slide-active:nth-child(3n - 1) .bg,
.visualSlide .el.swiper-slide-duplicate-active:nth-child(3n - 1) .bg { transform:translateX(-9.0909%) rotate(.001deg) } 

.visualSlideSlogan_wrap { position:absolute; left:0; width:100%; height:50%; bottom:0; box-sizing:border-box; z-index:10; color:#fff } 
.visualSlideSlogan_wrap .wrapIn { display:flex; flex-direction:column; height:100% } 
.visualSlide_wrap .slogan .mark { width: 4em; margin-bottom: 3em; } 
.visualSlide_wrap .slogan { margin-bottom:auto; text-align:left; /*transform:translateY(-60%)*/ } 
.visualSlide_wrap .slogan .t1 { font-size:4.25em; text-transform:uppercase; font-weight:900; line-height:1.2; margin-bottom: .15em; } 
.visualSlide_wrap .slogan .t2 { font-size:1.375em; text-transform:uppercase; margin:2em 0 0 0 } 
.visualSlide_wrap .slogan .ani { overflow:hidden; line-height:1; } 
.visualSlide_wrap .slogan .ani > i { transform:translateY(100%); } 
.load .visualSlide_wrap .slogan .ani > i { transform:translateY(0); transition:1s } 
.load .visualSlide_wrap .slogan .ani.d1 > i { transition-delay:.5s } 
.load .visualSlide_wrap .slogan .ani.d2 > i { transition-delay:1s } 
.load .visualSlide_wrap .slogan .ani.d3 > i { transition-delay:1.5s } 
.visualSlide_control { margin-top:2em; display:flex; align-items:flex-end; width:100%; } 
.visualSlide_control .control { margin:0 0 1em auto } 
.visualSlide_control .paging { width:5em; text-align:center; } 
.visualSlide_control .paging .swiper-pagination-current { font-weight:700 } 

.mainScroll { color:#fff } 
.mainScroll .line { position:relative; display:block; height:4em; overflow:hidden } 
.mainScroll .line:before { content:""; position:absolute; left:50%; top:0; height:100%; width:1px; background:#fff; } 
.mainScroll .dot { position:absolute; left:50%; transform:translateX(-50%); top:0; width:.5em; height:.5em; background:#fff; border-radius:50% } 
.mainScroll .tt { display:block; transform:rotate(90deg); font-size:.75em; margin:0 0 2.5em 0 } 
.mainScroll .tt .xi { font-size:1.5em; margin-right:.25em } 

.main_contents { overflow:hidden } 
.main_box { padding:5em 0 6em 0 } 

.main_tit { margin-bottom:2em; display:flex; flex-direction:column; align-items:flex-start; gap:1em 0 } 
.main_tit .tit .t1 { font-weight:900; font-size:4.5em; letter-spacing:-.025em; word-spacing:.075em } 
.main_tit .tit .t1.s1 { font-size:3.75em } 
.main_tit .tt .t1 { font-size:1.313em; line-height:1.5 } 
.main_tit .main_more { margin-top:2em } 
.main_tit.white { color:#fff; } 
.main_tit.hc { margin-left:auto; margin-right:auto } 
.main_tit.vc { margin-top:auto; margin-bottom:auto } 

.main_more { padding:.75em 1.5em; border:1px solid #111; display:inline-flex; align-items:center; gap:1em } 
.main_more:after { content:"+" } 
.main_more .t1 { font-size:1.063em } 
.main_more.white { border-color:#fff; color:#fff } 

.mainFlex { display:flex; gap:4em; align-items:flex-start; position:relative; box-sizing:border-box } 
.mainFlex .wrapTit { width:30%; position:sticky; left:0; top:0; padding:5em 0; box-sizing:border-box } 
.mainFlex .wrapCon { flex:1 1 0%; min-width:0 } 

.main_box { padding:5em 0 } 

.main_brand { padding:10em 0; margin-top:100vh; background:#061631; position:relative; overflow: hidden; } 
.main_brand .wrapBg { position:absolute; left:0; bottom:0; width:100%; height:100% } 
.main_brand .list { display:flex; flex-direction:column } 
.main_brand .list > li { width:55% } 
.main_brand .list > li:nth-child(odd) { margin-left:auto } 
.main_brand .list > li .wrap_in .imgW { overflow:hidden; border-radius:50%; position:relative } 
.main_brand .list > li .wrap_in .imgW:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.4 } 
.main_brand .list > li .wrap_in .imgW .resize { padding-bottom:100% } 
.main_brand .list > li .wrap_in .imgW .resize .vod { position:relative; top: -1em; object-fit: cover; width:105%; height:110%; } 
.main_brand .list > li .wrap_in .conW { color:#fff; position:relative; padding:2em 0 } 
.main_brand .list > li .wrap_in .conW .tit { position:absolute; left:0; bottom:100%; display:inline-flex } 
.main_brand .list > li .wrap_in .conW .tit .t1 { font-size:5em; line-height: 1.1; text-transform: uppercase; font-weight:900; letter-spacing:-.063em } 
.main_brand .list > li .wrap_in .conW .tt { position:relative; padding-left:1.5em } 
.main_brand .list > li .wrap_in .conW .tt:before { content:""; position:absolute; left:0; top:0; width:4px; height:100%; background:#fff } 
.main_brand .list > li .wrap_in .conW .tt .t1 { font-size:1.125em; line-height:1.4 } 

.mainFix { background:#fff; position:relative; text-overflow: hidden;} 
.mainFix .wrapTit { height:16em; position:sticky; overflow: hidden; left:0; top:0; text-align:center; transform-origin:center top; display:flex; align-items:center; justify-content:center } 
.mainFix .wrapTit .t1 { font-size:4em; font-weight:100; line-height:1; text-transform:uppercase; letter-spacing:-.05em; word-spacing:.125em } 
.mainFix .wrapTit .t1 .point { font-weight:900; vertical-align:top } 
.mainFix .wrapCon .fixImg { position:sticky; left:0; top:16em; height:100%; width:100%; transform-origin:center center; height:calc(100vh - 16em); z-index:1 } 

.mainFix .fixImg { position:sticky; left:0; top:0; height:100%; box-sizing:border-box; width:100%; transform-origin:center top } 
.mainFix .fixImg .wrap_in { position:relative; height:100% } 
.mainFix .fixImg .wrap_in .list { position:relative; height:100%; overflow:hidden } 
.mainFix .fixImg .fixT { position:absolute; right:100%; bottom:0; padding-right:1em } 
.mainFix .fixImg .fixT .t1 { font-size:4em; writing-mode: vertical-rl; font-weight:900; -webkit-text-stroke: 1px rgba(255,255,255,.5); } 
.mainFix .fixImg .in { position:absolute; left:0; top:100%; width:100%; height:100%; transition:1s } 
.mainFix .fixImg .in.in0 { top:0 } 
.mainFix .fixImg .in.in0:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .25); content: ''; } 
.mainFix.on1 .wrapCon .fixImg .in1,
.mainFix.on2 .wrapCon .fixImg .in2 { top:0 } 
.mainFix .wrapCon .con_wrap { position:relative } 
.mainFix .scrollEl { height:100vh; opacity:0 } 
.on0 .scrollEl.el0,
.on1 .scrollEl.el1,
.on2 .scrollEl.el2 { opacity:1; transition:1s } 

.main_about .aboutW { color:#fff; height:100% } 
.main_about .aboutW .wrapIn { height:100%; box-sizing:border-box; padding:4em 0 6em 0; display:flex } 

.main_prod { padding:8em 0; background-attachment:fixed; overflow:hidden; position:relative } 
.main_prod #horizontal { display:inline-flex; flex-direction:column; box-sizing:border-box; height:100vh } 
.main_prod #horizontal .list { flex:1 1 0%; min-height:0; display:inline-flex; gap:0 2em } 
.main_prod #horizontal .panel { width:16vw; box-sizing:border-box; display:flex; align-items:center } 
.main_prod .list .wrap_in { text-align:center; box-sizing:border-box; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center } 
.main_prod .list .wrap_in .img_wrap { box-sizing:border-box; background:#ddd; border-radius:1em; overflow:hidden; box-shadow:0 0 2em rgba(0,0,0,.1) } 
.main_prod .list .wrap_in .con_wrap { padding:2em 1em; text-align:left; box-sizing:border-box; display:flex; flex-direction:column; gap:3em 0; text-align:center } 
.main_prod .list .wrap_in .con_wrap .tit { font-weight:700; font-size:1.25em; line-height:1em; height:3em; overflow:hidden } 
.main_prod .main_tit { padding-top:5em } 

.main_news { background:#fff; position:relative } 
.mainNewsSlide_wrap { overflow:hidden } 
.mainNewsSlide_wrap .control { margin-top:2em; gap:.25em } 
.mainNewsSlide_wrap .control .paging { margin-right:2em } 
.mainNewsSlide { overflow:visible !important } 
.mainNewsSlide .el{ cursor: pointer;}
.mainNewsSlide .el .wrap_in .img_wrap { border-radius:1em; overflow:hidden; position:relative } 
.mainNewsSlide .el .wrap_in .con_wrap { box-sizing:border-box; padding:1.5em 0; display:flex; flex-direction:column; gap:.75em 0 } 
.mainNewsSlide .el .wrap_in .con_wrap .cate { font-weight:700; text-transform:uppercase; font-size:.938em } 
.mainNewsSlide .el .wrap_in .con_wrap .tit { font-size:1.375em; font-weight:700 } 
.mainNewsSlide .el .wrap_in .con_wrap .tt { font-size:1.063em; line-height:1.4; opacity:.8 } 

.main_inquiry { position:relative } 
.main_inquiry .formSt { display:flex; flex-wrap:wrap; gap:1em; filter:brightness(0) invert(1); padding:0 4em } 
.main_inquiry .formSt > li { width:100% } 
.main_inquiry .formSt > li.w1 { width:calc(50% - .5em) } 
.main_inquiry .formSt .wrap_in { display:flex; align-items:center; gap:1em } 
.main_inquiry .formSt .wrap_in > * { flex:1 1 0%; min-width:0 } 
.main_inquiry .formSt .wrap_in .filebox { flex: none; width: 100%; } 
.main_inquiry .formSt .wrap_in .filebox label { background-color: transparent; border: 1px solid rgba(0, 0, 0, .3); border-radius: .3em; } 
.main_inquiry .formSt .input_st { border-color:rgba(0,0,0,.3); background-color:unset; color:#aaa } 
.main_inquiry .formSt .btnW > * { flex:0 0 auto } 
.main_inquiry .formSt .btnW .link { padding:.25em 1.25em; border-radius:2em; border:1px solid rgba(0,0,0,.3); font-size:.875em; font-weight:500 } 
.main_inquiry .formSt .btnW .btn { margin-left:auto; border-width:3px } 

.gsClass.opacity { opacity:0; transition:1.5s } 
.gsClass.opacity.on { opacity:1 } 

.gsClass.move { opacity:0; transition:1.5s } 
.gsClass.move.mT { transform:translateY(20vh) } 
.gsClass.move.mL { transform:translateX(10vw) } 
.gsClass.move.mR { transform:translateX(-10vw) } 
.gsClass.move.on { opacity:1; transform:translate(0) } 

.gsClass.tShow .el { overflow:hidden } 
.gsClass.tShow .el > i { transform:translateY(-100%); transition:1s } 
.gsClass.tShow.on .el > i { transform:translateY(0) } 

.gsClass.imgShow { overflow:hidden; background:rgba(0,0,0,.05); } 
.gsClass.imgShow .el { transition:1s; } 
.gsClass.imgShow.left .el { transform:translateX(-100%) } 
.gsClass.imgShow.right .el { transform:translateX(100%) } 
.gsClass.imgShow.top .el { transform:translateY(-100%) } 
.gsClass.imgShow.bottom .el { transform:translateY(100%) } 
.gsClass.imgShow.on .el { transform:translate(0) } 

.gsClass.listShow .el { transform:translateY(25%); opacity:0; transition:1s } 
.gsClass.listShow.on .el { transform:translateY(0); opacity:1 } 
.gsClass.listShow.on .el:nth-child(1) { transition-delay:.2s } 
.gsClass.listShow.on .el:nth-child(2) { transition-delay:.4s } 
.gsClass.listShow.on .el:nth-child(3) { transition-delay:.6s } 
.gsClass.listShow.on .el:nth-child(4) { transition-delay:.8s } 
.gsClass.listShow.on .el:nth-child(5) { transition-delay:1s } 
.gsClass.listShow.on .el:nth-child(6) { transition-delay:1.2s } 
.gsClass.listShow.on .el:nth-child(7) { transition-delay:1.4s } 
.gsClass.listShow.on .el:nth-child(8) { transition-delay:1.6s } 
.gsClass.listShow.on .el:nth-child(9) { transition-delay:1.8s } 
.gsClass.listShow.on .el:nth-child(10) { transition-delay:2s } 

/***********************sub*************************/

/*sub 공통*/
.wrap_idx { } 
.wrap_idx .tab_con { /*border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; */ } 
.wrap_idx .sub-tab { display: flex; flex-wrap: wrap; /*border: 1px solid #ddd;*/ } 
.wrap_idx .sub-tab > li { position: relative; height: 3.65em; flex: 1 1 24.5%; border: 1px solid #ddd; margin: 0 0 -1px -1px; max-width: 24.5%; background: #f5f5f5; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1em; font-weight: 600; color: #BDBDBD; transition: .3s; } 
.wrap_idx .sub-tab > li:before { position: absolute; bottom: 0; transform: scaleX(0); width: 0%; height: 2px; background: transparent; transition: all .35s; content: ''; } 
.wrap_idx .sub-tab > li:hover:before,
.wrap_idx .sub-tab > li.on:before { transform: scaleX(1); background: var(--siteC2); width: 100%; } 
.wrap_idx .sub-tab > li:hover { color: var(--siteC2); } 
.wrap_idx .sub-tab > li.on { color: var(--siteC2); background: #fff; } 

.con_idx { position:relative } 
.con_idx > .idx { position:absolute; left:0; top:0; width:100%; visibility:hidden; filter:alpha(opacity=0); opacity:0; display: none; } 
.con_idx > .idx.on { position:relative; visibility: visible; filter:alpha(opacity=100); opacity:1; display: block; } 

.stickyT { position: sticky; top: 6.5em; } 
.tupper { text-transform: uppercase; } 
.sub_page_tit { font-size: 2.15em; font-weight: 800; color: #111; margin-bottom: 1em; text-align: left; } 
.sub_page_txt { font-size: 1.1em; font-weight: 400; color: #444; text-align: left; padding-bottom: 1.25em; } 

.page_con { padding: 5em 0; } 
.page_con.bg1 { background: #f5f5f5; } 

.page_dot_list { padding: 0 1.25em; margin-top: 1.25em; } 
.page_dot_list>li { position: relative; margin-bottom: .5em; } 
.page_dot_list>li>.txt { font-size: 1em; } 
.page_dot_list>li:before { position: absolute; left: -13px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); content: ''; } 
.page_dot_list>li:last-of-type { margin-bottom: 0em; } 

.root_daum_roughmap .wrap_controllers{ display: none;}

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

.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; } 

@keyframes subVisual { to { transform: translateX(0); opacity: 1; } 
 }

.slogan_wrap { position:relative; top: 8em; color: #fff; padding: 1.25em 0; text-align: center; border-top: 1px solid #f6f6f670; border-bottom: 1px solid #f6f6f670; margin-top: 2em; } 
.slogan_wrap .h_slogan { font-size: 1.25em; letter-spacing: 2px; font-weight: 600; opacity: .8; } 

/*문의하기*/
.table_form_wrap { } 
.table_form_wrap .form_tit { padding:1em 0 } 
.table_form_wrap .form_tit .t1 { font-weight:700; font-size:1.375em } 
.table_form_wrap .form_tit .t2 { font-weight:700; font-size:1.625em } 
.table_form_wrap .form_tit .t3 { font-weight:500; font-size:1.125em } 
.table_form > li { border-bottom:1px solid #ddd; padding:.75em 0 } 
.table_form > li:first-child { border-top:1px solid #111 } 
.table_form > li.bd0 { border-bottom:none !important } 
.table_form > li.bd1 { border-top:none !important } 
.table_form > li.p1 { padding:1.5em 0; } 
.table_form .wrap_in { display:flex; align-items:center } 
.table_form .wrap_in .ti_wrap,
.table_form .wrap_in .con_wrap { min-height:3em; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; } 
.table_form .wrap_in .tit_wrap { width:12em; gap:.5em 0; padding:0 1.25em; } 
.table_form .wrap_in .ti_wrap { width:12em; gap:.5em 0; padding:0 1.25em; } 
.table_form .wrap_in .tit1 { font-size:1.125em; font-weight:600; } 
.table_form .wrap_in .tit2 { font-size:1.063em; font-weight:600; } 
.table_form .wrap_in .tit3 { font-size:1.000em; font-weight:500; line-height:1.2; } 
.table_form .wrap_in .con_wrap { flex:1 1 0%; min-width:0; gap:.25em; font-size:1.063em; } 
.table_form .wrap_in .con_wrap > * { flex:1 1 0%; min-width:0 } 
.table_form .wrap_in .con_wrap .inp_tt { flex:0 0 auto; font-size:.938em; color:#666; } 
.table_form .wrap_in .con_wrap .input_st { width:100% } 
.table_form .wrap_in .con_wrap .line { padding-top:.75em; margin-top:.75em; border-top:1px solid #ddd } 
.table_form .wrap_in .con_wrap .w1 { flex:0 0 auto; width:3em } 
.table_form .wrap_in .con_wrap .w2 { flex:0 0 auto; width:9em } 
.table_form .wrap_in .con_wrap .w50 { flex:0 0 auto; width:50% } 
.table_form .wrap_in .con_wrap .w100 { flex:0 0 auto; width:100% } 
.table_form .wrap_in .con_wrap .w_auto { flex:0 0 auto } 
.table_form .wrap_in .con_wrap .max1 { max-width:27em } 
.table_form .wrap_in .con_wrap .max2 { max-width:8.375em } 
.table_form .wrap_in .con_wrap .max3 { max-width:23.5em } 
.table_form .wrap_in .con_wrap .min1 { min-width:23.5em } 
.table_form .wrap_in.col { flex-direction:column } 
.table_form .wrap_in.col > * { flex:0 0 auto; width:100% } 
.table_form .wrap_in.col .tit_wrap { padding:0 0; } 

.filebox label { padding: 10px 20px; color: #fff; background-color: #999; cursor: pointer; margin-left: 10px; display: flex; align-items: center; justify-content: center; width: 7.25em; min-width: 6.25em; } 
.filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; } 

.qna_wrap { text-align: center; padding: 3.5em 0; margin-bottom: 2.5em; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } 
.contact_wrap .form_wrap { flex: 1 1 100%; padding: 3.5em; background: #f5f5f5; border-radius: .5em; } 

.qna_wrap .symbol { margin-bottom: .5em; } 
.qna_wrap .symbol > img { width: 3em; } 

.agree_box { transition:.2s; } 
.agree_box:hover,
.agree_box:focus { border-color:#000; } 
.agree_box .agree_wrap { overflow-y:scroll !important; } 
.agree_box .agree_wrap.st2 { height:16em; border: 1px solid #ddd; background: #fff; margin-top: 1em; padding: 2em 2.5em; border-radius: 0.5em; overflow: hidden; box-sizing: border-box; } 
.agree_box .tit { font-size:1.188em; font-weight:500; color:#111; margin-bottom:1em; margin-top:2em } 
.agree_box .tit:first-child { margin-top:0 } 
.agree_box .con { font-size:.875em; color:#666; line-height:1.6 } 
.agree_box .con.hSt { overflow-y:scroll; height:10em; } 
.agree_box .con > * { padding-top:.5em; } 
.agree_box .check { padding: 1em 2em; text-align: center; background: #fff; } 
.agree_box .check .sub_tt { font-size: 1.125em; font-weight: 600; } 
.agree_box .label_st .xi { border: 1px solid var(--siteC); } 

.agree_box_pop { border-radius: .5em; border: 1px solid #ddd; padding: 1.5em 2em; color: #555; line-height: 1.8; font-size: 1.05em; } 

 /*오시는길*/
 .se_gray_box { background: #f2f2f2; padding: 2em 2.5em; border-radius: .5em; } 
 .se_gray_box .gr_list { } 
 .se_gray_box .gr_list > li { margin-bottom: .35em; } 
 .se_gray_box .gr_list > li:last-of-type { margin-bottom: 0em; } 
 .map_wrap { } 
 .map_wrap .cnt_con { margin-bottom: 3em; } 
 .map_wrap .cnt_con:last-of-type { margin-bottom: 0em; } 
 .map_wrap .cnt_con .map_box { } 
 .map_wrap .cnt_con .map_box .c_map { flex: 1 1 50%; } 
 .map_wrap .cnt_con .map_box .c_map > .root_daum_roughmap { width: 100%; } 
 .map_wrap .cnt_con .map_box .c_info { position:relative; flex: 1 1 50%; background: #f5f5f5; padding: 7.5em 4.25em; box-sizing: border-box; } 
 .map_wrap .cnt_con .map_box .c_info .info_box { color: #111; padding-right: 3.5em; } 
 .map_wrap .cnt_con .map_box .c_info .info_box .tit { font-size: 2em; font-weight: 700; margin-bottom: 1em; } 
 .map_wrap .cnt_con .map_box .c_info .info_box .txt { position:relative; padding-left: 1.35em; font-size: 1.35em; opacity: .9; font-weight: 600; line-height: 1.4; } 
 .map_wrap .cnt_con .map_box .c_info .info_box .txt > .xi { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } 
 .map_wrap .cnt_con .map_box .c_info .link_btn { position: absolute; background: var(--siteC); right: 0; height: 100%; top: 0; width: 70px; display: block; padding-bottom: 70px; color: #fff; transition: all 0.4s; box-sizing: border-box; } 
 .map_wrap .cnt_con .map_box .c_info .link_btn:hover { } 
 .map_wrap .cnt_con .map_box .c_info .link_btn .inner_box { display: table; width: 100%; height: 100%; } 
 .map_wrap .cnt_con .map_box .c_info .link_btn .inner_box .inner { display: table-cell; vertical-align: middle; } 
 .map_wrap .cnt_con .map_box .c_info .link_btn .ibox { position: absolute; bottom: 0; height: 70px; border-top: 1px solid rgba(255,255,255, .2); width: 100%; display: block; content: ''; } 
 .map_wrap .cnt_con .map_box .c_info .link_btn .ibox .xi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 
 .map_wrap .cnt_con .map_box .c_info .link_btn .tit_wrap > span { display: block; width: 100%; text-align: center; font-size: 18px; line-height: 1.2; } 
 .map_wrap .cnt_con .map_box .c_info .link_btn .tit_wrap > .op { opacity: .6; } 
 .map_wrap .cnt_con .map_box .c_info .info_box .info_list { margin-top: 1em; } 
 .map_wrap .cnt_con .map_box .c_info .info_box .info_list > li { margin-bottom: .3em; font-size: 1.05em; font-weight: 500; opacity: .75; } 
 .map_wrap .cnt_con .map_box .c_info .info_box .info_list > li:last-of-type { margin-bottom: 0em; } 
 .map_wrap .cnt_con .map_box .c_info .info_box .info_list > li > span { } 
 
 .root_daum_roughmap { width: 100%; } 

/*인사말*/
.g_img_con { margin-bottom: 6em; } 
.g_img_con.wrapImg { width: 60%; transition: all 2s; } 
.g_img_con.wrapImg { background: url(../images/sub/greeting_img01.jpg) no-repeat center / cover; height: 420px; margin: 0 auto; } 
.g_img_con.in-view { width: 100%; } 
.g_img_con > img { width: 100%; height: 100%; } 
.gree_box { gap: 5em; } 
.gree_box .profile_con { width: 50%; gap: 1.5em; } 
.gree_box .profile_con .info { } 
.gree_box .profile_con .info .name { font-size: 1.45em; font-weight: 600; padding: .65em 0; border-bottom: 1px solid #ddd; } 
.gree_box .profile_con .profile_img { width: 16em; } 
.gree_box .profile_con .profile_img > img { width: 100%; } 
.gree_box .con { width: 50%; } 
.gree_box .con .tit { font-size: 24px; font-weight: 700; line-height: 1.6; } 
.gree_box .con .tt { font-size: 20px; line-height: 1.6; font-weight: 400; color: #444; } 
.gree_box .con .from { margin-top: 1.5em; font-size: 1.35em; font-weight: 500; } 
.gree_box .con .from > span { vertical-align: baseline; font-size: 1.5em; margin-left: .15em; font-weight: 800; } 

/*연혁*/
.his_wrap { } 
.his_wrap .his_topC { position: relative; background: url(../images/sub/his_bg.jpg) no-repeat; background-size: cover; padding: 7.65rem 0 7.65rem; background-position: 50% 50%; border-radius: 1rem; } 
.his_wrap .his_topC:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 1rem; background: rgba(0,0,0, .2); content: ''; } 
.his_wrap .his_topC .his_tit_con { position:relative; padding: 0 5em; z-index: 2; } 
.his_wrap .his_topC .his_tit_con .tit { font-size: 2.5rem; letter-spacing: -0.05em; color: #fff; font-weight: 800; line-height: 1.3; } 
.his_wrap .his_topC .his_tit_con .txt { font-size: 1.1rem; letter-spacing: -0.05em; font-weight: 600; color: rgba(255,255,255, .6); margin-top: 1.8rem; } 
.his_wrap .con_idx { padding: 0 4em; margin-top: 4em; } 
.his_wrap .his_infoW { gap: 3em; } 
.his_wrap .his_infoW .tit_year { flex: 1 1 35%; } 
.his_wrap .his_infoW .tit_year { } 
.his_wrap .his_infoW .tit_year > .tt { font-size: 3.85rem; letter-spacing: -2px; font-weight: 800; color: #111; } 
.his_wrap .his_infoW .info_list { flex: 1 1 65%; padding-top: 1em; } 
.his_wrap .his_infoW .info_list > li { margin-bottom: 4.5em; } 
.his_wrap .his_infoW .info_list > li:last-of-type { margin-bottom: 0em; } 
.his_wrap .his_infoW .info_list > li > .in { gap: 2em; } 
.his_wrap .his_infoW .info_list > li > .in .info_year { position:relative; width: 13em; display: flex; align-items: center; } 
.his_wrap .his_infoW .info_list > li > .in .info_year:before { position: absolute; right: 0; width: 90px; height: 1px; background: #111; content: ''; } 
.his_wrap .his_infoW .info_list > li > .in .info_year > .tt { font-size: 2.1em; font-weight: 900; } 
.his_wrap .his_infoW .info_list > li:first-of-type .in .info_year > .tt { color: #1e15a7; } 
.his_wrap .his_infoW .info_list > li > .in .in_infoL { padding-top: .5em; flex: 1; } 
.his_wrap .his_infoW .info_list > li > .in .in_infoL > li { margin-bottom: .85em; } 
.his_wrap .his_infoW .info_list > li > .in .in_infoL > li:last-of-type { margin-bottom: 0em; } 
.his_wrap .his_infoW .info_list > li > .in .in_infoL > li > .iarea { gap: 1.5em; } 
.his_wrap .his_infoW .info_list > li > .in .in_infoL > li > .iarea .month { } 
.his_wrap .his_infoW .info_list > li > .in .in_infoL > li > .iarea .month .tt { font-size: 1.1em; font-weight: 700; color: #111; font-size: 1.15em; } 
.his_wrap .his_infoW .info_list > li:first-of-type > .in .in_infoL > li > .iarea .month .tt { color: #1e15a7; } 
.his_wrap .his_infoW .info_list > li > .in .in_infoL > li > .iarea .txt { text-align: left; font-weight: 500; color: #444; font-size: 1.15em; } 
.his_wrap .his_infoW .info_list > li > .in .in_infoL > li > .iarea .txt .img_con { width: 100%; max-height: 15em; margin-top: 1em; } 
.his_wrap .his_infoW .info_list > li > .in .in_infoL > li > .iarea .txt .img_con > img { width: 100%; height: 100%; object-fit: cover; } 
.his_wrap .his_topC .his_tab_con { position:relative; top: 5em; } 
.his_wrap .his_topC .his_tab_con:before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: rgba(255, 255, 255, 0.1); } 
.his_wrap .his_topC .his_tab_con .his-tab { padding: 0 4em; } 
.his_wrap .his_topC .his_tab_con .his-tab > li { width: auto; background: none; border:0; margin-right: 2rem; cursor: pointer; } 
.his_wrap .his_topC .his_tab_con .his-tab > li:before { display: block; content: ""; width: 100%; background: #fff; height: 3px; opacity:0; } 
.his_wrap .his_topC .his_tab_con .his-tab > li:first-child { border-left:0; } 
.his_wrap .his_topC .his_tab_con .his-tab > li.on { background: none; } 
.his_wrap .his_topC .his_tab_con .his-tab > li.on:before { opacity:1; } 
.his_wrap .his_topC .his_tab_con .his-tab > li > .tab_btn { height: auto; padding: 2.5rem 0; color: rgba(255,255,255, .6); font-weight: 700; letter-spacing: -0.02em; font-size: 1.25rem; } 
.his_wrap .his_topC .his_tab_con .his-tab > li.on > .tab_btn { color: #fff; } 

.his_wrap{ position:relative; gap: 2em;}
.sub_container .contentBox { flex: 1 1 85%; } 
.sub_container .sub_menu{ height: 100%; flex: 1 1 15%;}
.sub_container .linkScroll_wrap{ position: relative;}
.sub_title .breadcrumb-box {min-height: 540px; } 
.sub_title .breadcrumb-box .breadcrumb-content p {font-size: 20px;font-weight: 400;line-height: 32px;letter-spacing: -0.2px; } 
.sub_title .breadcrumb-box .breadcrumb-content h3 {margin-top: 13px;font-size: 48px;font-weight: 800;line-height: 72px;letter-spacing: -0.48px; } 
.sub_title .breadcrumb-box .breadcrumb-content span {display: block;margin-top: 10px;font-size: 18px;opacity: 0.5;line-height: 30px;letter-spacing: -0.18px; } 
.sub_title .breadcrumb-box .breadcrumb-content span+p {margin-top: 36px;font-size: 20px;font-weight: 400;line-height: 34px;letter-spacing: -0.2px; } 
.sub_container .sub_menu ul li {margin-bottom: 30px; } 
.sub_container .sub_menu ul li a {color: #979797; padding: 0; font-size: 1.25em; font-weight: 600; transition: .2s} 
.sub_container .sub_menu ul li a.on{ color: #111; font-weight: 700;}
.sub_container .history_ctt {border-top: 1px solid #E9E9E9;padding: 60px 0 58px;display: flex; opacity: 0.1;transition: 0.3s; } 
.sub_container .history_ctt.on {opacity: 1; } 
.sub_container .history_ctt h4 {width: 320px;color: #171717;font-size: 60px;font-weight: 800;line-height: 80px;letter-spacing: -0.6px;transition: 0.3s; } 
.sub_container .history_ctt.on h4 {font-size: 72px; letter-spacing: -0.72px; } 
.sub_container .history_ctt ol {width: calc(100% - 320px); } 
.sub_container .history_ctt li+li {margin-top: 17px; } 
.sub_container .history_ctt div {display: flex; } 
.sub_container .history_ctt strong {color: #171717;font-size: 16px;font-weight: 800;line-height: 28px;letter-spacing: -0.16px;margin-right: 20px; } 
.sub_container .history_ctt img {margin-top: 40px;max-width: 100%; } 
.sub_container .history_ctt span {color: #646464;font-size: 18px;line-height: 30px;letter-spacing: -0.18px; } 

/*인증서*/
.certi_list { margin: 0 0 -2.5em -1em; } 
.certi_list > li { flex: 1 1 25%; max-width: 25%; } 
.certi_list > li > .in { margin: 0 0 2.5em 1em; cursor: pointer; } 
.certi_list > li > .in .certi_imgbox { position: relative; padding: 60px; box-sizing: border-box; background-color: #f4f4f4; border-radius: 5px; } 
.certi_list > li > .in .certi_tit { padding-top: 1.15em; } 
.certi_list > li > .in .certi_tit > p { font-size: 20px; line-height: 1.6; color: #111; font-weight: 600; letter-spacing: -0.025em; text-align: center; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 
.certi_list > li > .in .certi_imgbox > .img_con { } 
.certi_list > li > .in .certi_imgbox > .img_con > span { position: relative; width: 100%; height: 0; padding-top: 133%; display: block; } 
.certi_list > li > .in .certi_imgbox > .img_con > span > img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } 
.certi_list > li > .in .certi_imgbox > .certi_overbox { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; border: 2px solid var(--siteC); opacity: 0; visibility: hidden; transition: all 0.3s; border-radius: 5px; } 
.certi_list > li > .in:hover .certi_imgbox > .certi_overbox { opacity: 1; background: rgba(0,0,0, .25); visibility:visible; } 
.certi_list > li > .in .certi_imgbox > .certi_overbox > i { position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; width: 50px; height: 50px; line-height: 50px; background-color: var(--siteC); text-align: center; color: #fff; font-size: 20px; border-radius: 50%; } 

/*사업분야 copy*/
.business_wrap { } 
.business_wrap .bu_list { margin: 0 0 -1em -1em; } 
.business_wrap .bu_list > li { flex: 1 1 25%; max-width: 25%; } 
.business_wrap .bu_list > li > .in { display: block; position:relative; margin: 0 0 1em 1em; border-radius: 1em; overflow: hidden; box-shadow: 2px 0 6px rgba(0,0,0, .15); } 
.business_wrap .bu_list > li > .in .bu_imgcon { position:relative; width: 100%; height: 14.5em; overflow: hidden; } 
.business_wrap .bu_list > li > .in:before { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0, .2); left: 0; top: 0; content: ''; z-index:1; } 
.business_wrap .bu_list > li > .in .bu_imgcon > img { width: 100%; height: 100%; object-fit: cover; transition: all .3s; } 
.business_wrap .bu_list > li > .in:hover .bu_imgcon > img { transform: scale(1.05); transition: all .3s; } 
.business_wrap .bu_list > li > .in .bu_tit { position: absolute; left: 1.5em; bottom: 1.5em; right: 1em; z-index:2; } 
.business_wrap .bu_list > li > .in .bu_tit > .tt { font-size: 1.1em; font-weight: 800; color: #fff; } 
.business_wrap .bu_list > li > .in .hover_bg { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; background: rgba(0,0,0, .25); visibility: hidden; transition: all 0.3s; border-radius: 5px; z-index:3; } 
.business_wrap .bu_list > li > .in .hover_bg > i { position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; width: 50px; height: 50px; line-height: 50px; background-color: var(--siteC); text-align: center; color: #fff; font-size: 20px; border-radius: 50%; } 
.business_wrap .bu_list > li > .in:hover .hover_bg { opacity: 1; visibility: visible; } 

/*사업분야 new*/
.main_app .list { display: grid; grid-template-columns: 20%; grid-template-rows: 16em 16em 16em; gap: 1em; overflow: hidden; } 
.main_app .list > li { } 
.main_app .list > li > a { display: block; height: 100%; } 
.main_app .list > li > a:hover .wrap_in .bg { background-image: } 
.main_app .list > li .wrap_in { height:100%; box-sizing:border-box; background:#f5f5f5; position:relative } 
.main_app .list > li:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3 } 
.main_app .list > li:nth-child(2) { grid-column: 3 / 4 } 
.main_app .list > li:nth-child(4) { grid-column: 3 / 4 } 
.main_app .list > li:nth-child(9) { grid-column: 4 / 4 } 
.main_app .list > li .wrap_in .bg { position:absolute; left:0; top:0; width:100%; height:100% } 
.main_app .list > li .wrap_in .bg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .2); content: ''; } 
.main_app .list > li .wrap_in .bg:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background: linear-gradient(-45deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.3) 100%) } 
.main_app .list > li .wrap_in .con { position:relative; display:flex; height:100%; box-sizing:border-box; padding:2em; color:#fff } 
.main_app .list > li .wrap_in .con .t1 { font-size:1.25em; font-weight:700; text-transform: uppercase; } 
.main_app .list > li .wrap_in .hover_bg { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; border: 2px solid var(--siteC); opacity: 0; visibility: hidden; transition: all 0.3s; background: rgba(0,0,0, .25); z-index: 3; } 
.main_app .list > li .wrap_in .hover_bg > i { position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; width: 50px; height: 50px; line-height: 50px; background-color: var(--siteC); text-align: center; color: #fff; font-size: 20px; border-radius: 50%; } 
.main_app .list > li > a:hover .hover_bg { opacity: 1; visibility: visible; } 
.main_app .list > li:nth-child(1) .wrap_in .con { font-size:1.25em } 


/*제품 공통*/
.product_wrap { } 
.product_wrap .pro_top { text-align: center; } 
.product_wrap .pro_top .pro_tit { } 
.product_wrap .pro_top .pro_tit .t1 { font-size: 3.65em; font-weight: 900; color: #222; } 
.product_wrap .pro_top .pro_tit .t2 { font-size: 2.45em; font-weight: 800; color: #222; } 
.product_wrap .product_scroll { position: relative; height: 50vh; z-index: 1; text-align: center; color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 2em; } 
.product_wrap .product_scroll .bg { position: absolute; z-index: -2; width: 85%; height: 100%; /*top: 50px; */ left: 50%; transform: translateX(-50%); } 
.product_wrap .product_scroll .bg img { width: 100%; height: 100%; object-fit: cover; } 
.product_wrap .product_scroll .cover { opacity: 1; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); transition: all ease 0.2s; } 
.product_wrap .product_scroll .txt_box { word-break: keep-all; } 
.product_wrap .product_scroll .txt_box h3 { font-size: 2.35em; font-weight: 800; margin-bottom: 40px; /*transform: translate(0px, 40px); opacity: 1; */ } 
.product_wrap .product_scroll .txt_box p { font-size: 1.15em; line-height: 1.5; /*transform: translate(0px, 40px); opacity: 1; */ } 

.pro_wide { margin-left: 11.5%; } 
.productW { gap: 2em; } 
.productW .img_con { flex: 1 1 45%; display: flex; align-items: flex-start; margin-top: 2.5em; justify-content: center; } 
.productW .img_con>img { /*width: 100%; height: 100%; object-fit: contain; */ max-height: 1000px; } 
.productW .info_con { position: relative; flex: 1 1 60%; } 
.productW .info_con .info_conT { position: relative; background: #f5f5f5; padding: 5.5em 16em 5.5em 5em; box-sizing: border-box; text-align: left; } 
.productW .info_con .info_conT .mark_img { position: absolute; width: 18em; right: 4em; bottom: 0; filter: brightness(0); opacity: .02; } 
.productW .info_con .info_conB { padding: 4.5em 5em 0 5em; box-sizing: border-box; text-align: left; } 
.productW .info_con .info_conB .titcon { font-size: 1.65em; font-weight: 800; color: #111; margin-bottom: .9em; } 
.productW .info_con .info_conB .list_con { padding: 1.65em 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } 
.productW .info_con .info_conB .list_con .page_dot_list { margin-top: 0em; } 
.productW .info_con .info_conB .list_con .page_dot_list>li { font-size: 1.1em; color: #666; } 
.productW .info_con .info_conB .list_con .page_dot_list>li:before { top: 9px; } 
.productW .info_con.s1 { width: 50vw; } 
.productW .info_con:before { position: absolute; right: 0; top: 0; content: ''; z-index: -1; } 
.productW .info_con.s1:before { } 
.productW .info_con .Tinfo { margin-bottom: 1.85em; padding-bottom: 1.85em; border-bottom: 1px solid #ddd; } 
.productW .info_con .Tinfo .tit { font-size: 1.1em; font-weight: 800; color: var(--siteC); margin-bottom: .5em; text-transform: uppercase; } 
.productW .info_con .Tinfo .txt { font-size: 2.15em; font-weight: 800; color: #111; } 
.productW .info_con .Binfo { } 
.productW .info_con .Binfo .txt { font-size: 1.05em; font-weight: 500; line-height: 1.6; color: #111; } 

.proImg .tit { text-align: left; font-size: 2.15em; color: #111; font-weight: 800; margin-bottom: 1em; } 
.proImg .img_con { width: 100%; background: #fff; height: 22.5em; } 
.proImg .img_con.ct > img { /*object-fit: contain; */} 
.proImg .img_con>img { width: 100%; height: 100%; object-fit: fill; } 

.product_wrap .work_list { } 
.product_wrap .work_list .work_top { text-align: center; padding: .65em 1em; background: var(--siteC3); border: 1px solid var(--siteC3); color: #fff; font-size: 1.05em; font-weight: 700; } 
.product_wrap .work_list .in { border: 1px solid #ddd; } 
.product_wrap .work_list .in > .img_con { width: 100%; height: 17.5em; } 
.product_wrap .work_list .in > .img_con > img { width: 100%; height: 100%; object-fit: cover; } 

.product_wrap .pro_boxA.wide li{ flex: 1 1 100%; max-width: 100%;}
.product_wrap .pro_boxA.wide li > .in > .img_con{ height: 45em;}
.product_wrap .pro_boxA .pro_box{ margin: 0 0 2.5em 1em !important;}
.product_wrap .pro_boxA .pro_box > .img_con { border: 1px solid #ddd; height: 24em; padding: 2em; background: var(--siteC4); border-radius: 5px; box-sizing: border-box; } 
.product_wrap .pro_boxA .pro_box > .img_con > img { width: 100%; height: 100%; object-fit: contain; } 
.product_wrap .pro_boxA .pro_box .img_tit { font-size: 1.35em; font-weight: 700; margin-bottom: .65em; } 

.pro_boxT{ text-align: left;}
.pro_boxT .tt{ font-size: 1.45em; font-weight: 700; color: #111; margin-bottom: .5em;}
.pro_boxT .tx{ font-size: 1em; color: #444; font-weight: 400;}