@charset "utf-8";
/* CSS Document */
.box0{ padding:0 4vw; box-sizing:border-box;}
.box0_in{ padding:0 4vw; max-width:1680px; margin:0 auto}
.box1{ width:1400px; margin:0 auto}
.box2{ width:1280px; margin:0 auto}

.box1.bg {background-color:#fff; padding:3em 2em;}
.box2.bg {background-color:#fff; padding: 4em 8em 8em;}
.box2.bg2 {background-color:#fff; padding: 0 8em;border-top-left-radius: 2em; border-top-right-radius: 2em;}

.bg_f4 {background-color:#f4f4f4; padding:4em 0;}

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

.mobile_tit{ display:none;}

#header{ position:fixed; left:0; top:0; width:100%; z-index:1000; filter:brightness(0) invert(1); /*border-bottom:1px solid rgba(255,255,255,.2);*/ /*transition:all ease .3s*/}
.scroll #header{ filter:none!important; background:#fff!important; box-shadow:0 0 1em rgba(0,0,0,.1)}
#header:hover{ filter:none; background:#fff;}
#header .top_wrap{ position:relative}
#header .top_wrap .wrapH,
#header .top_wrap .gnb_wrap .dp1{ height:6.5em}
.headerT{ padding-top:6em}
#header .top_wrap .wrapIn{ display:flex; align-items:center; justify-content:space-between; gap:0 5vw}
#header .top_wrap .wrapIn > *{ position:relative; top:2px; z-index:2}
#header .top_wrap .sitelogo > a{ display:block}
#header .top_wrap .sitelogo > a img{ height:2.25em}
#header .top_wrap .gnb_wrap{ position:absolute; top:0; left:50%; width:100%; padding:0 20em; box-sizing:border-box; transform:translateX(-50%); z-index:1}
#header .top_wrap .gnb_wrap .gnb{ justify-content:center}
#header .top_wrap .gnb_wrap .gnb > li{ width:12em; position:relative}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va{ position:relative}
/*#header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after{ content:""; position:absolute; left:100%; bottom:100%; width:.375em; height:.375em; border-radius:50%; background:#e60013; display:none}*/
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after{content:""; position:absolute; left:0; bottom:-39px; width:100%; height:1px; background:#e60013; transform:scaleX(0%); opacity:0; }
#header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va:after{ transform:scaleX(100%); opacity:1; transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li.on .dp1 .va:after{ transform:scaleX(100%); opacity:1;}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .tt{ font-weight:700; font-size:1.375em}
#header .top_wrap .gnb_wrap .gnb > li .dp2{ display:block; text-align:center; padding:1.8em 0 2.4em 0; position: absolute; bottom:100%; z-index:-1; opacity:0; transition:all .3s}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a{ padding:.5em .25em}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .va{ font-size:1.063em}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a:hover{ color:var(--red); transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li .dp3{ display:none/*flex-direction:column*/}
/*#header .top_wrap .gnb_wrap .gnb > li .dp3 > li > a{ padding:0; font-size:0; opacity:0; transition:all .3s}*/
#header .top_wrap .gnb_wrap .gnb_bg{ position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; z-index:-1; /*transform:translateY(-50%);*/ opacity:0; visibility:hidden; box-shadow:0 0 20em rgba(0,0,0,.1); /*transition:all .3s*/}
/*#header .top_wrap .gnb_wrap .gnb_bg .roundObj{ top:100%; right:0; position:absolute}
#header .top_wrap .gnb_wrap .gnb_bg .roundObj .obj{ transform:translateX(1px)}
#header .top_wrap .gnb_wrap .gnb_bg .roundObj .objWrap{ width:40vw}*/
#header .top_wrap .gnb_wrap .gnb:hover > li .dp2{ position:static; z-index:auto; opacity:1; /*transition:.3s*/}
#header:hover .top_wrap .gnb_wrap .gnb ~ .gnb_bg{ transform:translateY(0); opacity:1; visibility:visible; /*transition:.3s*/}
/*#header .top_wrap .gnb_wrap .gnb > li .dp2 > li:hover .dp3 > li > a{ padding: .5em 0; font-size:.875em; opacity:1;}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li .dp3 > li:hover > a{ color:var(--red)}*/

#header .top_wrap .etc_wrap{ display:flex; align-items:center; height:100%; gap:0 2vw}
#header .top_wrap .etc_wrap .lang_wrap{ display:flex;align-items:center;height:100%;position:relative;padding: 0 1.2em;}
#header .top_wrap .etc_wrap .lang_wrap .langBtn{ display:flex; align-items:center}
#header .top_wrap .etc_wrap .lang_wrap .langBtn:before{content:"\e9d1"; font-family:xeicon; font-size:1.25em}
#header .top_wrap .etc_wrap .lang_wrap .langBtn:after{content:"\e941"; font-family:xeicon}
#header .top_wrap .etc_wrap .lang_wrap .langBtn .t1{ font-weight:600; margin:0 1em 0 .25em}
#header .top_wrap .etc_wrap .lang_wrap{ transition:all .3s}
#header .top_wrap .etc_wrap .lang_wrap .lang_list{width:100%; padding:1em; box-sizing:border-box; position:absolute;left: 0px;top: 4.5em;transform: translateY(-1em);opacity:0;transition:all .5s;border: 1px solid #ddd;border-radius: .5em;background-color: rgba(255, 255, 255, .95);}
#header .top_wrap .etc_wrap .lang_wrap .lang_list li{ display:flex; align-items:center; /* background:rgba(255, 255, 255, .95); */}
#header .top_wrap .etc_wrap .lang_wrap .lang_list li::before{ content:"\e929"; display:block; font-family:xeicon; color:#555; opacity:0}
#header .top_wrap .etc_wrap .lang_wrap .lang_list li::after{ content:"\e907"; justify-self:flex-end;  display:block; font-family:xeicon; color:#777; opacity:0; transform:translateX(20px); transition:all .3s;}
#header .top_wrap .etc_wrap .lang_wrap .lang_list li.on::before{ opacity:1 }
#header .top_wrap .etc_wrap .lang_wrap .lang_list li.on::after{ display:none!important}
#header .top_wrap .etc_wrap .lang_wrap .lang_list li a{width:100%;padding: .5em 0 .5em 1em;box-sizing:border-box;font-size:.875em;color:#555;}
#header .top_wrap .etc_wrap .lang_wrap:hover .lang_list{ transform:translateY(0); opacity:1;}
#header .top_wrap .etc_wrap .lang_wrap .lang_list li:hover a{ text-decoration:underline}
#header .top_wrap .etc_wrap .lang_wrap:hover{ color:var(--blue)}
#header .top_wrap .etc_wrap .lang_wrap .lang_list li:hover::after{ opacity:1; transform:translateX(0)}

#header .top_wrap .etc_wrap .etcBtn{ display:flex; align-items:center; justify-content:center; width:2em; height:2em}
#header .top_wrap .etc_wrap .etcBtn .ico{ font-size:2em}

#header .all_wrap .all{ position:fixed; right:0; top:0; width:100%; height:100vh; opacity:0; visibility:hidden; z-index:1; color:#333; flex-direction:column; background:rgba(0,0,0,.7);}
#header .all_wrap .all .wrap_bg{ position:relative; opacity:0}
#header .all_wrap .all .wrap_bg .btn{ position:absolute; right:3vw; top:calc(100% - 0.5em); width:3em; line-height:3em; background:#fff;border-radius:50%;color:#1a4e87;text-align:center;z-index:1}
#header .all_wrap .all .wrap_con{height: calc(100% - 6em);width:94%;box-sizing:border-box;margin:0 auto;transform:translateY(5em);display:flex;flex-direction:column}
#header .all_wrap .all .wrap_con .roundObj{ z-index:1; transform:translateY(1px)}
#header .all_wrap .all .wrap_con .roundObj .objWrap{ padding:0  0 0 2em; border-radius:1em 0 0}
#header .all_wrap .all .wrap_con .roundObj .logo{ display:block; padding-top:1em; transform:translateY(.5em)}
#header .all_wrap .all .wrap_con .roundObj .logo img{ height:2.25em}
#header .all_wrap .all .wrap_con .wrap_in{height:100%;box-sizing:border-box;padding: 2em 2em;background:#fff;position:relative;border-radius:0 1em 0 0}
#header .all_wrap .all .lang{ gap:0 2em}
#header .all_wrap .all .lang > li > a{ font-weight:900; font-size:1.125em; color:#999; padding:.375em}
#header .all_wrap .all .lang > li.on > a{ color:#002c60; position:relative}
#header .all_wrap .all .lang > li.on > a:before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:.25em; background:#002c60; opacity:.2}
#header .all_wrap .all .lang:hover{ opacity:1}
#header .all_wrap .all .bottom{ padding:1em 0 0 0; box-sizing:border-box}
#header .all_wrap .all .menu{ position:relative}
#header .all_wrap .all .menu:before{ content:""; position:absolute; left:0; top:0; width:calc(100% - 1px); height:100%; z-index:-1; box-sizing:border-box; border:1px solid #eee; border-bottom-color:#ddd}
#header .all_wrap .all .gnb{ height:100%; position:relative; overflow:hidden; border:1px solid rgba(0,0,0,.1); border-top:none; border-bottom:none}
#header .all_wrap .all .gnb ul{ display:block}
#header .all_wrap .all .gnb a{ text-align:left; position:relative; line-height:1.2}
#header .all_wrap .all .gnb li{ position:relative; flex:1 1 1%}
#header .all_wrap .all .gnb a .arrow{ position:absolute; right:1em; opacity:.6; transition:.3s; font-size:1em}
#header .all_wrap .all .gnb a .arrow:before{ content:"\e907"; font-size:.75em}
#header .all_wrap .all .gnb li.more > a .arrow:before{ content:"\e943"; font-size:1em}
#header .all_wrap .all .gnb > li:before,
#header .all_wrap .all .gnb > li:after{ content:""; position:absolute; background:#000; opacity:.1}
#header .all_wrap .all .gnb > li:before{ left:-1px; top:0; width:1px; height:100%;}
#header .all_wrap .all .gnb > li:after{ left:0; bottom:0; width:100%; height:1px;}
#header .all_wrap .all .gnb > li:not(.m_hide){ display:flex; flex-direction:column}
#header .all_wrap .all .gnb > li .dp1{ padding:0 1.5em; height:4em; background:var(--red); box-sizing:border-box; color:#fff}
#header .all_wrap .all .gnb > li .dp1 .va{ font-size:1.25em; font-weight:700}
#header .all_wrap .all .gnb > li .dp1 .arrow{ top:50%; transform:translateY(-50%)}
#header .all_wrap .all .gnb > li .dp2{ flex:1 1 0%; min-height:0; padding:1em 0}
#header .all_wrap .all .gnb > li .dp2 > li > a{ padding:.5em 1.5em; padding-right:2em; font-weight:500; transition:.3s}
#header .all_wrap .all .gnb > li .dp2 > li > a:hover{ color:var(--red)}
#header .all_wrap .all .gnb > li .dp2 > li > a .arrow{ right:1.25em; top:.5em}
#header .all_wrap .all .gnb > li .dp2 > li.more > a .arrow:before{ content:"\e942"}
#header .all_wrap .all .gnb > li .dp2 > li.act > a .arrow{ opacity:1}
#header .all_wrap .all .gnb > li .dp2 > li.act > a .va .tt{ text-decoration:underline}
#header .all_wrap .all .gnb > li .dp3{ background:#f5f5f5; margin:0 1em; padding:.75em; margin-bottom:.5em}
#header .all_wrap .all .gnb > li .dp3 > li > a{ padding:.25em .75em; padding-left:.75em; color:#666; display:flex}
#header .all_wrap .all .gnb > li .dp3 > li > a:before{ content:"-"; position:absolute; left:0; top:.125em; width:auto; height:auto}
#header .all_wrap .all .gnb > li .dp3 > li > a .arrow{ display:none}
#header .all_wrap .all .gnb > li .dp3 > li > a .va{ font-size:.938em}
#header .all_wrap .all .gnb > li .dp3 > li > a:hover{ color:#111; font-weight:500}
#header .all_wrap .all .gnb > li .dp3 > li.act > a{ color:#002c60; font-weight:500}

.allGnbOn{ overflow-y: hidden}
.allGnbOn body{ overflow-y: scroll}
.allGnbOn #header .top_wrap{ z-index:11}
.allGnbOn #header .all_wrap .all{ opacity:1; visibility:visible}
.allGnbOn #header .all_wrap .all .wrap_bg{ opacity:1; transition:.3s; transition-delay:.2s}
.allGnbOn #header .all_wrap .all .wrap_con{ transform:translateY(0); transition:.3s}

/*#header.hover{ filter:none; background:#fff}*/

/*#header.white:not(.hover){ background:none}
#header.white:not(.hover) .top_wrap .sitelogo,
#header.white:not(.hover) .top_wrap .langList,
#header.white:not(.hover) .top_wrap .etc_wrap .etcBtn{ filter:brightness(0) invert(1)}
#header.white:not(.hover) .top_wrap .gnb_wrap .gnb .dp1{ color:#fff}
#header.white:not(.hover) .bottom_wrap .obj{ opacity:.3}
#header.white:not(.hover) .bottom_wrap .obj .path{ opacity:0}
#header.white:not(.hover) .bottom_wrap .objWrap{ background:none}
#header.white:not(.hover) .bottom_wrap .search .inp{ color:#fff}
#header.white:not(.hover) .bottom_wrap .search .inp::placeholder{ color:#fff !important}*/

/*#header.hover{ filteer:none;}*/

/*.scroll #header{filter: drop-shadow(0 1em .5em rgba(0,0,0,.05))}*/

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


#footer{z-index:1;color:#fff;background:#222;padding: 5em 0 6em 0;border-top:1px solid rgba(255,255,255,.1)}
#footer .goTop{ position:fixed; right:0; bottom:0; width:3.5em; line-height:3.5em; text-align:center; background:#333; 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 .menu{display:flex;justify-content:flex-end;margin-top: 2em;/*flex-direction:column; */gap:2em}
#footer .menu > li{ /*width:100%;*/}
#footer .menu > li > a{ display:block; padding-right:2em; font-size:1.063em; position:relative; opacity:.6}
#footer .menu > li:last-of-type > a{ padding-right: 0;}
*#footer .menu > li:not(:last-child) > a:after{ content:''; width:2px; height:2px; background:#999; position:absolute; right:0; top:50%; trnasform:translateY(-50%);}
/*#footer .menu > li > a:after{ content:"\e915"; font-family:xeicon; position:absolute; right:0; top:0; transform:rotate(45deg)}*/
#footer .menu > li > a.point{ opacity:1}
#footer .link{ margin-left:auto; display:flex; gap:.5em}
#footer .link > li > a{ padding:.5em 1em; font-size:1.063em; border:1px solid rgba(255,255,255,.2); line-height:1; opacity:.5; border-radius:.25em}
#footer .link > li > a:hover{ opacity:1}

#footer .logo_wrap .logo{margin-right: 6em;/*margin-bottom:2em*/}
#footer .logo_wrap .logo img{ height:2.5em; filter:brightness(0) invert(1) opacity(.85)}
#footer .infoW{ margin-bottom:.25em; display:flex; font-size:.938em}
#footer .infoW > dt{ width:10em; font-weight:500; opacity:.8}
#footer .infoW > dd{ flex:1 1 0%; min-width:0}
#footer .info > li{ float:left; margin-right:2em; margin-bottom:.3em; opacity:.8; font-weight:300; position:relative}
#footer .info > li:before{ content:""; position:absolute; right:-1em; height:70%; top:50%; transform:translateY(-50%); width:1px; background:#fff; opacity:.2}
#footer .info > li:last-child:before{ display:none}
#footer .info > li.point{ font-weight:600}
#footer .info > li.br{ clear:left}
#footer .copyright{ font-size:.813em; opacity:.4; text-transform:uppercase; margin-top:3.5em}

.h100{ height:100%; box-sizing:border-box}

.roundObj{ position:relative; display:flex; height:5em}
.roundObj .obj{}
.roundObj .obj svg{ height:100%}
.roundObj .obj .stroke{ display:none}
.roundObj .objWrap{ background:#e60044; }
.roundObj.white .obj .path{ fill:#fff }
.roundObj.white .obj .stroke{ stroke:#fff }
.roundObj.white .objWrap{ background:#fff}
.roundObj.re .obj{ order:1; transform:rotate(180deg)}
.roundObj.s1{ height:12em}
.roundObj.line .obj{ position:relative}
.roundObj.line .obj:before,
.roundObj.line .obj:after{ content:""; position:absolute; background:#e60044; width:100vw; height:2px}
.roundObj.line .obj:before{ right:calc(100% - .75em); top:0}
.roundObj.line .obj:after{ left:calc(100% - 1em); bottom:0}
.roundObj.line .obj .stroke{ display:block; vector-effect:non-scaling-stroke}
.roundObj.line .obj .path{ opacity:0}
.roundObj.line .objWrap{ background:none}
.roundObj.line.white .obj:before,
.roundObj.line.white .obj:after{ background:#fff}

/*.intro{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:1001; display:flex; align-items:center; justify-content:center; animation: introHide 1s both; animation-delay:5s}
.intro .svg{ z-index:1; height:10vh; overflow-clip-margin:border-box; padding:2em 0; animation:introObjHide 1s both; animation-delay:3s}
.intro .svg .ani1{ animation: introAni1 2s both; animation-timing-function: ease-in-out; }
.intro .svg .ani2{ animation: introAni2 1.5s both; animation-timing-function: ease-in-out; }
.intro .svg .ani3{ animation: introAni3 2s both; animation-timing-function: ease-in-out; }
.intro .svg .a1{ animation-delay:.1s}
.intro .svg .a2{ animation-delay:.2s}
.intro .svg .a3{ animation-delay:.3s}
.intro .svg .a4{ animation-delay:.4s}
.intro .svg .a5{ animation-delay:.5s}
.intro .svg .a6{ animation-delay:.6s}
.intro .svg .a7{ animation-delay:.7s}
.intro .svg .a8{ animation-delay:.8s}
.intro .bg{ position:absolute; left:0; width:100%; height:50%; background:#fff; animation-duration: 1s; animation-delay:3s; animation-fill-mode:both; animation-timing-function: cubic-bezier(1,0,0.8,1)}
.intro .bg.b1{ top:0; animation-name: introAniTop}
.intro .bg.b2{ bottom:0; animation-name: introAniBT}
.intro .bg .roundObj{ position:absolute}
.intro .bg .roundObj .objWrap{ width:50vw}
.intro .bg.b1 .roundObj{ top:100%; right:0; margin-top:-1px}
.intro .bg.b2 .roundObj{ bottom:100%; left:0; margin-bottom:-1px}

@keyframes introHide {
	100% { visibility:hidden; z-index:-1}
}
@keyframes introObjHide {
	100% { opacity:0}
}
@keyframes introAniTop {
	100% { transform:translateY(calc(-100% - 3em))}
}
@keyframes introAniBT {
	100% { transform:translateY(calc(100% + 3em))}
}

@keyframes introAni1 {
	0% { visibility:hidden}
	50% { visibility:visible; transform:translateY(-3em)}
}
@keyframes introAni2 {
	0% { transform:translateX(100%)}
	100% { transform:translateX(0)}
	
}
@keyframes introAni3 {
	0% { transform:translate(100%, -200%)}
	100% { transform:translate(0, 0)}
}
.introIn .intro{ position:relative; animation:none}
.introIn .intro .svg{ animation:none}*/

#contents .sub_visual{ position:relative; overflow: hidden;}
#contents .sub_visual .wrap_bg{ position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.1,1.1); z-index:-1;}
.load #contents .sub_visual .wrap_bg {transform:scale(1,1); transition:4s;}
#contents .sub_visual .wrap_bg::before{content:'';width:100%;height:100%;background: linear-gradient(180deg, rgb(0, 0, 0, .35), rgba(0, 0, 0, .15));position:absolute;left:0;top:0;}
#contents .sub_visual .wrap_con{ position:relative; box-sizing:border-box; height:23em;}
#contents .sub_visual .wrap_con .slogan_wrap{ color:#fff; margin-top:5em;}
#contents .sub_visual .wrap_con .slogan_wrap .t1{ font-size: 2.75rem; font-weight:700; margin-bottom: .5em;}
#contents .sub_visual .wrap_con .slogan_wrap .t2 {/* margin-top: 1.5rem; */font-size: 1.25rem; letter-spacing: -.01em;/* line-height: 1.625; */opacity: .75;}
#contents .sub_visual .wrap_con .slogan_wrap .tit1 .tt{ font-family:inherit; font-size:1.125em; font-weight:700; letter-spacing:.15em;margin-bottom:0.1em; text-transform:uppercase; opacity:.6;}
#contents .sub_visual .wrap_con .slogan_wrap .slogan{ padding-bottom:3em}

/**/
#contents .sub_menu .sub_nav{ gap:0 1em; margin-top:-26em; padding:2em 0; background-color:#fff;}
#contents .sub_menu .sub_nav > li{ font-size:1em; position:relative}
#contents .sub_menu .sub_nav > li:not(.home):before{ content:"\e940"; font-family:xeicon; position:absolute; left:-1em; top:50%; transform:translateY(-50%) scale(.8)}
#contents .sub_menu .sub_nav > li:last-child {}
#contents .sub_menu .sub_nav > li:last-child .tt {font-weight:600; color:var(--red);}

/**/
#contents .sub_menu{ position:relative; top:-3em;}
#contents .sub_menu .menu_wrap{ display:flex; justify-content:center}
#contents .sub_menu .dp2on { padding-bottom:2em;}
#contents .sub_menu .dp2on .gnb{/*overflow:hidden;*/}
/*#contents .sub_menu .dp2on .gnb > li { padding: 1.5em 0; }*/
#contents .sub_menu .dp2on .gnb .dp2 > li{ min-width:15em;/* border:1px solid #ddd; */}
#contents .sub_menu .dp2on .gnb .dp2 > li > a{ padding:1.6em 1em; background:#fff; position:relative; transition:all .3s; box-shadow: 0 5px 10px rgba(0, 0, 0, .1);}
/*#contents .sub_menu .dp2on .gnb .dp2 > li > a{ padding:.375em 2.5em; position:relative}*/
/*#contents .sub_menu .dp2on .gnb .dp2 > li > a:before{ content:""; position:absolute;left:-1px;top:0; width:1px; height:80%;background:#ddd}
#contents .sub_menu .dp2on .gnb .dp2 > li > a:after { position:absolute; bottom:-59%; left:50%; transform:translate(-50%,-50%); width:4em; height:2px; background-color:var(--red); display:none}*/
#contents .sub_menu .dp2on .gnb .dp2 > li > a .va{font-weight:400;font-size: 1.125em;color:#333;transdition:all .3s}
#contents .sub_menu .dp2on .gnb .dp2 > li.on > a{ background:var(--red)}
#contents .sub_menu .dp2on .gnb .dp2 > li:hover > a{}
#contents .sub_menu .dp2on .gnb .dp2 > li:hover > a .va{ color:var(--red)}
#contents .sub_menu .dp2on .gnb .dp2 > li.on > a .va{ color:#fff}
#contents .sub_menu .dp2on .gnb .dp2 > li.on > a:after { display:block;}
#contents .sub_menu .dp2on .gnb .dp3{ display:none}
#contents .sub_menu .dp3on {}
#contents .sub_menu .dp3on .gnb{ overflow:hidden}
#contents .sub_menu .dp3on .gnb .dp3{ gap:.5em; margin-top: 1em;}
#contents .sub_menu .dp3on .gnb .dp3 > li{/* min-width: 20%; */width: 11em;}
#contents .sub_menu .dp3on .gnb .dp3 > li > a{ padding: 1em 1em; border-radius:.25em; color:#666; font-weight:500; position:relative;border:1px solid #ddd;}
#contents .sub_menu .dp3on .gnb .dp3 > li.m3_talent > a,
#contents .sub_menu .dp3on .gnb .dp3 > li.m3_benefit > a,
#contents .sub_menu .dp3on .gnb .dp3 > li.m3_settlement > a,
#contents .sub_menu .dp3on .gnb .dp3 > li.m3_product > a,
#contents .sub_menu .dp3on .gnb .dp3 > li.m3_list > a {padding:1.5em 4em;}
/*#contents .sub_menu .dp3on .gnb .dp3 > li > a:before{ content:""; position:absolute; right:100%; top:50%; width:.25em; height:.25em; background:#ccc; transform:translate(-150%,-50%); border-radius:50%}*/
#contents .sub_menu .dp3on .gnb .dp3 > li > a .va{ font-weight:300; font-size:1.125em}
#contents .sub_menu .dp3on .gnb .dp3 > li.on > a,
#contents .sub_menu .dp3on .gnb .dp3 > li:hover > a{ border-color:var(--red); color:var(--red); z-index:1}
#contents .sub_menu .dp3on .gnb .dp3 > li.on > a:before,
#contents .sub_menu .dp3on .gnb .dp3 > li:hover > a:before{ display:none}

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

#contents .doc{ padding:0em 0 13em 0}
#contents .doc.prod{ padding:2em 0 13em 0}

/**/

.visualSlider .el{ position:relative; overflow:hidden; height:100vh; background:#fff}
.visualSlider .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%}
.visualSlider .el .bg::after{ content:''; width:100%; height:100%; background:linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0)); position:absolute; left:0; top:0;}
.visualSlider .el .vod{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover}
.visualSlider .el .vod_wrap:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.2)}
.visualSlider .el .vod_bg{ position:absolute; left:0; top:0; width:100%; height:100%}
.visualSlider .el.swiper-slide-active .bg,
.visualSlider .el.swiper-slide-duplicate-active .bg{ transition:4s ease-in-out}
.visualSlider .el:nth-child(3n - 1) .bg{ height:120%}
.visualSlider .el:nth-child(3n) .bg{ width:110%}
.visualSlider .el.swiper-slide-active:nth-child(3n - 1) .bg,
.visualSlider .el.swiper-slide-duplicate-active:nth-child(3n - 1) .bg{ top:-20%}
.visualSlider .el.swiper-slide-active:nth-child(3n) .bg,
.visualSlider .el.swiper-slide-duplicate-active:nth-child(3n) .bg{ left:-10%}
.visualSlider .el.swiper-slide-active:nth-child(3n + 1) .bg,
.visualSlider .el.swiper-slide-duplicate-active:nth-child(3n + 1) .bg{transform:scale(1.1) rotate(.001deg)}
.visualSlider_wrap .slogan{ position:absolute; left:0; width:100%; top:50%; transform:translateY(-50%); margin-top:-2em; z-index:10; color:#fff; text-align:center}
.visualSlider_wrap .slogan .wrap_in{ display:flex; flex-direction:column; align-items:center}
.visualSlider_wrap .slogan .t1{ font-size:4.25em; font-weight:800; line-height:1.1}
.visualSlider_wrap .slogan .t2{ font-size:1.537em; transform:translateY(200%); opacity:0; margin-top:3em}
.visualSlider_wrap .slogan .row{ height:1.125em; display:block; overflow:hidden; line-height:1}
.visualSlider_wrap .slogan .row .in{ transform:translateY(-150%)}
.visualSlider_wrap .el.swiper-slide-active .slogan .t2{ transition:2s; transition-delay:1s; transform:translateY(0); opacity:1}
.visualSlider_wrap .el.swiper-slide-active .slogan .row .in{ transition:2s; transform:translateY(0)}
.visualSlider_wrap .el.swiper-slide-active .slogan .row:nth-child(2) .in{ transition-delay:.8s}
.visualSlider_control{ position:absolute; left:0; bottom:2em; width:100%; z-index:10}
.visualSlider_control .paging{color:#fff; width:auto; display:flex}
.visualSlider_control .paging span{ position:relative; background:rgba(255,255,255,.5); opacity:1; width:0; height:3px;border-radius:0; position:relative; transition:.3s; height:2px; counter-increment: vIndex; display:block; margin:0 1.5em}
.visualSlider_control .paging span:before{content:counter(vIndex); position:absolute; right:100%; top:50%; width:1.5em; transform:translateY(-50%)}
.visualSlider_control .paging span:nth-child(-n+10):before{ content:"0" counter(vIndex); font-size:.875em}
.visualSlider_control .paging{ margin-left:1.5em}
.visualSlider_control .paging > span:after{ content:""; position:absolute; left:0; top:0; width:0; height:100%; background:#fff}
.visualSlider_control .paging > span.swiper-pagination-bullet-active{ width:5em}
.visualSlider_control .paging > span.swiper-pagination-bullet-active:after{ width:100%; transition:7s}

.visualSlider_control .swiperBtn{ margin-left:.25em}


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

.main_contents{ overflow:hidden}
.main_box{ padding:5em 0 6em 0}
.main_box.bg1{ background:#f5f5f5}
.main_box .box_flex{ gap:0 10em}
.main_box .box_flex .main_tit{ padding:1em 0 0 1em}

/*.main_tit{ margin-bottom:2em; display:flex; flex-direction:column; gap:.75em 0}
.main_tit.hc{ align-items:center}
.main_tit .tit1{ font-weight:900; font-size:2.5em; text-transform:uppercase}
.main_tit .tit2{ font-weight:900; font-size:2em; text-transform:uppercase;}
.main_tit .tit3{ font-weight:700; font-size:1.625em; text-transform:uppercase;}
.main_tit .ico1{ position:relative}
.main_tit .ico1:before{ content:""; position:absolute; top:0; right:100%; transform:translate(-50%,-50%); width:.375em; height:.375em; border-radius:50%; background:var(--red)}
.en{}
.main_tit .tt1{ font-size:1.313em; opacity:.7}
.main_tit.white{ color:#fff}*/

.section_wrap{ min-height:100%; box-sizing:border-box}

#nav {position: fixed;left:4vw;width:auto;bottom: 4em;z-index:1;display:flex}
#nav:before{content:"";position:absolute;left:0;top:14px;width: calc(100% - 3em);height:1px;background:#fff;opacity:.6;transform: translateY(1px);}
#nav > li > a{color:#fff;width: 3.2em;position:relative;opacity:.6}
#nav > li > a .dot{ width:.5em; height:.5em; border-radius:50%; background:#fff; position:relative}
#nav > li > a .dot:after{ content:""; position:absolute; left:50%; top:50%; width:100%; height:100%; border:1px solid #fff; transform:translate(-50%, -50%) scale(2); border-radius:50%; opacity:0}
#nav > li > a .tt{ position:absolute; left:-50%; top:100%; margin-top:.5em; width:100%; text-align:center; opacity:0}
#nav > li > a .t1{ font-size:.6em}
#nav > li:hover > a,
#nav > li.on > a,
#nav > li:hover > a .dot:after,
#nav > li.on > a .dot:after,
#nav > li:hover > a .tt,
#nav > li.on > a .tt{ opacity:1; transition:.3s}
.fp-viewing-5 #nav{ display:none;}

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

.main_contents{ overflow:hidden}
.main_box{ padding:5em 0 6em 0}
.main_box.bg1{ background:#f5f5f5}
.main_box .box_flex{ gap:0 10em}
.main_box .box_flex .main_tit{ padding:1em 0 0 1em}

.main_tit{ margin-bottom:2.5em; display:flex; flex-direction:column; gap:.75em 0}
.main_tit.hc{ align-items:center}
.main_tit .tit1{font-weight:700;font-size: 2.8em;text-transform:uppercase}
.main_tit .tit2{ font-weight:800; font-size:3.5em; text-transform:uppercase;}
.main_tit .tit3{ font-weight:700; font-size:2.125em; text-transform:uppercase;}
.main_tit .ico1{ position:relative}
.main_tit .ico1:before{ content:""; position:absolute; top:0; right:100%; transform:translate(-50%,-50%); width:.375em; height:.375em; border-radius:50%; background:#e60013}
.en{ font-family: 'Orbitron', sans-serif}
.main_tit .tt1{font-size: 1.25em;opacity:.7}
.main_tit .tt2{ font-size:1.125em; opacity:.7}
.main_tit.white{ color:#fff}

.section{ position:relative; overflow:hidden}
.clipTxt{ -webkit-background-clip:text; -webkit-text-fill-color:transparent}

.main_about .wrap_bg{ width:100%; height:100%; left:0; top:0; position: absolute}
.main_about .wrap_bg.mask{ -webkit-mask-image: url(../images/main/about_mask.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; -webkit-mask-position: right bottom;}
.main_about .wrap_bg video{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover}
.main_about .wrap_in{ padding:7% 0 0 23%}
.main_about .list{ display:flex; gap:0 6em; margin-top:4em}
.main_about .list > li{ flex:1 1 1%; max-width:11em}
.main_about .list > li .in{ text-align:center}
.main_about .list > li .ico{ width:70%; margin:0 auto}
.main_about .list > li .ico svg{ width:100%}
.main_about .list > li .con{ text-align:center; padding:1em 0}
.main_about .list > li .con .t1{ font-weight:700; font-size:1.125em; color:#aaa}
.main_about .list > li .con .t1 .ts{ font-weight:400; vertical-align:top}
.main_about .list > li .con .t2{ font-weight:700; font-size:2em}

.fpR{ transform:translateX(-20vw); opacity:0; transition:1s ease-in-out}
.fp-section.active .fpR{ transform:translateX(0); opacity:1}
.fpL{ transform:translateX(20vw); opacity:0; transition:1s ease-in-out}
.fp-section.active .fpL{ transform:translateX(0); opacity:1}
.fpT{ transform:translateY(50%); opacity:0; transition:1s ease-in-out}
.fp-section.active .fpT{ transform:translateY(0); opacity:1}
.fpB{ transform:translateY(-50%); opacity:0; transition:1s ease-in-out}
.fp-section.active .fpB{ transform:translateY(0); opacity:1}

.main_business{ background:#222}
.main_business .list{ display:flex; height:100%}
.main_business .list > li{width: 50%;height:100%;position:relative;display:flex;align-items:center;box-sizing:border-box;transition:.3s ease-in-out}
.main_business .list > li .wrap_bg{ position:absolute; left:0; top:0; width:100%; height:100%}
.main_business .list > li .wrap_bg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.4; transition:.3s}
.main_business .list > li .wrap_in{ width:100%; position:relative; box-sizing:border-box; padding:3em; text-align:center; color:#fff; cursor:pointer}
.main_business .list > li .wrap_in .tit .t1{ font-weight:500; color:#e60013}
.main_business .list > li .wrap_in .tit .t2{ font-weight:800; font-size:2.5em}
.main_business .list > li .wrap_in .con{ margin-top:2em; display:none}
.main_business .list > li .wrap_in .con .t1{ font-weight:500; font-size:1.25em}
.main_business .list > li .wrap_in .con .btn{ margin-top:1em}
.main_business .list:hover > li{ width:40%}
.main_business .list:hover > li:hover{ width:60%}
.main_business .list:hover > li:hover .wrap_bg:after{ opacity:.2}
.main_business .list:hover > li:hover .wrap_in .con{ display:block}

.main_more{padding:.75em 2em; background:#fff; color:#e60013; font-weight:500; border-radius:2em}
.main_more:after{ content:"\e907"; font-family:xeicon; margin-left:.5em}
.main_more:hover{ background:#e60013; color:#fff}

.main_product{ background:#f5f5f5}
.main_product .wrap_bg{ position:absolute; left:0; bottom:0; width:100%; height:30vh}
.main_product .wrap_in{ box-sizing:border-box; width:100%; position:relative}
.main_product{ position:relative; overflow:hidden}
.main_product .wrap_prod .main_tit{ padding:0 .5em 1.5em 0}
.main_product .wrap_prod .mainProdSlide .el{ width:20%}
.main_product .wrap_prod .mainProdSlide .el .prod_st{ background:#fff; /*border:1px solid #eee;*/ overflow:hidden; border-radius:1em; margin:.5em; position:relative}
.main_product .wrap_prod .mainProdSlide .el .prod_st .img{ padding:3em; position:relative; z-index:1}
.main_product .wrap_prod .mainProdSlide .el .prod_st .img .resize{ background-size:contain}
.main_product .wrap_prod .mainProdSlide .el .prod_st .con{ padding:2em; border-radius: 0 0 1em 1em; text-align:center; position:relative; z-index:1}
.main_product .wrap_prod .mainProdSlide .el .prod_st .con .cate{ padding:.25em 1em; background:#e60013; position:absolute; left:2em; bottom:calc(100% - .75em); color:#fff; font-weight:500}
.main_product .wrap_prod .mainProdSlide .el .prod_st .con .t1{ font-weight:600; font-size:1.25em; transition:all .3s}
.main_product .wrap_prod .mainProdSlide .el .prod_st .con .t2{ margin-bottom:10px; font-weight:400; font-size:1em; color:var(--red); opacity:.9; transition:all .3s}
.main_product .wrap_prod .mainProdSlide .el .prod_st .con .t2.acc{ color:var(--blue)}
/*.main_product .wrap_prod .mainProdSlide .el .prod_st::after{ content:''; width:100%; height:30%; background:var(--red); position:absolute; left:0; bottom:0; transform:translateY(100%) scaleY(0); opacity:0; transition:all .3s}
.main_product .wrap_prod .mainProdSlide .el:hover .prod_st::after{ transform:translateY(0) scaleY(100%); opacity:.8}
.main_product .wrap_prod .mainProdSlide .el:hover .prod_st .con .t1,
.main_product .wrap_prod .mainProdSlide .el:hover .prod_st .con .t2{ color:#fff}*/
.main_product .wrap_prod .mainProdSlide .el:hover .prod_st .con{ background-color:var(--red)}
.main_product .wrap_prod .mainProdSlide .el:hover .prod_st .con.acc{ background-color:var(--blue)}
.main_product .wrap_prod .mainProdSlide .el:hover .prod_st .con .t1{ color:#fff}
.main_product .wrap_prod .mainProdSlide .el:hover .prod_st .con .t2{ color:#fff}
.mainProdSlide_control{ gap:0 .5em}
.mainProdSlide_control .paging{ width:20em; filter:brightness(0) invert(1)}



.main_customer{ position:relative; overflow:hidden}
.main_customer .wrap_bg{ width:40%}
.main_customer .wrap_bg .wrap_in{ width:100%; box-sizing:border-box; padding:0 0 0 4vw; z-index:1}
.main_customer .wrap_slide{ width:60%}
.main_customer .wrap_slide .slide_in{ width:100%; box-sizing:border-box; padding:0 4vw}
.main_customer .wrap_bg:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:100%}
.main_customer .wrap_bg .text{ position:absolute; left:0; bottom:0; width:100%; filter:brightness(0) invert(1); mix-blend-mode: soft-light; display:flex; justify-content:flex-end; gap:0 5em}
.main_customer .wrap_bg .text .t1{ color:#fff; font-size:6em; word-spacing:.063em; white-space:nowrap; line-height:1}
.main_customer .wrap_con{ display:flex; align-items:flex-start; justify-content:space-between; position:relative; gap:0 4em}
/*.main_customer .wrap_search{ padding:2em 0; box-sizing:border-box; color:#fff}
.main_customer .wrap_search .inp_wrap{ width:100%; box-sizing:border-box; display:flex; align-items:center; gap:0 .5em; border-bottom:1px solid #fff}
.main_customer .wrap_search .inp_wrap .ico{ font-size:2em}
.main_customer .wrap_search .inp_wrap .inp{ background:none; border:none; flex:1 1 0%; min-width:0; font-size:1.25em}
.main_customer .wrap_search .inp_wrap .inp::placeholder{ color:#fff !important}
.main_customer .wrap_search .inp_wrap .btn{ width:4em; height:4em; border:none; background:#fff; color:#e60013; border:none; transform:translateY(1px)}
.main_customer .wrap_search .inp_wrap .btn:hover{ background:#e60013; color:#fff}*/ /*  키워드 검색*/
.main_customer .wrap_search{ padding:2em 0; box-sizing:border-box; color:#fff}
.main_customer .wrap_search .inp_wrap{ width:100%; box-sizing:border-box; display:flex; align-items:center; gap:0 .5em; border-bottom:1px solid #fff}
.main_customer .wrap_search .inp_wrap .ico{ width:5%; font-size:2em}
.main_customer .wrap_search .inp_wrap .select{ width:calc( (95% - 5.2em) / 2);}
.main_customer .wrap_search .inp_wrap .inp{ width:100%; height:3.2em; padding:.5em; box-sizing:border-box; background:none; border:none; /*border-bottom:1px solid #fff;*/ flex:1 1 0%; min-width:0; font-size:1.25em}
.main_customer .wrap_search .inp_wrap .select::after{ color:#fff;}
.main_customer .wrap_search .inp_wrap .inp option{ font-size:.875em; color:#111}
.main_customer .wrap_search .inp_wrap .inp::placeholder{ color:#fff !important}
.main_customer .wrap_search .inp_wrap .btn{ width:4em; height:4em; border:none; background:#fff; color:#e60013; border:none; transform:translateY(1px)}
.main_customer .wrap_search .inp_wrap .btn:hover{ background:#e60013; color:#fff}
.main_customer .wrap_cs{ margin-right:4vw; padding:2em; color:#fff; position:relative}
.main_customer .wrap_cs:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#e60013; opacity:.8; border-radius:.5em}
.main_customer .wrap_cs .in{ display:flex; gap:0 2em; align-items:center; position:relative}
.main_customer .wrap_cs .ico{ height:4em; filter:brightness(0) invert(1)}
.main_customer .wrap_cs .t1{ font-size:1.25em}
.main_customer .wrap_cs .t2{ font-size:2.25em; font-weight:800}

.main_customer .wrap_slide .main_tit{ padding:0 .5em 1.5em 0}
.main_customer .wrap_slide .mainNewsSlide{ margin:-.5em}
.main_customer .wrap_slide .mainNewsSlide .el{ width:50%}
.main_customer .wrap_slide .mainNewsSlide .el .wrap_in{ border:1px solid #eee; border-radius:.5em; position:relative; box-sizing:border-box; padding:1.5em; padding-top:3.5em; overflow:hidden; background:#fff; display:flex; flex-direction:column; gap:1em 0; margin:.5em}
.main_customer .wrap_slide .mainNewsSlide .el .wrap_in .cate{ padding:.5em 1em; background:#e60013; color:#fff; font-weight:700; position:absolute; left:0; top:0}
.main_customer .wrap_slide .mainNewsSlide .el .wrap_in .t1{ font-weight:700; font-size:1.313em; transition:all .3s}
.main_customer .wrap_slide .mainNewsSlide .el .wrap_in .t3{ color:#999; font-size:.938em}
.main_customer .wrap_slide .list{ display:flex; margin:-.5em; margin-top:4em; position:relative; z-index:1}
.main_customer .wrap_slide .list > li{ flex:1}
.main_customer .wrap_slide .list > li > a{ display:flex; flex-direction:column; align-items:center; gap:1em 0; border:1px solid #ddd; margin:.5em; box-sizing:border-box; padding:1em; border-radius:.5em; transition:all .3s}
.main_customer .wrap_slide .list > li > a .ico{ height:2.5em}
.main_customer .wrap_slide .list > li > a .t1{ font-weight:500; font-size:1.063em}
.mainNewsSlide_control{ gap:0 .25em}
.mainNewsSlide_control .paging{ margin:0 1em}
.main_customer .wrap_slide .mainNewsSlide .el:hover .wrap_in .t1{ text-decoration:underline}
.main_customer .wrap_slide .list > li:hover > a{ border-color:var(--red)}

.main_etc{ display:flex; background:#222}
.main_etc > li{ flex:1}
.main_etc > li .wrap_in{ height:22em; position:relative; overflow:hidden}
.main_etc > li .wrap_in .bg{ position:absolute; left:0; top:0; width:100%; height:100%; transition:all .8s}
.main_etc > li .wrap_in .bg:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background: linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));}
.main_etc > li .wrap_in .con{ position:relative; padding:2em 4vw; height:100%; box-sizing:border-box}
.main_etc > li .wrap_in .con .viwe_more_wrap{/* margin-left:20px; */}
.main_etc > li .wrap_in .con .viwe_more{font-size:1.125em;color:#fff;font-weight: 100;}
.main_etc > li .wrap_in .con .viwe_more .icon{width: 40px;height: 40px;margin-right: 5px;background-repeat:no-repeat;background-position:0 0;background-size:cover;}
.main_etc > li .wrap_in .con .viwe_more .xi{ transition:all .3s}
.main_etc > li .wrap_in .con .more_btn{width: 3em;height: 3em;border-radius:50%;border:1px solid #fff;position: absolute;right: 5vw;}
.main_etc > li .wrap_in .con .more_btn .xi{ font-weight:300; font-size:1.25em; color:#fff;}
.main_etc > li:hover .wrap_in .bg{ transform:scale(1.1, 1.1)}
.main_etc > li:hover .wrap_in .con .more_btn{ background:#fff;}
.main_etc > li:hover .wrap_in .con .more_btn .xi{ color:var(--red);}
.main_etc > li .wrap_in .con .viwe_more:hover .xi{ color:var(--red);}
/*.main_product{ position:relative; ; overflow:hidden}
.main_product .wrap_obj{ position:absolute; left:0; top:0; width:40vw; height:100%; background-attachment:fixed; opacity:.15}
.main_product .wrap_obj img{ width:100%}
.main_product .wrap_bg{ position:absolute; left:0; bottom:0; width:100%; height:40vh; background-attachment:fixed}
.main_product .wrap_bg:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:100%}
.main_product .wrap_bg .text{ position:absolute; left:0; bottom:0; width:100%; filter:brightness(0) invert(1); mix-blend-mode: soft-light; display:flex; justify-content:flex-end; gap:0 5em}
.main_product .wrap_bg .text .t1{ color:#fff; font-size:6em; word-spacing:.063em; white-space:nowrap; line-height:1}
.main_product .wrap_con{ width:100%; box-sizing:border-box }
.main_product .wrap_con .wrap_search{ background:var(--red); padding:1em 0 4em 0; box-sizing:border-box; color:#fff; position:relative; margin-top:2em}
.main_product .wrap_con .wrap_search .roundObj{ position:absolute; bottom:100%; left:0; transform:translateY(1px)}
.main_product .wrap_con .wrap_search .roundObj .objWrap{ width:50vw}
.main_product .wrap_con .wrap_search .search{ display:flex; align-items:center}
.main_product .wrap_con .wrap_search .inp_wrap{ display:flex; align-items:center; gap:0 .5em; border-bottom:1px solid #fff; flex:1; max-width:calc(50% - 20px)}
.main_product .wrap_con .wrap_search .inp_wrap .ico{ font-size:1.5em}
.main_product .wrap_con .wrap_search .inp_wrap .inp{ background:none; border:none; flex:1 1 0%; min-width:0; font-size:1.25em; flex:1}
.main_product .wrap_con .wrap_search .inp_wrap .inp::placeholder{ color:#fff !important}
.main_product .wrap_con .wrap_search .inp_wrap .btn{ width:4em; height:4em; border:none; background:#fff; color:#002c60; border:none; transform:translateY(1px)}
.main_product .wrap_con .wrap_search .keyword{ margin-left:auto}
.main_product .wrap_con .wrap_search .keyword .tit{ font-size:1.25em; font-weight:700}
.main_product .wrap_con .wrap_search .keyword .list{ display:flex; flex-wrap:wrap; gap:0 2em; margin-top:.75em}
.main_product .wrap_con .wrap_search .keyword .list > li > a{ border:1px solid rgba(255,255,255,.1); border-radius:1em; font-size:1.063em; position:relative}
.main_product .wrap_con .wrap_search .keyword .list > li > a:after{ content:""; position:absolute; left:0; top:100%; width:calc(100% + .5em); height:.25em; background:rgba(255,255,255,.5); transform:scaleX(0)}
.main_product .wrap_con .wrap_search .keyword .list > li > a:hover:after{ transform:scaleX(1); transition:.3s}
.main_product .wrap_con .wrap_search .keyword .list > li > a .hash{ margin-right:.25em}
.main_product .wrap_con .wrap_prod{ position:relative}
.main_product .wrap_con .wrap_prod .mainProdSlide .el{ box-sizing:border-box; padding:.5em}
.main_product .wrap_con .wrap_prod .mainProdSlide .el .prodSt{ background:#fff; box-shadow:0 0 .5em rgba(0,0,0,.1); padding:1.5em}
.main_product .wrap_con .wrap_prod .mainProdSlide .el .prodSt .con{ padding:2em 1em 0 1em; position:relative}
.main_product .wrap_con .wrap_prod .mainProdSlide .el .prodSt .con .cate{ padding:.25em 1em; background:#002c61; position:absolute; left:1em; bottom:calc(100% - .75em); color:#fff; font-weight:500}
.main_product .wrap_con .wrap_prod .mainProdSlide .el .prodSt .con .t1{ font-weight:500; font-size:1.25em}

.main_news{ background:#F5F5F5}
.main_news .list{ display:flex; flex-wrap:wrap; margin:-.75em}
.main_news .list > li{ width:16.66%}
.main_news .list > li .wrap_in{ position:relative; margin:.75em; overflow:hidden; background:#fff}
.main_news .list > li .wrap_in .img{ position:relative; overflow:hidden}
.main_news .list > li .wrap_in:hover .img .resize{ transform:scale(1.1); transition:1s}
.main_news .list > li .wrap_in .con{ box-sizing:border-box; padding:1em; display:flex; flex-direction:column; gap:.75em 0}
.main_news .list > li .wrap_in .con .t1{ font-weight:500; font-size:1.125em}
.main_news .list > li .wrap_in .con .t2{ color:#666}
.main_news .list > li .wrap_in:hover{ box-shadow:0 0 1em rgba(0,0,0,.1)}
.main_news .list.d1 > li{ width:33.33%}
.main_news .list.st1 > li .wrap_in{ border:1px solid #eee}
.main_news .new_etc_wrap{ display:flex; justify-content:space-between; margin-top:3em}
.main_news .new_etc_wrap .main_tit{ margin:1em 3em 0 1.5em; max-width:20em}
.main_news .new_etc_wrap .wrap_con{ flex:1 1 0%; min-width:0}
.main_news .new_etc_wrap .list > li .wrap_in .con{ padding:1.5em}

.main_link{ display:flex; justify-content:center; margin:-.5em; padding:2em 0}
.main_link > li{ flex:1; max-width:14em}
.main_link > li > a{ display:flex; height:14em; margin:.5em; text-align:center; justify-content:center; align-items:center; flex-direction:column; background:#fff; box-sizing:border-box; opacity:.9; transition:.3s}
.main_link > li > a .in .ico{ display:block; margin-bottom:2em; height:3.5em; filter:grayscale(1) brightness(.5)}
.main_link > li > a .in .ico img{ height:100%}
.main_link > li > a .in .t1{ font-weight:500; font-size:1.25em}
.main_link > li > a:hover{ background:#002c60; transform:translateY(-.5em); color:#fff}
.main_link.c1 > li > a:hover{ background:var(--red)}
.main_link > li > a:hover .ico{ filter:brightness(0) invert(1)}

.main_panel{ position:relative; height:100%; display:flex; box-sizing:border-box; align-items:center; justify-content:center}
.main_panel .wrap_bg{ position:absolute; left:0; top:0; width:100%; height:100%}
.main_panel .wrap_bg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.3); transition:.3s}
.main_panel .wrap_con{ position:relative; width:100%; box-sizing:border-box; padding:0 5em}

#panels{ position:relative}*/

/* sub */
.sub_tit {}
.sub_tit .t1{ font-size:1.8em; font-weight:600; color:#333; margin-bottom:.2em; position:relative;/* display:inline-block;*/}
/*.sub_tit .t1:before {content:""; position:absolute; left:100%; bottom:100%; width:.375em; height:.375em; border-radius:50%; background:var(--red);}*/
.sub_tit .t2{font-size:1.125em;/* font-weight:600; */margin-bottom:2em; color:#09f; position:relative; /*display:inline-block;*/}
/*.sub_tit .t2:before {content:""; position:absolute; left:100%; bottom:100%; width:.375em; height:.375em; border-radius:50%; background:var(--red);}*/
.sub_tit .line{ width:50px; height:1px; margin:20px auto; background-color:#777;}
 
.tit_box .t1 { font-size:2rem;font-weight: 700; letter-spacing: -1.8px; line-height: 1.5; position:relative; display:inline-block;}  
.tit_box .t1:before {position:absolute; bottom: 0; right: -14%; content:''; width:.275em; height:.275em; background-color:var(--red); border-radius:50%;}
.tit_box .t2{margin-top: 0.625rem; font-size: 1.25rem; line-height: 1.2;}
.tit_box .t3 {font-size: 1.125rem; color: #111; margin-top:1em; margin-bottom:3em;}


.sub_tt {/*font-size:1em; margin-bottom:.5em;*/}
.sub_tt.tit1{ margin-bottom:40px; font-weight:700; font-size:2.125em; color:#111; letter-spacing:-1px;}
.sub_tt.icon1{ position: relative;}
.sub_tt.icon1::before{content:'';width: 10px;height: 10px;border: 5px solid var(--red);border-radius:50%;position: absolute;right: -12px;top: -5px; z-index:-1; opacity:.6}

.sub_tt.tit2{ margin-bottom:40px; font-weight:700; font-size:1.25em; letter-spacing:-1px;}

.sub_tt.t1 { margin-bottom:1em; padding-left:12px; font-size:1.5em; font-weight:600; color:#333; position:relative; display:inline-block;}
.sub_tt.t1:before { content:''; width:4px; height:22px; background-color:var(--red); position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:.7}
.sub_tt.t1:not(:first-child){ margin-top:1em;}
.sub_tt.t2 { font-size:1.5em; color:#333}
.sub_tt.t3 { /*margin-bottom:15px; */padding-left:15px; font-size:1em; line-height:1.4; position:relative}
.sub_tt.t3:last-child{ margin-bottom:0}
.sub_tt.t3:before{ content:''; width:5px; height:5px; background-color:var(--red); position:absolute; left:0; top:9px;}
.sub_tt.t4{ font-size: 1.25em; line-height: 1.6;}
.sub_tt.t5{ font-size:.875em}

.sub_tt.dot{ margin-bottom:20px; padding-left:20px; font-size:1.125em; color:#333; line-height:1.6; position:relative;}
.sub_tt.dot::before{ content:''; width:5px; height:5px; border:3px solid var(--red); border-radius:50%; position:absolute; left:0; top:10px;}
.sub_tt.dot2{ margin-bottom:5px; padding-left:20px; font-size:1.125em; line-height:1.6; color:#555; position:relative;}
.sub_tt.dot2::before{content:'';width:5px;height:5px;border:3px solid #aaa; border-radius:50%;position:absolute;left:0;top: 10px;}
.sub_tt.dot3{ padding-left:1.2em; font-size: 1.75em; color:#333; position: relative;}
.sub_tt.dot3:before{ content:""; width:16px; height:22px; background:url(../images/sub/tt_img1.png) no-repeat 0 0 / cover; position:absolute; left:9px; top:8px;}

/* tab button */
.list_tab{width:100%;/*margin-bottom:1.5em;*/position:relative;/* gap: 0 1em; */}
.list_tab::after{/* content:''; */width:100%;height:1px;background:#ddd;position:absolute;bottom:0;}
.list_tab > li{flex:1 1 100%;max-width:15%;padding:0 2em;box-sizing:border-box;border: 1px solid #eee;position:relative;background: #eee;transition: all ease .3s;}
.list_tab > li::before{/* content:''; */width:4px;height:4px;border-radius:50%;background:#9f0911;position: absolute;top: 50%;left: 0;transform:translateX(-50%)}
.list_tab > li:nth-child(1)::before{ display:none;}
.list_tab > li a{padding: .8em 0;font-size: 1.25em;color: #666;text-align:center;transition: .3s;position:relative;}
.list_tab > li a p::after{content:'';width:100%;height:4px;background:#a6c108;position:absolute;left:0;bottom:0;opacity:0;transform:scale(0,0%);transition:all .3s;}

.list_tab > li.on > a::after{ opacity:1; transform:scale(100%, 100%);}
.list_tab > li.on{ background-color:var(--red);}
.list_tab > li.on , 
.list_tab > li:hover{border-color:var(--red);}
.list_tab > li.on a{ color:#fff;} 

/**/
.list.st1{ gap:1em}
.list.st1 > li{ width:calc( (100% - 2em) / 3); padding:2em 2.5em; box-sizing:border-box; border:1px solid #ddd; position:relative}
.list.st1 > li::after{ content:''; width:20px; height:20px; border-top:2px solid var(--red); border-right:2px solid var(--red); position:absolute; right:-1px; top:-1px;}
.list.st1 > li .tit{ margin-bottom:20px; font-weight:600; font-size:1.375em; letter-sapcing:-1px; color:#333;}
.list.st1 > li .tit > span{ display:block; margin-bottom:5px; color:var(--red)}
.list.st1 > li .desc{ font-size:1.125em; line-height:1.6; letter-sapcing:-1px; color:#555;}

.con_wrap .wrap_in{ padding:4em 6em; border: 1px solid #ddd; position:relative}
.con_wrap .wrap_in::before{ content:''; width:20px; height:20px; border-top:2px solid var(--red); border-right:2px solid var(--red); position:absolute; right:-1px; top:-1px;}
.con_wrap .wrap_in::after{ content:''; width:20px; height:20px; border-bottom:2px solid var(--red); border-left:2px solid var(--red); position:absolute; left:-1px; bottom:-1px;}
.con_wrap .wrap_in .quote{ margin-left:15px; padding:1em 2em 1.2em; background-color:#f6f6f6; font-size:1rem; color:#555;}
.con_wrap .wrap_in .img_wrap img{ box-shadow:3px 3px 5px rgba(0, 0, 0, .1)}

/** 회사소개 **/
/*ceo 인사말*/
.introduction{ text-align:right; position:relative;}
.introduction > .box1{position:relative;}
.introduction p{ line-height:1.7; text-align:left;}
.introduction .top .profile_img{width: calc( 50% - 40px);position:absolute;left:0;top:0;z-index:2;text-align:left;color:#111;height: 470px;}
.introduction .top .profile_img img{display:block;object-fit:cover;width: 100%;height: 100%;}
.introduction .top .slogan{ display:inline-block; width:50%; padding:100px 0 50px 10px; box-sizing:border-box; background:#fff url(../images/sub/slogan_pattern.png) no-repeat right top; position:relative; z-index:1;}
.introduction .top .slogan .t1{ font-size:2.125em;line-height:1.3; color:#111;}
.introduction .top .slogan .t1 span{ display:inline}
.introduction .gradation{ padding:40px 0; background: linear-gradient(135deg,  #c0020e 0%, #ae0000 100%); color:#fff; position:relative; z-index:1;}
.introduction .gradation .grtt{padding-left: calc(50% + 15px);font-size: 1.25em;}
.introduction .bottom .grstt{ gap:0 3em; width: 100%; padding-top:100px;}
.introduction .bottom .grstt p{ width:50%; font-size:1.125em; color: #555;}
.introduction .bottom .ceo{ float: right; margin-top:3em; margin-right:2em; color: #111; position: relative;}
.introduction .bottom .ceo em{ font-size: 18px; /*position: absolute;*/}
.introduction .bottom .ceo b{ font-size: 34px; margin-left: .7em;}

/* 회사개요*/
/* 회사개요 - 미션&비전*/
.mission_dia{ margin-top:50px;}
.mission_dia .tit{ width:20em; height:4em; margin:0 auto; border-radius:10em; background-color:var(--red); font-weight:600; font-size:1.375em; line-height:4em; color:#fff; text-align:center;}
.mission_infog{ display:flex; justify-content:center; margin:2em 0;}
.mission_infog > li{ width:320px;height:320px; margin:0 1em; padding:2em; box-sizing:border-box; border-radius:50%; background-repeat:no-repeat ;background-position:center center; background-size:cover; position:relative; border: 7px solid #fff;}
.mission_infog > li:nth-child(1){ background-image:url(../images/sub/mission_bg01.jpg)}
.mission_infog > li:nth-child(2){ background-image:url(../images/sub/mission_bg02.jpg)}
.mission_infog > li:nth-child(3){ background-image:url(../images/sub/mission_bg03.jpg)}
.mission_infog > li::after{content:''; width:165px; height:165px; border-radius: 0 0 200px 0; position:absolute; right:-10px; bottom:-10px;z-index:-1;background: var(--red);}
.mission_infog > li .icon{ width:80px; height:80px; margin-bottom:10px; background-repeat:no-repeat; background-position:center; background-size:cover; }
.mission_infog > li:nth-child(1) .icon{ background-image:url(../images/sub/mission_icon01.png)}
.mission_infog > li:nth-child(2) .icon{ background-image:url(../images/sub/mission_icon02.png)}
.mission_infog > li:nth-child(3) .icon{ background-image:url(../images/sub/mission_icon03.png)}
.mission_infog > li .tt{ font-weight:500; font-size:1.325em; color: #fff; text-align: center;}
.con_wrap.vision{ padding:60px 0 80px; background:url(../images/sub/vision_bg.jpg) no-repeat 0 0 / cover; position:relative;}
.con_wrap.vision .sub_tt.tit1{ color:#fff;}
.vision_list{/* padding-top:20px*/}
.vision_list li{ width:25%;}
.vision_list li .icon{ display:flex; justify-content:center; align-items:center; width:100px; height:100px; border-radius:50%; background-color:var(--red);}
.vision_list li .icon img{ width:50px; height:50px; object-fit:cover;}
.vision_list li .num{ margin-bottom:15px; font-weight:600; font-size:3em; color:var(--red); text-align:center;}
.vision_list li .tt{ font-weight:500; font-size:1.25em; line-height:1.6; color:#fff; text-align:center; /*text-shadow:0 1px 1px rgba(255, 255, 255, .25)*/}
.value_list{ gap:3em;}
/*.value_list li{ padding-top:20px}*/
.value_list li .txt_wrap{ padding:60px 50px 0; text-align:center; position:relative}
.value_list li .txt_wrap .icon{ width:100px; height:100px; box-sizing:border-box; border:8px solid #fff; border-radius:50%; position:absolute; left:50%; top:-50px; transform:translateX(-50%)}
.value_list li:nth-child(odd) .txt_wrap .icon{ background-color:var(--red);}
.value_list li:nth-child(even) .txt_wrap .icon{ background-color:#333;}
.value_list li .txt_wrap .icon img{ width:50px; object-fit:cover;}
.value_list li .txt_wrap .tit{ margin-bottom:15px; font-weight:600; font-size:1.5em; color:#333;}
.value_list li .txt_wrap .tt{ font-size:1.125em; line-height:1.5; color:#555; }
.value_list li .bg{ order:-1; height:15em; background-repeat:no-repeat; background-position:center 0; background-size:cover}
.value_list li:nth-child(1) .bg{ background-image:url(../images/sub/value_bg01.jpg)}
.value_list li:nth-child(2) .bg{ background-image:url(../images/sub/value_bg02.jpg)}
.value_list li:nth-child(3) .bg{ background-image:url(../images/sub/value_bg03.jpg)}

/* 회사개요 - 회사연혁*/
/* history 상단 타이틀 */
.history-top-box{display: flex; justify-content:space-between; align-items:center; margin-bottom:140px;}
.history-tit{font-size:74px; line-height:1.1; letter-spacing:-0.025em; font-weight:700; color:#5e5e5e; width:63.6%;}
.history-tit span{display: block; color:var(--red); padding-left:60px;}
/* history 컨텐츠 */
.history-page .sub-tab-con{margin-bottom:180px;}
.history-page .sub-tab-con:last-child{margin-bottom:0px;}
.history-tab-box{display: flex; justify-content:space-between; margin-bottom:60px;  /*align-items:flex-end;*/}
.history-tab-box .img-box{ width:42.3%; padding-bottom:30%; background-repeat:no-repeat; background-position:center 30%; background-size:cover;}/*.history-tab-box .img-box img{max-width:100%;}
*/.history-tab-box .history-con-box{ width:57.7%; margin:50px 0 50px; box-sizing:border-box;}
.history-tab-box .history-con-box .history-tit{color:#e8e8e8; margin-bottom:50px;}
.history-con-box .history-year-box{position: relative;}
.history-con-box .history-year-box:before{position: absolute; content:''; width:2px; height:calc(100% - 8px); left:0; bottom:0; background:#099fe7;}
.history-con-box .history-year-box .history-item{position: relative; margin-bottom:21px;}
.history-con-box .history-year-box .history-item:last-child{margin-bottom:0;}
.history-con-box .history-year-box .history-item .history-year{position: absolute; top:0; left:15px; width:120px; font-size:19px; line-height:1.75; letter-spacing:-0.025em; font-weight:600; color:#099fe7;}
.history-con-box .history-year-box .history-item .history-txt-con{padding-left:120px;}
.history-con-box .history-year-box .history-item .history-txt-con .txt{font-size:16px; line-height:1.75; letter-spacing:-0.025em; color:#5e5e5e; margin-bottom:10px;}
.history-con-box .history-year-box .history-item .history-txt-con .txt:last-child{margin-bottom:0;}
/* 오른쪽 텍스트 */
.history-tab-box.right-box .history-con-box {padding-left:140px;}
/* 왼쪽 텍스트 */
.history-tab-box.left-box{flex-direction: row-reverse}
.history-tab-box.left-box .history-con-box {padding-right:140px;}

/* history 탭스타일 */
.history-tab-wrapper-style{width:36.4%;}
.history-tab-list-style ul{display:flex; align-items:center; flex-wrap:wrap; gap:.5em;}
.history-tab-list-style ul li{position: relative; width:18%;}
.history-tab-list-style ul li a{display: block; position: relative; width:100%; height:0; padding-top:100%; overflow:hidden; border-radius:50%; transition:all 0.4s;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a3e6+0,7673f9+100 */
background: #00a3e6; /* Old browsers */
background: -moz-linear-gradient(27deg,  #e60000 0%,#9d0606 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(27deg,  #e60000 0%,#9d0606 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(-153deg,  #e60000 0%,#9d0606 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3e6', endColorstr='#7673f9',GradientType=1 ); /* IE6-9 */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a3e6+0,7673f9+100 */
}
.history-tab-list-style ul li a em{position: absolute; width:calc(100% - 2px); height:calc(100% - 2px); top:1px; left:1px; display: flex; justify-content:center; align-items:center; font-size:20px; letter-spacing:-0.025em; color:var(--red); background:#fff; font-weight:700; border-radius:50%; transition:all 0.4s;}

.history-tab-list-style ul li a:hover,
.history-tab-list-style ul li.selected a{box-shadow: 3px 5px 8px 0px rgba(0, 0, 0, 0.2);}
.history-tab-list-style ul li a:hover em,
.history-tab-list-style ul li.selected a em{background:transparent; color:#fff;}

/*회사개요 - 조직도*/
.org_img{ display:block; margin:0 auto}

.org_slogan{ margin-bottom:80px; font-weight:700; font-size:2.5em; line-height:1.2; color:#555; letter-spacing:-2px}
.org_slogan .c_point{ font-size:1.2em; position:relative}
/*.org_slogan .c_point::after{ content:''; width:100%; height:10px; background:var(--red); opacity:.3; position:absolute; right:-4px; bottom:-4px; }*/
.org{ padding:0 5em; box-sizing:border-box;/* border:1px solid #ddd;*/}

/*특화사업분야*/
.business_top_wrap{}
.business_top_wrap .txt_box{ width:50%; padding-right:60px;}
.business_top_wrap .txt_box .tit{ padding-top:15px; padding-left:5px; border-top:1px solid #ddd; font-weight:600; font-size:2em;}
.business_top_wrap .txt_box .tit::after{ content:''; width:50px; height:1px; background:var(--red); position:absolute; left:0; top:-1px;}
.business_top_wrap .txt_box .desc{ margin:4em 0 2em;}
.business_top_wrap .txt_box .desc .t1{ margin-bottom:15px; font-weight:500; font-size:1.5em; color:#333;}
.business_top_wrap .txt_box .desc .t2{font-size: 1.125em;line-height:1.6;color:#555;}
.business_top_wrap .img_box{ width:50%; padding-bottom:25%; background:url(../images/sub/business_top_global.jpg) no-repeat 0 40% / cover; box-shadow:20px 20px 50px rgba(0, 0, 0, .15); position:relative}
.business_top_wrap .img_box.cs{ background:url(../images/sub/business_top_cs.jpg) no-repeat 0 40% / cover;}
.business_top_wrap .img_box::before{ content:''; width:2em; height:2em; border:1em solid var(--red); border-radius:50%; position:absolute; right:-2em; top:2em;}
.business_top_wrap .img_box::after{content:'';width:100%;height:100%;background-color:#eee;position:absolute;left: -20px;bottom: -20px;z-index:-1}

/*.plant_cert{ gap:0 3em;}
.plant_cert > li{ width:calc( (100% - 9em) / 4)}
.plant_cert > li img{ margin-bottom:10px; object-fit:cover; box-shadow:1px 1px 10px rgba(0, 0, 0, .1)}
.plant_cert > li span{ font-weight:500; font-size:1.125em; color:#555;}
.plant_record{ gap:2em;}
.plant_record > li{ width:calc( (100% - 4em) / 3)}
.plant_record > li img{ width:100%; object-fit:cover;}
.plant_record > li .tt{ margin-top:15px; font-size:1.125em; color:#555;}*/

.business_list{}
.business_list > li{ margin-bottom:70px;}
.business_list > li:last-child{ margin-bottom:20px}
.business_list > li .txt_box{ width:65%; padding-top:3em;}
.business_list.cs > li .txt_box{ width:60%;}
.business_list > li:nth-child(odd) .txt_box{ padding-left:60px; }
.business_list > li:nth-child(even) .txt_box{ padding-right:60px}
.business_list > li .txt_box .num{ margin-bottom:20px; font-weight:600; font-size:1.5em; color:var(--red)}
.business_list > li .txt_box .t1{ font-size:1.125em; color:#555; line-height:1.6; }
.business_list > li .img_box{ width:35%; position:relative}
.business_list.cs > li .img_box{ width:40%}
.business_list > li .img_box img{ width:100%; height:100%; object-fit:cover;}
.business_list > li .img_box::after{ content:''; width:100%; height:100%; background:#f4f4f4; position:absolute; bottom:-20px; z-index:-1}
.business_list > li:nth-child(odd) .img_box{ order:-1}
.business_list > li:nth-child(odd) .img_box img{ border-radius:2em 0 2em 0;}
.business_list > li:nth-child(even) .img_box img{ border-radius:0 2em 0 2em;}
.business_list > li:nth-child(odd) .img_box::after{ border-radius:2em 0 2em 0; right:-20px; }
.business_list > li:nth-child(even) .img_box::after{ border-radius:0 2em 0 2em; left:-20px; }

/*인재채용*/
.recruit_list{ height:400px; margin: 0 10%; position:relative}
.recruit_list > li{ width:400px; height:400px; padding:2em 4em; box-sizing:border-box; border:5px solid; border-radius:50%; background-color:rgba(255, 255, 255, .05); backdrop-filter:blur(5px); position:absolute; top:0}
.recruit_list > li:nth-child(1){ border-color:var(--red); right:50%; transform:translateX(-140px)}
.recruit_list > li:nth-child(2){ border-color:#333; left:50%; z-index:1; transform:translateX(-50%)}
.recruit_list > li:nth-child(3){ border-color:var(--red); left:50%; transform:translateX(140px)}
.recruit_list > li .txt_wrap{ text-align:center}
.recruit_list > li .txt_wrap .icon{margin: 40px 0 25px;filter: invert(1) opacity(0.35);}
.recruit_list > li .txt_wrap .icon img{width: 75px;}
.recruit_list > li .txt_wrap .tit{ margin-bottom:20px; font-weight:600; font-size:1.5em; color:#333;}
.recruit_list > li .txt_wrap .tt{ font-size:1.125em; color:#555;}

.vision_list{ gap:2em}
.vision_list > li{ display:flex; flex-direction:column; align-items:center; width:calc( (100% - 6em) / 4); padding:3em 2em; box-sizing:border-box; border:1px solid #ddd; position:relative;}
.vision_list > li::after{ content:''; width:20px; height:20px; border-top:2px solid var(--red); border-right:2px solid var(--red); position:absolute; right:-1px; top:-1px;}
.vision_list > li img{ display:block; height:70px; }
.vision_list > li .tit{ margin-top:20px; font-weight:500; font-size:1.3em; color:var(--red); opacity:.8; text-align:center}
.vision_list > li .tt{ font-weight:400; font-size:1em; color:#fff; text-align:center}

.recruit_table{ width:100%; border-top:1px solid #555; border-bottom:1px solid #ddd}
.recruit_table th , 
.recruit_table td{ height:4em; padding:.5em 3em; box-sizing:border-box}
.recruit_table th{ background-color:var(--red); font-weight:600; font-size:1.125em; color:#fff; border-bottom:1px solid #fff; }
.recruit_table tr:last-child th{ border-bottom:none;}
.recruit_table td{ border-bottom:1px solid #ddd; font-size:1.125em; line-height:1.6; color:#333;}
.recruit_table tr:last-child td{ border-bottom:none;}

/*오시는길*/
.root_daum_roughmap .map_border{ display: none !important; }
.root_daum_roughmap .wrap_controllers{ display: none !important; }

.sub_location .con01{}
.con01 .box1{ position: relative; }
.con01 .box1:before{ content:''; width: 80px; height: 80px;border: 20px solid var(--red);border-radius:50%;position: absolute;right: -30px;top: -50px;z-index: -1;}
.sub_location .con01 .map_wrap{ border-radius: 0 100px 0 0; overflow: hidden; position: relative; box-shadow: 47px 47px 87px rgba(14,14,14,0.15);}
.sub_location .con02{margin-top: 50px;}
.sub_location .con02 .location_info{}
.sub_location .con02 .location_info .d_logo{ width:350px}
.sub_location .con02 .location_info .d_logo img{}
.sub_location .con02 .location_info > ul{ width:calc( 100% - 350px); padding-left:100px; box-sizing:border-box; position:relative;}
.sub_location .con02 .location_info > ul::before{content: "";display: block;width: 1px;height: 150%;background-color:var(--red);position: absolute;left: 50px;top: -120%;}
.sub_location .con02 .location_info > ul li{ width:50%; margin-bottom:30px;}
.sub_location .con02 .location_info > ul li dl{ padding-left:50px; }
.sub_location .con02 .location_info > ul li dl dt{float: left; font-size: 20px; font-weight: 500; color:var(--red); letter-spacing: -1px; margin-right: 20px; line-height: 24px;}
.sub_location .con02 .location_info > ul li dl dd{  font-size: 18px; font-weight: 300; color:#666666; float: left; line-height: 24px;}



/* 검색 */

.pro_search_wrap {padding-bottom: 1em; border-bottom: 2px solid var(--red);margin-bottom: 4em;}
.search_area {overflow: hidden;margin-bottom: 0.5em;}
.search_area .search_box {overflow: hidden;position: relative;float: right;width: 100%;max-width: 400px;}
.search_area .search_box input[type=text] {float: left;width: 400px;height: 60px;margin: 0;padding: 0 55px 0 20px;box-sizing: border-box;border: transparent;border-bottom: 1px solid #dcdcdc;border-left: 0;font-weight: 400;letter-spacing: -0.03em;}
.search_area .search_box input[type=button] {display: block;position: absolute;border: 0; no-repeat;background-position: 100% 0;background-size: 100%;text-indent: -9999px;cursor: pointer;}

/* PRODUCT ///////////////////////////////////////////////////////////////////////////////////*/
/*product_top*/
/*.product_top_wrap{ margin-bottom:80px;}
.product_top_wrap .top_tit{ padding:0 .5em; position:relative;}
.product_top_wrap .top_tit em.tba{ padding-bottom:.875em; font-weight:700; font-size:1.125em; color:var(--red); position: relative;}
.product_top_wrap .top_tit em::before{ content:''; display: inline-block; width: 19px; height: 2px; background:var(--red); position: absolute; left: 0; bottom: 0;}
.product_top_wrap .top_tit .ttx > p{ margin:40px 0 66px; font-weight:700; font-size:2.875em; line-height:1.1;color: #111;}
.product_top_wrap .top_tit .img{ width: 750px; height: 400px; box-sizing:border-box; position:absolute; right:0; top:0; z-index:1;}
.product_top_wrap .top_tit .img > p{ height:100%;}
.product_top_wrap .top_tit .img img{ width: 100%; height:100%; object-fit:cover}
.product_top_wrap .top_desc{ height:250px; background:linear-gradient(90deg, #f4f4f4 50%, #ddd 50%); position:relative; overflow:hidden;}
.product_top_wrap .top_desc > div{ height:100%;}
.product_top_wrap .top_desc .right{ width:50%; padding:2.5em 1.5em 2.5em .5em; box-sizing:border-box; background:#f4f4f4 url(../images/sub/product_bg.png) no-repeat 130% -100px / contain; position:relative; z-index:1;}
.product_top_wrap .top_desc::after{content:'';width: 170px;height: 170px;background: url(../images/sub/product_bg.png) no-repeat 0 0 / contain;position:absolute;left: 48%;bottom: -20px;}
*/

/*product_list*/
.product_list{gap: 2em;/* padding:.5em 0; */}
.product_list > li{width: calc( (100% - 4em) / 3); box-sizing:border-box; border: 1px solid #ddd; border-radius:.8em; transition:all ease .3s;position:relative;}
.product_list > li .list_img{ width:100%; height:70%; padding:2em; box-sizing:border-box; border-bottom:none;}
.product_list > li .list_img img{ max-width:100%; height:100%; margin:auto; object-fit:contain;}
.product_list > li .list_info{ display:flex; flex-direction:column; gap:10px; width:100%; height:30%; padding:2em 1.5em; box-sizing:border-box; border-radius:0 0 .8em .8em; background-color:#f3f3f3;}
.product_list > li .list_info .t1{ font-weight:500; font-size:1.125em; line-height:1.4; color:var(--red); text-align:center; word-break:keep-all;  transition:all ease .3s}
.product_list > li .list_info .t2{ order:-1; font-weight:700; font-size:2.125em; color:#333; text-align:center; transition:all ease .3s;}
.product_list > li:hover {  box-shadow:2px 2px 5px rgba(0, 0, 0, .1)}
.product_list > li:hover .list_info{ background-color:#333}
.product_list > li:hover .list_info .t1{ color:#fff}
.product_list > li:hover .list_info .t2{ color:#fff; opacity:.75}

/*product_list s2*/
.product_list.st2{gap: 5em;/* padding:.5em 0; */}
.product_list.st2 > li{ display:flex; width: 100%; padding:0; box-sizing:border-box; background:#f4f4f4;transition:all ease .3s;position:relative;}
.product_list.st2 > li .list_img{width: 40%;padding: 3em 5em;box-sizing: border-box;overflow: hidden;}
.product_list.st2 > li .list_img img{max-width:100%;margin:auto;object-fit: contain;}
.product_list.st2 > li .list_info{ width: 60%;/* margin-top:25px; */padding: 3em 3em 3em 0;}
.product_list.st2 > li .list_info .t1{ font-weight:700; font-size:2em;color:#333; text-align:left; transition:all ease .3s;margin-top: 10px;}
.product_list.st2 > li .list_info .t2{/* margin-top:20px; */font-size:1.375em;color: var(--red); text-align:left; transition:all ease .3s}
.product_list.st2 > li::after{ display:none}
.product_list.st2 > li:hover::after{ opacity:1}
.product_list.st2 > li:hover{ /*border:1px solid var(--red); */box-shadow:2px 2px 15px rgba(0, 0, 0, .25)}


/* 제품상세페이지 */
.view_top{}
.view_top .top_img{ width:45%; border:1px solid #ddd;}
.view_top .top_img .prodview_slide{ width:100%; height:100%; position:relative} 
.view_top .top_img .prodview_slide .swiper-slide{ padding:40px 60px; box-sizing:border-box;}
.view_top .top_img .prodview_slide .swiper-slide img{ display: block; width: 100%; height: 100%; object-fit:contain}
.view_top .top_img .prodview_slide .swiper-pagination{ bottom:2em}
.view_top .top_img .prodview_slide .swiper-pagination .swiper-pagination-bullet-active{ width:.625em}
.view_top .top_info{ width:55%; padding-left:60px}
.view_top .top_info .prod_tit{ padding:3em 0; border-bottom:2px solid #333;}
.view_top .top_info .prod_tit .t1{ font-weight:700; font-size:2.125em; color:#333;}
.view_top .top_info .prod_tit .t2{ margin-bottom:10px; font-size:1.25em; color:#777;}
.view_top .top_info .prod_info{ padding:2em 1.2em 1em; border-bottom:1px solid #ddd;}
.view_top .top_info .prod_info .info_spec{ margin-top:60px; padding:40px 0; border-top:1px solid #111; border-bottom:1px solid #ddd;}
.view_top .top_info .prod_info .info_spec > li{ width:25%;}
.view_top .top_info .prod_info .info_spec > li img{ width:60px; height:47px; margin-bottom:10px; object-fit:cover;}
.view_top .top_info .prod_info .info_spec > li .tt{ font-size:.875em; color:#555;}
.view_top .top_info .prod_info .info_list > span{ color:#555}
.view_spec .con_wrap{ padding:5em 0; box-sizing:border-box; background:#f4f4f4;}
.view_spec .con_wrap .img{ display:flex; justify-content:center; width:100%;}
.view_spec .con_wrap .img img{ }

.view_other{}
.view_other .sub_tt.tit1{ margin-bottom:0; padding-top:2em; border-top:8px solid #eee;}
.view_other .box2{ overflow:hidden}
.view_other .other_slide .swiper-slide{ padding:40px 0; box-sizing:border-box; border:1px solid #ddd;}
.view_other .other_slide .swiper-slide .img{ padding:1.2em; box-sizing:border-box}
.view_other .other_slide .swiper-slide .img img{ width:100%; height:100%; object-fit:contain}
/**/
.agree_box{ border:1px solid #ddd; padding:2em; border-radius:1em;}
.agree_box .agree_wrap{ height:11em; overflow-y:scroll !important;}
.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{ border-bottom:1px solid #ddd; margin-bottom:1.5em; padding-bottom:1em}
label_st.agree_box ul{ margin-top:1em}
.agree_box table{ margin:1em 0; width:100%}
.agree_box table th,
.agree_box table td{ border:1px solid #ddd; padding:1em}
.agree_box table th{ background:#f5f5f5}
.agree_box p strong{ font-size:1.125em; color:#333}
.agree_box a{ vertical-align:top; color:#666; text-decoration:underline}
.agree_box a:hover{ opacity:.6}
.agree_box strong{ vertical-align:top; font-weight:500}
.agree_big_ti {padding:3em 0;}
.agree_big_ti > i {font-size:2.5em; text-align:center; font-weight:700;}

.priv_w{ color:#666; font-family:notokrL; line-height:1.5;}
.priv_w .tit1{ margin-bottom:30px; color:#111; font-family:notokrM}
.priv_w .tit2{ color:#333; margin-top:20px; margin-bottom:5px; font-family:notokrR;}
.priv_w .txt1{ margin-bottom:5px;}
.priv_w .txt_ol{ margin-left:20px;}
.priv_w .txt_ol li{ list-style:decimal; margin-top:5px;}
.priv_w .txt_ul li{ list-style:circle; margin-left:15px; margin-top:0px;}

/** 인증서 **/
/*인증서 리스트*/  
.board_st.cert_Wrap {}
.board_st.cert_Wrap .list {margin:0 0 0 -2em}
.board_st.cert_Wrap .list li{ width:calc( (100% - 8em) /4); margin:0 0 1.5em 2em;}
.board_st.cert_Wrap .list li .in{ cursor:pointer; display:block;}
.board_st.cert_Wrap .list li .in .img_w{ width:100%; height:125px; border:1px solid #ddd; overflow:hidden;}
.board_st.cert_Wrap .list li .in .img_w .vm_wrap{ justify-content:center; box-sizing:border-box;}
.board_st.cert_Wrap .list li .in .img_w img{transition:0.3s;}
.board_st.cert_Wrap .list li .in .txt_w{ padding:1em;}
.board_st.cert_Wrap .list li .in .txt_w .t1{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-weight:500; font-size:1.063em; color:#333;}
.board_st.cert_Wrap .list li .in .txt_w .t2{padding-top:.8em;}
.board_st.cert_Wrap .list li .in .txt_w .t2 .xi {font-size:1.063em; padding-right:3px; color:#666; vertical-align:middle;}
.board_st.cert_Wrap .list li .in .txt_w .t2 .tt {font-size:.875em; letter-spacing:-.1px; color:#666; vertical-align:middle;}
.board_st.cert_Wrap .list li .in:hover .img_w img{transform:scale(1.1,1.1);}
.board_st.cert_Wrap .list li .edit_btn_wrap{ margin-top:15px; }

/***고객서비스***/
/*고객지원센터, 영업소현황*/
.cs_find{ padding:4em 3em; border:1px solid #555; border-radius:.5em;}
.cs_find .tit{ width:50%}
.cs_find .tit .icon{ width:60px; height:60px; margin-right:15px; background:url(../images/sub/search_icon.png) no-repeat 0 0 / cover}
.cs_find .tit .tt{ font-weight:500; font-size:1.75em; line-height:1.2; color:#333;}
.cs_find .tit .tt .t2{ font-weight:400; font-size:1.125rem; color:#777;}
.cs_find .board_search{ justify-self:flex-end}

.center_list{ gap:2em;}
.center_list > li{ width:calc( (100% - 2em) / 2); padding:3em 0 3em 2em; box-sizing:border-box; border:1px solid #ddd; position:relative; transition:all .3s}
.center_list > li::after{ content:''; width:20px; height:20px; border-top:2px solid var(--red); border-right:2px solid var(--red); position:absolute; right:-1px; top:-1px;}
.center_list > li .img{ width:45%;}
.center_list > li .img img{ width:100%; height:100%; object-fit:cover;}
.center_list > li .info{ width:55%; padding:0 1em 0 1.5em; box-sizing:border-box; position:relative}
.center_list > li .info .name{ margin-bottom:15px; font-weight:600; font-size:1.5em; color:#333;}
.center_list > li .info .name .xi{ color:#999;}
.center_list > li .info .add ,
.center_list > li .info .tel{ font-size:1.125em; line-height:1.4; color:#777; letter-spacing:-1.5px}
.center_list > li .info .add{ margin-bottom:5px;}
.center_list > li .info .tel{ padding-bottom:4em;}
.center_list > li .info a{ padding:.5em 2em; background:#333; font-size:1.125em; color:#fff; position:absolute; left:1.5rem; bottom:0;}
.center_list > li:hover{ box-shadow:10px 10px 40px -10px rgba(0, 0, 0, .2);}

.center_wrap{}
.center_wrap .center_top{ margin-bottom:80px; padding:50px 2em 50px 1em; border-top:3px solid var(--red); border-bottom:1px solid #ddd;}
.center_wrap .center_top .img{ width:50%; /*padding-left:5px; */padding-right:50px; box-sizing:border-box; }
.center_wrap .center_top .img img{ width:100%; height:100%; object-fit:cover; box-shadow:3px 3px 10px rgba(0, 0, 0, .2);}
.center_wrap .center_top .info{ width:50%; padding-top:20px}
.center_wrap .center_top .info .name{ margin-bottom:50px; padding-left:10px; padding-bottom:20px; border-bottom:1px solid #ddd; font-weight:600; font-size:2em; color:#333; position:relative}
.center_wrap .center_top .info .tt{ margin-bottom:20px; padding-left:40px; position:relative}
.center_wrap .center_top .info .tt::after{ content:''; width:5px; height:5px; border-radius:50%; background-color:#777; position:absolute; left:20px; top:10px;}
.center_wrap .center_top .info .tt:last-child{ margin-bottom:0;}
.center_wrap .center_top .info .tt .t1{ font-size:1.125em; text-align:justify; color:#333;}
.center_wrap .center_top .info .tt .t1::after{ content:':'; display:inline-block; padding:0 10px;}
.center_wrap .center_top .info .tt .t2{ max-width:83%; font-size:1.125em; color:#555;}
.center_wrap .map_wrap{ box-shadow:3px 3px 10px rgba(0, 0, 0, .2);}

/*유지보수계약*/
/*.contract_list{ margin-top:20px; margin-left:15px; padding:2em; background-color:#f6f6f6;}
.contract_list > li{ padding:.8em 0}
.contract_list > li .tt{ display:flex; font-size:1.125em; color:#555;}
.contract_list > li .tt > span{ margin-top:-5px; margin-right:20px; font-weight:500; font-size:1.375em; color:var(--red);}*/

.contract_list{ gap:3em; margin-top:10px; margin-left:15px; padding:1em;}
.contract_list > li{ width:calc( (100% - 6em) / 3); padding:1.5em 1.8em 2em; box-sizing:border-box; border:1px solid #ccc; border-radius:.5em; position:relative}
.contract_list > li:nth-child(1){ order:1}
.contract_list > li:nth-child(2){ order:2}
.contract_list > li:nth-child(3){ order:3}
.contract_list > li:nth-child(4){ order:6}
.contract_list > li:nth-child(5){ order:5}
.contract_list > li:nth-child(6){ order:4}
.contract_list > li::after{ content:'\e940'; font-family:xeicon; position:absolute; font-weight:700; font-size:1.5em; color:var(--red); right:-36px; top:50%; transform:translateY(-50%); opacity:.5}
.contract_list > li:nth-child(3)::after{ right:50%; top:calc( 100% + 10px); transform:translateX(0) rotate(90deg)}
.contract_list > li:nth-child(4)::after{ display:none}
.contract_list > li:nth-child(5)::after{ top:40%; transform:rotate(180deg)}
.contract_list > li:nth-child(6)::after{ top:40%; transform:rotate(180deg)}
.contract_list > li .tt{ display:flex; flex-direction:column; font-size:1.125em; line-height:1.6; color:#555;}
.contract_list > li .tt > span{ margin-bottom:15px; font-weight:500; font-size:1.375em; color:var(--red);}

/* 온라인 문의 */
/*agree*/
.agree_wrap{ padding:1.5em 0 1em; font-size:.938em; line-height:2; border-top:2px solid #333; border-bottom:1px solid #ccc; border-right:1px solid #ccc; border-left:1px solid #ccc; /*padding:2em;*//* background:#f9f9f9;*/}
.agree_wrap .agree.st strong{font-size:1.2em; letter-spacing:.5px; line-height:1.9; /*padding:1em 0; */color:#222; font-weight:500; }
.agree_wrap .textarea_box { width:100%; height:200px; padding:20px; box-sizing:border-box; overflow-y: auto; font-size:14px; line-height:1.4;}
.agree_wrap .textarea_box h3{ color: #333; margin-bottom: 10px; font-size: 1.2rem; font-weight: 500}