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


.pcHide { display: none; } 

.PC { display:block; } 
.PHONE { display:none; } 
.db780 {display: none;}

.scr_i{ display: none;}

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

.full-height { position: relative; box-sizing: border-box; display: flex; align-items: center; width: 100%; height: 100%; min-height: 100vh; padding-top: 100px; } 
.full-height.ptn { padding-top: 0px; } 

.headT { padding-top:var(--headerT); } 
.headH,
#header .gnb_wrap .gnb > li,
#header .gnb_wrap .gnb > li .dp1 { height:var(--headerT); transition:height .2s, background .2s; box-sizing:border-box; align-items: center; } 
#header { z-index:999; position:fixed; top:0; left:0; width:100%; transition: .25s; } 
.sub #header { transition: transform 1s } 
#header.bgN { background:none } 
#header .wrapIn { height:var(--headerT) } 
.headerT { padding-top:var(--headerT) } 
#header .wrapIn { display:flex; gap:2vw } 
#header > .inner { align-items: center; } 
#header .wrapIn .menu_wrap { gap: 6em; } 
#header .wrapIn .menu_wrap .logo { } 
#header .logo > a { } 
#header .logo > .in { transform-origin:left center; transition:.2s; } 
#header .logo > .in img { width: 5.4em; filter: var(--crWhitefil);} 

html:not(.white) .fp-viewing-Business #header,
html:not(.white) .fp-viewing-Footer #header,
html:not(.white) .fp-viewing-Customer #header { background: #fff; border-bottom: 1px solid #ddd; } 
html:not(.white) #header .logo > .in img{ filter: none;}

#nav { position: fixed; left:3em; width:auto; top:50%; z-index:1; transform:translateY(-50%) } 
#nav > li > a { color:#fff; height:2em; position:relative } 
#nav > li > a .dot { width:.5em; height:.5em; background:#fff; position:relative } 
#nav > li > a .tt { position:absolute; top:0; left:100%; margin-left:1em; white-space:nowrap; opacity:0; transition: .2s; } 
#nav > li > a .t1 { font-size:.915em } 
#nav > li:hover > a,
#nav > li.on > a,
#nav > li:hover > a .dot:after,
#nav > li.on > a .dot:after,
#nav > li:hover > a .tt { opacity:1; transition:.3s } 
#nav > li.on > a .tt { opacity: 1; } 
#nav.black { filter:brightness(.5) } 
#nav.black > li > a .dot { background: #111; } 
#nav.black > li > a .tt { color: #111; font-weight: 600; } 

#quick { position:fixed; right:0; top:40%; transform:translateY(-50%); z-index:999; transition:.3s } 
#quick .link { position:relative; } 
#quick .quick_btn { position:absolute; right:100%; width:3em; height:100%; background:#fff; box-sizing:border-box; display:flex; flex-direction:column } 
#quick .quick_btn .wrapBtn { height:3em; min-height: 3em; background:#111; color:#fff; display:flex; align-items:center; justify-content:center } 
#quick .quick_btn .wrapBtn.ctr .ico { transition:.5s } 
#quick .quick_btn .wrapBtn.ctr .ico:before { content:"\e93e" } 
#quick .quick_btn .wrapBtn.goTop { background: var(--siteC); } 
#quick .quick_btn .txt { flex:1 1 0%; writing-mode: vertical-rl; font-size:.813em; font-weight:800; line-height:1; word-spacing:.25em; white-space:nowrap; overflow:hidden; display:flex; align-items:center; background:#0d359f; color:#fff; box-sizing:border-box; border:1px solid rgba(255,255,255,.1) } 
#quick .quick_btn .txt > i { padding:.5em 0 } 
#quick .link .list > li > a { display:flex; align-items:center; color:#fff; height:3.5em; background:rgba(0,0,0,.5); padding:0 6em 0 1em; position:relative } 
#quick .link .list > li > a { border-top:1px solid rgba(255,255,255,.2) } 
#quick .link .list > li > a:after { content:"\e980"; font-family:xeicon; position:absolute; right:.5em; top:50%; transform:translateY(-50%); } 
#quick .link .list > li > a .t1 { font-weight:500; font-size:.975em } 
#quick .link .list > li > a:hover { background:rgba(0,0,0,.7) } 
#quick.off { transform:translate(100%, -50%) } 
#quick.off .quick_btn .wrapBtn.ctr .ico { transform:rotate(180deg) } 
.allGnbOn #quick { z-index: -1; } 

/*kakao_Btn*/
#kakao_Btn { position:fixed; z-index:999; top:90%; right:4vw; transform:translateY(-50%); } 
#kakao_Btn .kakao { display: flex; align-items: center; gap: .45em; height: 4rem; width: 15rem; border-radius: 10em; text-align: center; background: #FAE100; justify-content: center; } 
#kakao_Btn .kakao > .tt { font-size: 1.15em; font-weight: 700; color: #222; } 
#kakao_Btn .kakao > .xi { font-size: 2.25em; transition: .3s; } 

#kakao_Btn .kakao:hover > .xi { transform: translateY(-.25em); } 



/*헤더 링크배너*/
/*
.header_linkW { background: var(--siteC2); color: #fff; position: relative; } 
.header_linkW:before { content: ""; position: absolute; right: 90vw; height: 100%; width: 100vw; background: var(--siteC); transform: skewX(-30deg) translateX(1px); } 
.header_linkW .link_con { display: flex; height: 100%; } 
.header_linkW .link_con > li { flex: 1 1 1%; max-width: 12em; position: relative; height: 100%; } 
.header_linkW .link_con > li > a { position: relative; display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; height: 3em; } 
.header_linkW .link_con > li > a:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-right: 1px solid rgba(255, 255, 255, .3); transform: skewX(-30deg); transition: .3s; } 
.header_linkW .link_con > li > a > .tt { width: 100%; font-size: .938em; position: relative; z-index: 1; font-weight: 600; } 
.header_linkW .link_con > li > a > .icon { position: absolute; top: .5em; right: .5em; font-size: .85em; color: rgba(255,255,255, .85); opacity: 0; transition: .2s; } 

.header_linkW .link_con > li.on > a:before { background: var(--siteC); } 
.header_linkW .link_con > li.on > a > .icon { display: none; } 
.header_linkW .link_con > li.on > a:after { position: absolute; top: .5em; right: .5em; width: 7px; height: 7px; background: #fff; border-radius: 50%; content: ''; z-index: 1; } 

.header_linkW .link_con > li > a:hover:before { background: rgba(0,0,0, .1); } 
.header_linkW .link_con > li.on > a:hover:before { background: var(--siteC); } 
.header_linkW .link_con > li > a:hover > .icon { opacity: 1; } 
*/

/**/
#header .gnb_wrap .gnb > li { position:relative; overflow:hidden; } 
#header .gnb_wrap .gnb > li .dp3 { display:none; } 
#header .gnb_wrap .gnb > li .dp1 { position:relative; padding:0 3em; } 
#header .gnb_wrap .gnb > li .dp1 .tt { position:relative; font-size:1.15em; letter-spacing: -0.02em; font-weight:600; } 
#header .gnb_wrap .gnb > li .dp1 .tt:after { content:""; display:block; position:absolute; right: -10px; top: -6px; width: 6px; height: 6px; opacity: 0; background: var(--siteC); border-radius: 50%; content: ''; transition: .3s; } 
#header .gnb_wrap .gnb > li.on .dp1 .tt:after,
#header .gnb_wrap .gnb > li.act .dp1 .tt:after { opacity: 1; } 
#header .gnb_wrap .gnb > li.act { z-index:2; overflow:visible; } 
#header .gnb_wrap .gnb > li.act .dp1:after,
#header .gnb_wrap .gnb > li.on .dp1:after { opacity:1; transform:scaleX(.7); } 
html:not(.simple) #header:not(.active) .gnb_wrap .gnb > li .dp1:after { filter:var(--crWhitefil); } 

#header .gnb_wrap .gnb > li .dp2 { display: block; position: absolute; top: 80%; left: 50%; width: 11em; padding: 0 1.5em; background: var(--siteC2); box-shadow: 0 2px .625em rgba(0, 0, 0, .1); border-radius: 1em; color: #fff; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: padding .2s; } 
#header .gnb_wrap .gnb > li .dp2 > li > a { padding:.5em 0; justify-content: center; transition:.2s; } 
#header .gnb_wrap .gnb > li .dp2 > li > a:hover { background: rgba(0,0,0,.2); } 
#header .gnb_wrap .gnb > li .dp2 > li > a .tt { position:relative; font-size: 1em; color: #fff; font-weight:500; opacity: .95; transition: .2s; } 
#header .gnb_wrap .gnb > li.act { overflow:visible; } 
#header .gnb_wrap .gnb > li.act .dp2 { padding-top:1.5em; padding-bottom:1.5em; opacity:1; visibility:visible; } 
#header .gnb_wrap .gnb > li .dp2 > li > a .in { position:relative; } 
#header .gnb_wrap .gnb > li .dp2 > li > a .in:after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:#fff; } 
#header .gnb_wrap .gnb > li .dp2 > li > a:hover .in:after { width:100%; transition:.65s } 
#header .gnb_wrap .gnb > li .layer { display: none; } 

#header .util_wrap { gap:0 1.5vw; padding-right: 2vw; } 

#header .all_wrap { } 
#header .all_wrap .all { } 
#header .all_wrap .all_btn { position:relative; display:block; width:2.5em; height:1em; } 
#header .all_wrap .all_btn .ham,
#header .all_wrap .all_btn .ham:before,
#header .all_wrap .all_btn .ham:after { display:block; width:100%; height:3px; background:#000; transition:.2s; } 
#header .all_wrap .all_btn .ham { background: var(--siteC); } 
#header .all_wrap .all .ham:before { width:50%; } 
#header .all_wrap .all .ham:after { width:80%; } 
#header .all_wrap .all_btn .ham:before,
#header .all_wrap .all_btn .ham:after { content:""; position:absolute; right:0; } 
#header .all_wrap .all_btn .ham:before { top:calc(50%); } 
#header .all_wrap .all_btn .ham:after { top:calc(100%); } 

#header .all_wrap .all_btn:hover .ham:before,
#header .all_wrap .all_btn:hover .ham:after { width: 100%; } 


#header .all_wrap .all_layer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--crWhite); color: #111; transform: translateY(-80%); opacity: 0; visibility: hidden; transition: .3s; } 
#header .all_wrap .all_layer .all_header { } 
#header .all_wrap .all_layer .all_header .all_close .close_btn { position: fixed; top: 1.5em; right: 1.5em; } 
#header .all_wrap .all_layer .all_header .close_btn { display: flex; align-items: center; justify-content: center; width: 5em; height: 5em; background: var(--siteC); color: var(--crWhite); border-radius: 50%; } 
#header .all_wrap .all_layer .all_header .close_btn .xi { font-size: 1.875em; transition: .3s; } 
#header .all_wrap .all_layer .all_header .close_btn:hover .xi { transform: rotate(180deg); } 

#header .all_wrap .all_layer .all_inner { flex: 1; opacity: 0; transition: .3s; } 
#header .all_wrap .all_layer .all_inner > .wrap_in { gap: 5em; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_img { display: flex; align-items: center; justify-content: center; width: 30%; height: 100vh; position: relative; padding: 0 5em; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_img .wrap_img_txt { position: relative; z-index: 10; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_img .wrap_img_txt > p { font-size: 2.5rem; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_img .img_bottom { position: absolute; bottom: 3em; left: 3em; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_img .img_bottom ul { opacity: 0.8; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_img .img_bottom ul li { display: flex; font-size: 1.125rem; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_img .img_bottom ul li span:first-child { width: 3.5em; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_img .img_bottom ul li:first-child { margin-bottom: 1em; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_img .logo { width: 12rem; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_img::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), transparent); } 
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_middle { width: 60%; height: 100vh; overflow-y: scroll; padding-top: 5em; } 
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_middle::-webkit-scrollbar { display: none; } 
#header .all_wrap .all_layer .wrap_top .all_mem { gap: .5em; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in { height: 2.75em; padding: 0 2em; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6em; transition: .2s; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in .tt { font-size: .938em; font-weight: 500; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in:hover { background: var(--siteC); border-color: var(--siteC); } 

#header .all_wrap .all_layer .wrap_middle .gnb { flex-wrap: wrap; flex-direction: column; padding-bottom: 20vh; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li { display: flex; justify-content: space-between; align-items: flex-start; flex: 1; padding: 3.5em 2.5em; border-left: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid #ddd; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_performance .tt { width: 55%; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li ul { display: flex; flex-wrap: wrap; padding: 0; width: 40vw; gap: 1em 2em; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li ul.dp3 { padding-bottom: 1.5em; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li a { justify-content: flex-start; text-align: left !important; padding: .5em .5em 0.5em 0.5em; /* align-items: flex-start; */
 position: relative; } 
 #header .all_wrap .all_layer .wrap_middle .gnb > li a.layer{display: none;}
/* #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.25em; aspect-ratio: 1/1; border-radius: 50%; background: var(--siteC); } */
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .in { display: flex; align-items: flex-end; gap: .5em; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt { font-size: 2em; font-weight: 700; color: #111; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .arrow { display: inline-block; margin-bottom: .375em; width: .35em; height: .35em; background: var(--siteC); border-radius: 50%; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li.act { background: rgba(0, 0, 0, .03); } 
#header .all_wrap .all_layer .wrap_middle .gnb > li.act .dp1 .tt { background-position: 0 100%; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .in { display: inline-block; position: relative; } 
/* #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .in:after { content:""; position:absolute; left:0; bottom:-.25em; width:100%; height:2px; background:var(--siteC); transform:scaleX(0); transform-origin:left bottom; transition:.2s; } */
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .tt { font-size: 1.188em; font-weight: 500; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li.act > a .tt { color: var(--siteC); } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li.act > a .in:after { transform: scaleX(1)}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li > a { gap: 0 .5em; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li > a:before { content: "·"; color: rgba(0, 0, 0, .4); } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li > a .tt { opacity: .7; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li.act > a .tt { text-decoration: underline; opacity: 1; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp4 { display: none; } 

#header .all_wrap .all_layer .wrap_bottom { display: none; } 

#header .all_wrap .all_layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
    z-index: 998;
    background: #fff;
}
.allGnbOn { overflow-y: hidden; } 
.allGnbOn #header .all_wrap .all_layer { transform: translateY(0); opacity: 1; visibility: visible; } 
.allGnbOn #header .all_wrap .all_layer .all_inner { opacity: 1; transition-delay: .4s; } 

/*
#header.active { background:#fff; } 
#header.active .wrapIn { height: auto; align-items: flex-start; background: #fff; color:#111; } 
#header.active .inner { color:#000; } 
#header.active .gnb_wrap .gnb > li.act .dp1,
#header.active .gnb_wrap .gnb > li.on .dp1 { color:var(--siteC); } 
#header.active .gnb_wrap .gnb > li.on .dp1 .in:before { background: var(--siteC); } 
#header.active .gnb_wrap .gnb > li .dp2 { /* height: auto; opacity: 1; } 
#header.active .logo > .in .logoA { display:none; } 
#header.active .logo > .in .logoB { display:block; } 
#header.active .top_wrap::after { content: ''; width: 100%; height: 1px; background: rgba(0, 0, 0, .1); position: absolute; left: 0; top: var(--headerT); } 
*/
#header.gnbOpen { box-shadow:0 4px 1em rgba(0,0,0,.15); } 
#header.gnbOpen:before { background:#8198c9; opacity:.6; } 
#header.gnbOpen .gnb_wrap .gnb > li { height:auto; } 
#header.gnbOpen .gnb_wrap .gnb .dp2 { padding:2em 0; } 
#header.gnbOpen .gnbBg { height:5em; } 

html.white #header { background: transparent; color: #fff; } 
html.white #header .shop_wrap .shop_btn { border-color:rgba(255,255,255,.3) } 
html.white #header .all_wrap .all_btn .ham { background: var(--siteC); } 
html.white #header .all_wrap .all_btn .ham:before,
html.white #header .all_wrap .all_btn .ham:after { background:#fff } 

/*
html.white #header:hover { background: #fff; color: #111; } 
html.white #header:hover .all_wrap .all_btn .ham:before,
html.white #header:hover .all_wrap .all_btn .ham:after { background: #111; } 
*/

.sub.scroll:not(.up) #header { /*transform:translateY(-100%)*/ } 

.sub #header { background: #fff; } 
.scroll.sub #header { border-bottom: 1px solid #ddd; } 

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

#footer { z-index: 1; color: #fff; background: #111; } 
#footer .menu_wrap { border-bottom:1px solid rgba(255,255,255,.1) } 
#footer .menu_wrap .box1 { position:relative } 
#footer .menu_wrap .gnb_wrap { } 
#footer .menu_wrap .gnb_wrap .gnb .layer { display: none; } 
#footer .menu_wrap .gnb_wrap .gnb > li { flex:1; position:relative } 
#footer .menu_wrap .gnb_wrap .gnb > li:after,
#footer .menu_wrap .gnb_wrap .gnb > li:first-child:before { content:""; position:absolute; right:0; top:0; width:1px; height:100%; background:#fff; opacity:.1 } 
#footer .menu_wrap .gnb_wrap .gnb > li:first-child:before { left:0 } 
#footer .menu_wrap .gnb_wrap .gnb > li .dp1 { justify-content: flex-start; padding:2em 1.5em 1em 1.5em; color:#fff; text-align:left } 
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 { flex-direction:column; padding-bottom:2rem } 
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 > li { display:block } 
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 > li > a { justify-content: flex-start; padding:.3em 1.5em; text-align:left; color:#fff; opacity:.6; transition:.3s } 
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 > li > a .va { font-size:.875em } 
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 > li > a:hover { opacity:1 } 
#footer .menu_wrap .gnb_wrap .gnb > li .dp3, 
#footer .menu_wrap .gnb_wrap .gnb > li.m_privacy { display: none; } 

#footer .link_menu { padding: 1em 0; border-bottom: 1px solid rgba(255,255,255, .1); } 
#footer .link_menu .box0{ justify-content: flex-end;}

#footer .f_info { padding: 2.4vw 0 5em } 
#footer .f_info .info_wrap{gap: 7em;}
#footer .logo img { height:4em;filter: var(--crWhitefil); }
#footer .cname { margin-bottom: .5em; color: rgba(255,255,255, .65); font-size: .938em; } 
#footer .infoW { margin-bottom:.25em; display:flex; font-size:.938em; flex-direction: column; gap: 1.5em;} 
#footer .infoW > dt { /* width:3em; */ font-weight:500; opacity:.8 } 
#footer .infoW > dd { flex:1 1 0%; min-width:0 } 
#footer .info > li { float:left; margin-right:2em; margin-bottom:.4em; opacity:.8; font-weight:300; position:relative } 
#footer .info > li:before { content:""; position:absolute; right:-1em; height:70%; top:50%; transform:translateY(-50%); width:1px; background:#fff; opacity:.2 } 
#footer .info > li:last-child:before { display:none } 
#footer .info > li.point { font-weight:600 } 
#footer .info > li.br { clear:left } 

#footer .copyright { font-size:.813em; opacity:.6; text-transform:uppercase; margin-top:1em } 
#footer .cs_wrap { display:flex; gap:0 4em } 
#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.25em } 

#footer .family { position: relative; } 
#footer .family .btn { gap:0 5.5em; height:3.5em; padding:0 1.5em; border-radius:.25em; background: #444; } 
#footer .family .btn .tt { font-size:.813em; } 
#footer .family .btn .xi { font-size:1.125em; } 
#footer .family .list { display:none; position:absolute; left:0; bottom: calc(100% + 2px); width:100%; max-height: 16em; margin-bottom:-1px; padding:1em 1em; background: #f8f8f8; border-bottom:1px solid rgba(255,255,255,.2); border-radius: .25em; box-sizing:border-box; border: 1px solid #ddd; } 
#footer .family .list > li > a { display:block; padding:.5em 0; font-size:.938em; color:#777; } 
#footer .family .list > li > a:hover { text-decoration:underline; } 
#footer .family.on .in { opacity:1; } 
#footer .family.on .in .arrow { transform:rotate(180deg); } 
#footer .family.on .list { display:block } 

#footer .footer_menuW { display:flex; gap:2em } 
#footer .footer_menuW > li > a { opacity:.6; font-weight:500 } 
#footer .footer_menuW > li.point > a { opacity:1; font-weight:700 } 

#footer .goTop{ position:fixed; z-index: 10; right:5vw; bottom:2em; width:3.5em; height:3.5em;  display:flex; align-items:center; justify-content:center; text-align:center; background:var(--siteC); color: #fff; box-shadow:0 0 1em rgba(0,0,0,.2); 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)}


.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%; background: #333; transition:.3s } 
/*
.sns_st > li > a.ka { color: var(--snsKa); } 
.sns_st > li > a.yu { color: var(--snsYt); } 
.sns_st > li > a.fb { color: var(--snsFb); } 
.sns_st > li > a.in { color: var(--snsIn); } 
.sns_st > li > a.nv { color: var(--snsNv); } 
*/

/*컨텐츠*/
#contents { } 
.dp1_product #contents .doc{padding: 1vw 0 8em 0;}
#contents .doc { padding: 2vw 0 8em 0; } 
#contents .doc.pt0 { padding: 0 0 8em 0; } 
#contents .doc.pb0 { padding: 4em 0 0 0; } 
#contents .sub_page_top { position:relative; height:36em; padding: 7em 1em 0em 1em; box-sizing:border-box; word-break:keep-all; } 
#contents .sub_page_top > .inner { position:relative; height:100%; } 
#contents .sub_page_bg { position:absolute; top:0; left:0; width:100%; height:100%; border-radius: 1.5em; overflow:hidden; } 
#contents .sub_page_bg > .bg { position:absolute; top:0; right:0; width:calc(100% + 2vw); height:100%; transition:3s; } 
#contents .sub_page_bg > .bg:before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(0,rgba(0,0,0,.7),rgba(0,0,0,.3)); } 
.load #contents .sub_page_bg > .bg { right:-1vw; } 
#contents .sub_page_tit { flex:1; position:relative; z-index:9; padding:0 0 4.5em 0; } 
#contents .sub_page_tit .sub_tit_wrap { overflow:hidden; } 
#contents .sub_page_tit .sub_tit_wrap:last-child .tit_inner { padding-bottom:7.5em; } 
#contents .sub_page_tit .tit_inner { padding:1.5em 0 3.5em 0; text-align:left; } 
#contents .sub_page_tit .wrap_tit { color:#fff; } 
#contents .sub_page_tit .wrap_tit .tt { display:block; } 
#contents .sub_page_tit .wrap_tit .sub_txt .tt { font-size:1.150em; opacity:.75; padding-top:.5em; } 
#contents .sub_page_tit .wrap_tit .sub_tit .tt { font-size:3em; font-weight: 600; } 

#contents .sub_page_menu { text-align:left; } 
#contents .sub_page_menu .menu_wrap { max-width:100%; border-bottom: 1px solid rgba(255,255,255, .3); } 
#contents .sub_page_menu .gnb { display:block; } 
#contents .sub_page_menu .wrapH { height:4.5em; color:#fff; } 
#contents .sub_page_menu .home { position:relative; } 
#contents .sub_page_menu .home .in { width:3em; justify-content: center; align-items: center; transition:.2s; } 
#contents .sub_page_menu .home .in .xi { font-size:1.375em; } 
#contents .sub_page_menu .drop_menu { position:relative; } 
#contents .sub_page_menu .drop_menu .drop_tit { gap:0 2em; padding:0 .875em 0 1em; min-width:14em; transition:.2s; } 
#contents .sub_page_menu .drop_menu .drop_tit .tt { font-size:1.063em; } 
#contents .sub_page_menu .drop_menu .drop_tit .arrow { transition:.2s; } 
#contents .sub_page_menu .drop_menu .drop_tit .arrow:before { content:"\e942"; } 
#contents .sub_page_menu .drop_menu ul { display:block; } 
#contents .sub_page_menu .drop_menu .gnb { position:absolute; top:100%; left:0; box-sizing: border-box; padding: .65em 0em; width:100%; background: var(--siteC2); border-radius: 1em; color:#fff; display: none; } 
#contents .sub_page_menu .drop_menu .gnb a.flex { display:block; text-align:left !important; } 
#contents .sub_page_menu .drop_menu .gnb li > a { padding:.525em 1.5em; width: 100%; text-align: left; box-sizing: border-box; font-weight:300; transition:.2s; } 
#contents .sub_page_menu .drop_menu .gnb li > a.layer { display: none; } 
#contents .sub_page_menu .drop_menu .gnb li > a .tt { font-size:.975em; font-weight: 500;} 
#contents .sub_page_menu .drop_menu .gnb li > a > .in { position:relative; width: 100%; } 
#contents .sub_page_menu .drop_menu .gnb li:first-of-type { /*padding-top: 1em; */ } 
#contents .sub_page_menu .drop_menu .gnb li:last-of-type { /*padding-bottom: 1em; */ } 
#contents .sub_page_menu .drop_menu .gnb li > a > .in .arrow { } 
#contents .sub_page_menu .drop_menu .gnb li.act > a,
#contents .sub_page_menu .drop_menu .gnb li.on > a { color: #fff; } 
#contents .sub_page_menu .drop_menu .gnb li.on > a .tt { font-weight:700; } 
#contents .sub_page_menu .home:hover,
#contents .sub_page_menu .drop_menu:hover,
#contents .sub_page_menu .drop_menu.on { z-index:2; } 
#contents .sub_page_menu .drop_menu.on .drop_tit { background: transparent; } 
#contents .sub_page_menu .drop_menu.on .drop_tit .arrow { transform:rotate(-180deg); } 
#contents .sub_page_menu .drop_menu.on .gnb { display: block; } 

/*
#contents .sub_page_menu .drop_menu .dp2 > li.more > .mLink { display: block; cursor: pointer } 
#contents .sub_page_menu .drop_menu .dp2 > li.more.show .dp3 { display:block !important; } 
#contents .sub_page_menu > li .dp2 > li.more { position:relative; } 
#contents .sub_page_menu .drop_menu .gnb .dp2 li.more > a > .in .arrow { font-size: 1em; position: absolute; right: 0; top: 0em; } 
#contents .sub_page_menu .drop_menu .gnb .dp2 li.more > a > .in .arrow:before { content: "\e942"; } 

#contents .sub_page_menu .drop_menu .gnb > li .dp3 { display:none; background: #111; border:1px solid rgba(255,255,255,.2); border-left:none; border-right:none; color:#111; padding:.5em 0 } 
#contents .sub_page_menu .drop_menu .gnb > li .dp3 > li:last-of-type { padding-bottom: 0em; } 
#contents .sub_page_menu .drop_menu .gnb > li .dp3 > li:first-of-type { padding-top: 0em; } 
#contents .sub_page_menu .drop_menu .gnb > li .dp3 > li > a { padding:.25em 1em } 
#contents .sub_page_menu .drop_menu .gnb > li .dp3 > li > a .tt { font-size:.875em; position:relative; padding-left:.75em; color: #fff; } 
#contents .sub_page_menu .drop_menu .gnb > li .dp3 > li > a .tt:before { content:"-"; position:absolute; left:0; top:0 } 
#contents .sub_page_menu .drop_menu .gnb > li .dp3 > li:hover > a .tt { text-decoration:underline } 
*/


#contents .sub_page_menu .menu .gnb { position:relative; } 
#contents .sub_page_menu .menu .gnb:before { content:""; position:absolute; left:0; top:50%; width:1px; height:1.25em; background:#fff; opacity:.2; transform:translateY(-50%); } 
#contents .sub_page_menu .menu .gnb .dp2 { } 
#contents .sub_page_menu .menu .gnb .dp2 > li { } 
#contents .sub_page_menu .menu .gnb .dp2 > li > a { position:relative; padding:1em 3.5em; min-width:14em; color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.3); } 
#contents .sub_page_menu .menu .gnb .dp2 > li > a .tt { font-size:1.250em; font-weight:600; } 
#contents .sub_page_menu .menu .gnb .dp2 > li > a .in { position:relative; padding:0 .5em; } 
#contents .sub_page_menu .menu .gnb .dp2 > li > a:after { content:""; position:absolute; left:0; bottom:-3px; width:100%; height:3px; background:var(--siteC3); transform:scaleX(0); transition:transform .3s; } 
#contents .sub_page_menu .menu .gnb .dp2 > li.act > a,
#contents .sub_page_menu .menu .gnb .dp2 > li.on > a { color:#fff; } 
#contents .sub_page_menu .menu .gnb .dp2 > li.act > a:after,
#contents .sub_page_menu .menu .gnb .dp2 > li.on > a:after { transform:scaleX(1); } 
#contents .sub_page_menu .menu .gnb .dp3 { display:none; } 

#contents .sub_page_con { padding-top: 2.5em; } 
#contents .sub_page_con .con_tit { gap:.625em; } 
#contents .sub_page_con .con_tit .tt { width:auto; } 
#contents .sub_page_con .con_tit .t1 { font-size:2.625em; font-weight:500; color:var(--siteC); padding:.125em .125em; border-bottom:3px solid currentColor; } 
#contents .sub_page_con .con_tit .t1:not(.ffEN) { font-size:2.375em; font-weight:600; } 
#contents .sub_page_con .con_tit .t2 { font-size:1.375em; font-weight:500; opacity:.8; } 

#contents .sub_page_con .con_menu { } 
#contents .sub_page_con .con_menu ul:not(.dp3) { display:block; } 
#contents .sub_page_con .con_menu .gnb .dp4 { display:none; } 
#contents .sub_page_con .con_menu .gnb .dp3 { justify-content:center; flex-wrap: wrap; gap: 1em 0; } 
#contents .sub_page_con .con_menu .gnb .dp3 > li { flex: 1; background: #f7f7f7; } 
#contents .sub_page_con .con_menu .gnb .dp3 > li:first-child { border-radius:6em 0 0 6em; } 
#contents .sub_page_con .con_menu .gnb .dp3 > li:last-child { border-radius:0 6em 6em 0; } 
#contents .sub_page_con .con_menu .gnb .dp3 > li > a { height:4.5em; align-items: center; justify-content: center; padding:0 0.5em; border-radius:6em; color:#777; transition:.2s; } 
#contents .sub_page_con .con_menu .gnb .dp3 > li > a .tt { font-size:1.1em; font-weight: 700; letter-spacing: -0.03em; } 
#contents .sub_page_con .con_menu .gnb .dp3 > li.act > a { color:#000; } 
#contents .sub_page_con .con_menu .gnb .dp3 > li.on > a { background:var(--siteC); color:#fff; font-weight:500; } 
#contents .sub_page_con .con_menu .gnb .dp3 > li.on > a .tt { font-weight: 800; } 

#contents .sub_con_tit{padding: 2.5vw 0 0;}


/**/
.radius { border-radius:1em; overflow:hidden } 
.shadow { box-shadow:0 0 1em rgba(0,0,0,.2) } 

.main_top { position:relative; } 
.main_top:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--siteC); opacity:.1 } 
.main_top > .wrapIn { display:flex; gap:1.875em; align-items:flex-end; position:relative; padding:1.875em 0 } 
.main_top .main_top_con { flex:1 1 0%; min-width:0 } 

.vod_wrap { position:relative; width: 100%; height: 100%; } 
.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: relative; height: 100vh; overflow: hidden; } 
.visualSlide_wrap .visualSlide { } 
.visualSlide .el { position:relative; overflow:hidden; height:100vh; background:#fff } 
.visualSlide .el:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0,0,0,.2) 0%, rgba(0,0,0,.5) 100%); content: ''; z-index: 1; } 
.visualSlide .el .bg { position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.15) } 
.visualSlide .el .bg > img { width: 100%; height: 100%; object-fit: cover; } 
.visualSlide .el .mask { -webkit-mask-image: url(../images/main/visual_mask.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; -webkit-mask-position: right bottom; } 
.visualSlide .el .vod { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover } 
.visualSlide .el .vod_wrap:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:1 } 
.visualSlide .el .vod_bg { position:absolute; left:0; top:0; width:100%; height:100% } 
.visualSlide .el.swiper-slide-active .vod_wrap:after,
.visualSlide .el.swiper-slide-duplicate-active .vod_wrap:after { transition:2s; opacity:.1 } 
.visualSlide .el.swiper-slide-active .bg,
.visualSlide .el.swiper-slide-duplicate-active .bg { transition:5s; transform:scale(1) } 

.visualSlideSlogan_wrap { position:absolute; left:0; width:100%; top:50%; box-sizing:border-box; padding:0 11vw; transform:translateY(-50%); z-index:10; color:#fff; text-align:left } 
.visualSlide_wrap .slogan { margin-bottom:auto; box-sizing:border-box; } 
.visualSlide_wrap .slogan .wrap_in { display:flex; flex-direction:column } 
.visualSlide_wrap .slogan .t1 { font-size:4em; text-transform:uppercase; font-weight:700; line-height:1.2; margin-top: .35em; letter-spacing: -0.03em;} 
.visualSlide_wrap .slogan .t2 { font-size:1.215em; font-weight: 500; margin-bottom: .35em; color: rgba(255,255,255, .7) } 

.visualSlide_wrap .slogan .ani { overflow:hidden } 
.visualSlide_wrap .slogan .ani > i { transform:translateY(200%); } 

.visualSlide_wrap .el.swiper-slide-thumb-active .slogan .ani > i { transform:translateY(0); transition:1.5s } 

.mainScroll { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0em; color:#fff; z-index: 99; } 
.mainScroll .tt { display:block; font-size:.875em; font-weight:500; margin:0 0 2.5em 0 } 
.mainScroll .tt .xi { font-size:1.5em; margin-right:.25em; position:relative } 


/*
.visualSlide_wrap .el.swiper-slide-thumb-active .slogan .t1 { filter: blur(0); letter-spacing: -0.018em; opacity:1; transition:1.5s; transition-delay: 0.9s; } 
.visualSlide_wrap .el.swiper-slide-thumb-active .slogan .t2 { opacity:.85; filter: blur(0); letter-spacing: -0.018em; transition:1.5s; transition-delay:1.1s } 
.visualSlide_wrap .el.swiper-slide-thumb-active .slogan .btn_list > .round-btn { animation: text-active-animation 1.5s 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; } 
*/

.visualSlide_control { position:absolute; left: 11vw; bottom:-4.5em; z-index:10 } 
.visualSlide_control .paging { color:#fff; width:auto; display:flex } 
.visualSlide_control .paging span { position:relative; background:rgba(255,255,255,.5); width: 5em; opacity:1; border-radius:0; position:relative; transition:.3s; height:2px; counter-increment: vIndex; display:block; margin-right: -.25em; } 
.visualSlide_control .paging span:before { /*content:counter(vIndex); position:absolute; right:100%; top:50%; width:1.5em; transform:translateY(-50%)*/ } 
.visualSlide_control .paging span:nth-child(-n+10):before { position: absolute; top: -2em; color: rgba(255,255,255, .5); content:"0" counter(vIndex); font-size:.815em; font-weight: 700; transition: .2s; } 
.visualSlide_control .paging span.swiper-pagination-bullet-active:before { color: rgba(255,255,255, 1); } 
.visualSlide_control .paging > span:after { content:""; position:absolute; left:0; top:0; width:0; height:100%; background:#fff } 
.visualSlide_control .paging > span.swiper-pagination-bullet-active { width:5em } 
.visualSlide_control .paging > span.swiper-pagination-bullet-active:after { width:100%; transition:7s } 
.visualSlide_control .swiperBtn { margin-left:.25em } 

/********메인 공통********/
.main_tit { position:relative; margin-bottom:2.5em; gap:.75em 0; } 
.main_tit.mb1 { margin-bottom: 1.5em; } 
.main_tit.sideDot { position: absolute; right: 1em; top: 0em; width: 1em; height: 1em; border-radius: 50%; background: var(--siteC3); } 
.main_tit .t1 { font-weight:700; font-size:4.515em; letter-spacing:-.025em } 
.main_tit .t1.s1 { font-size:3em } 
.main_tit .t1.s2 { font-size:2.75em } 
.main_tit .t1.s3 { font-size:2.5em } 
.main_tit .t1.s4 { font-size:4em } 
.main_tit .t2 { font-weight:800; font-size:3.45em } 
.main_tit .t3 { font-size: 2.615em; font-weight: 800; } 
.main_tit .t4 { font-size: 1.415em; margin-top: .5em; color: rgba(0,0,0, .65); line-height: 1.5; } 
.main_tit .t4.wh { color: rgba(255,255,255, .65); } 
.main_tit .t4.wh2 { color: rgba(255,255,255, .85); } 
.main_tit .t5 { font-size: 2.38em; font-weight: 800; } 
.main_tit .tt { font-weight:500; font-size:1.25em; opacity:.8 } 
.main_tit .en { font-size: .915em; font-weight: 700; margin-top: .5em; color: #afafaf; text-transform: uppercase; } 
.main_tit.white { color:#fff; } 
.main_tit > p > .fd { font-weight: 500; } 
.main_tit .line { width: 1px; height: 2em; background: rgba(255,255,255, .8); margin: .75em auto; } 

.main_con { padding: 5em 0; } 

/* 서브 공통 */
.page_tit { margin:0 0 1.25em 0 } 
.main .page_tit { margin: 0 0 3.5em 0; } 
.page_tit.c_white { color: #fff; } 
.page_tit.m0 { margin-bottom:0; } 
.page_tit.m1 { margin-bottom:2em; } 
.page_tit.m2 { margin-bottom: 1em; } 
.page_tit .tt { font-family: var(--fontJamsil); } 
.page_tit .tt * { vertical-align:baseline; } 
.page_tit .tt .info-tt { color: #888; font-size: 0.875rem; margin-top: 5px; } 
.page_tit .t1 { font-size: 3.215em; font-weight: 600; line-height: 1.2; } 
.page_tit .t2 { margin:.75em 0; color:#666; font-size:1.063em } 
.page_tit .t2:first-child { margin-top:0; } 
.page_tit .t3 { font-weight:700; font-size:1.515em; text-transform: uppercase; font-family: var(--fontBase); } 
.page_tit .t4 { font-weight:700; font-size:2.5em; line-height: 1.3; } 
.page_tit .t4.s1 { font-size:2.63em; } 
.page_tit .t5 { font-weight:600; font-size:1.188em; text-transform: uppercase; } 
.page_tit .t6 { font-weight:500; font-size:.938em; } 
.page_tit .t7 { font-weight:500; font-size:1.063em; } 
.page_tit .t8 { font-weight:500; font-size:1.188em; color:#666; line-height: 1.5;} 
.page_tit .t9 { font-weight: 600; font-size: 2.215em; } 



/*flex box*/
.flex_box { } 
.flex_box.s1 { margin: 0 0 -1em -1em; } 
.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 .fst6 > li { flex: 1 1 16.66%; max-width: 16.66%; } 
.flex_box .fst6 > li > .in { margin: 0 0 1em 1em; } 

.flex_box li > a { display: block; } 

/*메인 버튼*/
.btn_list > .round-btn { position: relative; z-index: 1; display: flex; align-items: center; gap: .75em; overflow: hidden; padding: 0.75em 1.5em; border-radius: 100px; background-color: rgba(255,255,255, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } 
.btn_list > .round-btn.line { border: 1px solid #fff; } 
.btn_list > .round-btn.p1 { padding: .5em; } 
.btn_list > .round-btn > .wide { display: block; opacity: 0; position: absolute; transition: opacity 5ms; z-index: -1; } 
.btn_list > .round-btn > .btn-full { background-color: #fff; border: none; bottom: 0; height: 100%; left: 0; margin: auto; top: 0; transition: width .5s .05s ease; width: 0; } 
.btn_list > .round-btn > .txt { position:relative; font-size: .9em; font-weight: 500; transition: .3s; z-index: 1; } 
.btn_list > .round-btn > .txt.pr1 { padding-right: 1em; } 
.btn_list > .round-btn > .Sarrow { display: flex; align-items: center; justify-content: center; background: #fff; width: 1.5em; height: 1.5em; border-radius: 50%; min-width: 1.5em; min-height: 1.5em; transition: .3s; } 
.btn_list > .round-btn > .Sarrow > .xi { font-size: .9em; color: var(--siteC); transition: .3s; } 
.btn_list > .round-btn > .plus-icon { display: flex; align-items: center; justify-content: center; background: var(--siteC); width: 2.25em; height: 2.25em; border-radius: 50%; } 
.btn_list > .round-btn > .plus-icon > .xi { font-size: .615em; color: #fff; } 

.btn_list > .round-btn:hover { color: #111; } 
.btn_list > .round-btn:hover > .wide { opacity: 1; } 
.btn_list > .round-btn:not(:hover) > .wide { opacity: 0; } 
.btn_list > .round-btn:hover > .btn-full { width: 100%; } 
.btn_list > .round-btn:hover > .Sarrow { background: var(--siteC); } 
.btn_list > .round-btn:hover > .Sarrow > .xi { color: #fff; } 

@keyframes text-active-animation { 
 0% { opacity: 0; filter: blur(20px); } 
100% { opacity: 1.0; filter: blur(0px); } 
 }

/*탭버튼*/
/* .wrap_idx { } 
.wrap_idx .tabSt { display: flex; height: 3.45em; border-radius: 100px; background-color: #fff; margin: 0 auto 2em; } 
.wrap_idx .tabSt.w1 { width: 450px; } 
.wrap_idx .tabSt > li { position: relative; margin: 0 0 0 -1px; cursor: pointer; height: 100%; display: flex; align-items: center; justify-content: center; flex: 1; font-size: 1.05em; font-weight: 600; border: 1px solid #ddd; color: #BDBDBD; transition: .3s; } 
.wrap_idx .tabSt > li.on { background-color: var(--siteC); color: #fff; } 
.wrap_idx .tabSt > li:first-of-type { border-radius: 100px 0 0 100px; } 
.wrap_idx .tabSt > li:last-of-type { border-radius: 0 100px 100px 0; }  */

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


/* 메인 탭버튼 */
/*main_tab*/
.main-tab { gap: .75em; margin-bottom: 1.5em; } 
.main-tab > li { } 
.main-tab .tab-btn { display: flex; cursor: pointer; align-items: center; justify-content: center; height: 3em; background: #fff; position: relative; padding: 0em 2em; border-radius: 3em; font-size: 1.15em; font-weight: 500; color: #333; transition: .3s; font-family: var(--fontJamsil); } 
.main-tab > li.on .tab-btn { background: var(--siteC); color: #fff; font-weight: 600; box-shadow: 3px 6px 12px rgba(0, 0, 0, .1); } 

/* .main-tab.white .tab-btn { background: #f7f7f7; }  */


/*심플 버튼*/
.txtarrow { display: flex; align-items: center; gap: .5em; } 
.txtarrow.white { color: #fff; } 
.txtarrow.posi1 { position: relative; top: 30px; } 
.txtarrow.pr { position: absolute; right: 0; top: 3em; } 
.txtarrow .tt { font-size: 1em; font-weight: 500; } 
.txtarrow .xi { font-size: 1em; } 

/*버튼*/
.btn_con { display: inline-block; } 
.main_more { display:flex; align-items:center; justify-content:center; border: 1px solid var(--siteC); color: var(--siteC);  gap:1em; height:3.15em; padding:0 2em; transition: .3s; } 
.main_more .t1 { font-size: 1em; font-weight:600 } 
.main_more .arrow { font-size:1em; transition: all ease-in .3s; } 
.main_more .arrow:before { content:"\e907" } 
.main_more.c1 { background: #fff; } 
.main_more.c2 { background:var(--siteC); color:#fff; } 
.main_more.w { border-color: #fff; color:#fff; } 
.main_more.w2 { border-color: #fff; color:#fff; background: rgba(255,255,255, .1); backdrop-filter: blur(20px);} 
.main_more:hover .arrow { transform: translateX(.3em); } 

.main_more:hover{ border-color: var(--siteC); background-color: var(--siteC); color: #fff;}
.main_more.w:hover { border-color: var(--siteC); background-color: var(--siteC); } 

/*부연설명 스타일*/
.est_tt { margin-top: 1em; } 
.est_tt.white { color: #fff; } 
.est_tt > li { margin-bottom: .35em; font-size: .85em; font-weight: 600; } 
.est_tt > li:last-of-type { margin-bottom: 0em; } 

/*슬라이드 css*/
.page_mq { overflow:hidden; } 
.page_mq .mqTT { display:flex; flex-shrink:0; white-space:nowrap; } 
.page_mq .mqTT > * { margin:0 .215em; } 

.marqueeAni { animation-name: marqueeAni; animation-duration: 60s; animation-timing-function:linear; animation-iteration-count: infinite } 
@keyframes marqueeAni { 
 0% { transform:translateX(0); } 
100% { transform:translateX(-50%); } 
 }

/****************************/

/*메인 비즈니스*/
.main_business { position: relative; width: 100%; height: 100%; } 
.business_wrap { display: flex; } 
.business_wrap .business_imgCon { position: relative; width: 40em; height: 73.5vh; } 
.business_wrap .business_imgCon .list-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; box-shadow: 1em 1em 4em rgba(0, 0, 0, .15); transition: 1s; } 
.business_wrap .business_imgCon .list-img > img { transform: scale(1.05); transition: 1s; } 
.business_wrap .business_imgCon .list-img.on { opacity: 1; } 
.business_wrap .business_imgCon .list-img.on > img { transform: scale(1); } 

.business_wrap .business_imgCon .list-img .infoT { position: absolute; width: 100%; box-sizing: border-box; text-align: center; padding: 0 2em; bottom: 3em; left: 50%; transform: translateX(-50%); } 
.business_wrap .business_imgCon .list-img .infoT > .tt { text-transform: uppercase; font-size: 1em; color: #fff; letter-spacing: 0em; font-weight: 600; transition: .75s; } 

.business_wrap .business_imgCon .list-img.on .infoT > .tt { letter-spacing: .15em; } 
.business_wrap .business_infoW { width: calc(100% - 35em); } 
.business_wrap .business_infoW .main_tit { padding-top: 3em; padding-left: 5em; padding-bottom: 3em; margin-bottom: 0em; border-bottom: 1px solid rgba(0,0,0, .1); box-sizing: border-box; } 
.business_wrap .business_infoW .business_list { } 
.business_wrap .business_infoW .business_list > .list-item { position:relative; border-bottom: 1px solid rgba(0,0,0, .1); width: 100%; height: 4.5em; } 
.business_wrap .business_infoW .business_list > .list-item:before { position: absolute; left: 0; bottom: 0; width: 0%; height:3px; background: #111; content: ''; z-index: 1; transition: .65s; } 
.business_wrap .business_infoW .business_list > .list-item > .inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 6em; box-sizing: border-box; } 
.business_wrap .business_infoW .business_list > .list-item > .inner > .tt { font-size: 2.15em; font-weight: 800; letter-spacing: -.025em; color: #111; transition: .25s; } 
.business_wrap .business_infoW .business_list > .list-item > .inner > .xi { font-size: 1.65em; transform: translateX(-.75em); opacity: 0; transition: .35s; } 

.business_wrap .business_infoW .business_list > .list-item:hover:before { width: 100%; } 
.business_wrap .business_infoW .business_list > .list-item:hover > .inner > .xi { transform: translateX(0em); opacity: 1; } 

.business_wrap .business_infoW .business_list > .list-item.on:before { width: 100%; } 
.business_wrap .business_infoW .business_list > .list-item.on > .inner > .xi { transform: translateX(0em); opacity: 1; } 
.business_wrap .business_infoW .business_list > .list-item.on > .inner > .tt { color: var(--siteC); } 

.business_wrap .loding_t { position: absolute; left: -3em; top: 0; } 
.business_wrap .loding_t > .txt { position:relative; text-transform: uppercase; font-size: 1.15em; font-weight: 600; writing-mode: tb; color: #c3c3c3; } 
.business_wrap .loding_t > .pro { position: relative; width: 2px; height: 100px; margin: 0 auto; background: #E0E4E8; margin-top: 32px; } 
.business_wrap .loding_t > .pro:before { content: ''; display: block; width: 100%; background: var(--siteC); position: absolute; top: 0; left: 0; animation: 3s pro infinite linear; } 

@keyframes pro { 
 0% { height: 0 } 
 100% { height: 100% } 
 }

/*메인 서비스*/
.main_service{ position: relative;}
.main_service:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .815); content: ''; z-index: 1;}
.service_wrap { position:relative; display: flex; gap: 4em; align-items: center; z-index: 2;} 
.service_wrap .info_con { width: 40%; } 
.service_wrap .serviceSlide_wrap { width: 60%; } 
.service_wrap .serviceSlide_wrap .serviceSlide { margin-right: -17.5em; } 
.service_wrap .serviceSlide_wrap .serviceSlide .el { } 
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner { position: relative; overflow: hidden; } 
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .35); content: ''; z-index: 1; } 
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner:after { content: ''; display: block; width: calc(100% + 40px); height: 0; background: linear-gradient(to top, var(--siteC), transparent); position: absolute; left: -20px; bottom: 0; z-index: 1; opacity: 0; transition: all .3s linear; } 
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .img_con { width: 100%; height: 35em; overflow: hidden; } 
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .img_con > img { transition: ease-out .5s; } 
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .infoT { position: absolute; bottom: 2em; width: 100%; padding: 0 2em; box-sizing: border-box; z-index: 2; transition: .75s; } 
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .infoT > .title { font-size: 1.65em; font-weight: 600; color: #fff;} 
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .infoT > .t1 { font-size: 1.125em; font-weight: 500; color: #ddd; margin-bottom: .5em;} 
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .infoT > .info_list { } 
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .infoT > .info_list > li { position: relative; margin-bottom: .3em; font-size: 1em; color: rgba(255,255,255, .75); padding-left: 1em; } 
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .infoT > .info_list > li:last-of-type { margin-bottom: 0em; } 
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .infoT > .info_list > li:before { position: absolute; top: 50%; left: .25em; width: 4px; height: 4px; background: #fff; transform: translateY(-50%); content: ''; } 

.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner:hover:after { opacity: 1; height: 100%; } 
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner:hover > .img_con > img { transform: scale(1.05); } 

.service_control { margin-top: 3em; } 
.service_control .paging { color:#fff; width:auto; display:flex; align-items: center; } 
.service_control .control { position: relative; display: flex; align-items: center; gap: .75em; } 
.service_control .control .progress-container { display: flex; align-items: center; gap: 1em; } 
.service_control .control .progress-container .progress-bar { position: relative; bottom: 0; width: 120px; height: 2px; background: rgba(255,255,255, .6); } 
.service_control .control .progress-container .progress-bar span { background: #fff; } 
.service_control .control .progress-container .current-slide,
.service_control .control .progress-container .total-slide { font-weight: 600; } 

.service_control .control .prev,
.service_control .control .next { background: transparent; font-size: 1.45em; } 
.service_control .control .next:before { content: '\e90b'; } 
.service_control .control .prev:before { content: '\e908'; } 

/*메인 브랜드*/
.main_customer { background: #f2f2f2; flex-direction: column;} 
.main_customer .brand_wrap { width: 100%;} 
.main_customer .brand_wrap .brand_list { } 
.main_customer .brand_wrap .brand_list > li { } 
.main_customer .brand_wrap .brand_list > li > .in { border: 1px solid #ddd; } 
.main_customer .brand_wrap .brand_list > li > .in > .logo_con { display: flex; align-items: center; justify-content: center; width: 100%; height: 6em; background: #fff; } 
.main_customer .brand_wrap .brand_list > li > .in > .logo_con > img { width: 55%; height: 4em; object-fit: contain; } 

.main_customer .customer_top{display: flex; width: 100%;}

.ComWrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; } 
.ComWrap .Circle_wrap { width: 90%; margin: 0 auto; padding: 4em 4.5em; box-sizing: border-box; background: rgba(255,255,255, .1); backdrop-filter: blur(20px); border-radius: 500px; } 
.ComWrap .Circle_wrap .Cir_list { display: flex; gap: 2em; } 
.ComWrap .Circle_wrap .Cir_list > li { flex: 1; } 
.ComWrap .Circle_wrap .Cir_list > li > .con { text-align: center; color: #fff; display: flex; align-items: center; flex-direction: column;} 
.ComWrap .Circle_wrap .Cir_list > li > .con > .icon { display: flex; align-items: center; justify-content: center; margin-bottom: 1.5em; padding: 1.4em; box-sizing: border-box; border-radius: 50%; background: rgba(255, 255, 255, .2); width: 6.8em; height: 6.8em;} 
.ComWrap .Circle_wrap .Cir_list > li > .con > .icon > img { width: 100%; height: 75px; object-fit: contain; filter: var(--crWhitefil); } 
.ComWrap .Circle_wrap .Cir_list > li:nth-child(3) > .con > .icon > img{width: 84%;}
.ComWrap .Circle_wrap .Cir_list > li > .con > .txt_wrap .txtT { letter-spacing: 2.5px;} 
.ComWrap .Circle_wrap .Cir_list > li > .con > .txt_wrap .t1 { font-size: 3.25em; font-weight: 700; text-transform: uppercase;} 
.ComWrap .Circle_wrap .Cir_list > li > .con > .txt_wrap .txt { font-size: 1.125em; margin-top: 0.5em;} 


/*바로돔*/
.main_barodoum { position: relative; } 
.main_barodoum:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.35); content: ''; z-index: 1; } 
.main_barodoum .infoAll { position: absolute; height: calc(100vh - 25em); left: 50%; transform: translateX(-50%); z-index: 2; } 
.main_barodoum .intro_wrap { position: absolute; width: 100%; top: 55%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; } 
.main_barodoum .intro_wrap > .icon { text-align: center; margin: 0 auto;} 
.main_barodoum .intro_wrap > .icon > img{ height: 80px; object-fit: contain; filter: var(--crWhitefil);} 

.main_barodoum .cir_con { position: absolute; top: 0; right: 0; } 
.main_barodoum .cir_con .cir_list { display: flex; } 
.main_barodoum .cir_con .cir_list > li { display: flex; align-items: center; justify-content: center; width: 8.5em; height: 8.5em; border-radius: 50%; background: #c503038f; } 
.main_barodoum .cir_con .cir_list > li > .cenT { font-size: 1.25em; font-weight: 600; color: #fff; } 

/*커스터머*/
.main_customer .wrap_bg { width: 30%; height: 73vh; display: flex; align-items: center; } 
.main_customer .wrap_bg .wrap_in { width: 100%; box-sizing: border-box; padding: 0 0 0 4vw; z-index: 1; } 
.main_customer .wrap_cs { margin-right:4vw; padding:2em; color:#fff; position:relative } 
.main_customer .wrap_cs:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--siteC); opacity:.8; border-radius:.5em } 
.main_customer .wrap_cs .in { display:flex; gap:0 2em; align-items:center; position:relative } 
.main_customer .wrap_cs .ico { height:4em; filter:brightness(0) invert(1) } 
.main_customer .wrap_cs .t1 { font-size:1.15em } 
.main_customer .wrap_cs .t2 { font-size:2.25em; font-weight:800 } 

.main_customer .customer_wrap { position:relative; width: 70%; height: 73vh; flex-direction: column; justify-content: center; background: #fff; display: flex; align-items: center; padding: 0 8vw 0 6vw; box-sizing: border-box; padding-top: 2vw;} 
.main_customer .customer_wrap .customer_linkW { width: 100%; margin-bottom: 2em; margin-top: 100px; } 
.main_customer > .wrap_con{width: 100%;}


/* .main_customer .customer_wrap .customer_linkW .link_list > li { flex: 1; } 
.main_customer .customer_wrap .customer_linkW .link_list > li > .in { height: 100%; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; transition: all .3s; } 
.main_customer .customer_wrap .customer_linkW .link_list > li > .in > .infocon { border: 1px solid #ddd; padding: 1.5em; width: 100%; box-sizing: border-box; } 
.main_customer .customer_wrap .customer_linkW .link_list > li > .in > .infocon > .tt { font-size: 1.15em; margin-bottom: .5em; font-weight: 700; } 
.main_customer .customer_wrap .customer_linkW .link_list > li > .in > .infocon > .tx { font-size: .95em; color: #666; line-height: 1.3; } 

.main_customer .customer_wrap .customer_linkW .link_list > li > .in > .icon { } 
.main_customer .customer_wrap .customer_linkW .link_list > li > .in > .icon > img { } 

.main_customer .customer_wrap .customer_linkW .link_list > li > .in > .img_con { width: 100%; height: 11.5em; overflow: hidden; } 
.main_customer .customer_wrap .customer_linkW .link_list > li > .in > .img_con > img { transition: .3s; } 
.main_customer .customer_wrap .customer_linkW .link_list > li > .in > .tt { font-size: 1.15em; font-weight: 600; margin-top: 1em; } 

.main_customer .customer_wrap .customer_linkW .link_list > li > .in:hover > .img_con > img { transform: scale(1.05); } 
 */
.customer_wrap .page_mq { position: absolute; left: 0; bottom: 0em; z-index: 2; } 
.customer_wrap .page_mq .tit { font-size: 5.5em; font-weight: 900; color: rgba(0,0,0, .03); text-transform: uppercase; line-height: .8; letter-spacing: -.05em; } 

/**/
.main_customer .customer_wrap .customer_linkW .link_con { width: 100%; } 
.main_customer .customer_wrap .customer_linkW .link_con .inner{ width: 100%;}

.main_customer .customer_wrap .customer_linkW .link_con { display: flex; gap: 1em; } 
.main_customer .customer_wrap .customer_linkW .link_con .link_banner { position: relative; display: block; width: 100%; height: 14.5em; overflow: hidden; } 
.main_customer .customer_wrap .customer_linkW .link_con .link_banner:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 65%); content: ''; z-index: 1; } 
.main_customer .customer_wrap .customer_linkW .link_con .link_banner .img_con { width: 100%; height: 100%; } 
.main_customer .customer_wrap .customer_linkW .link_con .link_banner .img_con > img { transition: .3s; } 
.main_customer .customer_wrap .customer_linkW .link_con .link_banner .info_con { position: absolute; top: 3em; left: 3em; color: #fff; z-index: 2; } 
.main_customer .customer_wrap .customer_linkW .link_con .link_banner .info_con .tit { font-size: 1.5em; font-weight: 700; margin-bottom: .55em; } 
.main_customer .customer_wrap .customer_linkW .link_con .link_banner .info_con .txt { font-size: 1.06em; color: rgba(255,255,255,.8); font-weight: 500; } 
.main_customer .customer_wrap .customer_linkW .link_con .link_banner .info_con .num_con { display: flex; gap: .5em; align-items: center; margin-top: .5em; color: #fff; } 
.main_customer .customer_wrap .customer_linkW .link_con .link_banner .info_con .num_con > .xi { width: 1.75em; height: 1.75em; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 50%; font-size: 1.65em; } 
.main_customer .customer_wrap .customer_linkW .link_con .link_banner .info_con .num_con > .num { font-size: 1.85em; font-weight: 800; } 

.main_customer .customer_wrap .customer_linkW .link_con .link_banner .main_cir { position: absolute; bottom: 3em; right: 3em; color: #fff; z-index: 2; transition: .3s; } 
.main_customer .customer_wrap .customer_linkW .link_con .link_banner:hover .main_cir { background: #fff; color: var(--siteC); } 

.main_customer .customer_wrap .customer_linkW .link_con .link_banner:hover .img_con > img { transform: scale(1.1); } 

.main_customer .customer_wrap .customer_linkW .link_con .link_banner .roundArrow{position: absolute; width: 3em; height: 3em; bottom: 2em; right: 2em; transition: 0.3s ease-in-out;}
.main_customer .customer_wrap .customer_linkW .link_con .link_banner:hover .roundArrow{background: var(--siteC);}
.main_customer .customer_wrap .customer_linkW .link_con .link_banner .roundArrow .xi{transition: 0.3s ease-in-out;}
.main_customer .customer_wrap .customer_linkW .link_con .link_banner:hover .roundArrow .xi{color: #fff; rotate: -45deg;}


/*제품*/
.main_productList{ margin: .3em 0 1.5em; padding: .7em;}
.main_productList .productList{ }
.main_productList .productList > li{ }
.main_productList .productList > li > .inner{ position: relative; flex: 1;  transition: .3s ease; padding: 1em; box-sizing: border-box; background: #fff; border-radius: 1em; box-shadow: 0 1px 16px rgba(0,0,0,.2);}
.main_productList .productList > li:hover > .inner{background: var(--siteC);}
.main_productList .productList > li:hover > .inner > .txtBox .top_txt .t1,
.main_productList .productList > li:hover > .inner > .txtBox .title{color: #fff;}
.main_productList .productList > li:hover > .inner > .txtBox .txtBottom .desc{color: #fff;}
.main_productList .productList > li > .inner .lineImg{ position: absolute; top: -1em; right: 0; width: 18svw; opacity: 0; transition: .3s ease;}
.main_productList .productList > li > .inner .lineImg > img{ width: 100%; height: 100%; object-fit: contain; opacity: .1;} 
.main_productList .productList > li > .inner > .imgBox{ position: relative; text-align: center; height: 30svh; padding: 2em 2em; box-sizing: border-box; border-radius: 1em; background: #f1f1f1;}
.main_productList .productList > li > .inner > .imgBox > img{ width: 100%; height: 100%; object-fit: contain;}
.main_productList .productList > li > .inner > .txtBox{ margin: 1.3em 0 3em; padding: 0 .6em; box-sizing: border-box;}
.main_productList .productList > li > .inner > .txtBox .top_txt{ margin-bottom: .4em;}
.main_productList .productList > li > .inner > .txtBox .top_txt .t1{font-size: 1.06em; color: var(--siteC); font-weight: 700;}
.main_productList .productList > li > .inner > .txtBox .title{font-size: 1.38em; font-weight: 700; margin-bottom: .6em;}

.main_product .productTop {margin-bottom: 1.5em;}
.main_product .productTop .main_tit{text-transform: uppercase; margin-bottom: 0;}

.main_product .main_control{}
.main_product .main_control .swiperBtn {width: 2.4em; height: 2.4em; border-radius: 0px; background: #333; color: #fff; font-weight: 600; font-size: 1.5em;}
.main_product .main_control .swiperBtn.prev{background: #fff; border: 1px solid var(--siteC); color: var(--siteC);}

.roundArrow { width: 2.5em; height: 2.5em; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .3s ease; }
.roundArrow.b1 { background: transparent; border: 1px solid #ddd; color: var(--siteC); } 
.roundArrow.b2 { background: var(--siteC); color: #fff; border: 1px solid var(--siteC); } 
.roundArrow.b3 { background: #fff; color: var(--siteC);border: none; } 
/* .roundArrow.b1:hover { background: var(--siteC); border: 1px solid var(--siteC); color: #fff; } */

.main_productList .productList > li > .inner > .roundArrow { transform: translateX(-2rem); rotate: -45deg; opacity: 0; position: absolute; transition: 0.3s ease-in-out; right: 1em; bottom: 1em; background: #fff;}
.main_productList .productList > li:hover > .inner > .roundArrow { transform: translateX(0); opacity: 1;  }

.main_product .page_mq { position: absolute; width: 100%; left: 0; bottom: -1.25em; z-index: 1; } 
.main_product > .box1{position: relative; z-index: 10;}
.page_mq { overflow:hidden; } 
.page_mq .mqTT { display:flex; flex-shrink:0; white-space:nowrap; text-transform: uppercase; } 
.page_mq .mqTT.bod { border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; } 
.page_mq .mqTT.c1 { color: rgba(255,255,255); } 
.page_mq .mqTT.c2 { color: #666; } 
.page_mq .mqTT > * { margin:0 .375em; } 
.page_mq .mqTT.sp1 > * { margin: 0 .15em; } 
.page_mq .mqTT .name { margin: 0 .375em 0 0; } 
.page_mq .mv_tit { } 
.page_mq .mv_tit .tit { font-weight: 800; line-height: 1; } 
.page_mq .mv_tit .tit.fs1 { font-size: 9em; } 
.page_mq .mv_tit .tit.fs2 { font-size: 20em; } 

.marqueeAni { animation-name: marqueeAni; animation-duration: 30s; animation-timing-function:linear; animation-iteration-count: infinite } 
@keyframes marqueeAni { 
 0% { transform:translateX(0); } 
100% { transform:translateX(-50%); } 
 }
.marqueeAni.sp1 { animation-duration: 40s; } 


/* .main_productList .productList > li > .inner > .txtBox{}
.main_productList .productList > li > .inner > .txtBox > .plusCon{ margin: 1.5em auto; width: 35px; height: 35px; border: 1px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .6s ease;}
.main_productList .productList > li > .inner > .txtBox > .plusCon > .xi{ color: #888;}
.main_productList .productList > li > .inner > .txtBox > .title{ text-align: center; font-size: 2.15em; font-weight: 700; transition: .6s ease;}
.main_productList .productList > li > .inner .txtBottom{ transform: translateY(0em); opacity: 0; transition: .6s ease;}
.main_productList .productList > li > .inner .txtBottom > .desc{ text-align: center; font-size: 1.15em; line-height: 1.4; margin-top: 1em;}
.main_productList .productList > li > .inner .txtBottom > .more{ display: flex; align-items: center; justify-content: center; margin-top: 1em; color: var(--siteC2);}
.main_productList .productList > li > .inner .txtBottom > .more > .tt{ font-size: 1.063em;}
.main_productList .productList > li > .inner .txtBottom > .more > .xi{} */

/* .main_productList .productList > li > .inner:hover{ background: #f0f0f0;}
.main_productList .productList > li > .inner:hover .txtBottom{ transform: translateY(-4em); opacity: 1;}
.main_productList .productList > li > .inner:hover .txtBox > .title{ transform: translateY(-2em);}
.main_productList .productList > li > .inner:hover .txtBox > .plusCon{ opacity: 0;}
.main_productList .productList > li > .inner:hover .lineImg{ opacity: 1;} */

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

/*서브 공통*/
.pageTxt { margin-bottom: 4em; word-break: keep-all; } 
.pageTxt.mb1 { margin-bottom: 1em; } 
.pageTxt.mb2 { margin-bottom: 1.5em; } 
.pageTxt.mb3 { margin-bottom: 2em; } 
.pageTxt.mb4 { margin-bottom: 2.5em; } 
.pageTxt.mbN { margin-bottom: 0em; } 
.pageTxt.pd { padding: 0 2.5em; } 
.pageTxt .t1 { font-size: 3.15em; font-weight: 800; color: #111; letter-spacing: -0.03em; line-height: 1; } 
.pageTxt .t2 { font-size: 2.815em; font-weight: 800; color: #111; letter-spacing: -0.03em; line-height: 1.4; } 
.pageTxt .t3 { font-size: 1.215em; font-weight: 700; margin-bottom: .5em; color: #111; letter-spacing: -0.025em; line-height: 1.4; } 
.pageTxt .t4 { font-size: 1.15em; font-weight: 500; color: #444; line-height: 1.6; margin-top: 1.5em; } 
.pageTxt .t5 { font-size: 2.15em; font-weight: 700; color: #111; line-height: 1.2; letter-spacing: -.03em; } 
.pageTxt .t6 { font-size: 3.15em; font-weight: 700; color: #111; line-height: 1; letter-spacing: -0.03em; } 
.pageTxt .t7 { font-size: 1.15em; font-weight: 500; letter-spacing: -0.05em; color: #111; line-height: 1.6; margin-top: 1.5em; } 
.pageTxt .t8 { font-size: 1.65em; font-weight: 700; letter-spacing: -0.05em; color: #111; } 

/**/
.subBanner { position: relative; width: 100%; height: 30em; } 
.subBanner:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .5); content: ''; } 
.subBanner .line { position: absolute; bottom: 0em; left: 50%; transform: translateX(-50%); height: 8em; width: 3px; background: #fff; } 
.subBanner .txtW { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; text-align: center; color: #fff; } 
.subBanner .txtW > .tt { text-transform: uppercase; font-size: 1.315em; font-weight: 600; } 

.page_con { padding: 4em 0; } 
.page_con.bg1 { background: #f0f4f7; } 
.page_con2 { padding: 2em 0; } 

/**/
.page_dot_list { padding: 0 1.25em; margin-top: 1.25em; } 
.page_dot_list.pN { padding: 0em; } 
.page_dot_list.pN > li:before { display: none; } 
.page_dot_list > li { position:relative; margin-bottom: .5em; letter-spacing: -0.05em; font-weight: 500; } 
.page_dot_list > li > .txt { font-size: 1em; } 
.page_dot_list > li:before { position: absolute; left: -15px; top: -1px; content: '-'; } 
.page_dot_list > li:last-of-type { margin-bottom: 0em; } 

.page_dot_list.s1 > li { font-size: .9em; } 
.page_dot_list.w1 { display: flex; flex-wrap: wrap; gap: .5em; } 
.page_dot_list.w1 > li { width: calc(50% - .5em); margin-bottom: 0em; } 

.page_dot_list.w2 { display: flex; flex-wrap: wrap; gap: .5em; } 
.page_dot_list.w2 > li { width: calc(33.33% - .5em); margin-bottom: 0em; } 


/**/
.page_col.div_T { gap: 3em; } 
.page_col.col.div_T { gap: 2em; } 
.page_col.div_T .Tleft { flex: 1 1 30%; } 
.page_col.div_T .Tleft .num { font-size: 1.1em; font-weight: 800; letter-spacing: -0.03em; margin-bottom: .5em; color: var(--siteC); } 
.page_col.div_T .Tright { flex: 1 1 70%; } 
.page_col.div_T .Tright .con + .con { margin-top: 6em; } 
.page_col.div_T .Tright .con:first-child { padding-top: 0.5em; } 

/**/
.proAll { display: flex; gap: 5em; } 
.proAll .Tleft { position: sticky; top: 15em; height: 100%; } 
.proAll .Tleft:after { } 
.proAll .Tright { width: 100%; border-left: 1px solid #eee; padding-left: 4em; } 
.proAll .page_dev { padding-bottom: 5em; margin-bottom: 5em; border-bottom: 1px solid #ddd; } 
.proAll .page_dev:first-of-type { padding-top: 0em; } 
.proAll .page_dev:last-of-type { padding-bottom: 0em; margin-bottom: 0em; border: none; } 
.proAll .Tright .sub_tit { position: relative; padding-left: .75em; margin-bottom: 1em; } 
.proAll .Tright .sub_tit:before { position: absolute; left: 0; width: 5px; height: 60%; top: 50%; transform: translateY(-50%); background: var(--siteC); content: ''; } 
.proAll .Tright .sub_tit .tt { font-size: 1.215em; font-weight: 600; margin-top: 1em; letter-spacing: -0.03em; } 

.page_dev .pageB { margin-bottom: 5em; } 

/**/
.lineBox { padding: 1.25em 1.75em; box-sizing: border-box; border: 2px solid var(--siteC); border-radius: .35em; } 
.lineBox > .tt { letter-spacing: -0.05em; font-weight: 600; line-height: 1.7; font-size: .9em; } 
.lineBox.cn { border: 2px solid #f2f2f2; } 

.lineBox.s2 { padding: 2.5em 3em; border: 3px solid #f2f2f2; margin-top: 1em; background: #f2f2f2; transition: .3s; } 
.lineBox.s2:hover { border: 3px solid var(--siteC); box-shadow: 1.5em 1.5em 2.5em rgba(230, 0, 18, 0.11); } 
.lineBox.s2.hN:hover { border: 3px solid transparent; box-shadow: none;; } 
.lineBox.s2 .tt { font-size: 1.15em; line-height: 1.4; font-weight: 500; } 

.lineBox.s3 { padding: 0em; border: 3px solid #f2f2f2; border-radius: .35em; transition: .3s; margin-bottom: 1.5em; } 
.lineBox.s3 .boxT { padding: 1.5em 2em; box-sizing: border-box; background: #f2f2f2; text-align: center; transition: .3s; } 
.lineBox.s3 .boxT > .tit { font-size: 1.415em; font-weight: 700; letter-spacing: -0.05em; } 
.lineBox.s3 .infoBox { padding: 2em 5em; box-sizing: border-box; } 
.lineBox.s3 .infoBox .infoimg { position: relative; width: 100%; height: 9.5em; border-radius: .5em; overflow: hidden; } 
.lineBox.s3 .infoBox .infoimg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .6); content: ''; } 
.lineBox.s3 .infoBox .infoimg > img { width: 100%; height: 100%; object-fit: cover; } 
.lineBox.s3 .infoBox .infoimg .pT { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; letter-spacing: .5em; font-size: 1.215em; font-weight: 700; } 

.lineBox.s3:hover { border: 3px solid var(--siteC); box-shadow: 1.5em 1.5em 2.5em rgba(230, 0, 18, 0.11); } 
.lineBox.s3:hover .boxT { background: var(--siteC); color: #fff; } 

.lineBox.s4 { padding: 2em 2.5em; box-sizing: border-box; background: #f9f9f9; border: none; } 

/**/
.grayBAll .lineBox { margin-bottom: 2em; } 
.grayBAll .lineBox:last-of-type { margin-bottom: 0em; } 
.WideNum_box { } 
.WideNum_box > .innerImg { width: 100%; height: 100%; } 
.WideNum_box > .innerImg > img { width: 100%; height: 100%; object-fit: contain; } 
.WideNum_box > .tit { font-size: 1.215em; margin-bottom: 1em; letter-spacing: -0.05em; font-weight: 600; } 
.WideNum_box > .wideNum_list { } 
.WideNum_box > .wideNum_list > li { margin-bottom: .5em; } 
.WideNum_box > .wideNum_list > li:last-of-type { margin-bottom: 0em; } 
.WideNum_box > .wideNum_list > li > .con { display: flex; gap: .75em; align-items: center; background: #f1f1f1; border-radius: .35em; padding: 1em 1.5em; } 
.WideNum_box > .wideNum_list > li > .con > .wideN { letter-spacing: -0.05em; font-weight: 600; color: rgba(0,0,0, .5); } 
.WideNum_box > .wideNum_list > li > .con > .tt { font-size: .95em; font-weight: 500; letter-spacing: -0.05em; color: #333; } 

/**/
.IcBox { margin-top: 1.5em; padding: 0 2vw; } 
.IcBox .flex_box { margin: 0 0 -.5em -.5em; } 
.IcBox .Iclist { } 
.IcBox .Iclist > li { } 
.IcBox .Iclist > li > .in { margin: 0 0 .5em .5em; } 
.IcBox .Iclist > li > .in > .inner { display: flex; align-items: center; padding: .45em .85em; box-sizing: border-box; background: #f2f2f2; gap: .5em; border-radius: .35em; } 
.IcBox .Iclist > li > .in > .inner > .xi { color: var(--siteC); } 
.IcBox .Iclist > li > .in > .inner > .BoxT { letter-spacing: -0.05em; font-weight: 600; color: #444; font-size: .95em; } 

.IcBox.areaN { margin: 0em; padding: 0; } 

/**/
.Logowrap { } 
.Logowrap .listCon { margin-bottom: 3.5em; } 
.Logowrap .listCon:last-of-type { margin-bottom: 0em; } 
.Logowrap .listCon .logoT { margin-bottom: 1.5em; } 
.Logowrap .listCon .logoT > .tt { font-size: 1.815em; letter-spacing: -0.05em; font-weight: 700; } 
.Logowrap .listCon li { } 
.Logowrap .listCon li > .in { } 
.Logowrap .listCon li > .in > .img_con { width: 100%; height: 7.5em; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: #f2f2f2; } 
.Logowrap .listCon li > .in > .img_con > img { width: 50%; height: 4.5em; object-fit: contain; } 

/**/
.Gbox { } 
.Gbox .Gboxlist { } 
.Gbox .Gboxlist > li { } 
.Gbox .Gboxlist > li > .in { position:relative; margin: 0 0 2em 2em; background: #f2f2f2; border-radius: .35em; padding: 3em 2.5em; box-sizing: border-box; height: 22em; transition: .3s; } 
.Gbox .Gboxlist > li > .in > .icon { position: absolute; bottom: 2.5em; right: 3em; margin-top: 2.5em; } 
.Gbox .Gboxlist > li > .in > .icon:after { position: absolute; top: 20%; transform: translateY(-50%); left: 0; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--siteC); opacity: .15; transition: .3s; content: ''; } 
.Gbox .Gboxlist > li > .in > .icon > img { width: 3.5em; transition: .3s; } 
.Gbox .Gboxlist > li > .in > .title { margin-bottom: 1.5em; } 
.Gbox .Gboxlist > li > .in > .title > .tt { font-size: 1.415em; font-weight: 700; letter-spacing: -0.05em; transition: .3s; } 
.Gbox .Gboxlist > li > .in > .txtW { } 
.Gbox .Gboxlist > li > .in > .txtW > .tt { font-size: .95em; font-weight: 600; color: #444; letter-spacing: -.05em; line-height: 1.7; transition: .3s; } 
.Gbox .Gboxlist > li > .in > .page_dot_list { transition: .3s; } 

.Gbox .Gboxlist > li > .in:hover { background: var(--siteC); } 
.Gbox .Gboxlist > li > .in:hover .icon > img { filter: brightness(0) invert(1); } 
.Gbox .Gboxlist > li > .in:hover .title > .tt { color: #fff; } 
.Gbox .Gboxlist > li > .in:hover .txtW > .tt { color: #fff; } 
.Gbox .Gboxlist > li > .in:hover > .icon:after { background: rgba(255,255,255, 1); opacity: .3; } 
.Gbox .Gboxlist > li > .in:hover .page_dot_list { color: #fff; } 

/**/
.Simbox { } 
.Simbox .Simbox_list { } 
.Simbox .Simbox_list > li { } 
.Simbox .Simbox_list > li .in { border: 2px solid var(--siteC); border-radius: .5em; overflow: hidden; } 
.Simbox .Simbox_list > li .in .topT { padding: 1em; text-align: center; box-sizing: border-box; background: var(--siteC); color: #fff; } 
.Simbox .Simbox_list > li .in .topT > .tt { font-size: 1.215em; font-weight: 700; letter-spacing: -0.05em; } 
.Simbox .Simbox_list > li .in .btmC { padding: 1.5em; box-sizing: border-box; } 
.Simbox .Simbox_list > li .in .simlistB { } 
.Simbox .Simbox_list > li .in .simlistB > li { padding: .65em 1.5em; margin-bottom: .5em; text-align: center; border-radius: .35em; background: #f2f2f2; } 
.Simbox .Simbox_list > li .in .simlistB > li:last-of-type { margin-bottom: 0em; } 
.Simbox .Simbox_list > li .in .simlistB > li > .tt { font-size: .95em; font-weight: 600; color: #444; } 

.merit_wrap { } 
.merit_wrap .merit_list { } 
.merit_wrap .merit_list > li { } 
.merit_wrap .merit_list > li.wide { flex: 1 1 100%; max-width: 100%; } 
.merit_wrap .merit_list > li > .in { } 
.merit_wrap .merit_list > li > .in > .inner { border: 2px solid #f2f2f2; border-radius: .5em; padding: 1em 1.5em; transition: .3s; } 
.merit_wrap .merit_list > li > .in > .inner .merit_tt { font-size: .8em; color: var(--siteC); font-weight: 500; margin-bottom: .5em; } 
.merit_wrap .merit_list > li > .in > .inner > .tt { font-size: 1.15em; font-weight: 600; color: #000; letter-spacing: -0.05em;; } 
.merit_wrap .merit_list > li > .in > .inner > .intxt { font-size: .9em; letter-spacing: -0.05em; line-height: 1.4; color: #444; font-weight: 500; margin-top: .5em; } 
.merit_wrap .merit_list > li > .in:hover > .inner { border: 2px solid var(--siteC); box-shadow: 1.5em 1.5em 2.5em rgba(230, 0, 18, 0.11); } 

.icon_list { } 
.icon_list > li { display: flex; } 
.icon_list > li .inner { display: flex; align-items: center; border: 2px solid #f2f2f2; border-radius: .35em; overflow: hidden; width: 100%; min-height: 6em; flex-grow: 1; transition: .3s; } 
.icon_list > li { margin-bottom: .75em; } 
.icon_list > li:last-of-type { margin-bottom: 0em; } 
.icon_list > li .iconB { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; width: 6em; min-width: 9em; background: #f2f2f2; transition: .3s; } 
.icon_list > li .iconB > img { width: 3em; height: 100%; object-fit: contain; transition: .3s; } 
.icon_list > li .iconB:after { position: absolute; top: 40%; transform: translateY(-50%); left: 3em; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--siteC); opacity: .15; transition: .3s; content: ''; } 
.icon_list > li .txtinfo { display: flex; flex-direction: column; justify-content: center; padding: 1.5em 3em; box-sizing: border-box; width: 100%; height: 100%; } 
.icon_list > li .txtinfo .tit { font-size: .9em; color: var(--siteC); letter-spacing: -0.03em; font-weight: 500; } 
.icon_list > li .txtinfo .txt { font-size: 1.415em; font-weight: 700; letter-spacing: -0.05em; margin-top: .25em; } 
.icon_list > li .txtinfo.s1 .txt { font-size: 1.15em; } 
.icon_list > li .txtinfo .numT { font-size: 1.15em; font-weight: 700; color: var(--siteC); letter-spacing: -.05em; } 

.icon_list > li .inner:hover { border: 2px solid var(--siteC); box-shadow: 1.5em 1.5em 2.5em rgba(230, 0, 18, 0.11); } 
.icon_list > li .inner:hover .iconB { background: var(--siteC); } 
.icon_list > li .inner:hover .iconB > img { filter: brightness(0) invert(1); } 
.icon_list > li .inner:hover .iconB:after { background: rgba(255,255,255, 1); opacity: .3; } 

.icon_list.w2 { display: flex; flex-wrap: wrap; margin: 0 0 -1em -1em; } 
.icon_list.w2 > li { flex: 1 1 50%; max-width: 50%; margin-bottom: 0em; } 
.icon_list.w2 > li > .inner { margin: 0 0 1em 1em; } 
.icon_list.w2 > li .iconB { min-width: 6em; } 
.icon_list.w2 > li .iconB > img { width: 2.75em; } 
.icon_list.w2 > li .iconB:after { left: 1.5em; } 
.icon_list.w2 > li .txtinfo { padding: 0 2.25em; } 

.tab_con { position: sticky; top: var(--headerT); width: 100%; align-items: center; border-bottom: 1px solid #ddd; background: #f2f2f2; color: #111; transition: 1s; z-index: 99; } 
.tab_con .sub-tab { justify-content: center; } 
.tab_con .sub-tab > li { position: relative; flex: 1; } 
.tab_con .sub-tab > li:after { position: absolute; bottom: 0; width: 100%; transform: scaleX(0); height: 3px; background: var(--siteC); content: ''; transition: .5s; } 
.tab_con .sub-tab > li.on:after { transform: scaleX(1); } 
.tab_con .sub-tab > li > .tab-btn { display: flex; text-transform: uppercase; align-items: center; cursor: pointer; letter-spacing: -.03em; justify-content: center; font-size: 1.1em; font-weight: 600; color: #666; height: 4.5em; transition: .3s; position: relative; } 
.tab_con .sub-tab > li > .tab-btn.tori{ text-transform: unset;}
.tab_con .sub-tab > li.on > .tab-btn { color: var(--siteC); } 

/**/
.ImgBox { } 
.ImgBox .ImgBox_list { } 
.ImgBox .ImgBox_list > li { } 
.ImgBox .ImgBox_list > li > .in { margin: 0 0 2em 2em; } 
.ImgBox .ImgBox_list > li > .in >.img_wrap { position: relative; width: 100%; height: 20em; border-radius: .5em; overflow: hidden; } 
.ImgBox .ImgBox_list > li > .in >.img_wrap:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .5); content: ''; } 
.ImgBox .ImgBox_list > li > .in >.img_wrap > img { width: 100%; height: 100%; object-fit: cover; } 
.ImgBox .ImgBox_list > li > .in >.img_wrap .infoWrap { position: absolute; left: 3em; width: 100%; padding-right: 3em; box-sizing: border-box; bottom: 2em; color: #fff; } 
.ImgBox .ImgBox_list > li > .in >.img_wrap .infoWrap .tit { font-size: 1.615em; font-weight: 700; margin-bottom: .75em; letter-spacing: -0.05em; } 


/*토탈보안*/
.security_wrap { position: relative; } 
.security_wrap .cir_inner { position: absolute; display: flex; align-items: center; flex-direction: column; justify-content: center; border-radius: 50%; background: var(--siteC2); color: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 19em; height: 19em; box-shadow: 0 25px 30px #2E3B8030; } 
.security_wrap .cir_inner:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25em; height: 25em; border: 4px dotted #d2ddff; border-radius: 50%; animation-name: rotateAni; animation-duration: 50s; transform-origin: center; animation-timing-function: linear; animation-iteration-count: infinite; } 
.security_wrap .cir_inner .icon { } 
.security_wrap .cir_inner .icon > .xi { font-size: 5.15em; } 
.security_wrap .cir_inner .tt { font-size: 2.15em; font-weight: 800; } 
.security_wrap .security_list { } 
.security_wrap .security_list > li { display: flex;} 
.security_wrap .security_list > li.Ori { flex: 1 1 50%; max-width: 50%; } 
.security_wrap .security_list > li > .in { width: 100%;} 
.security_wrap .security_list > li > .in > .inner { box-sizing: border-box; padding: 3em; background: #f7f7f7; border-radius: 1em; height: 100%;} 
.security_wrap .security_list > li > .in > .inner > .title { font-size: 2.15em; font-weight: 800; margin-bottom: 1.25em; } 
.security_wrap .security_list > li > .in > .inner > .page_dot_list{}
.security_wrap .security_list > li:nth-child(1) .in > .inner { text-align: left; } 
.security_wrap .security_list > li:nth-child(2n) .in > .inner { text-align: right; padding-left: 8em;} 
.security_wrap .security_list > li:nth-child(2n) .in > .inner .page_dot_list li:before { right: -15px; } 

@keyframes rotateAni { 100% { transform: translate(-50%, -50%) rotate(360deg); } 
 }

/*소닉월 시큐리티*/
.sTn_wrap { position: relative; width: 16.5em; } 
.sTn_wrap .sTn { position: relative; display: flex; align-items: center; justify-content: center; border-radius: .5em; height: 4em; padding: .65em 1.5em; box-sizing: border-box; background: #f2f2f2; color: #111; transition: .3s; width: 14.5em; } 
.sTn_wrap .sTn:before { position: absolute; top: 50%; right: 2em; transform: translateY(-50%); font-family: 'xeicon'; content: '\e907'; color: #444; font-size: 1.65em; opacity: 0; transition: .3s; } 
.sTn_wrap .sTn .tt { font-size: 1.0515em; font-weight: 600; text-align: center; letter-spacing: -0.03em; } 

.sTn_wrap li .sTn.on { width: 19em; background: var(--siteC); justify-content: space-between; text-align: left; color: #fff; padding: .65em 2em; } 
.sTn_wrap li .sTn.on:before { opacity: 1; right: 1em; } 
.sTn_wrap li .sTn.on:before { color: #fff; } 
.sTn_wrap .pimg { padding: 1.5em; box-sizing: border-box; text-align: center; } 

.TrAll_wrap { } 
.TrAll_wrap .sub_boxW { margin-bottom: 3em; padding-bottom: 3em; border-bottom: 1px solid #eee; } 
.TrAll_wrap .sub_boxW:last-of-type { padding-bottom: 0em; margin-bottom: 0em; border-bottom: none; } 
.TrAll_wrap .tit_wrap { margin-bottom: 1.5em; } 
.TrAll_wrap .tit_wrap > .tit { font-size: 2.615em; font-weight: 700; letter-spacing: -0.05em; } 
.TrAll_wrap > .tit { font-size: 2.615em; font-weight: 700; letter-spacing: -0.05em; } 
.TrAll_wrap .txt { font-size: 1.15em; font-weight: 600; letter-spacing: -0.05em; margin-top: .75em; color: #333; line-height: 1.4; } 
.TrAll_wrap .imgwrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3em; box-sizing: border-box; background: #f2f2f2; border-radius: .5em; } 
.TrAll_wrap .imgwrap > img { width: 100%; height: 100%; object-fit: contain; } 
.TrAll_wrap .imgwrap.s1 > img { width: 50%; } 
.TrAll_wrap .imgwrap .innerT { margin-top: 3em; } 
.TrAll_wrap .imgwrap .innerT .tt { font-size: 1.25em; letter-spacing: -0.05em; font-weight: 500; line-height: 1.4; } 

.TrAll_wrap .imgwrap.bgN { background: #fff; border: 2px solid #f2f2f2; } 
.TrAll_wrap .dev_sec { display: flex; gap: 2em; } 
.TrAll_wrap .dev_sec .leftC { width: 50%; } 
.TrAll_wrap .dev_sec .leftC > .img_con { width: 100%; height: 100%; border: 1px solid #ddd; } 
.TrAll_wrap .dev_sec .leftC > .img_con > img { width: 100%; height: 100%; object-fit: contain; } 
.TrAll_wrap .dev_sec .rightC { display: flex; flex-direction: column; justify-content: space-between; width: 50%; } 

/*double_take*/
.doble_wrap { display: flex; align-items: center; background: #f2f2f2; padding: 3.5em; box-sizing: border-box; border-radius: 1em; } 
.doble_wrap .logo_con { width: 30%; margin-right: 3em; padding-right: 3em; border-right: 1px solid #ddd; } 
.doble_wrap .logo_con > img { width: 100%; height: 100%; object-fit: contain; } 
.doble_wrap .txtT { width: 70%; } 
.doble_wrap .txtT > .tit { font-size: 1.215em; font-weight: 600; margin-bottom: 1em; letter-spacing: -0.05em; } 
.doble_wrap .txtT > .tt { font-size: 1em; font-weight: 500; letter-spacing: -0.05em; line-height: 1.7; } 

/*onq*/
.charNum > .tit { font-size: 1.815em; font-weight: 700; margin-bottom: 1em; letter-spacing: -0.05em; } 
.Numwrap { padding: 4em 3em; background: #f9f9f9; border-radius: 1em; box-sizing: border-box; } 
.Numwrap .Numlist { } 
.Numwrap .Numlist li { } 
.Numwrap .Numlist li > .in { display: flex; align-items: center; gap: 1em; margin: 0 0 1em 2em; } 
.Numwrap .Numlist li > .in > .round_N { } 
.Numwrap .Numlist li > .in > .round_N > .rT { font-size: .9em; font-weight: 700; letter-spacing: -0.05em; width: 2.5em; height: 2.5em; background: var(--siteC); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; } 
.Numwrap .Numlist li > .in > .box_Tit { letter-spacing: -0.03em; width: 100%; font-weight: 500; padding: 1em 1.5em; box-sizing: border-box; background: #f5f8ff; border: 1px solid #ddd; border-radius: .35em; } 

.effect_listW { } 
.effect_listW .effect_list { } 
.effect_listW .effect_list > li { } 
.effect_listW .effect_list > li > .in { } 
.effect_listW .effect_list > li > .in > .img_con { position: relative; width: 100%; height: 12.5em; border-radius: .5em; overflow: hidden; } 
.effect_listW .effect_list > li > .in > .img_con:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .25); content: ''; } 
.effect_listW .effect_list > li > .in > .img_con > img { width: 100%; height: 100%; object-fit: cover; } 
.effect_listW .effect_list > li > .in > .info { padding: 1.5em; box-sizing: border-box; text-align: center; } 
.effect_listW .effect_list > li > .in > .info > .tt { font-size: 1.215em; font-weight: 700; letter-spacing: -0.03em; } 
.effect_listW .effect_list > li > .in > .info > .cbtn { display: inline-block; margin-top: 1em; background: var(--siteC2); color: #fff; padding: .5em 1em; border-radius: .35em; letter-spacing: -.03em; font-weight: 600; } 
.effect_wrap .arrow_con { text-align: center; } 
.effect_wrap .arrow_con > .xi { font-size: 3.15em; color: var(--siteC2) } 
.effect_wrap .grayB { padding: 2.5em; margin-top: 1.5em; box-sizing: border-box; background: #f2f2f2; color: #111; text-align: center; border-radius: .5em; } 
.effect_wrap .grayB > .tt { font-size: 1.815em; font-weight: 700; letter-spacing: -0.03em; } 

/* 서비스지원 */
.icon_circle { gap:1.25em; padding: .75em; border-radius: 20em; background: #f4f4f4; } 
.icon_circle > li { } 
.icon_circle > li .in { display: flex; flex-direction: column; justify-content: center; align-items: center; gap:1.25em; width: 20.5em; height: 20.5em; padding: 1.5em 2em; box-sizing: border-box; border-radius: 50%; box-shadow: 0 5px 10px rgba(0, 0, 0, .15) } 
.icon_circle > li:nth-child(1) .in { background: linear-gradient(90deg, #1b448c, #0673ba); } 
.icon_circle > li:nth-child(2) .in { background: linear-gradient(90deg, #0673ba, #03b58d); } 
.icon_circle > li:nth-child(3) .in { background: linear-gradient(90deg, #03b58d, #0082f6); } 
.icon_circle > li:nth-child(4) .in { background: linear-gradient(90deg, #0673ba, #1b448c); } 
.icon_circle > li .in dl { color:#fff; text-align: center; word-break: keep-all; } 
.icon_circle > li .in dl .tit { font-weight: 700; font-size: 1.5em; } 
.icon_circle > li .in dl .desc { margin-top: 1em; opacity: .85; } 
.icon_circle > li .in .icon { order:-1; width: 3em; height: 3em; margin:0 auto; } 

.csCenter_box { position: relative; width: 100%; margin: 5em auto 0; border-radius: 0 4em 0 0; background: linear-gradient( 1355deg, #373B44, #4286f4); } 
.csCenter_box .inner { min-height:24em; padding: 6em 4em; box-sizing: border-box; position: relative; z-index: 0; overflow: hidden; } 
.csCenter_box .inner::before { content: ""; position: absolute; right:0; bottom:0; width: 486px; height: 274px; background: url(/images/sub/csCenterBox_bg.png); z-index: -1; opacity: .7; } 
.csCenter_box .img_wrap { overflow: hidden; position: absolute; left: 4em; top: -4em; width: 35%; border-radius: 0 0 0 4em; box-shadow: 0px 10px 20px rgba(5, 55, 47, 0.2); } 
.csCenter_box .img_wrap .img { width: 100%; padding-bottom: 80%; } 
.csCenter_box .txt_wrap { width: 62%; margin-left:auto; padding-left: 7em; padding-left: 4em; box-sizing: border-box; } 
.csCenter_box .txt_wrap .sub { display: block; font-size: 1em; color: #fff; opacity: .8; } 
.csCenter_box .txt_wrap .tit { display: block; font-weight: 600; font-size: 2em; color: #fff; letter-spacing: -0.04em; line-height: 1.3; } 
.csCenter_box .txt_wrap p { color:#fff; } 
.csCenter_box .txt_wrap .contactNum { margin-top: 2em; } 
.csCenter_box .txt_wrap .contactNum .num { font-weight: 600; font-size: 3.5em; } 
.csCenter_box .txt_wrap .contactNum .t1 { font-size: 1.125em; } 

/* 아웃소싱컨설팅 */
.outsourcing_digW { margin-top:2em; } 
.outsourcing_dig { } 
.outsourcing_dig .digIn { border: 3px solid transparent; border-radius: 4em; overflow: hidden; background-image: linear-gradient(#fff, #fff), var(--crGrad1); background-origin: border-box; background-clip: content-box, border-box; text-align: center; } 
.outsourcing_dig .digIn .wrapIn { padding: 3em 2.5em 3.5em; } 
.outsourcing_dig .digIn .t1 { /* width: 75%; */
 margin: 0 auto 1em; padding-bottom: 1em; border-bottom: 1px dashed var(--siteC2); font-weight: 600; font-size: 1.5em; } 
.outsourcing_dig .itemListWrap { padding: 0 2.5em 0; } 
.outsourcing_dig .itemListWrap > ul { gap:.5em .5em; } 
.outsourcing_dig .itemListWrap > ul li { display: flex; flex-direction: column; justify-content: center; align-items: center; gap:2em; width: calc((100% - 1.5em) / 3); padding: 2em 1.5em; box-sizing: border-box; border:1px solid var(--siteC2); border-radius: 1em; background: #f6f6f6; backdrop-filter: opacity(.5); } 
.outsourcing_dig .itemListWrap > ul li .icon { width: 3em; height: 3em; } 
.outsourcing_dig .itemListWrap > ul li .tt { font-weight: 500; color:#555; word-break: keep-all; } 
.outsourcing_dig .bottomT { display: flex; justify-content: center; align-items: center; width: 75%; margin: 0 auto; padding: 2em 2.5em; border-radius: 12em; background: #f4f4f4; box-shadow: 2px 2px 10px rgba(0,0,0, .15); } 
.outsourcing_dig .bottomT .tt { font-weight: 600; font-size: 1.5em; color:#333 } 

.page_arrow { padding-bottom:5%; background:url(../images/icon/page_arrow.svg) no-repeat; background-size:100% 100%; margin:3.5em 0 3em 0; } 
.page_arrow.st2 { transform: rotate(180deg); margin:2.5em 0 2em 0; } 

/**/
.process_wrap { position: relative; } 
.process_wrap .img_con { position: relative; width: 100%; height: 20em; border-radius: .5em; overflow: hidden; } 
.process_wrap .img_con:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .5); content: ''; } 
.process_wrap .img_con > img { width: 100%; height: 100%; object-fit: cover; } 
.process_wrap .img_con .innerT { position: absolute; width: 100%; text-align: center; padding: 0 4vw; box-sizing: border-box; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } 
.process_wrap .img_con .innerT > .tt { font-size: 1.85em; font-weight: 700; letter-spacing: -0.05em; } 

.round_arrow { display: flex; align-items: center; justify-content: center; width: 3em; height: 3em; background: #e60012; box-shadow: 3px 7px 24px rgba(0, 0, 0, .15); margin: 1.5em auto; } 
.round_arrow > .xi { font-size: 1.65em; color: #fff; } 

.process_wrap .midB { padding: 2.5em 2em; } 
.process_wrap .midB .subT { text-align: center; font-size: 1.215em; letter-spacing: -0.05em; font-weight: 600; margin-bottom: 1em; } 
.process_wrap .midB .title { display: flex; align-items: center; text-align: center; justify-content: center; font-size: 2.15em; font-weight: 700; letter-spacing: -0.05em; color: #e60012; } 
.process_wrap .midB .title > .xi { margin: 0 .5em; font-size: .7em; } 

.process_box { position: relative; } 
.process_box .pro_Blist:before { position: absolute; top: 4.1em; width: 90%; left: 50%; transform: translateX(-50%); margin: 0 auto; height: 8px; background: #f2f2f2; z-index: -1; content: ''; } 
.process_box .pro_Blist { } 
.process_box .pro_Blist > li { } 
.process_box .pro_Blist > li > .in { margin: 0 0 3em 3em; } 
.process_box .pro_Blist > li > .in > .inner { position: relative; } 
.process_box .pro_Blist > li > .in > .inner .iconB { position: relative; background: #fff; box-shadow: 1.2rem 1.2rem 2.2rem rgba(0, 0, 0, 0.09); height: 8em; border-radius: .3em; display: flex; align-items: center; justify-content: center; border: 2px solid #e60012; } 
.process_box .pro_Blist > li > .in > .inner .iconB > img { width: 3em; } 
.process_box .pro_Blist > li > .in > .inner .iconB:before { position: absolute; top: 40%; transform: translate(-50%,-50%); left: 40%; width: 1.5em; height: 1.5em; border-radius: 50%; background: #e60012; opacity: .15; transition: .3s; content: ''; } 
.process_box .pro_Blist > li > .in > .inner .Rarrow { position: absolute; top: 2.65em; z-index: 2; right: -1.65em; transform: rotate(90deg); color: #e60012; opacity: .6; } 
.process_box .pro_Blist > li > .in > .inner .num { margin-top: .5em; letter-spacing: -0.05em; color: #e60012; font-weight: 700; margin-bottom: .3em; text-align: center; font-size: .95em; } 
.process_box .pro_Blist > li > .in > .inner .tit { letter-spacing: -0.05em; font-weight: 700; line-height: 1.4; font-size: 1.05em; text-align: center; } 

/*인트로*/
.intro_wrapA { position: relative; height: 100vh; overflow: hidden;  /*background: #f7f7f7; */} 
.intro_wrapA .intro_titW { height: 15vh; text-align: center; display: flex; justify-content: center; flex-direction: column; } 
.intro_wrapA .intro_titW > .tit { font-size: 2.45em; font-weight: 800; } 
.intro_wrapA .intro_titW > .sub_tit { font-size: 1.415em; font-weight: 600; margin-top: .5em; } 
.intro_wrapA .intro_list { display: flex; flex-wrap: wrap; height: 100vh; } 
.intro_wrapA .intro_list > li { width: 33.33%; height: 100%; transition: 1s; } 
.intro_wrapA .intro_list > li > .in { position: relative; display: block; height: 100%; overflow: hidden; } 
.intro_wrapA .intro_list > li > .in > .intro_Bg { position: relative; transform: translateX(101%); width: 100%; height: 100%; transition: all .5s; } 
.intro_wrapA .intro_list > li > .in > .intro_Bg.on { transform: translateX(0); } 
.intro_wrapA .intro_list > li > .in > .intro_Bg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255, .8); backdrop-filter: blur(5px); transition: all .5s; z-index: 2; content: ''; } 
.intro_wrapA .intro_list > li > .in:hover > .intro_Bg:before { background: rgba(255,255,255, 0); backdrop-filter: blur(0); } 
.intro_wrapA .intro_list > li > .in > .link_box { position: absolute; top: 0; left: 0; width: 100%; padding: 3em; box-sizing: border-box; z-index: 2; height: 100%; } 
.intro_wrapA .intro_list > li > .in > .link_box:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .3); transition: all .5s; z-index: 1; content: ''; opacity: 0; } 
.intro_wrapA .intro_list > li > .in:hover > .link_box:before { opacity: 1; } 
.intro_wrapA .intro_list > li > .in > .link_box > .tbox > .logo_con { margin-bottom: 1.5em;} 
.intro_wrapA .intro_list > li > .in > .link_box > .tbox > .logo_con > img { width: 12em; height: 60px; object-fit: contain; transition: all .5s; } 
.intro_wrapA .intro_list > li > .in > .link_box > .tbox > .logo_con.h1 > img { height: 50px; margin-bottom: 30px;} 
.intro_wrapA .intro_list > li > .in > .link_box > .tbox > .logo_con.h2 > img { height: 60px;}
.intro_wrapA .intro_list > li > .in > .link_box > .tbox > .logo_con.w1 > img { width: 15em;}
.intro_wrapA .intro_list > li > .in > .link_box > .tbox > .logo_con.w2 > img { width: 13em;}
.intro_wrapA .intro_list > li > .in > .link_box > .tbox { position: absolute; width: 100%; padding: 0 5em; z-index: 3; box-sizing: border-box; left: 50%; top: 50%; text-align: center; transform: translate(-50%, -50%); } 
.intro_wrapA .intro_list > li > .in > .link_box > .tbox > .tit { font-size: 2.15em; font-weight: 800; color: #111; transition: all .5s; } 
.intro_wrapA .intro_list > li > .in > .link_box > .tbox > .en { font-size: 1.415em; font-weight: 600; color: rgba(0,0,0, .9); transition: all .5s; margin-bottom: 1em; } 

.intro_wrapA .intro_list > li > .in > .link_box .tbox .logo_con > img { max-width: 18em; height: 80px; object-fit: contain; } 
.intro_wrapA .intro_list > li > .in:hover > .link_box .logo_con > img { filter: brightness(0) invert(1); } 

.intro_wrapA .intro_list > li > .in .link_con { display: flex; justify-content: center; margin-top: 3em; transition: .2s; opacity: 0; } 
.intro_wrapA .intro_list > li > .in .link_con > .link { position: relative; width: 12em; align-items: center; color: #fff; padding: 1em 0em; border-radius: .3em; overflow: hidden; border-bottom: 1px solid hsla(0, 0%, 100%, .4); } 
.intro_wrapA .intro_list > li > .in .link_con > .link > .tt { font-size: 1em; font-weight: 600; transition: .2s ease-in-out; } 
.intro_wrapA .intro_list > li > .in .link_con > .link > .xi { font-size: 1.25em; transition: .2s ease-in-out; } 
.intro_wrapA .intro_list > li > .in:hover .link_con { opacity: 1; } 
.intro_wrapA .intro_list > li > .in:hover .link_con > .link { color: #111; } 
.intro_wrapA .intro_list > li > .in:hover .link_con > .link > .tt { transform: translateX(0.842vw); } 
.intro_wrapA .intro_list > li > .in:hover .link_con > .link > .xi { transform: translateX(-0.842vw); } 
.intro_wrapA .intro_list > li > .in .link_con > .link > .btn-line { border: 1px solid hsla(0, 0%, 100%, .4); display: block; opacity: 0; position: absolute; transition: opacity 5ms; z-index: -1; } 
.intro_wrapA .intro_list > li > .in:hover .link_con > .link > .btn-line { opacity: 1; } 
.intro_wrapA .intro_list > li > .in:not(:hover) .link_con > .link > .btn-line { opacity: 0; } 
.intro_wrapA .intro_list > li > .in .link_con > .link > .btn-full { background-color: #fff; border: none; bottom: 0; height: 100%; left: 0; margin: auto; top: 0; transition: width .3s .05s; width: 0; } 
.intro_wrapA .intro_list > li > .in:hover .link_con > .link > .btn-full { width: 100%; } 

.intro_wrapA .intro_list > li > .in:hover > .link_box > .tbox > .en,
.intro_wrapA .intro_list > li > .in:hover > .link_box > .tbox > .tit { color: #fff; } 

.loading_cover { position: fixed; top: 0; left: 0; background: #111; width: 100%; height: 100vh; z-index: 999; opacity: 1; } 

.loading_cover .slogan { position:absolute; left:0; width:100%; top:50%; transform:translateY(-50%); margin-top:-2em; z-index:10; color:#fff; text-align:center } 
.loading_cover .slogan .wrap_in { /*display:flex; flex-direction:column; align-items:center*/ } 
.loading_cover .slogan .fix { vertical-align: super; } 
.loading_cover .slogan .t1 { font-size:5em; font-weight:800; /*line-height:1.1; */ letter-spacing:-.025em; padding-left:.063em; word-spacing:.05em } 
.loading_cover .slogan .t1.s1 { font-size:4.5em } 
.loading_cover .slogan .t1 .point { color:var(--siteC); font-size: 1.5em; position: relative; top: 5px; } 
.loading_cover .slogan .t1 .typing { overflow:hidden } 
.loading_cover .slogan .t1 .typing > i { opacity:0; display: none;} 
.loading_cover .slogan .t2 { font-size:1.625em; letter-spacing:-.02em; transform:translateY(200%); opacity:0; } 
.loading_cover .slogan .row { height:1.125em; display:block; overflow:hidden; line-height:1 } 
.loading_cover .slogan .row .in { transform:translateY(-150%) } 
.loading_cover .slogan .row2 { display:block; height: 1.5em; } 
.load .loading_cover .slogan .t1 .typing > i{ display: block;}
.load .loading_cover .slogan .t2 { position:relative; transition:1.5s 1s; top: 3em; transform:translateY(0); opacity:1 } 
.load .loading_cover .slogan .ts { width:100%; transition:1s; transition-delay:1s } 
.load .loading_cover .slogan .row .in { transition:3s; transform:translateY(0) } 
.load .loading_cover .slogan .row:nth-child(2) .in { transition-delay:.8s } 
.load .loading_cover .slogan .fix { } 
.load .loading_cover .slogan .typing { animation: typing 3s;} 
.load .loading_cover .slogan .typing i { animation: typingSlide 2s; animation-delay:.5s; animation-fill-mode:forwards } 

@keyframes typing {
0% { font-size:0 } 
50% { font-size:1em } 
100% { font-size:1em } 
 }
@keyframes typingSlide {
0% { opacity:0; transform:translateX(-10em) } 
100% { opacity:1; transform:translateX(0) } 
 }


.process_img { border: 1px solid #ddd; border-radius: .5em; padding: 3.5em; box-sizing: border-box; background: #f2f2f2; } 
.process_img > img { width: 100%; height: 100%; object-fit: contain; } 

/*이메일 보안*/
.email_imgC{ margin: 0 auto; text-align: center;}



/* 제품소개 */
.product_wrapper{ margin-top: 1em;}
.product_wrapper .product_category{gap: 2em; margin-bottom: 2em; flex-direction: row;}
.con_tit{}
.con_tit .page_tit::before{position: absolute; content: ''; right: -1em; top: 0; width: 8px; height: 8px; background: var(--siteC); border-radius: 100px;}
.con_tit .page_tit{display: inline-block;position: relative;}
.con_tit.st1 {text-align: center;}
.con_tit.st1 .page_tit p{display: inline-block;}
.product_wrapper .product_category .product_cateBtn{ display: flex; gap: .5em; padding: 0.5em; box-sizing: border-box; background: #f1f1f1; border-radius: 100px; width: 100%; overflow-x: auto; overflow-y: hidden;}
.product_wrapper .product_category .product_cateBtn li{}
.product_wrapper .product_category .product_cateBtn li a{display: block; padding: 0em 2em; height: 3.4em; line-height: 3.4em; background: #fff; border-radius: 100px; color: #333; border: 1px solid #ddd;}
.product_wrapper .product_category .product_cateBtn li a .tt{font-size: 1.125em; font-weight: 600;}
.product_wrapper .product_category .product_cateBtn li.on a{background: var(--siteC); color: #fff; border-color: var(--siteC);}
.product_wrapper .product_list{display: flex; flex-wrap: wrap; gap: 4em 2.5em;}
.product_wrapper .product_list li{width: calc((100% - 7.5em) / 4);}
.product_wrapper .product_list li .in{width: 100%; display: block;  }
.product_wrapper .product_list li .in .img_wrap{width: 100%; height: 100%; overflow: hidden; border-radius: 1em; background: #f1f1f1; padding: 2.5em; box-sizing: border-box; position: relative;}
.product_wrapper .product_list li .in .img_wrap::before{position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; border: 2px solid var(--siteC); z-index: 1; opacity: 0; transition: 0.2s ease-in-out; box-sizing: border-box; border-radius: 1em;}
.product_wrapper .product_list li .in .img_wrap:hover::before{opacity: 1;}
.product_wrapper .product_list li .in .img_wrap img{width: 100%; height: 100%; object-fit: contain; display: block; transition: 0.2s ease-in-out;}
.product_wrapper .product_list li .in .img_wrap:hover img{transform: scale(1.1);}
.product_wrapper .product_list li .in .txt_wrap{margin-top: 1.3em; padding: 0 .5em;}
.product_wrapper .product_list li .in .txt_wrap .t1{font-size: 1.06em; color: var(--siteC); font-weight: 600;}
.product_wrapper .product_list li .in .txt_wrap .tit{font-size: 1.38em; font-weight: 700; padding: 0.4em 0;}

/* view */
.mall_view_top { padding:1em 1em 5em; gap: 4em; } 
.mall_view_top .prod_img { width: 50%; } 
.mall_view_top .page_info { width: 50%; margin-top: 2em;} 
.mall_view_top .prod_img .imgBig { background: #f1f1f1; padding: 3rem; box-sizing: border-box; border-radius: 1em; } 
.mall_view_top .prod_img .imgBig img { display:block; width:100%; height: 40svh; object-fit: contain; } 
.mall_view_top .prod_img .prodImgList { display: flex; gap: 2em; flex-wrap: wrap; } 
.mall_view_top .prod_img .prodImgList > li { width: calc((100% - 2em) / 2); } 
.mall_view_top .prod_img .prodImgList > li > .imgCon { background: #f1f1f1; height: 54vh; } 
.mall_view_top .prod_img .prodImgList > li > .imgCon > img { width: 100%; height: 100%; object-fit: cover; } 

.mall_view_top .page_info .txt_wrap{  }
.mall_view_top .page_info .txt_wrap .t1{ color: var(--siteC);/*  font-size: 1.125em; */ letter-spacing: 1.05px; font-weight: 600; padding: 0.3em 1em; border: 1px solid var(--siteC); box-sizing:border-box; border-radius: 100px; display: inline-block; margin-bottom: 1.4em;}
.mall_view_top .page_info .txt_wrap .tit{ font-size: 2.5em; font-weight: 700;}
.mall_view_top .page_info .txt_wrap .txt{ color: #333; padding: 1.5em 1.5em 3em; box-sizing: border-box; border-radius: 1em; background: #f1f1f1; margin-top: 2em;}

.mall_view_top .page_info .txt_wrap > .dl_wrap{ margin:1.6em 0 2.2em; }
.mall_view_top .page_info .txt_wrap > .dl_wrap dl{  margin-bottom:1em; display: flex;}
.mall_view_top .page_info .txt_wrap > .dl_wrap dl:last-of-type{ margin-bottom:0; }
.mall_view_top .page_info .txt_wrap > .dl_wrap dl dt{ display:inline-block; width:5em; font-size:1.125em; line-height:28px; color:#999; letter-spacing:-0.05em; }
.mall_view_top .page_info .txt_wrap > .dl_wrap dl dd{ display:inline-block;  width:calc(100% - 5em); font-size:1.125em; line-height:28px; color:#111; letter-spacing:-0.05em; }

.mall_view_bottom{border-bottom: 1px solid #ddd;}
.mall_view_bottom .viewTit{}
.mall_view_bottom .viewTit .t1{font-size: 1.25em; font-weight: 600; padding: 0.8em 0; box-sizing: border-box; border-top: 1px solid #333; border-bottom: 1px solid #ddd; text-align: center; color: #333; background: #f7f7f7;}

.mall_view_bottom .img_wrap{padding: 4em 5vw 4em;}
.mall_view_bottom .img_wrap img{margin: 0 auto; max-width: 100%; display: block;}

.zoomWrap { position: relative; } 
.zoomWrap .magnifierWrap { position:absolute; left:100%; margin-left:5em; top:0; width:100%; height:100%; overflow:hidden; z-index: 5; box-shadow:0 0 1em rgba(0,0,0,.1); display: none; background-color:#fff } 
.zoomWrap .magnifierWrap .magnifier { position:absolute; background-repeat:no-repeat; background-size:100% 100%; } 
.zoomWrap .pointer { position:absolute; width:30%; height:30%; background:rgba(0,0,0,.1); transform:translate(-50%,-50%); display:none } 
.zoomThumbWrap { margin-top: .5em; display: flex; gap: .5em; } 
.zoomThumbWrap > li { width: calc((100% - 1.5em) / 2); } 
.zoomThumbWrap > li .in { border:2px solid transparent; background: #f1f1f1; border-radius: 1em; height: 6.5rem; overflow: hidden; cursor: pointer; padding: .5rem; box-sizing: border-box; } 
.zoomThumbWrap > li .in.on { border-color:var(--siteC); } 


/* 연혁 */
.historyWrapper .inner{padding: 0 2em;}
.historyWrapper .history{ position:relative; padding:100px 0 200px; }
.historyWrapper .history .linewrap{ position: absolute; top: 0px; left:calc(240px + 330px - 80px); width:2px; height: 0%; background: var(--siteC); }
.historyWrapper .history:after{ display:block;content:""; width:1px;height: 98%; z-index:-1; border-left:2px dotted #ccc; position:absolute;left:calc(240px + 330px - 80px);top:0; }
.historyWrapper .history > div{ display:flex;justify-content:space-between; margin-bottom:85px; }
.historyWrapper .history > div:last-child{margin-bottom:0;}
.historyWrapper .history > div .decade{ position:relative; width:240px; font-size:4em;color:#000;font-weight:700; }
.historyWrapper .history > div .decade:before{ display:block;content:""; width:15px;height:15px; box-sizing:border-box; border:2px solid #dcdcdc;border-radius:50%; background:#fff; position:absolute;left:100%;top:33px;z-index:10; }
.historyWrapper .history > div .decade:after{ display:block;content:""; width:240px;height:1px; box-sizing:border-box; background:#ddd; position:absolute;left:calc(100% + 10px);top:40px; }
.historyWrapper .history > div ul{ position:relative; box-sizing:border-box; width:calc(100% - 240px); padding-top:28px;padding-left:330px; }
.historyWrapper .history > div ul:before{ display:block;content:""; width:15px;height:15px; box-sizing:border-box; border:2px solid #dcdcdc;border-radius:50%; background:#fff; position:absolute;left:243px;top:33px;z-index:10; }
.historyWrapper .history > div ul:after{ display:block;content:""; width:45px;height:45px; box-sizing:border-box; border-radius:50%; background:rgba(39, 159, 229, 0.15); position:absolute;left:228px;top:18px;z-index:9; transform:scale(0);transition:all 0.4 ease; }
.historyWrapper .history > div ul.on:after{transform:scale(1);transform-origin:center center;transition:all 0.3s ease-in-out; }
.historyWrapper .history > div ul.on:before{border:2px solid var(--siteC);transition:all 0.3s ease-in-out;}
.historyWrapper .history > div ul li{ margin-bottom:10px; font-size:1.125em;color:#666; position: relative; display: flex; gap: 2.5em; line-height: 1.6;}
.historyWrapper .history > div ul li::before{position: absolute; content: ''; left: -.8em; top: 12px; width: 4px; height: 4px; border-radius: 100px; background: #666; }
.historyWrapper .history > div ul li + li{margin-top: 20px;}
.historyWrapper .history > div ul li:last-child{margin-bottom:0;}
.historyWrapper .history > div ul li .year{font-weight: 700; color: #111;}

.historyWrapper .top_img{width: 100%; border-radius: 1em; overflow: hidden; height: 22em; position: relative;}
.historyWrapper .top_img::before{ position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3);}
.historyWrapper .top_img .img_wrap img{width: 100%; display: block; }
.historyWrapper .top_img .bg_tit{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}
.historyWrapper .top_img .bg_tit p{font-size: 2.5em; color: #fff; font-weight: 700; text-align: center;}

/* 인사말 */
/* company-ceo인사말 */
.greet_wrap {background: linear-gradient(174deg,rgba(239, 239, 239, 0) 0%, rgba(239, 239, 239, 1) 100%);} 
.greet_wrap .greet-top { margin-bottom: 1em; } 
.greet_wrap .greet-top .t2 { margin-top: 10px; line-height: 1.2; } 
.greet_wrap .greet-con { gap:8em; /* padding: 0 3em; */     align-items: center;} 
.greet_wrap .greet-con .img_wrap { width: 40%; box-shadow: 10px 10px 30px rgb(17 17 17 / 30%); overflow: hidden; border-radius: 1em;} 
.greet_wrap .greet-con .img_wrap .img {width: 100%; padding-bottom: 120%;}
/* .greet_wrap .greet-con .img_wrap .img { width: 100%; margin-top: -4em; padding-bottom: 120%; border:1px solid #ddd; border-radius: 1em; box-shadow: -3px 3px 15px rgba(0,0,0,.1); }  */
.greet_wrap .greet-con .txt_wrap { order: -1; flex:1;  position: relative; } 
/* .greet_wrap .greet-con .txt_wrap::before{position: absolute; left: -0.6em; bottom: -0.8em; content: 'PCMTANK'; font-size: 6em; font-weight: 800; font-family: pretendard; color: #efefef; z-index: -1;} */
.greet_wrap .greet-con .txt_wrap .tt_box + .tt_box{ margin-top: 3.5em;}
.greet_wrap .greet-con .txt_wrap .tit{margin-bottom: 2.5em;}
.greet_wrap .greet-con .txt_wrap .tit .page_tt{line-height: 1.4;}
.greet_wrap .greet-con .txt_wrap .page_tt { color:#333; } 
.greet_wrap .greet-con .txt_wrap .page_tt + .page_tt { margin-top: 1em; } 
.greet_wrap .greet-con .txt_wrap p.ceo { margin-top: 3em; padding-right: 3em; font-size: 1.25em; text-align: right; } 
.greet_wrap .greet-con .txt_wrap p.ceo strong { padding-left: 1em; font-weight: 600; font-size: 1.5rem; } 

.greet_wrap .greet-con .txt_wrap .t1{font-size: 2.5em;}
.greet_wrap .greet-con .txt_wrap .t2{font-size: 1.25em; line-height: 1.5;}
.greet_wrap .greet-con .txt_wrap .t2 + .t2{ margin-top: 0.8em;}

.greet_wrap .aboutTslide .textAniW{ display: flex; margin-top: -6rem;}
.greet_wrap .aboutTslide .textAniW .textAni{ font-size: 7vw; text-transform: uppercase; font-weight: 800; color: #fff;}

.textAniW{ display:flex; line-height:1}
.textAni{ animation: textAni 10s linear infinite; white-space:nowrap}
.textAni:before{ content:"·"; padding:0 .5rem}
@keyframes textAni {
0% {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
100% {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
}

/* 오시는 길 */
.root_daum_roughmap .wrap_controllers { display: none; } 
.map_wrap > .tt { font-size: 2em; font-weight: 800; margin-bottom: 1rem; } 
.map_wrap .map { overflow: hidden; border-radius: 1em;} 
.map_wrap .map_info { padding: 3.5em 2.5em 3.5em; background: #f7f7f7; border-radius: 1em; margin-top: 1em;} 
.map_wrap .map_info .left { align-items: center; } 
.map_wrap .map_info .left .con > h2 { font-size: 2.15em; font-weight: 800; color: #111; margin-bottom: .5rem; } 
.map_wrap .map_info .left .con .contact_list { gap: 2em; } 
.map_wrap .map_info .left .con .contact_list > li { } 
.map_wrap .map_info .left .con .contact_list > li .tcon { align-items: center; } 
.map_wrap .map_info .left .con .contact_list > li .tcon > .xi { color: var(--siteC); padding-right: .3rem; } 
.map_wrap .map_info .left .con .contact_list > li .tcon > span { font-size: 1.1em; font-weight: 600; color: #333; } 
.map_wrap .map_info .right { } 
.map_btn { gap: 1em; } 
.map_btn > li { } 
.map_btn > li .btn { padding: .85rem 2rem; border: 1px solid #ddd; font-size: 1.125em; background: #fff; border-radius: 8rem; font-weight: 600; text-align: center; transition: .25s; } 
.map_btn > li .btn.btn1 { border: 1px solid var(--siteC); color: var(--siteC); } 
.map_btn > li .btn.btn1:hover { background: var(--siteC); color: #fff; } 
.map_btn > li .btn.btn2 { background: var(--siteC); color: #fff; } 
.map_btn > li .btn.btn2:hover { border: 1px solid var(--siteC); color: var(--siteC); background: #fff; } 

.map_wrap .location_info { padding-top: 4.5rem; } 
.map_wrap .location_info .info_con { gap: 8em; padding-bottom: 6rem; } 
.map_wrap .location_info .info_con:last-of-type { padding-bottom: 0em; } 
.map_wrap .location_info .info_con .left { width: 25%; } 
.map_wrap .location_info .info_con .left h2 { font-size: 2.15em; font-weight: 800; color: #111; } 
.map_wrap .location_info .info_con .right { width: 75%; } 
.map_wrap .location_info .info_con .right ul { } 
.map_wrap .location_info .info_con .right ul > li { } 
.map_wrap .location_info .info_con .right ul > li > .top { align-items: center; gap: 2em; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid #ddd; } 
.map_wrap .location_info .info_con .right ul > li > .top .btn { pointer-events: none; } 
.map_wrap .location_info .info_con .right ul > li > .top > .tt { font-size: 1.125em; font-weight: 700; color: #111; } 
.map_wrap .location_info .info_con .right ul > li > .btm { } 
.map_wrap .location_info .info_con .right ul > li > .btm > li { display: flex; align-items: center; margin-bottom: 1em; } 
.map_wrap .location_info .info_con .right ul > li > .btm > li:last-of-type { margin-bottom: 0em; } 
.map_wrap .location_info .info_con .right ul > li > .btm > li > .tit { width: 14.5%; } 
.map_wrap .location_info .info_con .right ul > li > .btm > li > .tit > span { font-size: 1.125em; font-weight: 700; color: #111; text-align: left; } 
.map_wrap .location_info .info_con .right ul > li > .btm > li > .txt { width: 85.5%; font-size: 1.125em; font-weight: 500; text-align: left; } 

/*Sub top*/
.subPageTop_Wrapper{}
.subPageTop{ position: relative; padding: 4em; box-sizing: border-box; border-radius: 1em; overflow: hidden;}
.subPageTop:before{ position: absolute; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0); height: 100%; opacity: .315; content: '';}
.subPageTop .inner{ position:relative; display: flex; flex-direction: column; justify-content: space-between; z-index: 2;}
.subPageTop .inner > .txtCon{ margin-bottom: 3em;}
.subPageTop .inner > .txtCon > .cate{  font-weight: 400; margin-top: 1.3em; color: #fff; font-size: 1.25em; line-height: 1.5; }
.subPageTop .inner > .txtCon > .cate br{display: none;}
.subPageTop .inner > .txtCon > .tt{ font-size: 1.125em; font-weight: 500; color: #fff; margin-bottom: .8em;}
.subPageTop .inner > .txtCon > .tit{ font-size: 2.88em; font-weight: 700; line-height: 1.3; color: #fff;}

/* 사업장소개 */
.step-list{ display:flex; flex-wrap:wrap; gap:2em;  margin-top: 1.5em;}
.step-list > li{width:calc((100% - 6em) / 4); position:relative; display:flex; align-items:flex-start; gap: 1em;border-radius:20px; background: #f1f1f1; padding:3em 2em; box-sizing: border-box; }
.step-list > li:nth-child(1){transition-delay: 0.1s; z-index: 50;}
.step-list > li:nth-child(2){transition-delay: 0.2s; z-index: 49;}
.step-list > li:nth-child(3){transition-delay: 0.3s; z-index: 48;}
.step-list > li:nth-child(4){transition-delay: 0.4s; z-index: 47;}
.step-list > li:before{content:'';  width: 9px; height: 9px; position:absolute; right: -2.4em; top:50%; margin-top: -4.5px; border-radius:50%; background: #0B1F2A; z-index: 1; }
.step-list > li:after{content:'';  width: 2em; height: 1px; position:absolute; right: -2em; top:50%; margin-top: -0.5px;  background: #ddd;}
.step-list > li:last-child:after,
.step-list > li:last-child:before{display:none}
.step-list .icon{width: 30%; aspect-ratio:1; border-radius:50%; background: #fff; display:flex; align-items:center; justify-content:center;  }
.step-list .icon img{height: 2.4em;}
.step-list .txt {width: 70%;}
.step-list .txt span{margin-bottom: .7em; color: #666; font-size: 15px; display:block;}
.step-list .txt .tit{ font-size: 1.25em; font-weight: 700; }

.mainten_Wrap { background: #fff; padding: 6em 0 8em 0; } 
.maintenBox { } 
.maintenBox .item { display: flex; gap: 2em; margin-bottom: 3em; } 
.maintenBox .item .leftB { width: 40%; display: flex; flex-direction: column; border-radius: 1.5em; overflow: hidden; justify-content: space-between; padding: 3em; box-sizing: border-box; background: #f7f7f7; border: 1px solid #ddd; transition: .3s; } 
.maintenBox .item .leftB .numT { } 
.maintenBox .item .leftB .numT > p { font-size: 2.515em; font-weight: 700; color: rgba(0,0,0, .1); transition: .3s; } 
.maintenBox .item .leftB .btmT { } 
.maintenBox .item .leftB .btmT .tit { font-size: 2.315em; font-weight: 700; margin-bottom: .6em; transition: .3s; } 
.maintenBox .item .leftB .btmT .desc { font-size: 1.063em; line-height: 1.4; color: rgba(0,0,0, .9); transition: .3s; } 
.maintenBox .item .rightB { flex: 1; } 
.maintenBox .item .rightB > .img_con { width: 100%; height: 27.5em; border-radius: 1.5em; overflow: hidden; }
.maintenBox .item .rightB > .img_con > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: 2s;} 


.maintenBox .item:hover .leftB { background: var(--siteC); border: 1px solid var(--siteC); } 
.maintenBox .item:hover .leftB .numT > p { color: #ddf4ff7a; } 
.maintenBox .item:hover .leftB .btmT .desc,
.maintenBox .item:hover .leftB .btmT .tit { color: #fff; } 
.maintenBox .item:hover .rightB > .img_con > img{ transform: scale(1);}

/* 회사개요 */
.companyWrapper{ padding-top: 1em; position: relative;}
/* .companyWrapper::before{ position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%);background: radial-gradient(circle,rgba(39, 160, 229, 0.22) 0%, rgba(244, 249, 249, 0) 100%); width: 70%; height: 70%; border-radius: 50%;} */
.companyWrapper .companyTit{position: relative;}
.companyWrapper .companyTit .t1{ font-weight: 700; color: #f1f1f1; font-size: 12em; line-height: 0.9em; position: relative; text-align: center;}
.companyWrapper .companyTit .tt{position: absolute; left: 50%; bottom: -1em; transform: translateX(-50%); font-size: 2.5em; width: 100%; text-align: center; }

.companyValu {margin-top: 8em;}
.companyValu .value_list{ display: flex; gap: 2em;}
.companyValu .value_list li{flex: 1; padding: 3em; border-radius: 1em; height: 14em; overflow: hidden; position: relative;}
.companyValu .value_list li:nth-child(1){background: var(--siteC);}
.companyValu .value_list li:nth-child(2){background: #1E2D75;}
.companyValu .value_list li:nth-child(3){background: var(--siteC2);}
.companyValu .value_list li:nth-child(2n){margin-top: 4em;}

.companyValu .value_list li .txt_box .num{font-size: 1.31em; font-weight: 700; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.5px; margin-bottom: .5em;}
.companyValu .value_list li .txt_box .tit{font-size: 2.5em; font-weight: 700; color: #fff; margin-bottom: .2em; }
.companyValu .value_list li .txt_box .tt{font-size: 1.125em; color: rgba(255, 255, 255, 0.7);}
.companyValu .value_list li .img{position: absolute; right: 1.5em; bottom: -2em; opacity: 0.3; }
.companyValu .value_list li .img img{height: 9em; filter: brightness(0) invert(1);}

.tri-circle { display: flex; justify-content: space-between; padding: 0 2vw; padding-top: 2em; box-sizing: border-box; height: 20vw; } 
.tri-circle > li { flex:1; position: relative; } 
.tri-circle > li .in { width: 20vw; height: 20vw; padding: 3em; box-sizing: border-box; border-radius: 50%; text-align: center; position: absolute; /* border: 1px solid var(--gradC1); */background: linear-gradient(164deg,rgba(39, 160, 229, 0.44) 0%, rgba(244, 249, 249, 0.1) 100%);} 
.tri-circle > li:nth-child(2n) .in {background: linear-gradient(2deg,rgba(39, 160, 229, 0.44) 0%, rgba(244, 249, 249, 0.1) 100%);} 
.tri-circle > li:nth-child(1) .in { right: -3em; top: 50%; transform: translate(0, -50%); } 
.tri-circle > li:nth-child(2) .in { left: 50%; top: 50%; transform: translate(-50%, -50%); } 
.tri-circle > li:nth-child(3) .in { left: -3em; top: 50%; transform: translate(0, -50%); } 
.tri-circle > li:nth-child(4) .in { left: 50%; top: 50%; transform: translate(-61%, -50%); } 
.tri-circle > li .tt_en { font-weight: 500; font-size: 1.375em; color:var(--siteC2); } 
.tri-circle > li .line { display: block; width: 80%; margin: 1.5em auto 1.5em; border-top: 1px solid rgba(255, 255, 255, .5); } 
.tri-circle > li .t1 { font-weight: 600; font-size: 1.825em; color: var(--gradC1); } 

/* 회사개요 */
.researchWrapper{ margin-top: 3em; padding: 6em 0; position: relative;}
.researchWrapper::before{ position: absolute; content: ''; background-size: cover; top: 0; left: 0; opacity: 0.1; width: 100%; height: 100%; background-image: url(../images/sub/research_img07.jpg); background-repeat: no-repeat;}
.researchWrapper .researchContent{gap: 3em; align-items: stretch;}
.researchWrapper .researchContent .txt_wrap{width: 35%;}
.researchWrapper .researchContent .txt_wrap .sub_tit{position: sticky; top: 12em;}
.researchWrapper .researchContent .txt_wrap .sub_tit .small_tit{font-size: 1.25em; font-weight: 500; margin-bottom: .7em; color: var(--gradC1); font-weight: 600;}
.researchWrapper .researchContent .txt_wrap .sub_tit .tit{font-size: 2.63em; font-weight: 800;}
.researchWrapper .researchContent .box_wrap{width: 65%; display: flex; gap: 1em; flex-wrap: wrap;}
.researchWrapper .researchContent .box_wrap .box{position: relative; display: flex; width: calc((100% - 1em) / 2); height: 15em; padding: 2em; box-sizing: border-box; overflow: hidden; border-radius: 1em; background-size: cover; background-repeat: no-repeat;}
.researchWrapper .researchContent .box_wrap .box::before{position: absolute; content: ''; width: 100%; height: 100%; background: linear-gradient(2deg,rgba(0, 0, 0, 0.55) 0%, rgba(255, 255, 255, 0) 50%); top: 0; left: 0;}
.researchWrapper .researchContent .box_wrap .box .txt_box{display: flex; flex-direction: column; gap: 1em; position: relative; z-index: 1; justify-content: flex-end;}
.researchWrapper .researchContent .box_wrap .box .txt_box .num{color: #fff;}
.researchWrapper .researchContent .box_wrap .box .txt_box strong{color: #fff; font-size: 1.25em; font-weight: 500;}

.table_form .wrap_in .tit1 br{display: none;}

/* facility */
.img_Con { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.img_Con img { width: 100%; aspect-ratio: 2 / 1; border-radius: 1rem; object-fit: cover; /* 이미지 잘림 처리 */}

.img_Con2{ display: grid; grid-auto-flow: column; grid-auto-columns: repeat(3, 1fr); gap: 20px;}
.img_Con2 img{  border: 1px solid #ddd; }

.img_modal{ display: none; position: fixed; z-index: 9999; inset: 0; background: rgba(0,0,0,0.85); justify-content: center; align-items: center;}
.img_modal.active{ display: flex;}
.modal_img{ max-width: 85%; max-height: 85%; border-radius: 1em; transition: transform 0.2s ease; cursor: zoom-in;}
.close{ position: absolute; top: 1.875em; right: 2.5em; font-size: 2.5em; color: #fff; cursor: pointer;}
.pRev, .nExt{ position: absolute; top: 50%; transform: translateY(-50%); font-size: 3.125em; color: #fff; background: none; border: none; cursor: pointer; padding: .625em;}
.pRev { left: 40px; }
.nExt { right: 40px; }
.pRev:hover, .nExt:hover{ opacity: .7;}

.txtcon .tt{ font-size: 1em; font-weight: 500;}