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

.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; transition:transform .5s}
#header .top_wrap{ position:relative}
#header .top_wrap .wrapH,
#header .top_wrap .gnb_wrap .dp1{ height:var(--headerH)}
.main:not(.scroll):not(.allOn) #header .top_wrap .wrapH,
.main:not(.scroll):not(.allOn) #header .top_wrap .gnb_wrap .dp1{ height:calc(var(--headerH) + 5vmin)}
.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%; transition:.5s}
#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 .lang_wrap{ display:flex; align-items:center}
#header .lang_wrap .ico{ font-size:1.25em}
#header .lang_wrap .list{ display:flex; align-items:center}
#header .lang_wrap .list > li > a{ opacity:.5; padding:.5em}
#header .lang_wrap .list > li:hover > a,
#header .lang_wrap .list > li.on > a{ opacity:1}
#header .lang_wrap .list > li.on > a{ color:var(--siteC)}
#header .lang_wrap .list > li > a .tt{ font-weight:900; text-transform:uppercase; position:relative; padding:.25em; font-size:.938em}
#header .lang_wrap .list > li.on > a .tt:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--siteC)}

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; transition:padding .3s}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb:before{ content:""; position:absolute; width:200vw; background:#fff; top:var(--headerH); height:0; opacity:0; transition:height .3s; box-sizing:border-box; border-top:1px solid #eee; 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 .tt{ white-space:nowrap}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li{ position:relative; flex:1; border-right:1px solid transparent; max-width:20vmin;}
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}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li .dp1 .tt{ font-weight:700; font-size:1.25em}
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:after{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--siteC); transform:scaleX(0);}
html:not(.allOn) #header .gnb_wrap .gnb > li .dp2{ position:absolute; left:42%; width:14em; text-align: center; margin-left:-6em; padding:.7em 0; opacity:0; visibility:hidden; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 0.625em; border-radius: .8em; background:#fff; display:block;}
html:not(.allOn) #header .gnb_wrap .gnb > li:hover .dp2{ visibility:visible; opacity:1}
html:not(.allOn) #header .gnb_wrap .gnb > li .dp2 > li > a{ height:auto; padding:.75em 0; margin:0 1em; border-top:1px dashed #ddd; color:#000; text-align: center; display: block;}
html:not(.allOn) #header .gnb_wrap .gnb > li .dp2 > li:first-child > a{ border-top:none}
html:not(.allOn) #header .gnb_wrap .gnb > li .dp2 > li:hover > a,
html:not(.allOn) #header .gnb_wrap .gnb > li .dp2 > li.on > a{ background:#f4f4f4; color: #000; font-weight: 500;}
html:not(.allOn) #header .gnb_wrap .gnb > li .dp3{ display:none}
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:hover .dp1,
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:hover .dp1:after,
html:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li.on .dp1:after{ transform:scaleX(1); transition:.3s}

#header .top_wrap .gnb_wrap .gnb > li .dp2{ flex-direction:column; gap:.5em}

html.scroll:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li.on .dp1{ color:var(--siteC)}
html.scroll:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li.on .dp1 .va:after{ opacity:1; transition:.3s}
html.scroll:not(.allOn) #header .top_wrap .gnb_wrap .gnb > li:hover .dp2{ visibility:visible; opacity:1; z-index:auto; transition:.2s;}

html.scroll:not(.up) #header{ transform:translateY(-100%); transition: none}
html.up #header{box-shadow:0 1em 1em rgba(0,0,0,.1)}

html:not(.scroll):not(.allOn) #header:not(:hover){ background:none; color:#fff; box-shadow:none}
html:not(.scroll):not(.allOn) #header:not(:hover) .top_wrap .logo{ filter:brightness(0) invert(1)}
html:not(.scroll):not(.allOn) #header:not(:hover) .top_wrap .gnb_wrap .gnb > li.on .dp1{ color:#fff}
html:not(.scroll):not(.allOn) #header:not(:hover) .top_wrap .gnb_wrap .gnb > li .dp1:after{ background:#fff}

.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:5vh}
.allOn #header .top_wrap:before{ content:""; position: fixed; right:50%; bottom:50%; background:#f5f5f5; border-radius:50%}
.allOn #header .top_wrap .wrapF{ flex-direction:column; align-items:flex-start; gap:4vmin; padding:5vmin 14vmin}
.allOn #header .gnb_wrap{ flex:1; min-height:0; width:100%; margin-left:0; order:10}
.allOn #header .gnb_wrap .gnb{ flex-wrap:wrap; gap:8vmin; 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 2vmin 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:2vmin; 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:3.5vmin; font-weight:500; position:relative}
.allOn #header .gnb_wrap .gnb > li .dp2{ gap:.5em 2vmin}
.allOn #header .gnb_wrap .gnb > li .dp2 > li > a{ height:6vmin; align-items:center; padding:0 2vmin; border:1px solid #ddd; border-radius:1vmin; 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:1vmin; top:50%; transform:translateY(-50%); margin-right:-2vmin; opacity:0; transition:.3s}
.allOn #header .gnb_wrap .gnb > li .dp2 > li > a .tt{ font-size:1.9vmin; 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 2vmin; padding:1.5vmin 0}
.allOn #header .gnb_wrap .gnb > li .dp2 > li .dp3 > li > a{ color:#555; padding:.5vmin 2vmin; display:flex; gap:.5vmin}
.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:1.7vmin}
.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 .top_wrap .etc_wrap{ z-index:3}
.allOn #header .top_wrap .etc_wrap .btnInc.allBtn{ position: fixed; right:6vmin; top:4vmin; 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:#eee; 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:1s; 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:1; color:#fff; background:#252834; padding:8vmin 0}
#footer .goTop{ position:fixed; right:1em; bottom:1em; width:3.5em; line-height:3.5em; text-align:center; background:#fff; color:var(--siteC2); border-radius:50%; box-shadow:0 0 2em 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)}
#footer .wrapF{ display:flex; gap:8vmin}
#footer .logo_wrap{ display:flex; align-items:center; gap:4em}
#footer .logo{ filter:brightness(0) invert(1)}
#footer .logo img{ height:5vmin}
#footer .menu_wrap{ margin-left:auto; display:flex; gap:2em}
#footer .menu_wrap > li > a{ position:relative; font-weight:500}
#footer .menu_wrap > li:not(:first-child) > a:before{ content:"·"; position:absolute; left:-1em; top:0; transform:translateX(-50%); opacity:.5}
#footer .menu_wrap > li.point > a{ opacity:1; font-weight:700}
#footer .info_wrap{ display:flex; flex:1; min-width:0}
#footer .info{ overflow:hidden; flex:1 1 0%; min-width:0}
#footer .info > li{ float:left; margin-right:2em; margin-bottom:.25em; opacity:.8; position:relative}
#footer .info > li:before{ content:""; position:absolute; left:-1em; height:70%; top:50%; transform:translateY(-50%); width:1px; background:#fff; opacity:.2}
#footer .info > li.point{ font-weight:700}
#footer .info > li.br{ clear:left}
#footer .info > li.copyright{ font-size:.875em; opacity:.5; margin-top:1em; text-transform:uppercase}
#footer .etc_wrap{ display:flex; flex-direction:column; align-items:flex-end; gap:1.5em}

#footer .site_wrap{ margin-left:auto; background:rgba(0,0,0,.2); width:18em; font-size:.875em; position:relative}
#footer .site_wrap .siteBtn{ display:flex; align-items:center; padding:1em; font-weight:500; transition:.3s}
#footer .site_wrap .siteBtn .arrow{ margin-left:auto; transition:.3s}
#footer .site_wrap .list{ position:absolute; left:0; bottom:100%; width:100%; background:inherit; visibility:hidden; opacity:0; transform:translateY(1em); transition:.3s; background:#111}
#footer .site_wrap .list > li > a{ display:block; padding:1em; padding-right:3em; border-bottom:1px solid rgba(255,255,255,.1); position:relative; transition:.3s}
#footer .site_wrap .list > li > a:after{ content:"\e980"; font-family:xeicon; position:absolute; right:1em; top:50%; transform:translateY(-50%); opacity:0; transition:.3s}
#footer .site_wrap .list > li > a:hover{ background:rgba(255,255,255,.1)}
#footer .site_wrap .list > li > a:hover:after{ opacity:1}
#footer .site_wrap .siteBtn:hover,
#footer .site_wrap.on .siteBtn{ background:rgba(0,0,0,.2)}
#footer .site_wrap.on .siteBtn .arrow{ transform:rotate(180deg)}
#footer .site_wrap.on .list{ visibility:visible; 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; 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}
#contents .sub_top_wrap{ height:50vmin; 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%}
#contents .sub_top_wrap .wrapBg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.3}
#contents .sub_top_wrap .wrapCon{ display:flex; height:100%; flex-direction:column; position:relative}
#contents .sub_top_wrap .subTit{ flex:1; min-height:0; padding:10vmin 0 0 0}
#contents .sub_top_wrap .subTit .wrapF{ height:100%; display:flex; flex-direction:column; justify-content:center; gap:1vmin; color:#fff}
#contents .sub_top_wrap .subTit .t1{ font-size:7vmin; font-weight:700}
#contents .sub_top_wrap .subTit .t2{ font-weight:700; mix-blend-mode:difference; padding-left:.25em; letter-spacing:.125em; font-size:1.125em}
#contents .sub_top_wrap .subTab{--cornerSize :4vmin; position:relative; display:inline-flex; margin-left:auto; margin-right:-1px; margin-left:auto; max-width:90%}
#contents .sub_top_wrap .subTab .gnb .dp2{ display:flex; justify-content:flex-end; padding:0 2vmin; flex-wrap:wrap}
#contents .sub_top_wrap .subTab .gnb .dp2 > li{ position:relative; flex:1; min-width:0; width:32vmin; margin:0 -2vmin -2vmin 0}
#contents .sub_top_wrap .subTab .gnb .dp2 > li > a{ border-radius:var(--cornerSize); border:2vmin solid #fff; height:11vmin; display:flex; align-items:center; justify-content:center; color:#111; box-sizing:border-box; background: #eee; padding:1vmin}
#contents .sub_top_wrap .subTab .gnb .dp2 > li > a .va{ opacity:.8; display:flex; align-items:center; line-height:1.1; position:relative; transition:.3s; word-break:keep-all; padding-right:3vmin; transform:translateX(1.5vmin); text-align:center}
#contents .sub_top_wrap .subTab .gnb .dp2 > li > a .va .tt{ font-size:2.2vmin; font-weight:700}
#contents .sub_top_wrap .subTab .gnb .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 .dp2 > li > a .va .arrow:before{content:"\e93f"}
#contents .sub_top_wrap .subTab .gnb .dp2 > li.on > a{ background: var(--siteC); color: #fff;}
#contents .sub_top_wrap .subTab .gnb .dp2 > li.on > a .va,
#contents .sub_top_wrap .subTab .gnb .dp2 > li:hover > a .va{ opacity:1; transform:translateX(0)}
#contents .sub_top_wrap .subTab .gnb .dp2 > li.on > a .va .arrow:before{ content:"\e942"}
#contents .sub_top_wrap .subTab .gnb .dp2 > li.on > a .va .arrow,
#contents .sub_top_wrap .subTab .gnb .dp2 > li:hover > a .va .arrow{ font-size:2.1vmin}

#contents .sub_top_wrap .subTab .gnb .dp2 > li:first-child .corner.pLT{ display:none}
.corner{ position:absolute; width:calc(var(--cornerSize) + 4px); height:calc(var(--cornerSize) + 4px); background-image:url(../images/inc/round.svg); background-repeat:no-repeat; background-size:100% 100%}
.corner.p1{ right:0; bottom:calc(100% - 1px)}
.corner.p2{ right:calc(100% - 2vmin - 2px); bottom:-1px}
.corner.pLT{ left:0; top:0; transform:rotate(180deg)}
.corner.pRT{ right:0; top:0; transform:rotate(-90deg)}
.corner.pLB{ left:0; bottom:0; transform:rotate(90deg)}
.corner.pRB{ right:0; bottom:0; transform:rotate(0deg)}

#contents .sub_tit_wrap{ padding:7vmin 0 2vmin 0}
#contents .sub_tit_wrap .wrapF{ display:flex; display:flex; gap:0.8vmin; flex-direction:column; align-items:center}
#contents .sub_tit_wrap .titW{ flex:1; min-width:0}
#contents .sub_tit_wrap .titW .t1{ font-weight:700; font-size:5.5vmin}
#contents .sub_tit_wrap .nav{ display:flex; align-items:center; color:#888}
#contents .sub_tit_wrap .nav{ display:inline-flex; align-items:center; gap:0 1em}
#contents .sub_tit_wrap .nav > li:not(.home):before{ content:"\e940"; font-family:xeicon; margin-right:.5em}
#contents .sub_tit_wrap .nav > li.home > a{ width:2em; height:2em; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center}
#contents .sub_tit_wrap .nav > li.home > a .xi{ font-size:1em}

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

#contents .doc{ padding:3vmin 0 22vmin 0}

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

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

/**/
.br1{ border-radius:1em; overflow:hidden}
.br2{ border-radius:2em; overflow:hidden}
.outRound{ position:relative}
.outRound:before,
.outRound:after{ content:""; position:absolute; width:1em; height:1em; z-index:1; background:url(../images/inc/round.svg) no-repeat; background-size:100% 100%}
.outRound.rb{ border-top-left-radius:1em}
.outRound.rb:before{ right:0; bottom:100%}
.outRound.rb:after{ right:100%; bottom:0}
.outRound.lb{ border-top-right-radius:1em}
.outRound.lb:before{ left:0; bottom:100%; transform:rotate(90deg)}
.outRound.lb:after{ left:100%; bottom:0; transform:rotate(90deg)}

.mainBox{ padding:8vmin 0; overflow:hidden; position:relative}
.mainBox.bg1:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; opacity:.1; background:var(--siteC)}
.mainBox.bg2:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; opacity:.1; background:var(--siteC2)}
.mainBox.bg3{ background:#f5f5f5}
.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:5vmin; position:relative}
.mainBox .wrapF.dRow{ flex-direction:row}
.mainBox .wrapF.dRow .wrap_con{ flex:1; min-width:0}
.mainBox .wrapCon{ position:relative}
.mainBox.p0{ padding:0}
.mainBox.p1{ padding:12vmin 0}

.mainTit{ display:flex; align-items:center; gap:.5em}
.mainTit.s1{ font-size:1.2vmin}
.mainTit.hc{ justify-content:center; text-align:center}
.mainTit.vt{ align-items:flex-start}
.mainTit.col{ flex-direction:column}
.mainTit.col.hc{ align-items:center}
.mainTit .icoW{ width:4em; height:4em; display:flex; align-items:center; justify-content:center;  background: radial-gradient(circle, #fff 40%, #ddd 100%); border-radius:50%}
.mainTit .icoW img{ width:60%}
.mainTit .arrow{ font-size:1em; margin-left:.5em}
.mainTit .arrow:before{content:"\e93f"}
.mainTit .titW{ display:flex; align-items:center; gap:.25em}
.mainTit .tit1{ font-size:5vmin; font-weight:700; letter-spacing:-.05em; word-spacing:.1em; line-height:1.1}
.mainTit .tit1.s1{ font-size:4.5vmin}
.mainTit .tit1.s2{ font-size:2.5vmin}
.mainTit .tit2{ font-size:3vmin; font-weight:500}
.mainTit .tt1{ opacity:.5; font-weight:500; font-size:1.125em}
.mainTit .mgL{ margin-left:auto}
.mainTit.white{ color:#fff}

.main_more{ display:inline-flex; align-items:center; padding:0 2em; height:3.5em; border:1px solid var(--siteC2); color:var(--siteC2); gap:1vmin; border-radius:.5vmin; transition:.3s}
.main_more .tt{ font-weight:700; font-size:1.125em}
.main_more .arrow{ font-size:1em; margin-left:1em; transition:.3s}
.main_more .arrow:before{content:"\e907"}
.main_more.white{ border-color:#fff; color:#fff}
.main_more:hover{ border-color:transparent; background:var(--siteC2); color:#fff}
.main_more:hover .arrow{ transform:translateX(50%)}

.vod_wrap{ position:relative}
.vod_wrap .vod{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover}
.vod_wrap .layer{ position:absolute; left:0; top:0; width:100%; height:100%; 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 .swiper-slide.el{ position: relative; overflow:hidden; height:calc(100vh - var(--mainCountH)); background:#fff}
.visualSlide .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.2)}
.visualSlide .el .vod_wrap{ position:relative; height:100%}
.visualSlide .el .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[data-swiper-slide-index='0'] .bg{ width:110%; transform:scale(1)}
.visualSlide .el.swiper-slide-active[data-swiper-slide-index='0'] .bg,
.visualSlide .el.swiper-slide-duplicate-active[data-swiper-slide-index='0'] .bg{ transform:translateX(-9.0909%) rotate(.001deg)}
.visualSlide .el[data-swiper-slide-index='1'] .bg{ width:110%; transform:scale(1); left:auto; right:0}
.visualSlide .el.swiper-slide-active[data-swiper-slide-index='1'] .bg,
.visualSlide .el.swiper-slide-duplicate-active[data-swiper-slide-index='1'] .bg{ transform:translateX(9.0909%) rotate(.001deg)}

.visualSlide_wrap{ position:relative}
.visualSlide_wrap .slogan{ position:absolute; left:0; top:0; width:100%; height:100%; padding-bottom:10vmin; box-sizing:border-box; filter:brightness(0) invert(1); display:flex; align-items:center; }
.visualSlide_wrap .slogan .wrapF{ display:flex; flex-direction:column; justify-content:center; text-align:center}
.visualSlide_wrap .slogan .img img{ height:5vmin}
.visualSlide_wrap .slogan .t1{ font-size:3.875em; font-weight:800; text-transform: uppercase; line-height:1; margin:3vmin 0 6vmin 0}
.visualSlide_wrap .slogan .t2{ font-size:1.5em; font-weight:500; opacity:.7}
.visualSlide_wrap .gsClassSlide.tShow .el{ overflow:hidden}
.visualSlide_wrap .gsClassSlide.tShow .el > i{ transform:translateY(20vh); transition:2s}
.visualSlide_wrap .gsClassSlide.tShow .el.tit{font-size: 2.25em; font-weight: 700;}
.visualSlide_wrap .gsClassSlide.tShow.on .el > i{transform:translateY(0)}
.visualSlide_wrap .gsClassSlide.tShow.on.t2 .el:nth-child(1) > i{ transition-delay:.5s}
.visualSlide_wrap .gsClassSlide.tShow.on.t2 .el:nth-child(2) > i{ transition-delay:1s}

.visualSlide_control{ position:absolute; left:0; bottom:0; width:100%; z-index:10; height:7vmin}
.visualSlide_control .paging .swiper-pagination-progressbar-fill{ transition-duration:3s !important}
.visualSlide_control .control{ width:100%; gap:1em}
.visualSlide_control .paging{ width:5em; text-align:center;}
.visualSlide_control .paging .swiper-pagination-current{ font-weight:700}

.mainScroll{ width:15vmin; position:relative}
.mainScroll .svgtt{ width:100%; height:100%}
.mainScroll .svgtt .tt{ font-weight:700; text-transform:uppercase; letter-spacing:.188em; font-size:1.25em; fill:#fff}
.mainScroll .in{ position:absolute; left:10%; top:10%; width:80%; height:80%; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; box-sizing:border-box}
.mainScroll .in .ico1{ font-size:2em; margin-right:-.25em}

.mainCount{ box-shadow:0 1em 3em rgba(0,0,0,.2); transition:1s}
.scroll .mainCount{ border-radius:0 0 10vmin 10vmin}
.mainCount .list{ display:flex; justify-content:space-around}
.mainCount .list > li{ flex:1; height:var(--mainCountH); display:flex; flex-direction:column; justify-content:center; text-align:center}
.mainCount .list > li > *{ box-sizing:border-box; width:100%}
.mainCount .list > li .ico{ display:flex; height:7vmin; display:flex; justify-content:center}
.mainCount .list > li .ico img{ height:80%}
.mainCount .list > li .tit{ font-weight:700; font-size:1.375em}
.mainCount .list > li .no{ display:flex; align-items:baseline; justify-content:center; gap:1vmin}
.mainCount .list > li .no * {}
.mainCount .list > li .no .tn{ font-size:1.75em; color:var(--siteC2); font-weight:900; text-align:right; letter-spacing:-.05em}
.mainCount .list > li .no .tt{ text-align:left; opacity:.5; font-weight:700}

.mainBusiness .list{ display:flex; overflow:hidden; border-radius:0 10vmin 0 10vmin}
.mainBusiness .list > li{ flex:1 1 auto; width:8%; transition:1s}
.mainBusiness .list > li .wrap_in{ height:60vh; position:relative; color:#fff; overflow:hidden}
.mainBusiness .list > li .wrap_in .bg{ position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box}
.mainBusiness .list > li .wrap_in .bg:after{ content:"";position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.2}
.mainBusiness .list > li .wrap_in .tit_wrap{ position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; box-sizing:border-box; padding:10vmin 0}
.mainBusiness .list > li .wrap_in .tit_wrap .t1{writing-mode: vertical-lr; text-orientation:sideways; letter-spacing:.25em; word-spacing:.25em; font-weight:700; font-size:1.5em}
.mainBusiness .list > li .wrap_in .con_wrap{ position:relative; box-sizing:border-box; display:flex; flex-direction:column; gap:1vmin; opacity:0; transform:translateY(5vmin); padding:10vmin 10%; box-sizing:border-box; height:100%}
.mainBusiness .list > li .wrap_in .con_wrap .t1{ font-weight:700; font-size:5vmin}
.mainBusiness .list > li .wrap_in .con_wrap .t2{ opacity:.8; font-size:1.25em; line-height:1.5}
.mainBusiness .list > li .wrap_in .con_wrap .sList{ margin-top:3vmin}
.mainBusiness .list > li .wrap_in .con_wrap .sList > li{ position:relative; margin-bottom:1em}
.mainBusiness .list > li .wrap_in .con_wrap .sList > li.icoW{ padding-left:2.5em; display:flex;}
.mainBusiness .list > li .wrap_in .con_wrap .sList > li.icoW .ico{ width:1.25em; height:1.25em; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--siteC2); position:absolute; left:0; top:0}
.mainBusiness .list > li .wrap_in .con_wrap .sList > li.icoW .ico:before{ content:"\e928"; font-family:xeicon; transform:translate(30%, -10%) scale(1.4); color:#fff}
.mainBusiness .list > li .wrap_in .con_wrap .sList > li .tt1{ font-size:1.125em}
.mainBusiness .list > li .wrap_in .con_wrap .main_more{ margin:auto 0 0 auto; transform:translateY(50%)}

.mainBusiness .list:not(:hover) > li:nth-child(3),
.mainBusiness .list > li:hover{ width:60%}
.mainBusiness .list:not(:hover) > li:nth-child(3) .tit_wrap,
.mainBusiness .list > li:hover .tit_wrap{ display:none}
.mainBusiness .list:not(:hover) > li:nth-child(3) .con_wrap,
.mainBusiness .list > li:hover .con_wrap{ opacity:1; transform:translateY(0); transition:.3s; transition-delay:.3s}

.mainNews{  box-shadow:0 -6vmin 6vmin rgba(0,0,0,.1)}
.mainNews .wrapCon{ display:flex; gap:4vmin}
.newsSlideW{ margin:-1vmin; flex:1; min-width:0}
.newsSlideW .el{ width:25%; height:auto; direction: ltr;}
.mainNewsSt{ padding:4vmin; margin:1vmin; border:1px solid rgba(0,0,0,.1); box-sizing:border-box; height:calc(100% - 2vmin); display:flex; flex-direction:column; background:#fff}
.mainNewsSt .circle { width: 5em; height: 1.875em; border-radius: 20px; background: #f4f5f9; padding: 0.2em .5em; color: var(--siteC); font-weight: 600; } 
.mainNewsSt .conW{ display:flex; flex-direction:column; align-items:flex-start; gap:1vmin; flex:1; min-height:0; margin-top: 1.2em;}
.mainNewsSt .conW .tCate{ height:2em; background:#000; color:#fff; border-radius:1vmin; display:flex; align-items:center; padding:0 2vmin; font-weight:700}
.mainNewsSt .conW .tCate.c1{ background: #66C}
.mainNewsSt .conW .tCate.c2{ background: #099}
.mainNewsSt .conW .tDate{ font-size:.875em; color:#999}
.mainNewsSt .conW .tTit{ font-size:1.25em; font-weight:700}
.mainNewsSt .conW .tText{ color:#666; font-size:.938em; margin:2vmin 0; padding-bottom: 1em;}
.mainNewsSt:hover{ border-color:var(--siteC); box-shadow:0 0 1em rgba(0,0,0,.1)}
.newsSlide_control{ margin:2vmin 0 0 2vmin}

.mainPartnerSlide .swiper-wrapper{transition-timing-function: linear}
/* .mainPartnerSlide .el{ width:calc(14.44% - 18px)} */
.mainPartnerSlide .el{ width:calc(16.7% - 18px)}
.mainPartnerSlide .el .img_wrap{ padding:2vmin}
.mainPartnerSlide .el .img_wrap .resize{ padding-bottom:30%}
.mainPartnerSlide .el .img_wrap .resize img{ max-height:60%}

.mainLink .list{ display:flex; gap:3vmin}
.mainLink .list .el{ flex:1; min-width:0}
.mainLink .list .el .in{ background:#fff; padding:0 10%; height:12vmin; box-sizing:border-box; display:flex; align-items:center; justify-content:center}
.mainLink .list .el .in:hover .mainTit .arrow{ transition:.3s; margin-left:1em}


/* sub */
.subBox.bg3{ background:#f5f5f5}

/* 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 { } 

/* 공통 */

.page_tt { font-size:1em; word-break:keep-all; line-height:1.6; } 
.page_tt > .tt + .tt { margin-top:1.25em; } 
.page_tt.o1 { opacity:.7; } 
.page_tt.o2 { opacity:.1; } 
.page_tt.s1 { font-size:0.938em } 
.page_tt.s2 { font-size:1.063em } 
.page_tt.s3 { font-size:1.125em } 
.page_tt.s4 { font-size:1.250em } 
.page_tt.s5 { font-size:1.313em } 
.page_tt.s6 { font-size:1.500em } 
.page_tt.s7 { font-size:1.625em } 
.page_tt.s8 { font-size:1.875em } 
.page_tt.s9 { font-size:2.375em } 
.page_tt.s10 { font-size:2.750em } 
.page_tt.s11 { font-size:3.250em } 
.page_tt.s12 { font-size:4.000em; } 
.page_tt.s13 { font-size:4.500em; } 
.page_tt.s14 { font-size:5.250em; } 

.page_tt.st1{padding-left: 1em; position: relative; font-size: 1.13em;}
.page_tt.st1::before{content: '-'; position: absolute; left: 2px; top: 0; } 

.lh4 {line-height: 1.4;}
.lh5 {line-height: 1.5;}
.lh6 {line-height: 1.6;}

.divCon1{border: 1px solid rgba(0,0,0,.1); padding: 7em; border-radius: 1em;}
.divCon1.st1{ margin: 0 6em 3em;}
.divCon1.st2{padding: 3em;}
.divCon1.st3{ padding: 2em 13em;}

.sub_tab .tab_idx{ background:url(../images/sub2/sub2_2_tabline.jpg) repeat-x left 46px; padding: .8em; margin: 0 auto; display:flex; align-items: center; width: 80%; border-radius: 20em; box-sizing: border-box;  background: #f1f1f1; gap: 1em;}
.sub_tab .tab_idx > li{text-align: center; padding:1em 2em; box-sizing: border-box; font-size:1.19em; font-weight: 600; color:#333; cursor:pointer; flex:1; transition:.3s; border-radius: 5em;}
.sub_tab .tab_idx > li.tab1{ padding:14px 28px;}
.sub_tab .tab_idx > li.tab2{ padding:14px 28px;}
.sub_tab .tab_idx > li.tab3{ padding:14px 28px;}
.sub_tab .tab_idx > li.tab4{ padding:14px 28px;}
.sub_tab .tab_idx > li.tab5{ padding:14px 28px;}
.sub_tab .tab_idx > li.tab6{ padding:14px 27px 14px 28px;}

.sub_tab .tab_idx > li:hover{background:#f9f9fb;}
.sub_tab .tab_idx > li.on{ color: #f4f5f6; background:var(--siteC); font-weight:700;}

.pageDotTit > .tt { position: relative; padding-left: 1.3em; font-size: 1.415em; font-weight: 600; margin-bottom: 1em; } 
.pageDotTit > .tt:before { position: absolute; top: 3px; left: 0; width: .9em; height: .9em; border-radius: 50%; clip-path: inset(0 0 60% 0); background: var(--siteC3); content: ''; } 
.pageDotTit > .tt:after { position: absolute; top: 4px; left: 0; width: .9em; height: .9em; border-radius: 50%; clip-path: inset(60% 0 0 0); background: var(--siteC); content: ''; } 

.scr_i{display: none;}

/* 연혁 */
.history_wrap { display: flex; align-items: flex-start; position: relative; padding: 1em 0 1em 0; border-top: 2px solid var(--siteC);} 
.history_wrap:before { content: ""; position: absolute; top: 0; width: 1px; height: calc(100% - 3em); background: #ddd } 
.history_wrap:before,
.history_wrap .tabLink { left: 40em } 
.history_wrap .wrap_img { width: 40em; min-width: 40em; padding: 1em 0; padding: 0 4em 0 0em; box-sizing: border-box; text-align: center;} 
.history_wrap .wrap_img > li { padding-top: 20px; } 
.history_wrap .wrap_con { display: flex; box-sizing: border-box; padding: 2em 0; padding-right: 2em; width: 100%; } 
.history_wrap .wrap_con .history { width: 100%; } 
.history_wrap .tabLink { width: 5em; height: 3em; position: absolute; bottom: 0; transform: translatex(-50%) } 
.fadeAni { animation-name: fadeAni; animation-duration: 2s; animation-iteration-count: infinite } 
.history_wrap .tabLink .xi { font-size: 3em; position: absolute; left: 0; top: 0; width: 100%; text-align: center; color: #ddd; margin-left: 1px; animation-duration: 3s; animation-iteration-count: infinite } 
.history_wrap .tabLink .xi:before { content: "\e943" } 
.history_wrap .tabLink.tab1 .xi:before { content: "\e946" } 
.history_wrap .tabLink .xi:nth-child(1) { transform: translateY(-.188em) scale(.6); animation-name: angleAni1 } 
.history_wrap .tabLink .xi:nth-child(2) { transform: scale(.8); animation-name: angleAni2 } 
.history_wrap .tabLink .xi:nth-child(3) { transform: translateY(.188em); animation-name: angleAni3 } 
.history_wrap .tabLink.tab1 .xi:nth-child(1) { transform: translateY(-.188em) scale(1); animation-name: angleAni3 } 
.history_wrap .tabLink.tab1 .xi:nth-child(3) { transform: translateY(.188em) scale(.6); animation-name: angleAni1 } 
.history_wrap .tabLink:hover .xi,
.history_wrap .tabLink:focus .xi { animation-name: none; color: var(--siteC); } 

@keyframes angleAni1 { 
 0% { color: #ddd } 

10% { color: var(--siteC) } 

20% { color: #ddd } 
 }

@keyframes angleAni2 { 10% { color: #ddd } 

20% { color: var(--siteC) } 

30% { color: #ddd } 
 }

@keyframes angleAni3 { 20% { color: #ddd } 

30% { color: var(--siteC) } 

40% { color: #ddd } 
 }

.history>li { display: flex; position: relative; margin-bottom: 5em; } 
.history>li:last-of-type { margin-bottom: 0em; } 
.history>li .hisinfo:before { content: ""; position: absolute; left: 0; top: 1.25em; width: 3em; height: 1px; background: #ddd } 
.history>li .dot { position: absolute; left: 0; top: 1.25em; transform: translate(-50%, -50%); width: 1.5em; height: 1.5em } 
.history>li .dot:before,
.history>li .dot:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50% } 
.history>li .dot:before { background: none; } 
.history>li .dot:after { background: #ccc; width: 40%; height: 40% } 
.history>li .hisinfo { position:relative; width: 100%; padding: 0 0 0 4vw; box-sizing: border-box; } 
.history>li .year .t1 { font-weight: 900; font-size: 3.15em; letter-spacing: -.063em; color: var(--siteC); } 
.history>li .list { padding: 1em 0 } 
.history>li .list>li { display: flex; padding: .5em .125em } 
.history>li .list>li .month { width: 4em; margin-right: 2em } 
.history>li .list>li .con { display: flex; align-items: start; gap: .75em; min-width: 0; padding: .125em 0; } 
.history>li .list>li .con .date { font-size: 1.15em; font-weight: 900; } 
.history>li .list>li .con .t1 { font-size: 1.15em; font-weight: 500; } 
.history>li .month .t1 { font-weight: 600; font-size: 1.125em; } 
.history>li.on .year,
.history>li.on .list>li .month { color: var(--siteC); } 
.history>li.on .list>li .con { color: #000; font-weight: 500 } 
.history>li .dot:before { background: var(--siteC); opacity: .15; } 
.history>li .dot:after { background: var(--siteC); } 
@keyframes scaleAni { 100% { opacity: 0; width: 150%; height: 150% } 
 }

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

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

.contact_wrap { gap: 6em; } 
.contact_wrap .qna_wrap { flex: 1 1 30%; height: 100%; } 
.contact_wrap .form_wrap { flex: 1 1 70%; } 

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

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

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

.mem_agree .agree { padding:2em; border:solid #ddd; border-width:2px 0 1px 0; border-top-color:#333; color:#444; line-height:1.8; } 
.mem_agree .agree.H { padding:.5em 1em; border-top-width:1px; height:14em; background:#f7f7f7; font-size:.938em; } 
.mem_agree .agree p { padding:.5em 0; } 
.mem_agree .agree * { vertical-align:baseline; } 
.mem_agree .agree strong { color:#000; font-weight:700; } 
.mem_agree .check { padding:1em 0; } 

.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:3em 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_col .gsimgFix { } 
.page_col .gsimgFix .posImg { position:relative; height:100%; min-height:100vh; } 
.page_col .gsimgFix .posImg img { position:absolute; bottom:0; width:100%;} 
.page_col .gsimgFix.st2 .posImg { height:30em; min-height:auto; } 
.page_col .gsimgFix.st2 .posImg img { height:150%; } 

.inquiry-con { } 
.inquiry-con .form_wrap { gap: 3em;} 
.inquiry-con .form_wrap .form { gap: 1em; font-size: 1.063em; width: 50%; } 
.inquiry-con .form_wrap .form.st1{width: 100%;}
.inquiry-con .form_wrap .form > li { } 
.inquiry-con .form_wrap .form > li.w100 { width: 100%; } 
.inquiry-con .form_wrap .form > li:not(.w100) { width: calc(50% - .5em); } 
.inquiry-con .form_wrap .form > li .inp_wrap { position: relative; } 
.inquiry-con .form_wrap .form > li .inp_wrap .tit,
.inquiry-con .form_wrap .form > li .inp_wrap .input_st:not(textarea) { height: 4em; border-radius: 0; } 
.inquiry-con .form_wrap .form > li .inp_wrap .tit { position: absolute; top: 0; left: 0; padding-left: 0.625rem; } 
.inquiry-con .form_wrap .form > li .inp_wrap .tit .tt { font-weight: 600; } 
.inquiry-con .form_wrap .form > li .inp_wrap .input_st:focus { border-bottom: 1px solid var(--siteC2); } 
.inquiry-con .form_wrap .form > li .inp_wrap .input_st:not(textarea) { width: 100%; padding-left: 6em; } 
.inquiry-con .form_wrap .form > li .inp_wrap textarea.input_st { padding-top: 4em; padding-left: 0.625rem; border-radius: 0; height: 12em; resize: none; } 
.inquiry-con .form_wrap .form > li .inp_wrap .input_st { border: none; border-bottom: 1px solid #111; } 
.inquiry-con .form_wrap .form_chk { flex-direction: column; width: 50%; gap: 2em; align-items: start;} 
.inquiry-con .form_wrap .form_chk .chk { gap: 1em; } 
.inquiry-con .form_wrap .form_chk .btn .input_st { width: 10em; } 
.form_chk .label_st { gap:.25em;align-items: baseline; } 
.form_chk .label_st input[type=checkbox],
.form_chk .label_st input[type=radio] { width: auto; height: auto; overflow: visible; margin-bottom: auto; position: relative; z-index: 1; } 
.inquiry-con .inquiry-bg-wrap { position: relative;} 
.inquiry-con .inquiry-bg-wrap .img-area { position: absolute; width: 50vw; height: inherit; overflow: hidden; border-radius: 1em 0 0 1em; } 

.inquiry-con .form_wrap .form > li .inp_wrap input[type=file] { padding-top: 1em; } 

/* */
.sub_con{margin-top: 7em;}
.sub_con.st1{margin-top: 0;}
.sub_con.st2{text-align: center; margin: 3em 0 5em;}
.sub_con.st3{text-align: center; margin: 5em 0 5em;}

.page_con{text-align: center;}
.page_tit{ font-size: 2.38em; text-align: center;}
.sub_tit{ font-size: 2.38em; font-weight: 700; line-height: 1.4; position: relative; display: inline-block;}
.sub_tit::before{ position: absolute; content: ''; right: -26px; top: 0; background: url(../images/sub/green_deco.svg) no-repeat; width: 18px; height: 18px; background-size: contain;}
.sub_tit.st1{font-size: 2em; padding-bottom: .5em;}
.sub_tit.st2{position: relative; padding-left: 0.6em; line-height: 1.4;}
.sub_tit.st2::before{ content: ''; width: 5px; height: 5px; border-radius: 50%; background: #111; position: absolute; left: 0; top: 15px; }
.sub_tit.st2.s3::before{top: 10px;}
.sub_tit.tt.st2::before{top: 9px;}

.subBox{ overflow: hidden; position: relative; padding-top: 8vmin;}
.subBox.bg1{background: #f5f5f5;}


/*인사말*/
.speak_Wrap{position: relative;}
/* .speak_Wrap:before{position: absolute; content: ''; border-radius: 7em 0 0 0; left: -30px; top: -30px; width: 100%; height: 13em; background: var(--siteC); z-index: -1;} */
.speak_Wrap > .title { font-size: 2.15em; font-weight: 700; text-align: center; margin-bottom: 2em; } 
.speak_Wrap .infoA { position:relative; display: flex; gap: 3em; justify-content: space-between; padding: 8em 5em; box-sizing: border-box; border-top-left-radius: 6em; border-bottom-right-radius: 6em; overflow: hidden; background: url(../images/sub/greeting_bg.jpg) !important; } 
.speak_Wrap .infoA.Ac { align-items: center; } 
.speak_Wrap .infoA.st { align-items: start; } 
.speak_Wrap .infoA:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .45); backdrop-filter: contrast(0.7); content: ''; z-index: 1; } 
.speak_Wrap .infoA > .info_area { position:relative; z-index: 2; flex: 1; } 
.speak_Wrap .infoA > .info_area > .tt { font-size: 1.215em; line-height: 1.6; margin-bottom: 1.5em; color: #fff; } 
.speak_Wrap .infoA > .info_area > .tt:last-of-type { margin-bottom: 0em; } 
.speak_Wrap .infoA > .info_area > .tt br{display: none;}
.speak_Wrap .infoA > .info_area > .t2{font-size: 1.88em; font-weight: 700; color: #fff; margin-bottom: 1em;}
.speak_Wrap .infoA > .info_area > .ceo {text-align: right; color: #fff; font-size: 1.125em;}
.speak_Wrap .infoA > .info_area > .ceo .name{font-size: 1.43em; font-weight: 700; margin-left: .5em;}
.speak_Wrap .infoA > .pic_area { position:relative; z-index: 2; width: 14em; height: 17em; } 
.speak_Wrap .infoA > .pic_area > img { width: 100%; height: 100%; border-radius: 1em; object-fit: cover; } 
.speak_Wrap .pic_area > .tt { text-align: left; margin-top: 1em; font-size: 1.125em; color: #fff; position: relative; font-weight: 700; } 
.speak_Wrap .pic_area > .tt::before { content: ''; position: absolute; right: 0; top: 6px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: #fff; width: 10px; height: 10px; } 
.speak_Wrap .pic_area > .tt::after { content: ''; position: absolute; right: 17px; top: 10px; background: #fff; width: 60%; height: 1px; } 
.speak_Wrap .pic_area > .tt > span { font-size: 1.415em; font-weight: 700; } 
.speak_Wrap .pic_area .career{line-height: 1.5; padding-top: .7em;}
.speak_Wrap .pic_area .career .t1{color: #eee; font-size: 0.88em; position: relative; padding-left: 1em; word-break: keep-all;}
.speak_Wrap .pic_area .career .t1:before{content: '-'; position: absolute; left: 0; top: 0;}


/* 회사개요 */
.page_con .slogan {text-align: center; margin-bottom: 2em;}
.page_con .page_tit{position: relative; display: inline-block; font-weight: 800; letter-spacing: 0.02em; line-height: 1.4;}
.page_con .page_tit::before{position: absolute; content: ''; opacity: 0.3; background: url(../images/sub/shape_left.png) no-repeat; background-size: 38px; background-position: center; left: -90px; top: 0; width: 50px; height: 50px; }
.page_con .page_tit::after{position: absolute; content: ''; opacity: 0.3; background: url(../images/sub/shape_right.png) no-repeat; background-size: 38px; background-position: center; right: -90px; top: 0;width: 50px; height: 50px; }
/* .page_con .slogan_img{text-align: center;} */

.steps-st2 > ul{display: flex; gap:40px;}
.steps-st2 > ul > li{ flex:1; /* width: calc( (100% - 120px) / 4); */   position: relative; border:1px solid #ddd; border-top: 1px solid var(--siteC2); padding: 1.5em .8em; box-sizing:border-box; display: flex; align-items: center;}
.steps-st2 > ul > li:before{position: absolute; left: -27px; top: 50%; transform: translateY(-50%); content: ''; background: #777; width: 40px; height: 30px; clip-path: polygon(34% 51%, 0 0, 0 100%);}
.steps-st2 > ul > li:first-child:before{background: none}
.steps-st2 .ico{width: 75px}
.steps-st2 .txt{flex:1; color: #333}
.steps-st2.type2{text-align: center;}
.steps-st2.type2 > ul{}
.steps-st2.type2 > ul > li{display: block;}
.steps-st2.type2 .ico{width: 5em; margin:0 auto;}
.steps-st2.type2 .ico img{display: block; margin: 0 auto;}
/* .steps-st2 .cont{margin-top: 20px;} */
.steps-st2 .t{display: block; color: #333; font-weight: 500;}
.steps-st2 .c{margin-top: 10px; padding:0 1em; letter-spacing: -0.04em; word-break: keep-all;}
.steps-st2 .small{font-size: .938rem; margin-top: 5px; display: block; color: #666}

.intro_list{display: flex; gap:1em; margin-top:1em;}
.intro_list li{flex: 1; text-align:center;  padding:2em 1em; box-sizing:border-box; border: 1px solid #c1cee5; border-radius: 1em;}
.intro_list li .icon{display: block; width: 60px; height: 60px; margin: 0 auto 1.5em; background: #fff; padding: 1.7em; border-radius: 100%; border: 4px dotted rgb(0, 157, 79, 1); }
.intro_list li .tit{ display: block; margin-bottom: 1em; font-weight: 600; font-size:1.375em; color:var(--siteC);}
.intro_list li .num{display: block; font-size:1em; line-height:1.5; letter-spacing:-0.25px; color:#fff; font-weight:600; margin-bottom:.5em; background: var(--siteC); display: inline-block; aspect-ratio: 1 / 1; height: 30px; width: 30px; line-height: 30px; border-radius: 100px;}
.intro_list li .txt{font-size:1.25em ; line-height:1.55; letter-spacing:-0.5px; color:#111;}
.intro_list li .cont{margin-top: .5em;}
.intro_list li .cont strong{margin-bottom: .5em;}
.intro_list li .cont p{padding: 0 1em;}

.company_wrap .info_table { width: 50%; align-items: center;} 
.company_wrap .info_table>li { padding: 1.2em 0 1.2em 1.2em; box-sizing: border-box; border-bottom: 1px solid #111; } 
.company_wrap .info_table>li:first-child{border-top: 1px solid #111;}
.company_wrap .info_table>li>.con { display: flex; align-items: center; } 
.company_wrap .info_table>li>.con>.tit { color: #555; font-weight: 600; font-size: 1em; min-width: 10em; } 
.company_wrap .info_table>li>.con>.tt { font-size: 1em; font-weight: 600; color: #000; width: 100%; } 
.company_wrap .info_table>li.w2 { display: flex; gap: 1em; align-items: center; } 
.company_wrap .info_table>li.w2>.con { width: 100%; } 

.company_wrap{margin-top: 1em; gap: 3em; }
.company_wrap .img_box{overflow: hidden; background: #fff; box-sizing: border-box; padding: 4em 6em; border: 1px solid rgba(0,0,0,.1); border-radius: 1em;  text-align: center; justify-content: center;}
.company_wrap .img_box.list{height: 12em;}
.company_wrap > .img_box{width: 50%; padding: 0; border: none;}
.company_wrap > .img_box img{ height: 100%; object-fit: cover;}
.company_wrap .company{width: 50%;}
.company_wrap .company.st1{position: relative;}
.company_wrap .company.st1:before{ content: ''; position: absolute; background: #f4f6f9; left: 50%; top: 50%; width: 100%; height: 100%; border: 1px solid var(--siteC); box-shadow: 0 0 1em rgba(0, 0, 0, .1); padding: 1em; border-radius: 1em; transform: translate(-50%, -50%); z-index: -1;}
.company_info .tit{margin: 1em 0;  width: 100%; height: 3em; line-height: 3em; color: #fff; font-weight: 700; border-radius: .5em; text-align: center; background: var(--siteC);}
.company_info .tit.bg_green{background: var(--siteC2);}
.company_info .info_box{}

.company_info .info_box .tt{padding: 0 0.6em 0 1.6em; position: relative; margin-bottom: .3em; }
.company_info .info_box .tt:last-child{margin-bottom: 0em;}

.company_info .info_box .tt:before{position: absolute; content: '-'; position: absolute; left: 10px; top: 0;}


/*오시는길*/
.root_daum_roughmap .cont,
.root_daum_roughmap .wrap_controllers{display: none;}
.location_wrap .map_wrap { } 
.location_wrap .map_wrap .map iframe{height: 30em;}
.location_wrap .map_wrap .map_info { padding: 3em; margin-top: 2em; background: #f7f7f7; border-radius: 1em;} 
.location_wrap .map_wrap .map_info .addT { align-items: center; } 
.location_wrap .map_wrap .map_info .addT > .tt { font-size: 1.85em; font-weight: 700; } 
.location_wrap .map_wrap .map_info .icon { display: flex; align-items: center; font-size: 2.15em; color: var(--siteC); margin-right: .15em; } 
.location_wrap .map_wrap .map { border-radius: 1em; overflow: hidden; } 
.location_wrap .contact_list { margin-top: 1em; gap: 4em; margin-left: 0.2em;} 
.location_wrap .contact_list > li { position:relative; display: flex; gap: 1em; align-items: center;} 
.location_wrap .contact_list > li:before { position: absolute; top: 50%; right: -2rem; transform: translateY(-50%); width: 1px; height: 1.6rem; background-color: #888; content: ""; } 
.location_wrap .contact_list > li:last-of-type:before { content: none; } 
.location_wrap .contact_list > li > i.xi{font-size: 1.6em;}
.location_wrap .contact_list > li > i.xi:before{vertical-align: middle;}
.location_wrap .contact_list > li > p { font-size: 1.415em; } 
.location_wrap .contact_list > li > p > span { color: #666; font-weight: 400; } 


/* 조직도 */
.sub_org{ display:flex; justify-content:center; position:relative}
.sub_org:before{ content:""; position:absolute; left:50%; bottom:100%; width:1px; height:2em; background:#ccc; transform:translateY(-100%)}
.sub_org.d1{ flex-direction:column; align-items:center; gap:4em 0}
.sub_org li{ flex:1 1 auto; min-width:0; max-width:100%; position:relative}
.sub_org li:before{ content:""; position:absolute; left:50%; bottom:100%; width:1px; height:2em; background:#ccc}
.sub_org li:after{ top:100%}
.sub_org .in{ box-sizing:border-box; padding:.5em; border:1px solid #ccc; position:relative; text-align:center; display:flex; align-items:center; justify-content:center; height:4em; border-radius:.5em}
.sub_org .in:before,
.sub_org .in:after{ content:""; position:absolute; left:50%; bottom:calc(100% + 2em); width:calc(50% + 1em); height:1px; background:#ccc}
.sub_org .in:before{ left:auto; right:50%}
.sub_org .in .tt{ line-height:1.1}
.sub_org li.a1{ width:100%}
.sub_org li.a1 .in{ position:absolute; right:0; left:50%; top:0; transform:translate(100%, -50%)}
.sub_org li.a1 .in:before{ content:""; position:absolute; right:calc(100% + 1px); top:50%; width:calc(100% + 1px); height:1px; background:#ccc; display:block !important}
.sub_org.d2{ gap:0 1em}
.sub_org.d2 > li{ display:flex; flex-direction:column; gap:4em 0}
.sub_org.d2 > li:before{display: none;}
.sub_org.d3{ gap:0 2em}
.sub_org.d3 > li{ display:flex; flex-direction:column; gap:.5em 0}

.sub_org.d3 > li .in{ width:10em; max-width:100%;}
.sub_org.d4{ display:flex; flex-direction:column; gap:.5em 0}
.sub_org.d1 > li:before{ height:4em}
.sub_org.d4 > li:before{ height:.5em}
.sub_org.d1:before,
.sub_org.d1 > li:first-child:before,
.sub_org.d1 > li:last-child:before,
.sub_org li:first-child > .in:before,
.sub_org li:last-child > .in:after,
.sub_org.d3 > li:after,
.sub_org.d4:before,
.sub_org.d1 > li > .in:before,
.sub_org.d1 > li > .in:after,
.sub_org.d4 > li > .in:before,
.sub_org.d4 > li > .in:after{ display:none}
.sub_org .in.w1{ width:14em}
.sub_org .in.w2{ width:10em}
.sub_org .in.h1{ height:5em}
.sub_org .in.h2{ height:3em}
.sub_org .in.c1{ background:#002144; color:#fff; border-color:transparnet}
.sub_org .in.c1.re{ border-color:#002144; background:#fff; color:#002144}
.sub_org .in.c2{ background: var(--siteC); color:#fff; border-color:transparent}
.sub_org .in.c2.re{ border-color:#0060ae; background:#fff; color:#0060ae}
.sub_org .in.c3{ background:#999; color:#fff}
.sub_org .in.c3.re{ background:#fff; color:#666; border-color:#999;}
.sub_org .in .t1{ font-weight:700; font-size:1.25em}
.sub_org .in .t2{ font-weight:700; font-size:1.188em}
.sub_org .in .t3{ font-weight:500; font-size:1.063em}
.sub_org .in .t4{ font-weight:500}

/* CI 소개 */
.ci_con {gap: 3em;}
.ci_con .inn {flex: 1;}
.ci_con .inn .img {border: 1px solid #ddd;}

.ci_con2 {gap: 3em; margin-top: 1em;}
.ci_con2 > .img_box{width: 50%; text-align: center; padding: 5em; box-sizing: border-box; background: #f7f7f7; border-radius: 1em;}
.ci_con2 .img_box.top{width: 100%; }
.sub_con:first-child .ci_con2 .img_box img{width: 8em;}
.sub_con:last-child .ci_con2 .img_box img{width: 15em;}
.sub_con:last-child .ci_con2 .img_box.size_b img{width: 20em;}
.sub_con .other_info{margin-top: 6em;}
.sub_con .other_info .txt_box{ padding: 0 1em;}
.sub_con .other_info .txt_box p:nth-child(2){color: #666;}
.ci_con2 .tbox.st1 {width: 100%; margin-top: 2em; gap: 10em;}
.ci_con2 .tbox.st1 .fs19{width: 100%;}
.ci_con2 .tbox.st1 .tit{font-size: 2em; white-space: nowrap;}
.ci_con2 .tbox{width: 55%;}

.ci_con2.signature2 .img_box.top img{max-width: 37em;}

.color_wrap {gap: 2%; margin: 2em 0 3em;}
.color_wrap .system { flex: 1;}
.color_wrap .system:last-of-type { margin-right: 0; }
.color_wrap .system .area { width: 100%; padding: 3em 2em; box-sizing: border-box;}
.color_wrap .system .area.blue { background: rgb(0, 92, 185); }
.color_wrap .system .area.gray { background: rgb(77, 88, 88); }
.color_wrap .system .area.green { background: rgb(0, 157, 79); }

.bg_grid{background: repeating-linear-gradient(#eee, #eee 1px, transparent 0, transparent .5em), repeating-linear-gradient(90deg, #eee, #eee 1px, transparent 0, transparent .5em) !important;
background: repeating-linear-gradient(#eee, #eee 1px, transparent 0, transparent .5em), repeating-linear-gradient(90deg, #eee, #eee 1px, transparent 0, transparent .5em) !important;
border-top:none; border-left:none; overflow:hidden; border: 1px solid rgba(0,0,0,.1);}

.businessA_wrap{gap: 4em; padding-top: 1.5em; border-top: 1px solid #111;}
.businessA_wrap .img_box { overflow: hidden; border-radius: 1em; width: 45%; }
.businessA_wrap .img_box img { display: block; object-fit: cover; width: 100%; height: 21em; }
.businessA_wrap .txt_box {margin-top: 4em;}
.businessA_wrap .txt_box .tit { font-size: 1.63em; line-height: 1.4em; font-weight: 800; margin-bottom: .5em; }
.businessA_wrap .txt_box p.tt { font-size: 1.13em;line-height: 1.5; color: #555;  position: relative; padding-left: 1em; font-weight: 500;}
.businessA_wrap .txt_box p.tt::before { content: ''; width: 5px; height: 1px; background-color: #777; position: absolute; left: 0; top: 12px; }
.businessA_wrap .txt_box .info_box { margin-top: 2em; line-height: 1.6;  }
.businessA_wrap .txt_box .info_box span{ margin: 0 .5em .5em 0; padding: 0.5em 1em; border: 1px solid var(--siteC2); border-radius:100px;}

/* 환경상품권 사업 */
.bu_list{gap: 2em;}
.bu_list > li{ position: relative; box-sizing: border-box; padding: 3em 2em; background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 1em; flex: 1; }
.bu_list > li .img_box{text-align: center; width: auto !important; padding: 2em; border-radius: 100px; border: 4px dotted #009d4f;}
.bu_list > li .img_box img{max-width: 100%;}
.bu_list > li .info_list{padding: 0 1em;}
.bu_list > li .list_tit{margin: 2em 0; width: 100%; height: 3em; line-height: 3em; color: #fff; font-weight: 700; border-radius: .5em; text-align: center; background: var(--siteC2);}
.bu_list > li .info_list li{display: block; margin: .8em 0; padding-bottom: 0.4em; border-bottom: 1px dotted #000;}
.bu_list > li .info_list li:last-child{margin-bottom: 0em; }
.bu_list > li .info_list li:first-child{margin-top: 0em;}

.bu_list > li .line{ content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%); width:3em; height:.5em; background:rgba(0, 157, 79, 0.3)}



 
.business_con1 {gap: 2em; margin-top: 1em; }
.business_con1 .img_box{width: 100%; text-align: center; padding: 4em; box-sizing: border-box; background: #f7f7f7; border-radius: 1em; gap: 3em; height: 20em; align-items: center;}
/* .business_con1 .img_box:nth-child(1){padding: 3em;}
.business_con1 .img_box:nth-child(2){padding: 3em;} */
.business_con1 .img_box:first-child li{width: 15%; }
.business_con1 .img_box li{width: 60%; gap: 0.5em;}
.business_con1 .img_box img{width: 100%;  box-sizing: border-box;}

.business_con2{margin-top: 1em;}
.business_con2 ul{flex-wrap: wrap; gap: 1em;}
.business_con2 ul li{width: calc((100% - 4em) / 5); padding: 1.4em; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .1); border-radius: 1em;}
.business_con2 ul li:hover{ border-color: var(--siteC); box-shadow: 0 0 1em rgba(0, 0, 0, .1); transition: 0.3s;}
.business_con2 ul li:not(:hover){ transition: 0.3s;}

/* esco */
.esco_list{gap: 4.5em 3em;}
.esco_list li{width: calc((100% - 3em) / 2); text-align: center;}
.esco_list li img{border-radius: 1em; width: 100%; height: 22em; object-fit: cover;}
/* .esco_list li:nth-child(2n){margin-top: 8em;} */
.esco_list li .info_box{margin-top: 1.8em; line-height: 1.6;}
.esco_list li .info_box .tit{font-size: 1.31em; font-weight: 800; margin: 0.8em 0 0.5em;}
.esco_list li .list_num{display: inline-block; width: 30px; height: 30px; line-height: 30px; color: #fff; border-radius: 100px; background: var(--siteC); }

.Laycontents .laycon{margin-bottom: 8em;}
.Laycontents .laycon:last-child{margin-bottom: 0;}
.product_list{gap: 2em;}
.product_list2{gap: 13em; position: relative; }
.product_list2::before{content: ''; position: absolute; left: 50%; top: 50%; background: url(../images/sub/businessE_bg01.png) no-repeat center; transform: translate(-50%, -50%); background-size: contain; width: 100%; height: 66%; z-index: -1;}
.product_list li {width: calc((100% - 2em) / 2);}
.product_list li .img_box{height: 17em; width: 100%; background: #f1f1f1; margin: 0 auto; overflow: hidden; border-radius: 1em; padding: 3em; box-sizing: border-box;}
.product_list li .img_box img{width: 100%; height: 100%; object-fit: contain;}
.product_list2 li .product_befo{background: #888;}
.product_list2 li .product_aft{background: var(--siteC);}
.product_list2 li .product_befo,
.product_list2 li .product_aft{width: 100%; padding: .8em 0; font-weight: 600; font-size: 1.13em; color: #fff; border-radius: 100px; text-align: center;}
.product_list2 li .img_box{padding: 2em; border: 1px solid #ddd; border-radius: 1em; margin-top: 2em;}
.product_list2 li .txt_box{padding: 0 1em;}
.product_result{font-size: 1.63em; color: var(--siteC); background: #f4f6f9; border: 1px solid var(--siteC); text-align: center; padding: 1em 0; font-weight: 700; border-radius: 100px; margin-top: 1em;}

/* 탄소중립실천국민운동 */
.active01_wrap { gap: 3em; display: flex; align-items: center; } 
.active01_wrap > .AimgB { width: 50%; height: 20em; border-radius: 1em; overflow: hidden; } 
.active01_wrap > .AimgB > img { width: 100%; height: 100%; object-fit: cover; } 
.active01_wrap > .arrowB { width: 16%; } 
.active01_wrap > .arrowB > .plogo { margin-bottom: 2em; } 
.active01_wrap > .arrowB > .arrow_con { display: flex; align-items: center; justify-content: center; } 
.active01_wrap > .arrowB > .arrow_con > .xi { position:relative; font-size: 2em; } 
.active01_wrap > .arrowB > .arrow_con > .ic1 { position:relative; color: #ddd; right: -15px; } 
.active01_wrap > .arrowB > .arrow_con > .ic2 { color: var(--siteC); opacity: .5; } 
.active01_wrap > .arrowB > .arrow_con > .ic3 { position:relative; color: var(--siteC); left: -15px; } 
.Active_desc { margin-top: 2em; text-align: center; font-size: 1.315em; line-height: 1.6; color: #333; padding: 2em; box-sizing: border-box; border: 1px solid #ddd; border-radius: .5em; } 

.benefit_wrap { } 
.benefit_wrap .benefit_list { gap: 2em;} 
.benefit_wrap .benefit_list > li { display: flex; width: calc((100% - 4em) / 3); flex-direction: column;} 
.benefit_wrap .benefit_list > li .in{width: 100%;}
.benefit_wrap .benefit_list > li .conTop { padding: 1em 0; text-align: center; background: var(--siteC2); border-radius: 1em 1em 0 0; } 
.benefit_wrap .benefit_list > li .conTop > .tit { font-size: 1.13em; font-weight: 600; color: #fff; } 
.benefit_wrap .benefit_list > li .infoB { display: flex; gap: .5em; border-radius: 0 0 1em 1em; justify-content: flex-start; align-items: flex-start; padding: 1em 2em; height: 12em; box-sizing: border-box; border: 1px solid #ddd; flex-direction: column; } 
.benefit_wrap .benefit_list > li .infoB > .tt { font-size: 1em; font-weight: 500; line-height: 1.6; } 

.benefit_wrap .app_top{}
.benefit_wrap .app_top .app_info{width: 65%;}
.benefit_wrap .app_top .img_box.shadow{position: relative; width: 22%;}
.benefit_wrap .app_top .img_box.shadow::before{content: ''; position: absolute; right: -9%; bottom: 0; width: 27%; height: 100%; background: rgb(0, 0, 0, 0.2); z-index: -1; filter: blur(30px);}
.benefit_wrap .app_top .txt_box{ }
.benefit_wrap .app_top .txt_box span {display: inline-block; color: var(--siteC); font-weight: 600; margin-bottom: 0.5em; margin-right: .5em; padding: 0.5em 1em; border: 1px solid var(--siteC); border-radius: 100px;}
.benefit_wrap .app_top .app_list{margin-top: 2em; gap: .5em;}

.benefit_wrap .point_top{text-align: center;}
.benefit_wrap .point_top .img_box{text-align: center; padding: 6em; box-sizing: border-box; background: #f7f7f7; border-radius: 1em; margin: 0 10em;}
.benefit_wrap .point_top .img_box img{width: 21em;}
.benefit_list .result_info .txt_box{gap: 1em;}
.benefit_list .result_info .txt_box .tt{padding: 1em; border: 1px solid var(--siteC2); color: #333; width: 50%; text-align: center; border-radius: .6em; gap: 1em; font-size: 0.94em;}
.benefit_list .arrow_con{ text-align: center; font-size: 2em; color: var(--siteC);}

.benefit_wrap .shop_info{margin-top: 3em; gap: 3em;}
.benefit_wrap .shop_info .shop_list{width: 25%;}
.benefit_wrap .shop_info .shop_list li{margin-bottom: 1em; width: 100%; height: 3.5em; line-height: 3.5em; color: #fff; font-weight: 700; border-radius: .5em; text-align: center; background: var(--siteC);}
.benefit_wrap .shop_info .shop_list li:last-child{margin-bottom: 0;}
.benefit_wrap .shop_info .img_box{width: 40%; margin-right: -5em;}
.benefit_wrap .shop_info .arrow_list {width: 20%;}
.benefit_wrap .shop_info .arrow_list li{ display: flex ; align-items: center; justify-content: center; gap: .5em; text-align: center;  font-weight: 600; margin-bottom: 0.5em; padding: 0.5em 1em; color: var(--siteC); border: 1px solid var(--siteC); border-radius: .5em;}
.benefit_wrap .shop_info .arrow_list li i{vertical-align: middle;}
.benefit_wrap .shop_info .txt_box{width: 20%; padding: 1em; font-weight: 700; line-height: 1.6; box-sizing: border-box; padding: 1em; background: var(--siteC); color: #fff; border-radius: .5em; text-align: center;}