@charset "utf-8";
/* CSS Document */
.box0{ padding:0 2.5vw; box-sizing:border-box}
.boxSub,
.box1{ padding:0 5vw; width:100%; box-sizing:border-box; max-width:1570px; margin:0 auto}
.box2{ padding:0 5vw; box-sizing:border-box; max-width:1280px; margin:0 auto}

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

#header{ position:fixed; left:0; top:0; width:100%; z-index:1000; background:#fff; box-shadow:0 1em 1em rgba(0,0,0,.1)}
#header .top_wrap{ position:relative}
#header .top_wrap .wrapH,
#header .top_wrap .gnb_wrap .dp1{ height:var(--headerH)}
.headerT{ padding-top:var(--headerH)}
#header .top_wrap .wrapF{ display:flex; align-items:center; gap:0 3vw}
#header .top_wrap .wrapF > *{ position:relative; z-index:2}
#header .top_wrap .logo{ height:3em}
#header .top_wrap .logo > a{ display:block; height:100%; overflow:hidden}
#header .top_wrap .logo > a .in{ display:block; height:100%}
#header .top_wrap .logo > a img{ height:100%; display:block}
#header .top_wrap .etc_wrap{ display:flex; align-items:center; gap:2vmin}
#header .top_wrap .etc_wrap .btnInc{ width:4em; height:var(--headerH); display:flex; align-items:center; justify-content:center}
#header .top_wrap .etc_wrap .btnInc .ico{ font-size:1.75em}
#header .top_wrap .etc_wrap .btnInc.allBtn .ico{ font-size:2.25em}
#header .top_wrap .etc_wrap .linkSt{ opacity:.5; padding:.5em; display:flex; align-items:center; gap:.25em}
#header .top_wrap .etc_wrap .linkSt:hover{ opacity:1; color:var(--siteC)}
#header .top_wrap .etc_wrap .linkSt .t1{ font-weight:900; text-transform:uppercase; position:relative; padding:.25em; font-size:.813em}
#header .top_wrap .etc_wrap .linkSt .xi{ font-size:1em}

html:not(.allOn) #header .top_wrap .gnb_wrap{ display:flex; align-items:center; flex:1; min-width:0; justify-content:center; height:100%; z-index:1}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb{ position:absolute; left:50%; transform:translateX(-50%); top:0; width:100%; justify-content:center; box-sizing:border-box}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb:before{ content:""; position: fixed; width:150vw; left:50%; transform:translateX(-50%); background:#fff; top:var(--headerH); height:0; opacity:0; box-sizing:border-box;  box-shadow:0 1em 1em rgba(0,0,0,.1)}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb a{ display:flex}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:not(.m_hide){ position:relative; flex:1; border-right:1px solid transparent; max-width:16vmin; display:flex; flex-direction:column; transition:.3s;}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:first-child{ border-left:1px solid transparent}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1{ display:flex; align-items:center; justify-content:center; position:relative}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 .tt{ font-weight:500; font-size:1.125em}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 .va{ position:relative}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after{ content:""; position:absolute; left:100%; transform:translate(100%,-50%); top:0; width:.375em; height:.375em; background:var(--siteC); border-radius:50%; opacity:0}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--siteC); transform:scaleY(0);}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp2{ padding:1em 0 2em 0; flex:1; opacity:0; visibility:hidden; z-index:-100; position: absolute}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp2:before{ content:""; position:absolute; left:0; top:0; width:100%; height:0; box-sizing:border-box; background:var(--siteC); opacity:0}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:hover .dp2:before{ height:100%; opacity:.05; transition:.3s}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp2 > li{ position:relative}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a{ padding:.25em .5em; color:#777; text-align:center; justify-content:center}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .tt{ font-weight:500; font-size:.938em}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a:hover{ color:var(--siteC)}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp3{ display:none}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li.on .dp1{ color:var(--siteC)}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li.on .dp1 .va:after{ opacity:1}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:hover .dp1{ color:#fff}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:hover .dp1:before{ transform:scaleY(1); transition:.3s}
html:not(.allOn) #header .top_wrap .gnb_wrap.active .gnb:hover > li{ max-width:18vmin; transition-delay:.1s; transition-timing-function:ease-in-out}
html:not(.allOn) #header .top_wrap .gnb_wrap.active .gnb:hover:before{ height:calc(100% - var(--headerH)); opacity:1; transition:height .3s; transition-delay:.1s; transition-timing-function:ease-in-out}
html:not(.allOn) #header .top_wrap .gnb_wrap.active .gnb:hover > li .dp2{ position:relative; opacity:1; visibility:visible; z-index:auto; transition:.3s; transition-delay:.3s}
#header .top_wrap .gnb_wrap .gnb > li .dp2{ flex-direction:column; gap:.5em}

.allOn{ overflow:hidden}
.allOn #header{ height:100vh; position: fixed; box-sizing:border-box; overflow-y:auto; scrollbar-width: thin; scrollbar-color: var(--scrollBar); background:#fff}
.allOn #header .top_wrap .wrapH,
.allOn #header .top_wrap .wrapF{ height:100%}
.allOn #header .top_wrap .logo{ display:flex; align-items:center; height:3em}
.allOn #header .top_wrap:before{ content:""; position: fixed; right:50%; bottom:50%; background:#f5f5f5; border-radius:50%}
.allOn #header .top_wrap .wrapF{ flex-wrap:wrap; align-items:flex-start; gap:10vmin 5vmin; padding:5vmin}
.allOn #header .gnb_wrap{ flex:0 0 auto; min-height:0; width:100%; margin-left:0; order:10}
.allOn #header .gnb_wrap .gnb{ flex-wrap:wrap; gap:5vmin; align-items:flex-start}
.allOn #header .gnb_wrap .gnb a{ text-align:left; display:flex; box-sizing:border-box; line-height:1.2}
.allOn #header .gnb_wrap .gnb > li{ box-sizing:border-box; flex:1}
.allOn #header .gnb_wrap .gnb > li .dp1{ padding:0 0 1em 0; height:auto; justify-content:flex-start; align-items:center}
.allOn #header .gnb_wrap .gnb > li .dp1:after{content:"\e93e"; font-family:xeicon; margin-left:1em; opacity:0}
.allOn #header .gnb_wrap .gnb > li:hover .dp1{ color:var(--siteC)}
.allOn #header .gnb_wrap .gnb > li .dp1:hover:after{ opacity:1}
.allOn #header .gnb_wrap .gnb > li .dp1 .tt{ font-size:1.75em; font-weight:500; position:relative}
.allOn #header .gnb_wrap .gnb > li .dp2{ gap:.5em 1em}
.allOn #header .gnb_wrap .gnb > li .dp2 > li > a{ height:3em; align-items:center; padding:0 1em; border:1px solid #ddd; border-radius:.5em; color:#555; position:relative; overflow:hidden; background:#fff}
.allOn #header .gnb_wrap .gnb > li .dp2 > li a{ word-break:keep-all; line-height:1.1}
.allOn #header .gnb_wrap .gnb > li .dp2 > li > a:after{ content:"\e93f"; font-family:xeicon; position:absolute; right:.5em; top:50%; transform:translateY(-50%); margin-right:-1em; opacity:0; transition:.3s}
.allOn #header .gnb_wrap .gnb > li .dp2 > li > a .tt{ font-size.938em; font-weight:700}
.allOn #header .gnb_wrap .gnb > li .dp2 > li:hover > a{ box-shadow:0 0 1em rgba(0,0,0,.1); color:#111; border-color:var(--siteC)}
.allOn #header .gnb_wrap .gnb > li .dp2 > li:hover > a:after{ margin-right:0; opacity:1}
.allOn #header .gnb_wrap .gnb > li .dp2 > li .dp3 { flex-direction:row; flex-wrap:wrap; gap:0 1em; padding:.75em 0}
.allOn #header .gnb_wrap .gnb > li .dp2 > li .dp3 > li > a{ color:#555; padding:.25em 1em; display:flex; gap:.25em}
.allOn #header .gnb_wrap .gnb > li .dp2 > li .dp3 > li > a:before{ content:"\e91b"; font-family:xeicon; height:auto; width:auto}
.allOn #header .gnb_wrap .gnb > li .dp2 > li .dp3 > li > a .tt{ font-size:.875em}
.allOn #header .gnb_wrap .gnb > li .dp2 > li .dp3 > li:hover > a{ color:#111}
.allOn #header .gnb_wrap .gnb > li .dp2 > li .dp3 > li:hover > a .tt{ text-decoration:underline}
.allOn #header .gnb_wrap .gnb > li .dp2 > li .dp4,
.allOn #header .gnb_wrap .gnb > li .dp2 > li .dp5{ display:none}
.allOn #header .gnb_wrap .gnb > li.m_guide{ position: fixed; right:5vmin; bottom:2em; display:block !important}
.allOn #header .gnb_wrap .gnb > li.m_guide .dp1{ display:none}
.allOn #header .gnb_wrap .gnb > li.m_guide .dp2{ flex-direction:row; righ}
.allOn #header .gnb_wrap .gnb > li.m_guide .dp2 > li > a{ border:none; padding-right:2em; opacity:.7}
.allOn #header .gnb_wrap .gnb > li.m_guide .dp2 > li > a:after{ margin-right:0}
.allOn #header .gnb_wrap .gnb > li.m_guide .dp2 > li > a:hover{ box-shadow:none; opacity:1}
.allOn #header .top_wrap .etc_wrap{ z-index:3}
.allOn #header .top_wrap .etc_wrap .btnInc.allBtn{ position: fixed; right:3em; top:2em; box-shadow:0 0 1em rgba(0,0,0,.1); width:4em; height:4em; border-radius:50%; background:#fff}
.allOn #header .top_wrap .etc_wrap .btnInc.allBtn .ico{ font-size:1.5em}
.allOn #header .all_wrap .allBtn .ico:before{ content:"\e921"}
.allOn #header .top_wrap .etc_wrap .search_wrap{ display:none}
.allOn #header:after{ content:""; position:absolute; right:0; top:0; width:100%; height:100%; background:var(--siteC); z-index:2;  animation: headerAllAni 1s forwards}
.allOn #header:before{animation: headerAllAni2 1s forwards .5s; transform:translateX(100%)}
.allOn #header .top_wrap:before{ width:70vw; height:70vw; transition:.5s; animation: headerAllAni3 20s infinite .5s alternate linear;}
@keyframes headerAllAni{
100% { width:0}
}
@keyframes headerAllAni2{
100% { transform:translateX(0)}
}
@keyframes headerAllAni3{
40% { transform:rotate(20deg) translate(-10%,50%) scale(.8);}
60% { transform:rotate(40deg) translate(-10%,50%) scale(1.2);}
100% { transform:rotate(0) translate(0,0) scale(1);}
}

#footer{ z-index:10; padding:5em 0; background:#0d1520; color:#fff}
#footer .goTop{ border-radius:50%; margin-top:1em; width:3.5em; height:3.5em; display:flex; align-items:center; justify-content:center;  background:var(--siteC); color:#fff; box-shadow:0 0 1em rgba(0,0,0,.1); opacity:0; transform:translateY(100%); transition:.5s}
#footer .goTop .xi{ font-size:1.5em; transition:.3s}
#footer .goTop:hover .xi{ transform:translateY(-.25em)}
.scroll #footer .goTop{ opacity:1; transform:translateY(0)}
#footer .wrapF{ display:flex; gap:4em}
#footer .logo_wrap{ display:flex; flex-direction:column; align-items:center; gap:2em}
#footer .logo img{ height:2em; filter:brightness(0) invert(1)}
#footer .menu_wrap{ display:flex; display:flex; flex-direction:column; gap:2em}
#footer .menu{ display:flex; flex-direction:column; gap:1em 0}
#footer .menu > li{ width:100%;}
#footer .menu > li > a{ display:block; padding-right:2em;position:relative; color:#fff; font-size:.938em; opacity:.7}
#footer .menu > li > a:after{ content:"\e915"; font-family:xeicon; position:absolute; right:0; top:0; transform:rotate(45deg)}
#footer .menu > li.point > a{ opacity:1; font-weight:700}
#footer .info_wrap{ display:flex; flex-direction:column; gap:.5em; flex:1; min-width:0}
#footer .info{ overflow:hidden}
#footer .info > li{ float:left; margin-right:2em; margin-bottom:.75em; opacity:.9; position:relative; font-size:.938em}
#footer .info > li:before{ content:""; position:absolute; left:-1em; height:70%; top:50%; transform:translateY(-50%); width:1px; background:#fff; opacity:.2}
#footer .info > li.point{ font-weight:700}
#footer .info > li.br{ clear:left}
#footer .info > li.copyright{ font-size:.75em; opacity:.6; margin-top:1.5em; text-transform:uppercase}
#footer .cs_wrap{ display:flex; gap:0 4em; text-align:right}
#footer .cs_wrap .wrap_in{ position:relative}
#footer .cs_wrap .wrap_in:not(:first-child):after{ content:""; position:absolute; left:-2em; top:0; width:1px; height:100%; background:#fff; opacity:.2}
#footer .cs_wrap .t1{ opacity:.7; font-weight:500; margin-bottom:.5em}
#footer .cs_wrap .t2{ font-weight:700; font-size:1.125em}

#footer .quick{ position:fixed; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; flex-direction:column; gap:.5em}
#footer .quick .wrapInc{ border-radius:1em; box-sizing:border-box; width:13em; color:#111; box-shadow:0 0 2em rgba(0,0,0,.2)}
#footer .quick .wrapInc .tit{ padding:.5em 1em; display:flex; gap:.5em; align-items:center; color:#fff; border-top-left-radius: inherit}
#footer .quick .wrapInc .tit .t1{ font-weight:700; font-size:.875em}
#footer .quick .wrapInc .con{ padding:1em; display:flex; flex-direction:column; gap:.25em; background:#fff; border-bottom-left-radius:inherit}
#footer .quick .wrapInc .con .t1{ font-weight:500; color:#666; font-size:.875em}
#footer .quick .wrapInc .con .no{ font-weight:900; font-size:1.063em}
#footer .quick .wrapInc.cs .tit{ background:#3a6774}
#footer .quick .wrapInc.bank .tit{ background:#42465b}

.sns_st{ display:flex; gap:.5em}
.sns_st > li > a{ display:flex; align-items:center; justify-content:center; width:2.5em; height:2.5em; border-radius:50%; transition:.3s}
.sns_st > li > a .xi{ font-size:1.5em}
.sns_st > li > a img{ height:1.125em}
.sns_st > li > a:hover{ background:#111; color:#fff}
.sns_st > li > a:hover img{ filter:brightness(0) invert(1)}
.sns_st > li > a.kc img{ height:1.438em}

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

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

#contents .sub_top_wrap .wrapBg .bg{ background-position:center 20%; transition:3s}
#contents .sub_top_wrap.on .wrapBg .bg{background-position:center 60%}

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

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

/**/
.mainBox{ padding:8vmin 0 10vmin 0; position:relative}
.mainBox.p1{ padding:12vmin 0}
.mainBox.bg1{ background:#f5f5f5}
.mainBox.bg2{ background:#e5f6ef}
.mainBox .wrapBg{ position:absolute; left:0; top:0; width:100%; height:100%}
.mainBox .wrapBg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.2}
.mainBox .wrapF{ display:flex; flex-direction:column; gap:6vmin 12vmin; position:relative}
.mainBox .wrapF .mainTit{ margin-bottom:0}
.mainBox .wrapF.dRow{ flex-direction:row; align-items:center}
.mainBox .wrapF.dRow .wrapCon{ flex:1; min-width:0}

.mainTit{ display:flex; flex-direction:column; align-items:flex-start; gap:1em; margin-bottom:2em}
.mainTit.ac{ align-items:center; text-align:center}
.mainTit .tit0{ font-size:1.5em; font-weight:700; opacity:.5}
.mainTit .tit0 > i{ font-style: inherit}
.mainTit .tit0.s1{ font-size:2em}
.mainTit .tit1{ font-size:2.625em; font-weight:500; letter-spacing:-.05em; word-spacing:.1em}
.mainTit .tit1 .inS{ font-size:1.75em; font-weight:700}
.mainTit .tit2{ font-weight:700; font-size:3.5em}
.mainTit .tt1{ filter:opacity(.5); font-size:1.188em; line-height:1.7; margin-top:1.5em; word-break:keep-all}
.mainTit .tt1.s1{ filter:opacity(.7); font-size:1.375em}
.mainTit .mgL{ margin-left:auto}
.mainTit.white{ filter:brightness(0) invert(1)}
.mainTit.white .tt1{ filter:opacity(1)}
.mainTit .mainMore:not(:first-child){ margin:3em 0 0 0}
.mainTitW{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:2em}
.mainTitW .mainTit{ margin-bottom:0}

.mainMore{ display:flex; align-items:center; gap:1em}
.mainMore .t1{ font-size:.875em; font-weight:700}
.mainMore .arrow{ display:flex; align-items:center}
.mainMore .arrow:before{ content:""; display:block; width:3em; height:1px; background:#111; transition:.3s}
.mainMore .arrow .cc{ width:1em; height:1em; background:#111; border-radius:50%; position:relative}
.mainMore .arrow .cc:before{ content:""; position:absolute; left:0; top:calc(50% - 1px); width:60%; height:1px; background:#fff}
.mainMore:hover .arrow:before{ width:4em}
.mainMore.white{ color:#fff}
.mainMore.white .arrow{ filter:invert(1)}
.mainMore.auto{ margin:auto 0 0 auto}
.mainMore2{ display:flex; align-items:center; jusity-content:center; text-align:center; gap:1em; height:4em; color:var(--siteC); border:2px solid var(--siteC); border-radius:.5em; background:#fff; box-shadow:0 0 1em rgba(0,0,0,.1); padding:0 2em; transition:.3s}
.mainMore2 .t1{ font-weight:700; font-size:1.125em}
.mainMore2 .arrow{ transition:.3s}
.mainMore2 .arrow:before{content:"\e907"}
.mainMore2:hover{ background:var(--siteC); color:#fff}
.mainMore2:hover .arrow{ transform:translateX(50%)}
.mainMore3{ width:2.5em; height:2.5em; border:2px solid var(--siteC); display:flex; align-items:center; justify-content:center; color:var(--siteC); border-radius:50%}
.mainMore3 .arrow:before{content:"\e907"}
.mainMore3.white{ color:#fff; border-color:#fff}

.mainWrap{ overflow:hidden}

.vod_wrap{ position:relative; 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%; background:#000; opacity:.1}
.vod_wrap .layer.gra{ background: linear-gradient(0deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,.3) 100%);}
.visualSlide .el{ position: relative; overflow:hidden; height:100vh; background:#fff}
.visualSlide .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.2)}
.visualSlide .el .vod_wrap{ position:absolute; left:0; top:0; width:100%; height:100%;}
.visualSlide .el .vod_wrap:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000}
.visualSlide .el.swiper-slide-active .vod_wrap:after,
.visualSlide .el.swiper-slide-duplicate-active .vod_wrap:after{ transition:2s; opacity:.2}
.visualSlide .el.swiper-slide-active .bg,
.visualSlide .el.swiper-slide-duplicate-active .bg{ transition:7s; transform:scale(1) rotate(.001deg)}
.visualSlide .el:nth-child(4n -1) .bg{ width:110%; transform:scale(1)}
.visualSlide .el.swiper-slide-active:nth-child(4n -1) .bg,
.visualSlide .el.swiper-slide-duplicate-active:nth-child(4n -1) .bg{ transform:translateX(-9.0909%) rotate(.001deg)}
.visualSlide .el:nth-child(4n) .bg{ width:110%; transform:scale(1); left:auto; right:0}
.visualSlide .el.swiper-slide-active:nth-child(4n) .bg,
.visualSlide .el.swiper-slide-duplicate-active:nth-child(4n) .bg{ transform:translateX(9.0909%) rotate(.001deg)}
.visualSlide .el:nth-child(4n -3) .bg{ height:110%; transform:scale(1); left:auto; right:0}
.visualSlide .el.swiper-slide-active:nth-child(4n -3) .bg,
.visualSlide .el.swiper-slide-duplicate-active:nth-child(4n -3) .bg{ transform:translateY(-9.0909%) rotate(.001deg)}

.visualSlide_wrap { position:relative}
.visualSlide_wrap .slogan{ position:absolute; width:100%; height:100%; left:0; top:0; color:#fff; z-index:10}
.visualSlide_wrap .slogan .in{ display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; height:100%; gap:6vmin; box-sizing:border-box; padding-bottom:5vmin}
.visualSlide_wrap .slogan .t1{ font-weight:700; font-size:1.8vw; word-spacing:.2vw}
.visualSlide_wrap .slogan .t2{ font-weight:700; font-size:3.75vw; letter-spacing:-.2vw; word-spacing:.2vw}
.visualSlide_wrap .slogan .t3{ font-size:1.4vw; filter: opacity(.8); line-height:1.5}
.visualSlide_wrap .slogan .t3 i{ transition-delay:1s}

.visualSlide_wrap .controlW{ position:absolute; bottom:2em; z-index:10; width:100%}
.visualSlide_wrap .controlW .in{ display:flex; align-items:center;}
.visualSlide_wrap .swiperControl{ margin-left:auto; display:flex; align-items:center;}
.visualSlide_wrap .swiperControl .paging{ display:flex; margin:0}
.visualSlide_wrap .swiperControl .paging span{ font-size:.75em}
.visualSlide_wrap .swiperControl .paging span.swiper-pagination-bullet-active{ height:0; width:8em; transform:none; transition:width .5s}
.visualSlide_wrap .swiperControl .btnW{ display:flex; margin:0 1em}
.visualSlide_wrap .swiperControl .btnW .swiperBtn:hover{ background:none}

.mainScroll{ color:#fff}
.mainScroll .tt{ display:flex; align-items:center; font-size:.813em; font-weight:500}
.mainScroll .tt .xi{ font-size:1.5em; margin-right:.25em; position:relative}

.mainAbout{--mainSecGap : 4em; position:relative; z-index:1}
.mainAbout .list{ display:flex; gap:var(--mainSecGap)}
.mainAbout .list > li{ flex:1}
.mainAbout .list > li .in{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:1em}
.mainAbout .list > li .imgW{ position:relative}
.mainAbout .list > li .imgW .resize{ padding-bottom:100%}
.mainAbout .list > li .imgW:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.3}
.mainAbout .list > li .conW{ position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; gap:2em; flex-direction:column; box-sizing:border-box; padding:10%; color:#fff}
.mainAbout .list > li .conW .tit{display:flex; flex-direction:column; gap:1em; align-items:center; padding-top:2em}
.mainAbout .list > li .conW .tit .t1{ font-size:1.5em; font-weight:700;}
.mainAbout .list > li:nth-child(2n) .imgW{ border-radius:50%; overflow:hidden}
.mainAbout .list > li:nth-child(3) .imgW{ transform:rotate(45deg)}

.mainService{ position:relative; height:calc(100vh - var(--headerH)); box-sizing:border-box}
.mainService .wrapBg:after{ height:100vh; top:100%; transform:translateY(-50%); background: linear-gradient(0deg, rgba(0,0,0,0) 0%, var(--siteC) 50%, rgba(0,0,0,0) 100%); opacity:1}
.mainService#horizontal .wrapF{ height:100%; overflow:hidden}
.mainService#horizontal .list{ flex:1; min-height:0; display:flex; gap:0 2em}
.mainService#horizontal .panel{ width:70%; height:100%; box-sizing:border-box; height: 100%; flex-shrink: 0;}
.mainService .list{ display:flex; gap:2em}
.mainService .list > li .wrap_in{ border-radius:.5em; border:1px solid rgba(255,255,255,.2); box-sizing:border-box; overflow:hidden; height:100%; position:relative}
.mainService .list > li .wrap_in .imgW{ height:100%}
.mainService .list > li .wrap_in .imgW .bg{ width:100%; height:100%; position:relative}
.mainService .list > li .wrap_in .imgW .bg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.2}
.mainService .list > li .wrap_in .conW{ position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column; box-sizing:border-box; padding:6%; gap:2em; color:#fff}
.mainService .list > li .wrap_in .conW .tit{ display:flex; align-items:center; gap:1em}
.mainService .list > li .wrap_in .conW .tit .t1{ font-size:2.5em}
.mainService .list > li .wrap_in .conW .sList{ display:flex; align-items:center; gap:.5em}
.mainService .list > li .wrap_in .conW .sList > li .in{ padding:.5em 1.5em; height:4em; box-sizing:border-box; background:rgba(255,255,255,.2); backdrop-filter:blur(1em); border:1px solid rgba(255,255,255,.2); border-radius:4em; display:flex; align-items:center; justify-content:center; transition:.3s}
.mainService .list > li .wrap_in .conW .sList > li:hover .in{ background:var(--siteC)}

.businessSt{ box-sizing:border-box; background:#fff; box-shadow:0 0 1em rgba(0,0,0,.1); border-radius:2em; position:relative; border:4px solid transparent; transition:.3s; display:flex; overflow:hidden}
.businessSt .imgW{ width:45%; position:relative; overflow:hidden; border-radius:calc(2em - 4px); box-sizing:border-box}
.businessSt .imgW .bg{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden}
.businessSt .conW{ flex:1; padding:3em 5%; min-height:40vmin; position:relative; box-sizing:border-box; display:flex; flex-direction:column; gap:2em}
.businessSt .conW .tit{ display:flex; align-items:center; justify-content:space-between}
.businessSt .conW .tit .t1{ font-weight:700; font-size:2em; word-break:keep-all;}
.businessSt .conW .check{ display:flex; flex-wrap:wrap; gap:.75em 2em}
.businessSt .conW .check > li{ width:calc(50% - 1em); display:flex; gap:.5em}
.businessSt .conW .check > li > i{ flex:1; min-width:0}
.businessSt .conW .check > li:before{ content:"\e928"; font-family:xeicon; color:var(--siteC)}
.businessSt:hover{ border-color:var(--siteC)}
.mainBusiness .listW{ display:flex; flex-direction:column; gap:4em}
.mainBusinessSlideW{ display:flex}
.mainBusinessSlide{ flex:1; min-width:0; margin:0 -2em; overflow:visible !important}
.mainBusinessSlide .el{ width:100%; height:auto}
.mainBusinessSlide .el .businessSt{ height:100%; margin:0 2em}
.mainBusinessSlide .el [class^="swiper-slide-shadow-"]{ width:calc(100% - 2em); border-radius:2em}
.mainBusinessSlide .el .swiper-slide-shadow-right{ left:auto; right:0}
.mainBusinessSlide .el:not(.swiper-slide-active) .titW{ position:absolute; left:0; top:0; width:100%; height:100%}
.mainBusinessSlide .el:not(.swiper-slide-active) .conW{ opacity:0}
.mainBusinessSlide .el .bg{ transform:scale(1)}
.mainBusinessSlide .el.swiper-slide-active .bg{ transform:scale(1.4); transition:5s; transition-delay:1s}
.mainBusiness .swiperControl:not(.nav){ z-index:10; position:relative; justify-content:center}
.mainBusiness .swiperControl .paging{ border-radius:5em; background:rgba(0,0,0,.3); flex:0 0 auto}
.mainBusiness .swiperControl .paging .swiper-pagination-bullet{ display:flex; width:auto; height:3.5em; align-items:center; background:none; border-radius:3em; padding:0 2em; color:#fff; border:2px solid transparent}
.mainBusiness .swiperControl .paging .swiper-pagination-bullet-active{ font-weight:700; background:#fff; color:var(--siteC); transition:.3s; transform:none; border-color:var(--siteC)}
.mainBusiness .swiperControl .paging .swiper-pagination-bullet .tt{ font-size:1.063em; font-weight:700}
.mainBusiness .swiperControl.nav.next{ order:1}
.mainBusiness .swiper-container-cube .swiper-cube-shadow{ opacity:.2}

.mainPortfolioSlide{ width:100%; margin:-1em; flex:1; min-width:0; overflow:visible !important}
.mainPortfolioSlide .el{ width:16.66%}
.mainPortfolioSlide .el .eIn{ margin:1em}

.mainEquipment .slideW{ margin:0 -1em; flex:1; min-width:0; width:100%; border-radius:20vmin; box-shadow:0 0 3em rgba(0,0,0,.2); padding:2em 5%; box-sizing:border-box; background: linear-gradient(0deg, rgba(0,0,0,.15) 0%, #fff 30%);}
.mainEquipment .el{ width:20%}
.mainEquipment .el .eIn{ margin:1em}
.mainEquipment .swiperControl{ padding:0 10vmin}

.newsSlide,
.newsSlide .el{ height:3em}
.newsSlideW{ display:flex; align-items:center; gap:2em; padding:2em 4em; border-radius:2em; box-shadow:0 0 2em rgba(0,0,0,.1)}
.newsSlideW .titW{ display:flex; align-items:center; gap:1em}
.newsSlideW .titW .t1{ font-weight:700; font-size:1.375em}
.newsSlideW .newsSlide{ flex:1; min-width:0}
.mainNewsSt{ height:100%; display:flex; align-items:center}
.mainNewsSt .conW{ flex:1; min-width:0; display:flex; align-items:center; gap:4em}
.mainNewsSt .tTit{ flex:1; min-width:0; font-size:1.125em; font-weight:500}
.mainNewsSt .tDate{ opacity:.5}
.mainNewsSt:hover .tTit{ text-decoration:underline}

.mainLink .list{ display:flex; overflow:hidden; gap:1em}
.mainLink .list > li{ flex:1; min-width:0; position:relative; border-radius:2em; overflow:hidden}
.mainLink .list > li.w1{ flex:0 0 50%}
.mainLink .list > li .bg{ position:absolute; left:0; top:0; width:100%; height:100%}
.mainLink .list > li .bg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.3}
.mainLink .list > li > a{ display:flex; flex-direction:column; align-items:flex-start; padding:2em; box-sizing:border-box; gap:1em; position:relative; height:25vmin; color:#fff}
.mainLink .list > li > a .ico{ height:2.5em; filter:brightness(0) invert(1)}
.mainLink .list > li > a .t1{ font-weight:700; font-size:1.5em}
.mainLink .list > li > a .more{ margin:auto 0 0 auto; display:flex; align-items:center; gap:.5em; font-size:1.125em; font-weight:500}
.mainLink .list > li > a .arrow{ transition:.3s}
.mainLink .list > li > a .arrow:before{content:"\ea3f"}
.mainLink .list > li:hover .bg{ transform:scale(1.1); transition:1s}

/*old*/
.page_tit > .tt > *{ vertical-align:baseline;}
.page_tit > .tt > span  { font-weight:400;}
.page_tit > .tt > strong{ font-weight:700;}
.page_tit > .tt + .page_tit{ margin-top:.75em;}
.page_tit > .c1{ color:#384ea2;}
.page_tit > .c2{ color:#111;}
.page_tit > span.tt,
.page_tit > strong.tt{ display:inline-block;}

.page_tit.dep1{ margin-bottom:1em;}
.page_tit.dep1 > .t1{ font-size:1.438em; color:#333; font-weight:500; letter-spacing:-1px;}
.page_tit.dep1 > .t2{ padding-top:.75em; font-size:1.063em; color:#666; line-height:1.5;}

.page_tit.dep2{ margin-bottom:1em;}
.page_tit.dep2 > .tt{ font-size:1.250em;}
.page_tit.dep2 > .tt.icon{ position:relative; padding-left:1.375em;}
.page_tit.dep2 > .tt.icon:before{ content:"\e92b"; font-family:xeicon; position:absolute; top:-.063em; left:0; font-size:1.125em; color:#0b9087;}

.sub_tit{position: relative; margin-top: 3.5em;}
.sub_tit::before{position: absolute; content: ''; left: 50%; top: -3.5em; background: url(../images/sub/dott_img01.png) no-repeat; width: 2.6em; height: 2.4em; background-size: 95%; transform: translateX(-50%); opacity: .25;}

.stickyT{ position:sticky !important; top:var(--headHS);}

.agree_wrap{ background:#fff; border:1px solid #e1e2e6; color:#555; line-height:1.8;}
.agree_wrap .agree{ padding:1.5em 2em;}
.agree_wrap .agree .in{ height:8em; padding-right:1em;}
.agree_wrap .agree *{ vertical-align:baseline;}
.agree_wrap .agree p{ padding:.5em 0;}
.agree_wrap .agree strong{ color:#222;}
.agree_wrap .check{ padding:1em 2em; border-top:1px solid #e1e2e6; text-align:right; background:#f9f9f9}
.agree_wrap .check > label{ margin-left:2em; font-size:1.063em;}
.agree_wrap .check > label:first-child{ margin-left:0}

.wrap-idx { } 
.wrap-idx .sub-tab { display: flex; height: 4.15em; border-radius: 100px; background-color: #F5F5F5; width: 1000px; margin: 0 auto 4.5em;} 
.wrap-idx .sub-tab > li { position: relative; cursor: pointer; height: 100%; display: flex; align-items: center; justify-content: center; flex: 1; font-size: 1.15em; font-weight: 700; border: 2px solid transparent; border-radius: 100px; color: #BDBDBD; transition: .3s; } 
.wrap-idx .sub-tab > li.on { background-color: var(--siteC); color: #fff; } 

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

.page_col{ gap:2em 6em;}
.page_col.gp1{}
.page_col > li{}
.page_col > li.w1{ width:45%;}
.page_col > li.w2{ width: 25%;}
.page_col + .page_col{ margin-top:8em;}
.page_col > li .p1{ padding:4em 0 5em 0;}
.page_col > li .p2{ padding:1.5em 0 2em 0;}
.page_col > li .round{ border-radius:1.25em; overflow:hidden;}
.page_col > li.inImg:not(.flex) .wrap_img:not(.resize){ position:relative; height:100%;}
.page_col > li.inImg.flex .wrap_img{ flex:1;}
.page_col > li .stkH1{ height:var(--maxHeight);}
.page_col > li .stkH1 .wrap_img{ flex:1;}

.page_list.number {border-top: 2px solid var(--siteC); border-bottom: 2px solid var(--siteC);} 
.page_list.number > li { } 
.page_list.number > li .in { gap:1.5em; padding:2em 0; } 
.page_list.number > li:not(:last-child) .in { border-bottom:1px solid #ddd; } 
.page_list.number > li .in .img_wrap.flex{ gap: 0.5em;}
.page_list.number > li .in .img_wrap.flex .img{ width: calc((100% - .5em) / 2);}
.page_list.number > li .in .img_wrap > .img{ width: 11em; height: 9em; border-radius: .5em; overflow: hidden;}
.page_list.number > li .in .img_wrap > .img > img{ width: 100%; height: 100%; object-fit: cover;}
.page_list.number > li .in .num_wrap { gap:1.125em; } 
.page_list.number > li .in .num_wrap .num { min-width:1.5em; font-size:1.375em; } 
.page_list.number > li .in .num_wrap:after { content:""; width:2.5em; height:1px; background:#999; } 
.page_list.number > li .in .con_wrap { flex:1; } 

.ttdot{ position:relative; padding-left:1rem; line-height:1.6;}
.ttdot:before{ content:""; position:absolute; left:0; top:9px; width:.313rem; height:.313rem; background:var(--siteC); border-radius:50%;}
.ttdot.s4:before{top: 14px;}
.ttdot + .ttdot{ margin-top:.95em;}
.ttdot.stw {}
.ttdot.stw:before {background:var(--crWhite);}

.ttdot2{ padding-left: 1rem; font-size: 1.25em; color:#333; word-break: keep-all; position: relative;}
.ttdot2::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--siteC3); position: absolute; left: 0; top: 13px;}

.ttdot3{ padding-left: 1.7em; word-break: keep-all; position: relative; margin-top: 0.3em;}
.ttdot3::before{ position: absolute; content: '-'; left: 10px;}

.inner-split { display: flex;}
.inner-split .left,.inner-split .right { width: 50%; padding: 10px;}
.inner-split .left { border-right: 1px solid #ddd; }

.con_divide {border-top: 1px solid #ddd; margin-top: 3em; padding-top: 3em;}

.sub_link .list{ display:flex; overflow:hidden; gap:1em}
.sub_link .list > li{ flex:1; min-width:0; position:relative; border-radius:2em; overflow:hidden}
.sub_link .list > li.w1{ flex:0 0 50%}
.sub_link .list > li .bg{ position:absolute; left:0; top:0; width:100%; height:100%}
.sub_link .list > li .bg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.3}
.sub_link .list > li > a{ display:flex; flex-direction:column; align-items:flex-start; padding:2em; box-sizing:border-box; gap:1em; position:relative; height:25vmin; color:#fff}
.sub_link .list > li > a .ico{ height:2.5em; filter:brightness(0) invert(1)}
.sub_link .list > li > a .t1{ font-weight:700; font-size:1.5em}
.sub_link .list > li > a .more{ margin:auto 0 0 auto; display:flex; align-items:center; gap:.5em; font-size:1.125em; font-weight:500}
.sub_link .list > li > a .arrow{ transition:.3s}
.sub_link .list > li > a .arrow:before{content:"\ea3f"}
.sub_link .list > li:hover .bg{ transform:scale(1.1); transition:1s}

.list_tab li {flex: 1; border:1px solid #ddd; padding:1em 1.5em; position:relative; margin: 0 0 0 -1px; }
.list_tab.w2 li {flex: 1 20%;}
.list_tab.w3 li {flex: 1 25%;}
.list_tab li:after {content:''; position:absolute; bottom:-2px; left:0; width:100%; height:2px; background-color:#0077cf;}
.list_tab li.on .c_point { color:#00c65e !important; }
.list_tab li.on:before { content: "\e928"; position: absolute; right: 1.3em; top: 50%; transform: translateY(-50%); font-family: xeicon; font-size: 1.5em; color: #00c65e; }
.list_tab li.on:after {background-color:#00c65e;}
.step_top {font-size:.8em; margin-bottom:.5em;}
.step_tit {font-weight:600; font-size:1em;}
.step_en {font-size:.8em; font-weight:300;}
.step_icon {margin-left:1.5em;}

.min_const2 .bg_con {border: 1px solid #cce2a7; padding: 1em; border-radius: .8em; overflow: hidden; background: #f7ffea;}
.min_const2 .bg_con2 {border: 1px solid #ddd; padding: 1em; border-radius: .8em; overflow: hidden; background: #f4f4f4;}
.min_const2 .bg_con3 {border: 1px solid var(--siteC2); border-radius: .8em; overflow: hidden; padding: 1.5em; background: #fff;}
.min_const2 .bg_con3 .tx2 {border-bottom: 1px dashed #ddd; padding-bottom: .5em; margin-bottom: .5em; gap: 1em; align-items: center;}
.min_const2 .bg_con3 .tx2:last-child {border-bottom: unset; padding-bottom: unset; margin-bottom: unset;}
.min_const2 .bg_con3 .tx2 .num {width: 2em; height: 2em; line-height: 2em; background: var(--siteC2); color: #fff; text-align: center; border-radius: 50%;}
.min_const2 .bg_con3 .tx2 .tt {font-weight: 500; flex: 1;}

/* 인사말 */

.overview_wrap{}
.overview_wrap .pd_box{padding: 0 7em ; background: var(--gray1); position: relative; flex-direction: column; height: 19em;}
.overview_wrap .txt_wrap{margin-top: -14em; gap: 4em;}
.overview_wrap .txt_box{ width: 55%;}
.overview_wrap .txt_box .tit{margin: 5em 0 2em; }
.overview_wrap .txt_box .txt{width: 83%;}
.overview_wrap .txt_box .txt .t1{font-weight: 500; font-size: 1.188em; line-height: 1.6; color: #666; margin-bottom: 1.3em;}
.overview_wrap .txt_box .ceo{ font-weight: 600; letter-spacing: 0.06em; font-size: 22px; color: var(--siteC3); margin-top: 2em;}
.overview_wrap .img_wrap{width: 45%; box-shadow: -20px 20px 30px rgb(17 17 17 / 30%); height: 40em; }
.overview_wrap .img_wrap img{width: 100%; height: 100%; object-fit: cover;}

.overview_wrap2 {}
.overview_wrap2 .txt_wrap {border-top: 1px solid #ddd; padding-top: 3em; margin-top: 3em; gap: 5em;}
.overview_wrap2 .txt_box {flex: 1;}
.overview_wrap2 .txt_box .t2 {font-weight: 500; margin-bottom: .3em; line-height: 1.6; color: #666;}
.overview_wrap2 .txt_box .t2:last-child {margin-bottom: unset;}
.overview_wrap2 .img_wrap {width: 45%;}

.facWrap{ position: relative; width: 100%; margin: 4em 0; padding-top: 14em; border-top: 1px solid #ddd;}
.facWrap .bgImg{ position: absolute; right: 0; top: 4em; width: 51.75%; height: 50vh;}
.facWrap .bgImg:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--siteC); opacity: .8; content: '';}
.facWrap .bgImg > img{ width: 100%; height: 100%; object-fit: cover;}
.facWrap .bgImg .bgInfo{ position: absolute; width: 100%; padding: 0 0 0 7em; box-sizing: border-box; top: 6em; z-index: 2;}
.facWrap .bgImg .bgInfo .topTit{ display: flex; gap: 1em; align-items: center;}
.facWrap .bgImg .bgInfo .topTit > .en{ font-size: 1.215em; font-weight: 600; line-height: 1; color: #fff; }
.facWrap .bgImg .bgInfo .topTit > .line{ flex: 1; height: 1px; background: rgba(255,255,255, .5);}
.facWrap .bgImg .bgInfo .tit{ font-size: 2.515em; padding: .5em 0 .75em 1em; font-weight: 800; color: #fff; text-transform: uppercase;}
.facWrap .fac_container{ position: relative; }
.facWrap .fac_container > .swiperControl{ position: absolute; width: 52.15%; left: 0; bottom: 0; z-index: 4;}
.facWrap .fac_container > .swiperControl .swiperBtn{ width: 3.5em; height: 3.5em; background: #557e60ad; color: #fff;}
.facWrap .fac_container > .swiperControl .swiperBtn:hover{ background: var(--siteC);} 
.facWrap .fac_container > .swiperControl.pagingControl{  position: absolute; left: 25.6%; width: fit-content; transform: translateX(-50%); bottom: 1.75em; z-index: 3;}
.facWrap .fac_container > .swiperControl.pagingControl .paging .swiper-pagination-bullet{ border: 1px solid #fff; width: .4em; height: .4em;}
.facWrap .fac_container > .swiperControl.pagingControl .paging .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #fff;}
.facWrap .fac_container .ImgContainer{ position: relative; width: 52%; z-index: 2;}
/* .facWrap.st1 .fac_container .ImgContainer{ width: 43%;}
.facWrap.st1 .fac_container .infoContainer{ width: 57%;}
.facWrap.st1 .bgImg{ width: 56%;}
.facWrap.st1 .bgImg .bgInfo{ padding: 0 0 0 4em;} */
.facWrap .fac_container .ImgContainer .imgSlide{}
.facWrap .fac_container .ImgContainer .imgSlide .imgCon{ width: 100%; height: 63.5vh;}
.facWrap .fac_container .ImgContainer .imgSlide .imgCon > img{ width: 100%; height: 100%; object-fit: cover;}
.facWrap .fac_container .infoContainer{ position: absolute; bottom: -2em; right: 0; width: 52%; padding: 4em 4em 5.5em 4em; box-sizing: border-box; background: #1a1e1f; z-index: 3;}
.facWrap .fac_container .infoContainer > .en{ font-size: 1.063em; font-weight: 500; color: var(--siteC); margin-bottom: 1em;}
.facWrap .fac_container .infoContainer > .tit{ font-size: 1.515em; font-weight: 700; color: #fff; margin-bottom: 1.25em;}

.page_certificate {margin-top: 6em;} 
.page_certificate .list { gap: 4.5em 2em; } 
.page_certificate .list > li { position: relative; flex: 0 0 calc(25% - 2em); } 
.page_certificate .list > li .img-area { position: relative; padding: 2.5em; background: var(--crGray2); border: 3px solid transparent; transition: 0.3s; box-sizing: border-box; } 
.page_certificate .list > li .xi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.5em; height: 2.5em; border: 3px solid var(--siteC); border-radius: 50%; color: var(--crWhite); background: var(--siteC); opacity: 0; visibility: hidden; transition: 0.3s; display: flex; align-items: center; justify-content: center; } 
/* .page_certificate .list > li:hover .xi { opacity: 1; visibility: visible; } 
.page_certificate .list > li:hover .img-area { border-color: var(--siteC); }  */
.page_certificate .list > li .img-area .imgfix { box-shadow: 0 0 30px rgba(0, 0, 0, .075); width: 210px; height: 310px; margin: 0 auto; } 
.page_certificate .list > li .txt { margin-top: 1.5em; text-align: center; } 
.page_certificate .list > li .txt > p { font-size: 1.125rem; } 
.page_certificate .list > li .txt > span { display: inline-block; font-size: 1rem; color: var(--crGray3); margin-top: 10px; } 


/* 오시는길 */

.root_daum_roughmap .wrap_controllers{ display: none;}
.map-Con .list{ }
.map-Con .list{ gap:1em 1em; margin: 2.5em 0;}
.map-Con .list > li{ flex:1; text-align:center;}
.map-Con .list > li .in{ flex:1;}
.map-Con .list > li + li .in{ padding-left:1em; border-left:1px solid #ddd;}

.page_txt .mark{ margin-bottom:3em;}
.page_txt .mark img{ width:5em;}

.page_txt > .ico + *{ margin-top:1em;}
.page_txt > .ico img{ width:2.25em;}

.map-Con .map{ border-radius: 1.5em; overflow: hidden; box-shadow: 3px 0 9px rgba(0,0,0, .15);}

.map_info3 .info_list{}
.map_info3 .info_list > li{ padding:2em 2em; border-bottom:1px solid #ddd;}
.map_info3 .info_list > li .wrap_tit{ width:15em;}
.map_info3 .info_list > li .wrap_con{ flex:1; padding-left:1.5em;} 
.map_info3 .info_list > li .wrap_tit .tit{ padding:.5em 0; color:#222;}
.map_info3 .info_list > li .wrap_tit .tit .tt{ font-weight:500;}
.map_info3 .info_list > li .wrap_tit .tit .t1{ font-size:1.375em;}
.map_info3 .info_list > li .wrap_tit .tit .t2{}
.map_info3 .info_list > li .wrap_tit .tit .xi{ font-size:1.500em; padding-right:.25em;}
.map_info3 .info_list > li .wrap_con .txt{ padding:.5em 0;}
.map_info3 .info_list > li .wrap_con .txt .tt{ color:#333; line-height:1.6}
.map_info3 .info_list > li .wrap_con .txt .t2{ font-size:1.125em;}
.map_info3 .info_list > li .wrap_con .txt .round{ margin-right:.75em; padding:.5em 1.5em; background:#8bc53f ; font-size:.875em; color:#fff; font-weight:700; border-radius:6em;}
.map_info3 .info_list > li .wrap_con .txt .round.back_red { background:#fb2217 ;}
.map_info3 .info_list > li .wrap_con .txt .round.back_seo { background:#00b140 ;}
.map_info3 .info_list > li .wrap_con .txt .c_seo {color:#00b140;}
.map_info3 .info_list > li .wrap_con .txt .round.back_four { background:#2c9ede ;}
.map_info3 .info_list > li .wrap_con .txt .c_four {color:#2c9ede;}

.root_daum_roughmap .cont {display: none;}

/*연혁*/
.history-con .hisTopImg{ width: 100%; height: 25em; border-radius: 1em; overflow: hidden; margin-bottom: 2.5em;}
.history-con .hisTopImg > img{ width: 100%; height: 100%; object-fit: cover;}
.history-layout {gap: 6em;}
.history-layout .left { position: sticky; height: 100%; top: var(--headH); flex: 1 1 45%; margin-top: 2.5em;}
.history-layout .left .title-wrap {}
.history-layout .left .title-wrap > .desc{ font-size: 1.15em; color: #444;}
.history-layout .left .title-wrap > h3{font-size: 2.515em; margin: .25em 0; font-weight: 700;}
.history-layout .left .img-wrap {margin-top: 1.5em; height: 25em; position: relative;}
.history-layout .left .img-wrap img {border-radius: 1em; width: 100%; height: 100%; object-fit: cover;}
.history-layout .right {flex: 1 1 55%;}
.history-layout .right .hitory_wrap {}

.history_bgw {overflow:hidden; position:relative; margin-bottom:3em;}
.history_bgw .bg_w {position:absolute; left:0; top:0; width:100%; height:100%; background-position:center top; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;}
.history_bgw .txt_wrap {text-align:center; }
.history_bgw .txt_wrap .en {font-weight: 700;  padding-bottom:.5em; color:#fff; /*letter-spacing:5px;*/ font-size:2.5em; }
.history_bgw .txt_wrap .kr {font-size:1.125em; color:#fff; margin-bottom:.5em;}
.history_bgw .line_wrap{ position:relative; height:15em;}
.history_bgw .line_wrap .line{ position:absolute; background:#fff; width:1px; height:1px; transition:1s; opacity:.5; display:none;}
.history_bgw .line_wrap .line.hor{ transition-delay:1s}
.history_bgw .line_wrap .line.top{ top:0}
.history_bgw .line_wrap .line.bot{ bottom:0}
.history_bgw .line_wrap .line.left{ left:0}
.history_bgw .line_wrap .line.right{ right:0}
.load .history_bgw .line_wrap {margin:2em 1.5em;}
.load .history_bgw .line_wrap .line.ver{ height:100%}
.load .history_bgw .line_wrap .line.hor{width:40%;}
.load .history_bgw .line_wrap .line{ display:block}

.history_wrap{ position:relative; padding:2em 0 2em 0; overflow: hidden;}
.history_wrap:before,
.history_wrap .scrollAniHis{ content:""; position:absolute; left:2%; top:0; width:2px; height:100%; background:#ddd}
.history_wrap .history{ padding-left: 1em;}

.history_wrap .scrollAniHis{ height:0; background: var(--siteC); transition:.3s;}
.history_wrap .scrollAniHis:before {content:""; position:absolute; top:0; margin-left:-.5em; width:1.215em; height:1.215em; background:#fff; border:.25em solid var(--siteC); border-radius:100%; box-sizing:border-box}
.history_wrap:after{ content:""; position:absolute; left:2%; top:0; margin-left:-.5em; width:1.215em; height:1.215em; background:#fff; border:.25em solid var(--siteC); border-radius:100%; box-sizing:border-box}

.history_wrap.rich .scrollAniHis{background:var(--siteC);}
.history_wrap.rich .scrollAniHis:before {border:.25em solid var(--siteC);}
.history_wrap:after{  border:.25em solid var(--siteC);}

.history_wrap:after{ top:auto; bottom:0}
.history_wrap .history > li{ margin-top:6em; flex-direction: column; gap: .5em;}
.history_wrap .history > li:first-child{ margin-top: 0}
.history_wrap .history > li .year{ width:28%; /* overflow:hidden; */ padding-left: 2em;}
.history_wrap .history > li .year .wrap_in{ position:relative;}
.history_wrap .history > li .year .tt{ display:inline-block; position:relative; font-size:2.715em; letter-spacing:-3px; color: var(--siteC); font-weight:700;}
/* .history_wrap .history > li .year .tt:before{ content:""; position:absolute; right:110%; top:50%; margin-top:-1px; width:30%; border-top:2px solid #ddd; z-index: -1;} */
/* .history_wrap .history > li .year .tt:after{ content:"'"; font-style:italic} */
.history_wrap .history > li .list{ width:100%; margin-top:1em}
.history_wrap .history > li .list > li{ margin-top:1em}
.history_wrap .history > li .list > li:first-child{ margin-top:0}
.history_wrap .history > li .list .wrap_in{ padding:0 2em 0 3em; /* align-items: center; */ position: relative;}
.history_wrap .history > li .list .wrap_in .img_wrap .resize {padding-bottom:35% !important;}
.history_wrap .history > li .list .wrap_in .img_wrap .resize .img_r {text-align:right !important;}
.history_wrap .history > li .list .wrap_in .img_wrap .resize .img_l {text-align:left !important;}
.history_wrap .history > li .list .month{ flex: 0 0 4.5em; font-size: 1.063em; line-height: 1.4; color: var(--siteC); font-weight: 600;}
.history_wrap .history > li .list .month .tt{ color:#999; font-size:1.125em;letter-spacing:-1px}
.history_wrap .history > li .list .month .tt:after{ content:""; font-size:.813em; font-weight:500}
.history_wrap .history > li .list .detail > li{ margin-top:.5em}
.history_wrap .history > li .list .detail > li:first-child{ margin-top:0}
.history_wrap .history > li .list .detail .tt{ position:relative; color:#333; font-size:1.063em; line-height:1.4; font-weight:400; word-break: keep-all; padding-left: 1em;}
.history_wrap .history > li .list .detail .tt::before{position: absolute; top: 9px; left: 0.15em; content: ''; width: 4px; height: 4px; border-radius: 100px; background: var(--siteC3);}

.histroy-ank {max-width: 70%; margin: auto; margin-top: -2em; box-shadow: 0 10px 10px rgba(0,0,0,.1); border-radius: 5em; overflow: hidden;}
.histroy-ank > li {flex: 1; display: flex; align-items: center; justify-content: center; background: #fff; transition: .35s; border-right: 1px solid #ddd;}
.histroy-ank > li:hover {background: #012350;}
.histroy-ank > li:hover .btn-tt {color: #fff;}
.histroy-ank > li .btn-tt {font-size: 1.75em; font-weight: 600; color: #777; position: relative; transition: .35s; padding: .5em 1em; transition: .35s; width: 100%; text-align: center;}
.histroy-ank > li .btn-tt.on {background: #012350; color: #fff;}
.histroy-ank > li .btn-tt:before {content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: #2b9cbb; border-radius: 50%; width: .25em; height: .25em; opacity: 0; transition: .35s;}
.histroy-ank > li .btn-tt:hover:before {opacity: 1; top: -.5em;}

/*  */
.equip_list {gap: 2em 1em;}
.equip_list li {flex: 1 32.3%; max-width: 32.3%;}
.equip_list li .in {display: block;}
.equip_list li .in .img {border-radius: .5em; overflow: hidden; height: 16em;}
.equip_list li .in .img img {width: 100%; height: 100%; object-fit: cover;}
.equip_list li .in .tbox {min-height: 2.28em;}
.equip_list li .in .tit {font-size: 1.125em; font-weight: 700; color: var(--siteC); margin-top: 1em; margin-bottom: .5em;}
.equip_list li .in .tx {font-weight: 500; color: #666; font-size: .875em;}

.tbox {background: #f4f4f4; padding: 1em;}

.img-modal {position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 1200;}
.img-modal.is-open {display: flex;}
.img-modal__bg {position: absolute; inset: 0; background: rgba(0,0,0,.7);}
.img-modal__dialog {position: relative; max-width: 95%; max-height: 95%; z-index: 2; display: flex; align-items: center; justify-content: center; background: #fff; padding: 2em; border-radius: 1em; overflow: hidden;}
.img-modal__dialog img {max-width: 100%; max-height: 100%; border-radius: .5em; display: block;}
.img-modal__close {position: absolute; top: 5px; right: 10px; background: transparent; border: 0; color: #000; font-size: 2rem; cursor: pointer; z-index: 3;}

/* 청소서비스 */

.service_tab_wrap .tab_bg {height: 15em; overflow: hidden;}
.service_tab_wrap .list_tab {gap: 1em;}
.service_tab_wrap .list_tab li {background: rgba(255, 255, 255, .5); flex: unset; width: 13em; text-align: center; padding: 2em 0; margin-top: -5em; border: 1px solid #ddd; backdrop-filter: blur(10px);}
.service_tab_wrap .list_tab li:after {display: none;}
.service_tab_wrap .list_tab li > a {display: block;}
.service_tab_wrap .list_tab li > a .icon {margin-bottom: .5em;}
.service_tab_wrap .list_tab li > a .icon img {width: 3.5em; filter: var(--crGrayfil);}
.service_tab_wrap .list_tab li.on {background: #fff;}
.service_tab_wrap .list_tab li.on:before {display: none;}
.service_tab_wrap .list_tab li:hover > a .icon img,
.service_tab_wrap .list_tab li.on > a .icon img {filter: unset;}
.service_tab_wrap .list_tab li.on > a .tit {color: var(--siteC);}

.care_wrap { display: flex; gap: 6em; } 
.care_wrap .careBox { display: flex; flex-direction: column; justify-content: space-between; width: 50%; } 
.care_wrap .careBox .careT.mb { margin-bottom: 4em; } 
.care_wrap .careBox .careT > .tit { font-size: 2.15em; font-weight: 700; margin-bottom: 1em; color: var(--siteC3); } 
.care_wrap .careBox .careT > .txt { font-size: 1.13em; line-height: 1.6; word-break: keep-all; color: var(--siteC3); margin-bottom: 1em;} 
.care_wrap .careBox .careT > .txt:last-child{margin-bottom: 0;}
.care_wrap .careBox .careImg { width: 100%; height: 40vh; } 
.care_wrap .careBox .careImg.h2 {height: 50vh;}
.care_wrap .careBox .careImg > img { width: 100%; height: 100%; object-fit: cover; } 

.service_st {gap: 6em;}
.service_st .service_img {width: 45%; height: 40vh; overflow: hidden;}
.service_st .service_img.h2 {height: 50vh;}
.service_st .service_img > img {width: 100%; height: 100%; object-fit: cover;}
.service_st .service_tbox {flex: 1;}
.service_st .service_tbox > .tit {font-size: 2.15em; font-weight: 700; margin-bottom: 1em; color: var(--siteC3);}
.service_st .service_tbox > .tit2 {font-size: 1.6em; font-weight: 700; margin-bottom: 1em; color: var(--siteC3);}
.service_st .service_tbox > .txt {font-size: 1.13em; line-height: 1.6; word-break: keep-all; color: var(--siteC3); margin-bottom: 1em;}
.service_st .service_tbox > .txt:last-child{margin-bottom: 0;}
.service_st .service_tbox > .txt2 {font-size: .96em; line-height: 1.6; word-break: keep-all; margin-bottom: 1em;}
.service_st .service_tbox > .txt2:last-child{margin-bottom: 0;}

.service_st2 {gap: 2em 1em; flex-wrap: wrap;}
.service_st2 li {flex: 1 32.3%;}
.service_st2.w2 li {flex: 1 24%;}
.service_st2 li .img {overflow: hidden; height: 30vh;}
.service_st2 li .ttbox {text-align: center; margin-top: 1em;}
.service_st2 li .ttbox .t1 {background: var(--siteC); color: #fff; display: inline-block; padding: .5em 1em; border-radius: 3em; font-size: .9em; margin-bottom: 1em;}
.service_st2 li .ttbox .t2 {font-size: 1em; font-weight: 500;}
.service_st2 li .ttbox .t3 {margin-bottom: .5em;}

.service_st3 {gap: 1em; flex-wrap: wrap;}
.service_st3 li {border-radius: 1em; overflow: hidden; flex: 1 49%;}
.service_st3 li .tit {background: var(--siteC); padding: 1em 1.5em; color: #fff; font-weight: 500; font-size: 1.05em;}
.service_st3 li .detail {background: #ececec; padding: 1em 1.5em; min-height: 8em;}
.service_st3 li .detail .tt { margin-bottom: .5em; line-height: 1.4; font-size: .9em;}
.service_st3 li .detail .tt:last-child {margin-bottom: unset;}

.business_st {}
.business_st .item {margin-bottom: 3em; background: #f7f7f7; border-radius: 1em; overflow: hidden; border: 1px solid #f7f7f7;}
.business_st .item .t_con {width: 50%; padding: 3.5em; box-sizing: border-box;}
.business_st .item .t_con .tit {font-size: 1.8em; font-weight: 700; color: var(--siteC); margin-bottom: .5em;}
.business_st .item .t_con .tt {font-size: 1em; line-height: 1.6; color: #666;}
.business_st .item .t_con .tt2 {font-size: .9em;margin-top: 1em; line-height: 1.6;}
.business_st .item .t_con .tt2 span {font-weight: 600; color: var(--siteC);}
.business_st .item .t_con .tt3 {font-size: .9em;}
.business_st .item .imgbox {width: 50%; height: 40vh; overflow: hidden;}
.business_st .item .imgbox img {width: 100%; height: 100%; object-fit: cover;}

.ci_wrap {gap: 6em;}
.ci_wrap .logo_img {background: #f4f4f4; width: 45%; padding: 3em; text-align: center; border-radius: 1em;}
.ci_wrap .ttbox {text-align: center; font-size: 1.125em; line-height: 1.6; flex: 1;}

.ci_wrap2 {gap: 3em; border: 5px solid #cce2a7; border-radius: 1em; overflow: hidden; padding: 2em;}
.ci_wrap2 .logo_img {width: 20%; text-align: center; background: #f4f4f4; padding: 2.5em 0;}
.ci_wrap2 .logo_img img {width: 6em;}
.ci_wrap2 .ttbox {flex: 1;}
.ci_wrap2 .ttbox .tt {gap: 1em; margin-bottom: .5em; border-bottom: 1px dashed #ddd; padding-bottom: .5em;}
.ci_wrap2 .ttbox .tt:last-child {margin-bottom: unset; border-bottom: unset; padding-bottom: unset;}
.ci_wrap2 .ttbox .tt .t1 {background: var(--siteC); width: 5em; text-align: center; color: #fff; font-weight: 600; height: 3em; line-height: 3em; border-radius: .5em; overflow: hidden;}
.ci_wrap2 .ttbox .tt .t1.c2 {background: var(--siteC2);}
.ci_wrap2 .ttbox .tt .t2 {flex: 1; font-size: .9em; line-height: 1.6;}

.philo_wrap {gap: 2em;}
.philo_wrap .item {flex: 1; background: var(--siteC); padding: 3em 2em; border-bottom-left-radius: 3em;}
.philo_wrap .item .t1 {font-size: 1.4em; font-weight: 800; color: #fff; margin-bottom: 1em;}
.philo_wrap .item .t2 {color: #fff; line-height: 1.6; min-height: 3.3em;}

.sub_bg {background: #f4f4f4; border: 1px solid #ddd; border-radius: 1em; overflow: hidden; padding: 3em 0;}
.circleItem_wrap{ position:relative; width:24em; max-width:70%; margin:0 auto; padding:2em 0;}
.circleItem{}
.circleItem:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:1.25em solid var(--crGray3); border-radius:50%; opacity:.4; box-sizing:border-box;}
.circleItem .item_wrap{ position:absolute; gap:2em;}
.circleItem .item_wrap .icon .in{ width:8em; height:8em; background:var(--siteC); border-radius:50%;}
.circleItem .item_wrap:nth-child(2n) .icon .in{ background:var(--gradC1);}
.circleItem .item_wrap .icon .in img{ width:40%;}
.circleItem .item_wrap .txt{ width:20em;}
.circleItem .item_wrap .txt .t1{ font-size:1.05em; font-weight:700;}
.circleItem .item_wrap .txt .t2{ margin-top:.5em; opacity:.6;}
.circleItem .item_wrap.item01{ left:50%; top:0; margin-left:2em; margin-top:-2em;}
.circleItem .item_wrap.item02{ left:100%; top:50%; margin-left:-4em; transform:translateY(-50%);}
.circleItem .item_wrap.item03{ left:50%; bottom:0; margin-left:2em; margin-bottom:-2em;}
.circleItem .item_wrap.item04{ right:50%; bottom:0; margin-right:2em; margin-bottom:-2em;}
.circleItem .item_wrap.item05{ right:100%; top:50%; margin-right:-4em; transform:translateY(-50%);}
.circleItem .item_wrap.item06{ right:50%; top:0; margin-right:2em; margin-top:-2em;}
.circleItem .item_wrap.item04,
.circleItem .item_wrap.item05,
.circleItem .item_wrap.item06{ flex-flow:row-reverse; text-align:right;}