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

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

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

#header{ position:fixed; left:0; top:0; width:100%; z-index:1000; background:#fff; color:#111; transition: transform 1s; box-shadow:0 0 1em rgba(0,0,0,.1)}
#header .top_wrap{ position:relative}
#header .top_wrap .wrapH,
#header .top_wrap .gnb_wrap .dp1{ height:var(--headerH)}
.headerT{ padding-top:var(--headerH)}
#header .top_wrap .wrapIn{ display:flex; align-items:center; justify-content:space-between; gap:0 4vw}
#header .top_wrap .wrapIn > *{ position:relative; z-index:2}
#header .top_wrap .logo > a{ display:block; height:3.5em; overflow:hidden}
#header .top_wrap .logo > a .in{ display:block; height:100%}
#header .top_wrap .logo > a img{ height:100%; display:block}
#header .top_wrap .gnb_wrap{}
#header .top_wrap .gnb_wrap .gnb{ justify-content:center; gap: 6em;}
#header .top_wrap .gnb_wrap .gnb > li{position:relative}
#header .top_wrap .gnb_wrap .gnb > li .dp1{ display:flex; align-items:center; justify-content:center; transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .tt{ font-weight:600; font-size:1.188em}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va{ position:relative}
#header .top_wrap .gnb_wrap .gnb > li .dp1:after{ content:""; position:absolute; top:0; left:50%; width:1px; height:30%; background:var(--siteC); opacity:0; transform:scaleY(0); transform-origin:center top}
#header .top_wrap .gnb_wrap .gnb > li:hover .dp1,
#header .top_wrap .gnb_wrap .gnb > li.on .dp1{ color:var(--siteC)}
#header .top_wrap .gnb_wrap .gnb > li:hover .dp1:after,
#header .top_wrap .gnb_wrap .gnb > li.on .dp1:after{ opacity:1; transform:scaleY(1); transition:.3s}
#header .top_wrap .etc_wrap{ display:flex; align-items:center; gap:0 4vw}
#header .top_wrap .etc_wrap .etcBtn{ width:4em; height:4em; display:flex; align-items:center; justify-content:center}
#header .top_wrap .etc_wrap .etcBtn .ico{ font-size:2.25em}
#header .gnb_wrap .gnb > li .dp2 { display:block; padding-top: 1em; position:absolute; top: 70%; left:50%; width:12em; padding:0 .7em; background:var(--crWhite); box-shadow:0 2px 20px rgba(0,0,0,.1); color:#111; opacity:0; border-radius: 10px; visibility:hidden; transform:translateX(-50%); transition:padding .2s; } 
#header .gnb_wrap .gnb > li .dp2 > li > a { padding:.5em 1em; transition:.2s; border-radius: 10px; transition: .2s; } 
#header .gnb_wrap .gnb > li .dp2 > li > a:hover { background: var(--siteC); color: #fff; transition: .2s; } 
#header .gnb_wrap .gnb > li .dp2 > li > a .tt { font-size:.95em; font-weight: 600; } 
#header .gnb_wrap .gnb > li.act { overflow:visible; } 
#header .gnb_wrap .gnb > li.act .dp2 { margin-top: 1em; padding-top:1.5em; padding-bottom:1.5em; opacity:1; visibility:visible; } 
#header .gnb_wrap .gnb > li .dp2 > li.act > a { background:rgba(0,0,0,.05); } 
#header .gnb_wrap .gnb > li .dp2:before { content: ""; display: block; position: absolute; top: 0; left: 50%; border-style: solid; border-color: transparent transparent #fff; border-width: 0 7px 7px; transform: translate(-50%, -100%); } 

#header.allOpen { z-index:999; } 
#header.allOpen .all_wrap .all { visibility:visible; z-index:99; opacity:1; } 
#header.allOpen .all_wrap .all .wrap_bg { transform:translateX(0); } 
#header.allOpen .all_wrap .all .wrap_in { opacity:1; transition-delay:.5s; } 
#header.allOpen .all_wrap .all .allconWrap { opacity:1; transform:translateY(0); transition-delay:.5s; } */

#header .all_wrap { color: #000; } 
#header .all_wrap .all { width: 2.5em; height:var(--headerH); padding-top: 4.5em;} 
#header .all_wrap .all_btn { position: relative; display: block; width: 1.5em; height: 1.125em; margin: 0 auto; } 
#header .all_wrap .all_btn .ham,
#header .all_wrap .all_btn .ham:before,
#header .all_wrap .all_btn .ham:after { display: block; width: 100%; height: 2.5px; border-radius: 5px; background: #111; transition: .2s, background 0s; } 
#header .all_wrap .all_btn .ham:before,
#header .all_wrap .all_btn .ham:after { content: ""; position: absolute; right: 0; } 
#header .all_wrap .all_btn .ham:before { top: calc(50% - 1px); width: 100%; } 
#header .all_wrap .all_btn .ham:after { top: calc(100% - 2px); width: 100%; } 
#header .all_wrap .all_btn:hover .ham:before { width: 100%; } 
#header .all_wrap .all_btn:hover .ham:after { width: 100%; } 

.sub #header .all_wrap .all_btn .ham,
.sub #header .all_wrap .all_btn .ham:before,
.sub #header .all_wrap .all_btn .ham:after {background: #111;}

#header .all_wrap .all_layer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; opacity: 0; visibility: hidden; } 
#header .all_wrap .all_layer .all_close { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); opacity: 0; backdrop-filter: blur(.75em); } 
#header .all_wrap .all_layer .all_inner { position: absolute; top: 0; right: 0; width: 100%; max-width: 100%; height: 100%; background: #fff; box-shadow: -1em 0 1em rgba(0, 0, 0, .1); transform: translateX(100%); } 

#header .all_wrap .all_layer .all_inner > .wrap_bg { width: 40%; padding: 14vh 0vw 3em 4vw; } 
#header .all_wrap .all_layer .all_inner > .wrap_bg .cs { padding-top: 2em; font-size: 1.188em; color: #111; } 

#header .all_wrap .all_layer .all_inner > .wrap_in { flex: 1; padding: 14vh 8em 3em; position: relative; overflow: hidden; } 
#header .all_wrap .all_layer .all_inner > .wrap_in::after { content: ''; width: 35em; height: 35em; background: url(../images/inc/all_bg.png) no-repeat center bottom / contain; position: absolute; right: 1em; top: 22em; opacity: .6; z-index: -10; } 
#header .all_wrap .all_layer .wrap_middle { /* padding:3em 0; */}
#header .all_wrap .all_layer .wrap_middle .gnb { flex-wrap: wrap; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li { flex: 1 1 100%; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_mypage { display: block; } 
#header .all_wrap .all_layer .wrap_middle .gnb ul.flex { display: block; } 
#header .all_wrap .all_layer .wrap_middle .gnb a { position: relative; justify-content: flex-start; text-align: left !important; font-weight: 500; transition: .2s; } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more { } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more > a.layer { display: flex !important; padding-right: 2.5em; } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more > a .arrow { position: absolute; right: 1em; top: 50%; transform: translateY(-50%); font-size: 1em; } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more > a .arrow:before { content: "\e943"; font-size: 1.250em; display: block; transition: .2s; } 
/* #header .all_wrap .all_layer .wrap_middle .gnb li.more > .ul { display:none; } */
/* #header .all_wrap .all_layer .wrap_middle .gnb li.more .dp2_wrap, 
#header .all_wrap .all_layer .wrap_middle .gnb li.more ul.dp3 { display:none; } */
#header .all_wrap .all_layer .wrap_middle .gnb li.more .dp2_wrap { display: none; } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more.on > a .arrow:before { transform: rotate(-180deg); } 
/* #header .all_wrap .all_layer .wrap_middle .gnb li.more.on > .ul { display:block; } */
/* #header .all_wrap .all_layer .wrap_middle .gnb li.more.on .dp2_wrap ,
#header .all_wrap .all_layer .wrap_middle .gnb li .dp2_wrap li.more.on ul.dp3 { display:block; } */
#header .all_wrap .all_layer .wrap_middle .gnb li.more.on .dp2_wrap { display: block; } 
#header .all_wrap .all_layer .wrap_middle .gnb ul { padding: 1em 1em; background: rgba(255, 255, 255, .5); } 
#header .all_wrap .all_layer .wrap_middle .gnb ul li > a { padding: .875em .5em; } 
#header .all_wrap .all_layer .wrap_middle .gnb ul li.more .arrow { right: .5em; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li { } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 { position: relative; align-items: center; height: 5em; padding: 0 1.5em; border: solid #ddd; border-width: 1px 0; background: rgba(255, 255, 255, .6); margin-bottom: -1px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt { font-size: 1.188em; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li.act .dp1,
#header .all_wrap .all_layer .wrap_middle .gnb > li.on .dp1 { background-image: var(--siteC); color: #000; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a { padding-left: 1.5em; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a:before { content: ""; position: absolute; left: .75em; top: 50%; width: .313em; height: .313em; background: var(--siteC); border-radius: 50%; transform: translateY(-50%); } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a .tt { font-size: 1.063em; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > .link { position: relative; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li.act > a { background: #ddd}
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li.on > a { color: var(--siteC); font-weight: 600; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 { background: #ddd; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li > a { color: #444; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li + li > a { border-top: 1px dashed #ddd; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li.act > a .tt,
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li.on > a .tt { text-decoration: underline; } 

#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1:hover {background: var(--siteC); transition: .3s; color: #fff;}
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > .link:hover {background: #f4f4f4; transition: .3s;}

#header .all_wrap .all_layer .wrap_middle .gnb > li.m_board .dp2 { display: flex; flex-wrap: wrap}
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_board .dp2 li { width: calc(100% / 3); box-sizing: border-box; } 

.allGnbOn { overflow-y: hidden}
.allGnbOn body { overflow-y: scroll}
.allGnbOn #header .logo { height: 6.5em; z-index: 100; position: fixed; top: 1vh; left: 4vw; filter: none !important; } 
.allGnbOn #header .all_wrap .all_btn { z-index: 999; position: fixed; top: 2em; right: 2vw; width: 3em; height: 3em; filter: var(--siteC) !important; } 
.allGnbOn #header .all_wrap .all_btn .ham { background: transparent !important; transition: 0s; } 
.allGnbOn #header .all_wrap .all_btn .ham:before,
.allGnbOn #header .all_wrap .all_btn .ham:after { width: 100% !important; top: 50% !important; height: 2px; } 
.allGnbOn #header .all_wrap .all_btn .ham:before { transform: rotate(45deg); } 
.allGnbOn #header .all_wrap .all_btn .ham:after { transform: rotate(-45deg); } 
.allGnbOn #header .all_wrap .all_layer { z-index: 99; opacity: 1; visibility: visible; } 
.allGnbOn #header .all_wrap .all_layer .all_close { opacity: 1; transition: .4s; } 
.allGnbOn #header .all_wrap .all_layer .all_inner { transform: translateX(0); /* transition:.4s; */}


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

/* .main:not(.scroll) #header{ background:none; color:#fff; box-shadow:none}
.main:not(.scroll) #header:hover {background:#fff; color:#111; transition: transform 1s; box-shadow:0 0 1em rgba(0,0,0,.1);}
.main:not(.scroll) #header:hover .all_wrap .all_btn .ham,
.main:not(.scroll) #header:hover .all_wrap .all_btn .ham:before,
.main:not(.scroll) #header:hover .all_wrap .all_btn .ham:after {background: #111;}
.main:not(.scroll) #header .top_wrap .logo > a{ filter:brightness(0) invert(1)}
.main:not(.scroll) #header:hover .top_wrap .logo > a{ filter:brightness(1) invert(0)}
.main:not(.scroll) #header .top_wrap .gnb_wrap .gnb > li:hover .dp1{ color:#111}
.main:not(.scroll) #header .top_wrap .gnb_wrap .gnb > li:hover .dp1:after{ opacity:1; background:#111} */ /* main에서 headr color 변화 */
.scroll #header .top_wrap .wrapH,
.scroll #header .top_wrap .gnb_wrap .dp1{ height:var(--headerH2)}
.scroll .headerT{ padding-top:var(--headerH2)}
.scroll:not(.up) #header{ transform:translateY(-100%)}
.scroll #header .all_wrap .all_btn .ham,
.scroll #header .all_wrap .all_btn .ham:before,
.scroll #header .all_wrap .all_btn .ham:after { display: block; width: 100%; height: 2.5px; border-radius: 5px; background: #111; transition: .2s, background 0s; } 

#footer{ z-index:1; color:#fff; background:#111; padding:4em 0 5em 0}
#footer .goTop{ position:fixed; right:0; bottom:0; width:3.5em; line-height:3.5em; text-align:center; z-index: 10; background:var(--siteC); color:#fff; box-shadow:0 0 1em rgba(0,0,0,.1); opacity:0; transform:translateY(100%); transition:.5s}
#footer .goTop .xi{ font-size:1.5em; transition:.3s}
#footer .goTop:hover .xi{ transform:translateY(-.25em)}
.scroll #footer .goTop{ opacity:1; transform:translateY(0)}
#footer .logo_wrap{ display:flex; align-items:center; gap:4em}
#footer .logo{ filter:brightness(0) invert(1)}
#footer .logo img{ height:3.5em}
#footer .menu_wrap{ margin-left:auto; display:flex; justify-content: flex-end; gap:2em; margin-bottom: 1em;}
#footer .menu_wrap > li > a{ position:relative}
#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; justify-content:space-between; align-items:flex-start; margin-top:2em; gap: 5em;}
#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:600}
#footer .info > li.br{ clear:left}
#footer .info > li.copyright{ font-size:.875em; opacity:.5; margin-top:1em}
#footer .cs_wrap{ display:flex; gap:0 4em; text-align:right}
#footer .cs_wrap .wrap_in{ position:relative}
#footer .cs_wrap .wrap_in:not(:first-child):after{ content:""; position:absolute; left:-2em; top:0; width:1px; height:100%; background:#fff; opacity:.2}
#footer .cs_wrap .t1{ opacity:.7; font-weight:500; margin-bottom:.5em}
#footer .cs_wrap .t2{ font-weight:700; font-size:1.125em}

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

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


#contents{ flex:1; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100); box-sizing:border-box}
#contents .sub_visual{ position:relative; overflow:hidden; height: 43vh;}
#contents .sub_visual .wrap_bg{ position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.1); transition:3s}
#contents .sub_visual .wrap_bg::after{ content:''; width:100%; height:100%; background:linear-gradient(180deg, rgba(0, 0, 0, .0), rgba(0, 0, 0, .25)); position:absolute; left:0; top:0;}
.load #contents .sub_visual .wrap_bg{ transform:scale(1)}
#contents .sub_visual .wrap_con{ height: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; box-sizing: border-box;}
#contents .sub_visual .wrap_con .slogan_wrap{ position: relative; flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2em 0; z-index: 2; /* padding-bottom: 4em; */}
.dp1_careers #contents .sub_visual .wrap_con .slogan_wrap,
.dp1_about #contents .sub_visual .wrap_con .slogan_wrap {padding-bottom: unset;}
.dp1_careers #contents .sub_visual .wrap_con .slogan_wrap .slogan,
.dp1_about #contents .sub_visual .wrap_con .slogan_wrap .slogan {padding-bottom: 1em;}
#contents .sub_visual .wrap_con .slogan_wrap .slogan .t1{ font-size:3.25em; font-weight:700; text-transform:uppercase}
#contents .sub_visual .wrap_con .slogan_wrap .slogan .line{ width:1px; height:2em; transform:scaleY(0); transform-origin:center top; background:#fff; margin:1em auto; transition:1s; transition-delay:1s}
#contents .sub_visual .wrap_con .slogan_wrap .slogan .t2{ font-size:1.375em; line-height:1.5; transform:translateY(100%); opacity:0; transition:1s; transition-delay:1s}
.load #contents .sub_visual .wrap_con .slogan_wrap .slogan .line{ transform:scaleY(1)}
.load #contents .sub_visual .wrap_con .slogan_wrap .slogan .t2{ transform:translateY(0); opacity:1}
#contents .sub_visual .sub_tab{position:relative;width:100%;z-index: 2;/* transform: translateY(50%); */}
#contents .sub_visual .sub_tab .gnb {background: rgba(255, 255, 255, 0.1);}
#contents .sub_visual .sub_tab .gnb > li{ width:100%}
#contents .sub_visual .sub_tab .gnb .dp2{ justify-content:center}
#contents .sub_visual .sub_tab .gnb .dp2 > li{ flex:1 1 16%; max-width:16%; transition: .2s;}
#contents .sub_visual .sub_tab .gnb .dp2 > li.m2_Devaluation {max-width: 26%;}
#contents .sub_visual .sub_tab .gnb .dp2 > li > a{ display:flex; align-items:center; justify-content:center; height:5em; padding:0 .3em; position:relative}
#contents .sub_visual .sub_tab .gnb .dp2 > li > a::before{ content: ''; width: 100%; height: 3px; background:#fff; position: absolute; left: 0; top: 0; opacity: 0; transition: all .3s;}
#contents .sub_visual .sub_tab .gnb .dp2 > li > a .va{ font-weight:700; font-size:1.250em; color: #ddd; position:relative; z-index:1}
/* #contents .sub_visual .sub_tab .gnb .dp2 > li:hover > a {border-top: 3px solid #fff;} */
#contents .sub_visual .sub_tab .gnb .dp2 > li:hover > a .va { color: #fff;}
/* #contents .sub_visual .sub_tab .gnb .dp2 > li.on > a {border-top: 3px solid #fff;} */
#contents .sub_visual .sub_tab .gnb .dp2 > li:hover > a::before,
#contents .sub_visual .sub_tab .gnb .dp2 > li.on > a::before{ opacity: 1; z-index: 1;}
#contents .sub_visual .sub_tab .gnb .dp2 > li.on > a .va{ color: #fff;}
#contents .sub_visual .sub_tab .gnb .dp2 > li.on > a:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:100%; background:var(--siteC2)}
#contents .sub_visual .sub_tab .gnb .dp2 > li:hover > a .va,
#contents .sub_visual .sub_tab .gnb .dp2 > li.on > a .va{ opacity:1}

#contents .sub_page_tit{ margin: 4em auto 0;}

#contents .doc{ padding:4em 0 8em 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}

.gsSplit i{ display:inline-block; text-align:center; min-width:.5em}

/**/

.fw500{ font-weight: 500}
.fw600{ font-weight: 600}
.fw700{ font-weight: 700}
.fw800{ font-weight: 800}
.fw900{ font-weight: 900}

.con_section {margin: 6em auto;}

.sub_tt.blue { color: var(--siteC); }
.sub_tt.w { color: #fff; }
.sub_tt.we1 { font-weight: 600; }
.sub_tt.we2 { font-weight: 700; }
.sub_tt.we3 { font-weight: 500; }
.sub_tt.dot { position: relative; padding-left: 0.5em; }
.sub_tt.dot:before { position: absolute; content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); top: 10px; left: 0; }
.sub_tt.redot { position: relative; padding-right: 0.5em; }
.sub_tt.redot:before { position: absolute; content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); top: 10px; right: 0; }
.sub_tt.dot2 { position: relative; padding-left: 0.5em; }
.sub_tt.dot2:before { position: absolute; content: ""; left: 0; top: 20px; width: 3px; height: 3px; border-radius: 50%; background: #666; }
.sub_tt.dot2:first-of-type:before { top: 11px; }
.sub_tt.li { line-height: 1.6; }
.sub_tt.tit { text-align: center; font-size: 1.5em; /*letter-spacing: .375em !important;*/ line-height: 1.6; text-transform: uppercase; font-weight: 600; }
.sub_tt.tit2 { text-align: center; font-size: 2em; font-weight: 700; line-height: 1.8em; }
.sub_tt.t1 { line-height: 1.6; padding-bottom: 1em; font-size: 1.1em; margin-top: 1em;}
.sub_tt .tit_span {border: 1px solid var(--siteC); padding: .3em .7em; border-radius: .8em; vertical-align: baseline; background: var(--siteC); color: #fff;}

.page_tit { } 
.page_tit .logoT { padding-bottom:1em; } 
.page_tit { margin-bottom:1.75em; box-sizing:border-box; } 
.page_tit.icon:after { content:""; display:inline-block; width:1px; height:3em; margin:1.5em .375em 0 .375em; background:#333; } 
.page_tit.icon.iw:after { background: #fff; } 
.page_tit > .tt { color:#111; } 
.page_tit > .tt > * { vertical-align:baseline; } 
.page_tit > .t1 { font-size:2.500em; letter-spacing:-1px; line-height:1.3; } 
.page_tit > .t2 { font-size:1.250em; line-height:1.6; } 
.page_tit > .t3 { font-size:1.375em; color:#333; line-height:1.5; } 
.page_tit > .t4 { font-size:4.500em; letter-spacing:-1px; } 
.page_tit > .t5 { font-size:1.8em; letter-spacing:-1px; } 
.page_tit > .t6 { font-size:2.250em; letter-spacing:-1px; } 
.page_tit > .t7 { font-size:2.650em; } 
.page_tit > .t8 { font-size:3.850em; } 
.page_tit > .t9 { font-size:3.250em; } 
.page_tit > .t10 { font-size:4.92em; } 
.page_tit > .tt + .tt { margin-top:.75em; } 
.page_tit > .tt + .t1 { margin-top:.5em; } 
.page_tit > .tt + .t2 { margin-top:1em; } 
.page_tit > .tt + .t4 { margin-top:.125em; } 
.page_tit > .space { letter-spacing:.75em !important; text-indent:.75em; } 
.page_tit > .space2 { letter-spacing:.375em !important; text-indent:.375em; } 
.page_tit > .t1.col { color:#fff !important; } 
.page_tit > .t2.col { color:#fff !important; } 
.page_tit > .t1.mst { vertical-align:baseline } 
.page_tit > .t1.mst .mst { vertical-align:baseline } 
.page_tit{ margin-bottom:3em;}
.page_tit .tit{ position:relative;}
.page_tit .tit:before{content: ""; position: absolute; left: -.5em; width: .25em; height: .25em; background: var(--siteC); border-radius: 50%;}

.page_txt > .txt{ margin-top:2em;}
.page_txt > .txt:first-child{ margin-top:0;}

.page-tt.s1{ font-size: 4.5em;}
.page-tt.s2{ font-size: 4em;}
.page-tt.s3{ font-size: 3.5em;}
.page-tt.s4{ font-size: 3em;}
.page-tt.s5{ font-size: 2em;}
.page-tt.s6{ font-size: 1.8em;}
.page-tt.s7{ font-size: 1.65em}
.page-tt.s8{ font-size: 1.75em;}
.page-tt.s9{ font-size: 1.25em;}
.page-tt.s10{ font-size: 1em;}
.page-tt.s11{ font-size: 1.05em;}
.page-tt.s12{ font-size: 0.9em;}
.page-tt.s13{ font-size: 0.96em;}
.page-tt.s14 { font-size: 1.125em; font-weight: 500;}
.page-tt.s15 { font-size: 1.45em;}
.page-tt{ }
.page-tt:last-of-type{ margin-bottom: 0em;}

.page_tt{ font-size:1em; word-break:keep-all; line-height:1.4;}
.page_tt > .tt + .tt{ margin-top:1.5em;}
.page_tt.o1{ opacity:.75;}
.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; font-weight: 700;}
.page_tt.s7{ font-size:1.625em}
.page_tt.s8{ font-size:1.875em}
.page_tt.s9{ font-size:2.00em; font-weight: 500; color: #666;}
.page_tt.s10{ font-size:3em; font-weight: 800;}
.page_tt.s11{ font-size:2.65em; font-weight: 700;}
.page_tt.s12{ font-size:4.000em;}
.page_tt.s13{ font-size:6.500em;}
.page_tt.s14{ font-size: 2.525em; font-weight: 700; }
.page_tt.lh15{line-height: 1.5; }

.ttdot{ position:relative; padding-left:1rem; line-height:1.1;}
.ttdot:before{ content:""; position:absolute; left:0; top:.375em; width:.313rem; height:.313rem; background:var(--siteC); border-radius:50%;}
.ttdot + .ttdot{ margin-top:.75em;}
.ttdot.st2:before {background:#fff;}

/* .legal_sys{}
.legal_sys .sysT{ width:60%; margin:0 auto; padding:1.5em 1em; box-sizing:border-box; border-radius:.5em; background: var(--siteC); text-align:center; position:relative;}
.legal_sys .sysT::after{ content:''; width:100%; height:27px; border-left:1px dashed #002144; position:absolute; left:50%; bottom:-26px;}
.legal_sys .sysT .logo {filter: brightness(0) invert(1);}
.legal_sys .sysB .in > li{}
.legal_sys .sysB .in > li {} */
/* .group{ width:calc( (100% - 30px)/4); margin-right:10px; border:1px solid var(--siteC);; border-radius:.5em; position:relative; background: #fff;}
.group.w2 {width:calc( (100% - 30px)/2);}
.group.w3 {width:calc( (100% - 30px)/1);}
.group.w4 {width:calc( (100% - 30px)/3);}
.group .tt{ display:flex; justify-content:center; align-items:center; width:100%; height:3em; border-bottom:1px solid #ddd; font-size:1.125em}
.group .tt.h2 {height: 4em;}
.group .td{ align-items:center; padding:0 1em; font-size:1.5em; line-height:1.4; color:#333; word-break:keep-all; }
.group .td.w1 {width: 16em;}
.group:last-child{ margin-right:0;}
.group:before{ content:''; width:calc( 100% + 9px); height:1em; border-top:1px dashed #002144; border-left:1px dashed #002144; position:absolute; left:50%; top:-24px;}
.group:last-child:before{ border-top:none; border-left:1px dashed #002144;}
.group:after{ content:''; width:10px; height:10px; border:4px solid var(--siteC); border-radius:50%; background-color:#fff; position:absolute; left:50%; top:-9px; transform:translateX(-50%);} */ 

/* .legal_sys2 .t1 {background: var(--gradC2); color: #fff; font-size: 1.25em; display: inline-block; padding: 0.5em 1em; border-radius: 2em; margin: 1em 0;}
.legal_sys2 .t2 {border: 1px solid var(--siteC); border-radius: 1em; background: #fff; padding: 1em;} */

.page_arrow{ padding-bottom:7%; background:url(../images/sub/page_arrow.svg) no-repeat; background-size:100% 100%; margin: 2em 0 -1em 0;}
.page_arrow2 img {transform: rotate(180deg);}

.verb {vertical-align: baseline;}
.inner_t {padding: 2em 0; min-height: 5em;}
.plus {background: var(--siteC); color: #fff; width: 2em; text-align: center;line-height: 2em; border-radius: 50%; margin: 1em;}
.plus .xi {}


/*  */
.conLay{}
.conLay + .conLay{ margin-top: 6.5em}
.conLay .inner{ gap:4em}
.conLay .inner.high{ gap:4em}
.conLay .inner.row{ gap:4em}
.conLay .txt_wrap{ flex:1; padding:3em 0 2em;}
.conLay.layL .txt_wrap{ padding-left: 2em;}
.conLay.layR .txt_wrap{ padding-right: 2em;}
.conLay .txt_wrap .tit .line{ width: 2.5em; height: 3px; margin-bottom: 1em;background:var(--siteC);}
.conLay .txt_wrap .txt .page_tt{line-height: 1.5; color:#333;}
.conLay .txt_wrap .txt .page_tt + .page_tt{ margin-top: 0.5em;}
.conLay .img_wrap{ width: 45%;}
.conLay .img_wrap .img{position: relative;}
.conLay .img_wrap .img::after{ content: ''; width: 100%; height: 100%; background:var(--siteC); position: absolute; left: -.5em; bottom: -.5em; z-index: -1; opacity: .4; }
.conLay.layR .img_wrap{ order:-1;}
.conLay.layR .img_wrap .img::after{left:auto; right:-.5em;}

.conLay.st2 .img_wrap{ width: 30%;}
.conLay.st2 .img_wrap .img::after{display: none;}

/*  */
.tit_icon1{ position: relative;}
.tit_icon1::before{ content: ''; width: 1.25em; height: 1.25em; border-radius: 50%; background:#006ab5; position: absolute; left: -13px; top: -5px; z-index: -1; opacity: .3;}


/*** sub_about ***/


/* partner */
.siteList_wrap { } 
.siteList_wrap .siteList { gap:3em 1em } 
.siteList_wrap .siteList > li { width: calc((100% - 3em) / 4); } 
.siteList_wrap .siteList > li .logo { margin-bottom: 1em; border:1px solid #ddd; transition: all .3s; } 
.siteList_wrap .siteList > li .logo > a { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; padding:1.5em 0; } 
.siteList_wrap .siteList > li .logo img { max-width: 85%; height: 3.5em; object-fit: contain; } 
.siteList_wrap .siteList > li .tit { display: flex; flex-direction: column; gap:5px} 
.siteList_wrap .siteList > li .tit .t1{ font-weight: 600; font-size: 1.125em; color:#777;} 
.siteList_wrap .siteList > li .tit .t2{ font-size: .9375em; color:#555} 
.siteList_wrap .siteList > li:hover .logo { border-color:var(--siteC) } 
/*** sub_about end***/

/*** sub_people ***/
.peopleTop{ 
  /* padding: 2em 3em 0; */
  /* border-top:3px solid var(--siteC); */
}
.peopleTop .inner{
  position: relative;
  padding-bottom: 3em;
}
.peopleTop .img {
  border-radius: 1em; 
  overflow: hidden;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, .1);
}
.peopleTop .img img{
  display: block;
}
.peopleTop .txt {
  min-width: 60%;
  padding: 1.5em 2.5em 1.5em 1.5em;
  border-radius: 0 1em 0 0;
  background: var(--siteC);
  color:#fff;
  position: absolute;
  left: 0;
  bottom: 0;
  box-shadow: 2px -5px 10px rgba(0, 0, 0, .2);
}
.peopleTop .txt .t1{
  font-weight: 700;
  font-size: 2.5em;
}
.peopleTop .txt .t2{
  display: block;
  margin-top: 0.5em;
  font-size: 1.25em;
  opacity: .8;
}

.peopleList_wrap{ margin-top: 4em;}
.peopleList_tit{ 
}
.peopleList{
  margin-top: 2em;
  border-top: 1px solid #111;
}
.peopleList > li{}
.peopleList > li .wrap_in{
  position: relative;
  border-bottom: 1px solid #ddd;
  line-height: 1.8;
}
.peopleList > li .ppTit{}
.peopleList > li .ppTit .wrap_in{ 
  padding: 1em 5em 1em 2.5em;
}
.peopleList > li .ppTit .name{
  font-weight: 700;
  font-size: 1.5em;
  color:var(--siteC);
  position:relative;
}
.peopleList > li .ppTit .name::before{
  content:'';
  width: 1em;
  height:1em;
  border-radius:50%;
  background:var(--siteC2);
  position:absolute;
  left:-.5em; top:.1em;
  opacity:.3;
}
.peopleList > li .ppTit .name .tt{ position: relative; z-index: 1;}
.peopleList > li .ppTit .info{
  display: flex;
  flex-wrap: wrap;
  gap:0 2em;
  margin-top: 0.25em;
  padding-left: 0.5em;
  box-sizing: border-box;
}
.peopleList > li .ppTit .info > li{
  display: flex;
  gap: 0 1em;
  width: calc((100% - 2em) / 2);
  padding-left: 1em;
  box-sizing: border-box;
  font-size: 1.125em;
  position: relative;
}
.peopleList > li .ppTit .info > li::before{
  content: '';
  width: 5px; height: 5px;
  background: var(--siteC);
  position: absolute;
  left: 0; top: 12px;
  opacity: .8;
}
.peopleList > li .ppTit .info > li .tt{ 
  color:#333;
}
.peopleList > li .ppTit .info > li .td{ 
  color:#666;
  flex:1;
}
.peopleList > li .ppTit .ico{ 
  width:5em; text-align:center; 
  position:absolute; 
  right:0; top:50%; 
  transform:translateY(-50%); 
  opacity:.55;
}
.peopleList > li .ppTit .ico .arrow{ 
  font-size:2.000em; 
  transition:.3s;
}
.peopleList > li .ppTit .ico .arrow:before{ content:"\e943";}
.peopleList > li .ppCont{
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.peopleList > li .ppCont .wrap_in{
  padding: 0 2em 0 2.5em;
  color: #555;
}
.peopleList > li .ppCont .wrap_in .btn_wrap{
  margin-top: 1em;
}
.peopleList > li .ppCont .wrap_in .more_btn{
  display: inline-flex;
  align-items: center;
  gap:.5em;
  height: 2em;
  padding:0 1em;
  border:1px solid #ddd;
  border-radius: 2em;
}
.peopleList > li .ppCont .wrap_in .more_btn .tt{ 
  font-size: .9375em;
  color:#666;
}
.peopleList > li .ppCont .wrap_in .more_btn .xi{ font-size: 1rem;}
.peopleList > li:hover .ppTit .wrap_in , 
.peopleList > li.on .ppTit .wrap_in{ background:#f5f5f5;}
.peopleList > li.on .ppTit .wrap_in .ico .arrow{ transform:rotate(-180deg);}
.peopleList > li.on .ppCont{ height:auto; overflow:visible; opacity:1; visibility:visible;}
.peopleList > li.on .ppCont .wrap_in{
  padding-top:1.5em; 
  padding-bottom:1.5em; 
  transition:.3s;
}
.peopleList > li .ppCont .wrap_in .more_btn:hover{
  background: #eee;
}
/* people - view */
.peopleViewWrap{}
.peopleViewT{}
.peopleViewT .profile{
  margin-bottom: 1.5em;
  border-top:2px solid #111;
}
.peopleViewT .profile .tit_wrap{
    padding: 1.5em 1.5em;
    position: relative;
}
.peopleViewT .profile .tit_wrap .name{
  font-weight: 700;
  font-size: 2em;
  color:var(--siteC);
}
.peopleViewT .profile .tit_wrap .down_btn{
  display: flex;
  align-items: center;
  gap: .25em;
  padding:.5em 1em;
  border-radius: .5em 0 0 0;
  background: var(--siteC);
  color: #fff;
  position: absolute;
  right: 0; bottom: 0;
}
.peopleViewT .profile .tit_wrap .down_btn .tt{
  font-weight: 600;
  font-size: .9375em;
}
.peopleViewT .profile .tit_wrap .down_btn .xi{}

/* .peopleViewT .profile .info_wrap{
  position: relative;
  padding: 1em 2em 1.5em;
} */
/* .peopleViewT .profile .info_wrap .down_btn{
  display: flex;
  align-items: center;
  gap: .25em;
  padding:.5em 1em;
  background: var(--siteC);
  color: #fff;
  position: absolute;
  right: 0; bottom: 0;
}
.peopleViewT .profile .info_wrap .down_btn .tt{
  font-weight: 600;
  font-size: .9375em;
}
.peopleViewT .profile .info_wrap .down_btn .xi{} */
.peopleViewT .profile .infoList{
  display: flex;
  flex-wrap: wrap;
  gap:.5em 2em;
  margin-top: 1em;
}
.peopleViewT .profile .infoList > li{
  display: flex;
  width: calc((100% - 2em) / 2);
  padding-left: 1em;
  font-size: 1.125em;
  box-sizing: border-box;
  position: relative;
}
.peopleViewT .profile .infoList > li::before{
  content: '';
  width: 5px;
  height: 5px;
  background: var(--siteC);
  position: absolute;
  left: 0;
  top: 10px;
  opacity: .8;
}
.peopleViewT .profile .infoList > li .tt{ 
  width: 5em;
  color:#333;
}
.peopleViewT .profile .infoList > li .td{ 
  color:#666;
  flex:1;
}
.peopleViewT .profile .desc_wrap{
  padding: 1em 2em;
  border-top: 1px dashed #ddd;
}
.peopleViewT .profile .desc_wrap > p{
  font-size: 1.125em;
  color:#555;
  line-height: 1.5;
}
.peopleViewM{}
.record_wrap .rc_list { } 
.record_wrap .rc_list .list_div { border-top: 1px solid #ddd; } 
.record_wrap .rc_list .list_div .list_in { text-align: left; padding: 2.5em 1.5em; } 
.record_wrap .rc_list .list_div .list_in .tit { font-size: 1.45em; font-weight: 700; margin-bottom: 1em; } 
.record_wrap .rc_list .list_div .list_in .tit > .xi { padding-right: 5px; color: var(--siteC); } 
.record_wrap .rc_list .list_div .list_in .info_list { } 
.record_wrap .rc_list .list_div .list_in .info_list > li { position: relative; padding: .65em 2em; background: #f9f9f9; border-radius: .5em; margin-bottom: .3em; font-size: .9em; font-weight: 600; } 
.record_wrap .rc_list .list_div .list_in .info_list > li:before { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); content: ''; left: 17px; top: 50%; transform: translateY(-50%); } 
.record_wrap .rc_list .list_div .list_in .info_list > li:first-of-type { } 
.record_wrap .rc_list .list_div .list_in .in_div { margin-bottom: 2.75em; } 
.record_wrap .rc_list .list_div .list_in .in_div:last-of-type { margin-bottom: 0em; } 
.record_wrap .rc_list .list_div .list_in .in_div .sub_tit { font-size: 1.2em; font-weight: 800; margin-bottom: .5em; } 

/*** sub_research ***/
/* project */
.projectList_wrap{}
.projectList{
  gap:3em 1.5em;
}
.projectList > li{
  width: calc((100% - 3em) / 3);
}
.projectList > li .in{
  height: 100%;
  padding: 1.5em;
  box-sizing: border-box;
  border:1px solid #ddd;
  border-radius: .5em;
  transition: all .3s;
}
.projectList > li .in .tit{
  font-weight: 600;
  font-size: 1.5em;
  color:var(--siteC);
}
.projectList > li .in .info{
  margin-top: 1em;
}
.projectList > li .in .info > li{
  display: flex;
  gap:.5em;
  line-height: 1.5;
}
.projectList > li .in .info > li + li{
  margin-top: 0.25em;
}
.projectList > li .in .info > li .xi{
  color:#777;
  text-align: center;
}
.projectList > li .in .info > li .tt{
  color:#555;
}
.projectList > li .in .more_btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 2.5em;
  margin-top: 2.5em;
  padding: 0 1em;
  border-radius: .5em;
  background: #999;
}
.projectList > li .in .more_btn .tt{
  color:#fff;
}
.projectList > li:hover .in{
  border-color:var(--siteC);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
/* popResearch */
html.pop .popWrap.popResearch{ max-width: 75vw;}
html.pop .popWrap.popResearch .popIn .popCon { padding: 2em;}
.projectView{}
.projectView .desc{
  font-size: 1.125em;
  color:#333;
}
.projectView .keywordList{ 
  gap:.25em;
  margin-top: 1em;
}
.projectView .keywordList > li{
  padding: .25em .5em;
  border:1px solid #ddd;
  border-radius: 2em;
}
.projectView .keywordList > li .tt{
  color:#666;
}

/* publication */
.bookList_wrap{}
.bookList{ 
  border-top:3px solid var(--siteC);
}
.bookList > li{}
.bookList > li .book{
  gap: 3em;
  padding: 1.5em 1em;
  border-bottom:1px solid #ddd;
}
.bookList > li .book .img_wrap{ width: 18%;}
.bookList > li .book .img_wrap .img{
  border:1px solid #eee;
  box-shadow:0 0 5px rgba(0, 0, 0, .1)
}
.bookList > li .book .cont_wrap{ 
  flex: 1;
  gap:2em;
}
.bookList > li .book .cont_wrap .txt{ 
  flex:1;
  display:flex;
  flex-direction:column;
  gap:1em;
  padding:1.5em 0;
}
.bookList > li .book .cont_wrap .txt .tit{
  font-weight:600;
  font-size:1.75em;
  color:#333;
}
.bookList > li .book .cont_wrap .txt .desc{
  color:#666;
  line-height:1.4
}
.bookList > li .book .cont_wrap .txt .desc .desc_txt{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.bookList > li .book .cont_wrap .txt .desc .more_btn{ 
  display: inline-flex;
  align-items: center;
  margin-top: 0.5em;
  margin-left: auto;
  margin-right: 1em;
  padding: .5em 1em;
  border:1px solid #ddd;
  border-radius: 2em;
}
.bookList > li .book .cont_wrap .txt .desc .more_btn .tt{ font-size: .9375em; color:#666;}
.bookList > li .book .cont_wrap .txt .desc .more_btn .xi{ line-height: 1;}
.bookList > li .book .cont_wrap .txt .desc .more_btn .xi::before{ content: '\e942';}
.bookList > li .book .cont_wrap .txt .desc.on .desc_txt{display: block;}
.bookList > li .book .cont_wrap .txt .desc.on .more_btn .tt{ font-size: 0;}
.bookList > li .book .cont_wrap .txt .desc.on .more_btn::before{content: 'Close'; font-size: .9375em;}
.bookList > li .book .cont_wrap .txt .desc.on .more_btn .xi::before{ content: '\e945';}

.bookList > li .book .cont_wrap .txt .info{
  margin-top:1em
}
.bookList > li .book .cont_wrap .txt .info > li{
  display:flex;
  gap:1em;
  padding-left:1em;
  position: relative
}
.bookList > li .book .cont_wrap .txt .info > li::before{
  content:'';
  width: 6px;
  height: 6px;
  background: var(--siteC2);
  position:absolute;
  left:0;
  top:9px;
}
.bookList > li .book .cont_wrap .txt .info > li + li{
  margin-top:.5em;
}
.bookList > li .book .cont_wrap .txt .info > li > span{
  font-size:1.125em;
}
.bookList > li .book .cont_wrap .txt .info > li .tt{
  width:6em;
  font-weight:600;
  color:#555
}
.bookList > li .book .cont_wrap .txt .info > li .td{
  color:#666
}
.bookList > li .book .cont_wrap .link_btn{
  width: 10em;
  padding-right:1em;
}



/* Solution - City */
.esg-cont { } 
.esg-cont .esg-wrap { } 
.esg-cont .esg-wrap .inner { gap: 3em; align-items: center; } 
.esg-cont .title-wrap { flex: 1 1 20%; } 
.esg-cont .title-wrap > h3 { font-weight: bold; color: #333; } 
.esg-cont .title-wrap > p { font-size: 1.25em; color: #555; margin-top: 1em; } 
.esg-cont .vision-wrap { flex: 1 1 70%; } 
.esg-cont .vision-wrap .vision-list { gap: 1em; } 
.esg-cont .vision-wrap .vision-list > li { flex: 1; border: 1px solid #eee; background: #f4f4f4; padding: 1em; box-sizing: border-box; border-radius: 5em; margin-bottom: .5em;} 
.esg-cont .vision-wrap .vision-list > li.w1 {flex: 1 1 50%; border: unset; background: unset; padding: unset; margin-bottom: unset;}
.esg-cont .vision-wrap .vision-list > li:last-child {margin-bottom: unset;}
.esg-cont .vision-wrap .vision-list > li .icon-wrap { text-align: center; background: var(--siteC); width: 3em; height: 3em; line-height: 3em; color: #fff; border-radius: 50%;margin-right: 2em;} 
.esg-cont .vision-wrap .vision-list > li .txt-wrap { } 
.esg-cont .vision-wrap .vision-list > li .txt-wrap .tit { font-size: 1.125em; color: #333; font-weight: 600; } 
.esg-cont .vision-wrap .vision-list > li .txt-wrap .txt { font-size: 1.125em; color: #555; margin-top: 1em; line-height: 1.5em; }

.skill01_con1 {background: #f4f4f4; padding: 3em;}
.skill01_con1 .con1_list {gap: 1em;}
.skill01_con1 .con1_list .list {width: calc(33.3% - 1em); background: #fff; padding: 2em 0;}
.skill01_con1 .con1_list .list.w2 {width: calc(50% - 1em);}
.skill01_con1 .con1_list .list .xi {background: var(--siteC); color: #fff; width: 3em; height: 3em; line-height: 3em; border-radius: 50%;}
.skill01_con1 .con_img {gap: 1em;}
.skill01_con1 .con_img .left {width: 55%; background: #fff; padding: 3.1em 1em;}
.skill01_con1 .con_img .right {}

.skill01_con2 { padding: 3em 0;}
.skill01_con2 .con2_list {gap: 4em;}
.skill01_con2 .con2_list li {width: calc(50% - 4em);}
.skill01_con2 .con2_list li .tit {background: var(--siteC); color: #fff; padding: 1em; text-align: center; border-radius: 4em;}
.skill01_con2 .con2_list li .tit.c2 {background: #208be9;}
.skill01_con2 .con2_list li .tit2 {background: #f4f4f4; padding: 1em; text-align: center; border-radius: 4em;}
.skill01_con2 .con2_list li .tit2 i {width: 1.5em; height: 1.5em; line-height: 1.5em; font-size: 1em; background: var(--siteC); color: #fff; border-radius: 50%; vertical-align: baseline;}
.skill01_con2 .con2_list li .t1 {}
.skill01_con2 .con2_list li .t2 {}
.skill01_con2 .con2_list li .detail_box {padding: 1em 2em;}
.skill01_con2 .con2_list li .detail_box i {border: 1px solid var(--siteC); width: 1.5em; height: 1.5em; line-height: 1.5em; font-size: 1em; color: var(--siteC); border-radius: 50%; vertical-align: baseline; text-align: center;}
.skill01_con2 .con2_list2 {gap: 1em;}
.skill01_con2 .con2_list2 li {width: calc(33.3% - 1em); text-align: center;}
.skill01_con2 .con2_list2 li .img {}
.skill01_con2 .con2_list2 li .tt {min-height: 3em; margin-top: 1em;}

.skill01_con3 {background: #f4f4f4; padding: 3em; margin-top: 2em;}
.skill01_con3 .con3_list {gap: 1em; margin-top: 3em;}
.skill01_con3 .con3_list li {width: calc(33.3% - 1em); overflow: hidden; }
.skill01_con3 .con3_list li .img {padding: 42.3% 0; border-radius: 50%; position: relative; overflow: hidden; border: 12px solid #b8ddff;}
.skill01_con3 .con3_list li .img::before {background: rgba(0,91,172, .8); position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%;}
.skill01_con3 .con3_list li .img .page-tt {z-index: 1;}

.skill01_con4 { padding: 3em 0;}
.skill01_con4 .con_top {gap: 1em; background: #f4f4f4; padding: 2em;}
.skill01_con4 .con_top .inn_tbox {border: 2px dashed var(--siteC); border-radius: .5em; padding: .5em; background: #fff; min-height: 17.67em;}
.skill01_con4 .con_top .left {width: calc(30% - 1em);}
.skill01_con4 .con_top .right {width: calc(70% - 1em);}
.skill01_con4 .con_top .right .inn_tbox {gap: 1em;}
.skill01_con4 .con_top .right .inn_tbox .in_left {width: calc(50% - 1em);}
.skill01_con4 .con_top .right .inn_tbox .in_right {width: calc(50% - 1em);}
.skill01_con4 .con_top .tit {border: 2px solid var(--siteC); color: var(--siteC); background: #daeeff; margin-bottom: 1em; padding: .5em 0;}
.skill01_con4 .con_top .tit2 {background: var(--siteC); color: #fff; padding: 1em; text-align: center; border-radius: 4em; margin-bottom: .5em;}
.skill01_con4 .con_top .tit2.c1 {background: #208be9;}
.skill01_con4 .con_top .t1 {background: #e9e9e9; padding: 0.5em; text-align: center; margin-bottom: .5em;}
.skill01_con4 .con_top .t1:last-child {margin-bottom: 0em;}

.skill01_con4 .con4_img {background: #f4f4f4; margin-top: 3em;}
.skill01_con4 .con4_list {margin-top: 3em;}
.skill01_con4 .con4_list li {margin-bottom: 3em;}
.skill01_con4 .con4_list li .tit {background: var(--siteC); color: #fff; padding: 1em; text-align: center; border-radius: 4em; width: 50%; margin: 0 auto;}
.skill01_con4 .con4_list li .tit.c2 {background: #208be9;}
.skill01_con4 .con4_list li .tit2 {background: #f4f4f4; padding: 1em;}
.skill01_con4 .con4_list li .tit2 i {width: 1.5em; height: 1.5em; line-height: 1.5em; font-size: 1em; background: var(--siteC); color: #fff; border-radius: 50%; vertical-align: baseline;}
.skill01_con4 .con4_list li .con_datail {gap: 1em; margin-top: 3em; }
.skill01_con4 .con4_list li .con_datail .left {width: calc(55% - 1em);}
.skill01_con4 .con4_list li .con_datail .right {width: calc(45% - 1em);}
.skill01_con4 .con4_list li .con_datail .right .detail_box {margin-top: 1em; padding: 0 1em;}

.skill02_con1 {}
.skill02_con1 .con1_list {gap: 1em;}
.skill02_con1 .con1_list li {flex: 1; border: 1px solid #eee; background: #f4f4f4; padding: 1em; box-sizing: border-box; border-radius: 5em; margin-bottom: .5em;}
.skill02_con1 .con1_list li .icon_wrap {text-align: center; background: var(--siteC); width: 3em; height: 3em; line-height: 3em; color: #fff; border-radius: 50%;margin-right: 2em;}

.skill02_con2 {gap: 2em; padding: 3em 0; background: #f4f4f4;}
.skill02_con2 .left {width: 55%; border-right: 1px solid #ddd;}
.skill02_con2 .right {width: 40%; padding: 0 2em;}
.skill02_con2 .right .tit {background: var(--siteC); color: #fff; padding: .5em 1em; border-radius: 3em; margin-bottom: 1em;}

.skill02_con3 {gap: 2em; padding-bottom: 3em;}
.skill02_con3 .left {width: 60%;}
.skill02_con3 .right {width: 40%; padding: 2em; background: #f4f4f4; border-radius: .8em; box-sizing:border-box;}

.skill01_con5 {}
.skill01_con5 .con_img {gap: 1em;}
.skill01_con5 .con_img .img {}
.skill01_con5 .con_img .icon {background: var(--siteC); width: 2em; height: 2em; line-height: 2em; text-align: center; color: #fff; border-radius: 50%;}
.skill01_con5 .con5_list {gap: 1em;}
.skill01_con5 .con5_list li {width: calc(48% - 1em); text-align: center; background: #f4f4f4; border-radius: .8em; padding: 1em;}

.carbon_wrap3 {gap: .5em;}
.carbon_wrap3 .in_box {border: 1px dashed #ddd; border-radius: 1em; padding: 2em;}
.carbon_wrap3 .in_box.w1 {width: 70%;}
.carbon_wrap3 .in_box.w2 {width: 30%;}
.carbon_wrap3 .in_box .detail {}
.carbon_wrap3 .in_box .top_t {background: var(--siteC); margin-bottom: 1em; text-align: center; padding: 1em 0; color: #fff; font-size: 1.25em; font-weight: 600; border-radius: 0.5em;}
.carbon_wrap3 .in_box .bot_t {text-align: center; padding: .5em; text-align: center; background: #bfe1ff;}
.carbon_wrap3 .in_box .che_t {background: var(--siteC); padding: 0.5em 3em; text-align: center; color: #fff; font-size: 0.9em;}

.img_boxWrap { } 
.img_boxWrap .img_boxlist { position:relative; } 
.img_boxWrap .img_boxlist:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%; margin: 0 auto; background: #ddd; height: 2px; content: ''; } 
.img_boxWrap .img_boxlist > li { flex: 1 1 16.66%; max-width: 16.66%; } 
.img_boxWrap .img_boxlist > li > .in { color: #fff; text-align: center; } 
.img_boxWrap .img_boxlist > li > .in > .imgfix { position:relative; height: 12.5em; border-radius: 50%; overflow: hidden; box-shadow: 6px 12px 18px rgba(0,0,0, .35); } 
.img_boxWrap .img_boxlist > li > .in > .imgfix:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--siteC); content: ''; } 
.img_boxWrap .img_boxlist > li > .in > .imgfix > img { width: 100%; height: 100%; object-fit: cover; } 
.img_boxWrap .img_boxlist > li > .in > .imgfix > .intxt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 
.img_boxWrap .img_boxlist > li > .in > .imgfix > .intxt > .e_t { font-size: 1.45em; font-weight: 600; text-transform: uppercase; } 
.img_boxWrap .img_boxlist > li > .in > .imgfix > .intxt > .h_t { font-size: 1.25em; font-weight: 700; margin-top: .5em; } 

.page_inFo_Wrap1{ position:relative;}
.doc.pb0 .page_inFo_Wrap1:last-child{ padding-bottom:8em;}
.page_inFo_Wrap1.no_mar{ padding:0 0;}
.page_inFo_Wrap1.bg1{ background:#f7f7f7;}
.page_inFo_Wrap1 .title {text-align:center; padding-bottom:4em;}
.page_inFo_Wrap1 .title > * {display:block;}
.page_inFo_Wrap1 .title .t1 {font-weight:700; font-size:2em; position:relative; display:inline-block}
.page_inFo_Wrap1 .title .t1:before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:.45em; background:var(--siteC); opacity:.15;}
.page_inFo_Wrap1 .list{ gap:1.5em 1.5em;}
.page_inFo_Wrap1 .list > li{width: calc(33.3% - 1.5em); counter-increment:subListIdx;}
.page_inFo_Wrap1 .list > li .in{ flex:1; background:#fff; box-shadow: 0 0 1em rgb(0,0,0,.1);}
.page_inFo_Wrap1 .list .img{ overflow:hidden;}
.page_inFo_Wrap1 .list .img img{ width:100%; height:100%; object-fit:cover;}
.page_inFo_Wrap1 .list .con{ position:relative; padding:2em 1em; text-align:center;}
.page_inFo_Wrap1 .list .con .num{ position:absolute; top:0; left:50%; width:2.5em; line-height:2.5em; background:var(--siteC); border-radius:50%; text-align:center; color:#fff; transform:translate(-50%,-50%)}
.page_inFo_Wrap1 .list .con .num:before{ content:counter(subListIdx); font-size:1.125em; font-weight:600;}
.page_inFo_Wrap1 .list .con .tit{ font-size:1.375em; color:#005089; font-weight:500;}
.page_inFo_Wrap1 .list .con .txt{ font-size:1.063em; color:#555; line-height:1.5em; margin-top:.5em;}
.list > li .in .con .dot_con{ margin-top: 1.5em;}
.list > li .in .con .dot_con p { font-size:1.05em;}
.list > li .in .con .dot_con .dot{ position: relative; text-align: left; font-size: 1em; margin-top: .5em;}
.list > li .in .con .dot_con .dot:before{ position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #005089; content: ''; top: 6px; left: -15px;}
.list > li .in .con .dot_con .dot:first-of-type{ margin-top: 0em;}

/*  */

/*기업목표*/
.philosophy-wrap { position: relative; padding: 3em 0; background: #f4f4f4; margin: 3em 0;} 
.philosophy-list { gap: 7em 0; position: relative; z-index: 11; } 
.philosophy-list > li { flex: 0 1 calc(50% - 1.5em); } 
.philosophy-list > li .circle-in { position: relative; border: 3px solid var(--siteC); box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1); box-sizing: border-box; border-radius: 100px; padding: .875em 2em; text-align: left; gap: 1.5em; width: 67.5%; margin-left: 20%; background: var(--crWhite); } 
.philosophy-list > li:nth-child(1) .circle-in {flex-direction: row-reverse;}
.philosophy-list > li:nth-child(5) .circle-in { flex-direction: row-reverse; text-align: right; margin-left: 25%; margin-right: 0; } 
.philosophy-list > li:nth-child(3) .circle-in { margin-right: 0%; margin-left: 6%; flex-direction: row-reverse;} 
.philosophy-list > li:nth-child(4) .circle-in { margin-left: 35%; margin-right: 0; } 
.philosophy-list > li:nth-child(6) .circle-in {text-align: right; margin-left: 15%; margin-right: 0; } 
.philosophy-list > li .circle-in .icon-area { } 
.philosophy-list > li .circle-in .icon-area .imgfix { width: 60px; margin: 0 auto; } 
.philosophy-list > li .circle-in .txt-area { } 
.philosophy-list > li .circle-in .txt-area > span { display: block; font-size: 1.215em; } 
.philosophy-list > li .circle-in .txt-area > .cr_t { font-size: 1.215em; } 
.philosophy-list > li .circle-in .txt-area > .cr_tx { font-size: 1.1em; padding-top: .5em; } 

.philoCircle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; } 
.philoCircle .circleIn { width: 13em; height: 13em; border-radius: 50%; background: var(--siteC); box-shadow: 0 25px 30px #2E3B8030; position: relative; } 
.philoCircle .circleIn::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16em; height: 16em; border: 5px solid #ddd; border-radius: 50%; } 
.philoCircle .circleIn::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25em; height: 25em; border: 5px dotted #ddd; border-radius: 50%; } 
.philoCircle .circleIn .ltsp {} 
.philoCircle .circleIn .ltsp.p1 { font-size: 1.35em; padding-top: 3em; margin-bottom: .5em;} 
.philoCircle .circleIn .ltsp.p2 { font-size: 3.25em; } 
.philoCircle .circleIn .g1 { font-size: 1.85em; } 
.philoCircle .circleIn .g2 { font-size: 2.15em; } 


/*  */

.reverse-lay {}
.reverse-lay .list {}
.reverse-lay .list > li {
  margin-bottom: 3em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .03) ;
}
.reverse-lay .list > li:last-child {
  margin-bottom: 0;
}
.reverse-lay .list > li > dl {}
.reverse-lay .list > li > dl > dd {
  flex: 1 1 50%;
}
.reverse-lay .list > li:nth-child(even) > dl {
  flex-direction: row-reverse;
}
.reverse-lay .list > li > dl > .img-area {
  height: 25rem;
}
.reverse-lay .list > li > dl > .txt-area {
  padding: 6em 5em;
  box-sizing: border-box;
  background: var(--crWhite);
}
.reverse-lay .list > li > dl > .txt-area.c2 {background: var(--siteC); color: #fff;}
.reverse-lay .list > li > dl > .txt-area .tit {
  margin: 1em 0;
}
.reverse-lay .list > li > dl > .txt-area .txt {}

/* ceo */

.group_all {margin-top: 3em;}
.group_people {}
.group_people.st2 {margin-top: unset; border-top: unset; }
.membersN_wrap{ overflow:hidden}
.membersN_aniTit{ position:relative}
.membersN_aniTit.m1{ margin-top:2em}
.membersN_aniTit .tt{ position:absolute; left:0; width:100%; top:-.5em; white-space:nowrap; font-weight:700; line-height:1; opacity:.05; text-transform:uppercase}
.membersN_aniTit .tt .t1{  font-size:7em}
.membersN_aniTit .tt .t2{  font-size:5em}
.membersN_tit{ margin-bottom:1em}
.membersN_tit .t1{ font-weight:800; font-size:2.625em}
.membersN_tit:not(:first-child){ margin-top:5em}
.membersN{ display:flex; flex-wrap:wrap; position:relative; overflow:hidden}
.membersN > li{ width:100%}
.membersN > li .wrap_in{ position:relative;}
.membersN > li .wrap_in .img_wrap{ width:40%; overflow:hidden;}
.membersN > li .wrap_in .img_wrap .resize{ padding-bottom:106%}
.membersN > li .wrap_in .img_wrap .resize[onclick]{ cursor:pointer}
.membersN > li .wrap_in .img_wrap .resize[onclick]:after{ content:"\e97b"; font-family:xeicon; font-size:1.5em; width:2em; height:2em; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); border-radius:50%; opacity:0}
.membersN > li .wrap_in .img_wrap .resize[onclick]:hover{ box-shadow:0 0 5em rgba(0,0,0,.3) inset}
.membersN > li .wrap_in .img_wrap .resize[onclick]:hover:after{ opacity:1; transform:translate(-50%, -50%) scale(1.2); transition:.3s}
/* .membersN > li .wrap_in:not(.on) .img_wrap:hover .resize{ transform:scale(1.1); transition:1s} */
.membersN > li .wrap_in .con_wrap{ width:43%; max-height:100%; box-sizing:border-box; padding:0 0 0 3.75em; display:flex; flex-direction:column; gap:1em 0}
.membersN > li .wrap_in .con_wrap .grow{ flex:1 1 0%; min-height:0; display:flex; flex-direction:column}
.membersN > li .wrap_in .con_wrap .scrollst{ padding:1.25em; background:#fff; }
.membersN > li .wrap_in .con_wrap .scrollst.st2 { background:#fff;}
.membersN > li .wrap_in .con_wrap .tit_wrap{ display:flex; gap:.5em; align-content: flex-end; align-items: flex-end;}
.membersN > li .wrap_in .con_wrap .name{ font-weight:700; font-size:2.5em; color:#093168}
.membersN > li .wrap_in .con_wrap .subject{ color:#42454d; font-size:1.375em}
.membersN > li .wrap_in .con_wrap .info{ position:relative;}
.membersN > li .wrap_in .con_wrap .info .tit{ font-size:1.25em;padding:0 .5em}
.membersN > li .wrap_in .con_wrap .info .list > li{ color:#555}
.membersN > li .wrap_in .con_wrap .info .list > li:not(.point){ margin-bottom:.75em; position:relative; padding-left:.75em}
.membersN > li .wrap_in .con_wrap .info .list > li:not(.point):before{ content:"·"; position:absolute; left:0; top:0}
.membersN > li .wrap_in .con_wrap .info .list > li:last-child{ margin-bottom:0}
.membersN > li .wrap_in .con_wrap .info .list > li.point{ margin-bottom:.75em; font-weight:700; font-size:1.063em}
.membersN > li:nth-child(even) .wrap_in {flex-direction: row-reverse;}



/*사업분야*/
.bu_TTl{ margin: 4em 0 6em 0;}
.business_Wrap{ }
.business_Wrap .business_list{}
.business_Wrap .business_list .bu_list{ gap: 7.5em; margin-bottom: 6em; box-sizing:border-box;}
.business_Wrap .business_list .bu_list:nth-child(2n){ flex-direction: row-reverse; justify-content: space-between;}
.business_Wrap .business_list .bu_list:last-of-type{ margin-bottom: 0em;}
.business_Wrap .business_list .bu_list .bu_img{ width: 45%; height: 25em; border-radius: 1.5em; overflow: hidden; box-shadow: 3px 0 9px rgba(0,0,0,.15);}
.business_Wrap .business_list .bu_list .bu_img > img{ width: 100%; height: 100%; object-fit: cover;}
.business_Wrap .business_list .bu_list .bu_ttl{ width: 45%;}
.business_Wrap .business_list .bu_list .bu_ttl .b_subt{ text-transform: uppercase; font-weight: 600;}
.business_Wrap .business_list .bu_list .bu_ttl .b_ttl{ margin: .3em 0 1em 0; color: #333;}
.business_Wrap .business_list .bu_list .bu_ttl .bu_Intxt{padding: 1em; background: #f4f4f4;}
.business_Wrap .business_list .bu_list .bu_ttl .bu_Intxt > li > p{ font-size: 1.25rem; font-weight: 500; margin-bottom: .5em; color: #555;}
.business_Wrap .business_list .bu_list .bu_ttl .bu_Intxt > li:last-of-type{ margin-bottom: 0em;}

.business_Wrap .business_list .bu_list .bu_ttl .bu_Intxt > li .detail_txt{ background: #d1e4fe66; padding: .8em 2em; display: inline-block; border-radius: 1em;}
.business_Wrap .business_list .bu_list .bu_ttl .bu_Intxt > li .detail_txt > li{ position: relative; font-size: .95em; font-weight: 600; margin-bottom:.2em;}



/*연혁*/ 
/* Company - Story */
.story-con {
  position: relative;
}
.story-tab {
  position: sticky;
  left: 0;
  top: 5.75rem;
  border-radius: 100px;
  overflow: hidden;
  transition: all 0.3s;
  width: 100%;
  z-index: 999;
}
.story-tab.active {
  width: calc(100% - 10em);
  box-shadow: 0 10px 20px rgba(0,0,0,.1)
}
.story-tab > li {
  flex: 1;
  text-align: center;
  padding: 1em 1.5em;
  background: #f4f4f4;
  border-right: 1px solid #ddd;
  cursor: pointer;
  transition: 0.2s;
}
.story-tab > li:last-child {
  border: none;
}
.story-tab > li.on {
  background: var(--siteC);
  color: #fff;
}
.story-tab > li > span {
  font-size: 1.25rem;
  font-weight: 700;
}
.story-tab > li > p {
  margin-top: 0.5em;
  font-size: 0.875rem;
}

.story-info {
  padding: 3.5em 0;
}
.story-info .story-sec {}
.story-info .story-sec > li {
  position: relative;
}
.story-sec .line {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: #ddd;
  z-index: 0;
}
.story-info .story-sec .sec-bg {
  position: relative;
}
.story-info .story-sec .sec-bg::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  z-index: 2;
}
.story-info .story-sec .sec-bg .bg-txt {
  padding: 6em 3em;
  color: #fff;
  position: relative;
  z-index: 3;
}
.story-info .story-sec .sec-bg .bg-txt .year {
  font-size: 3em;
  font-weight: 700;
}
.story-info .story-sec .sec-bg .bg-txt .txt {
  font-size: 1.125em;
  font-weight: 500;
  margin-top: 1rem;
  padding-top: 1rem;
  position: relative;
  opacity: 0.9;
}
.story-info .story-sec .sec-bg .bg-txt .txt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5em;
  height: 1px;
  background: #fff;
}

.story-list-wrap {}

.story-list-wrap .list {
  padding: 5em 0 5em;
}
.story-list-wrap .list > li {
  gap: 10em;
  margin-bottom: 3em;
}

.story-list-wrap .list > li .txt-area {
  flex: 1;
  text-align: right;
  position: relative;
}
.story-list-wrap .list > li .txt-area .dot {
  position: absolute;
  right: -5em;
  top: 1.25rem;
  transform: translate(50%, 0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 3px solid #aaa;
  background: #fff;
}
.story-list-wrap .list > li .txt-area .dot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.2s;
  width: 1.5em;
  height: 1.5em;
  background: var(--siteC);
  border-radius: 50%;
  opacity: 0.2;
  z-index: 0;
}
.story-list-wrap .list > li.on .txt-area .dot {
  border-color: var(--siteC);
}
.story-list-wrap .list > li.on .txt-area .dot::before {
  transform: translate(-50%, -50%) scale(1);
}
.story-list-wrap .list > li .txt-area .date {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #888;
  transition: 0.2s;
}
.story-list-wrap .list > li.on .txt-area .date {
  color: var(--siteC);
}
.story-list-wrap .list > li .txt-area .content {
  font-size: 1.125rem;
  font-weight: 400;
}

.story-list-wrap .list > li .img-area {
  flex: 1;
}
.story-list-wrap .list > li .img-area .imgfix {
  width: 100%;
  max-width: 400px;
  height: 180px;
  overflow: hidden;
  border-radius: 10px;
}

/*  */
.flex_table2 .thead{ margin-bottom:1em}
.flex_table2 .tbody{ display:flex; flex-direction:column; height:100%}
.flex_table2 .tr{ flex:1 1 0%; min-height:0; display:flex; border:1px solid #ddd; box-sizing:border-box; overflow:hidden}
.flex_table2 .tr:not(:last-child){border-bottom:none}
.flex_table2 .tr:first-child{ border-top-left-radius:.5em; border-top-right-radius:.5em}
.flex_table2 .tr:last-child{ border-bottom-left-radius:.5em; border-bottom-right-radius:.5em}
.flex_table2 .td{ display:flex; flex-direction:column; align-items:center; min-height:2.5em; justify-content:center; text-align:center; flex:1 1 0%; min-width:0; box-sizing:border-box; padding:1em; border-right:1px solid #ddd}
.flex_table2 .td.al{ align-items:flex-start}
.flex_table2 .td:last-child{ border-right:none}
.flex_table2 .td.bg1{ background:#f5f5f5}
.flex_table2 .td.w1{ flex:0 0 10em}
.flex_table2 .td.w2{ flex:0 0 8em}
.flex_table2 .td.w3{ flex:0 0 15em}
.flex_table2 .td.w4{ flex:0 0 16em}
.flex_table2 .td.w5{ flex:0 0 26em}
.flex_table2 .td.wName{ flex:0 0 7em}
.flex_table2 .td.wPo{ flex:0 0 4em}
.flex_table2 .td.wMail{ flex:0 0 12em}
.flex_table2 .td.wTel{ flex:0 0 9em}
.flex_table2 .thead .tr{ box-shadow:0 .25em .5em rgba(0,0,0,.1); background:#fff; color:#0060ae}
.flex_table2 .thead .tr:first-child{ border-top-left-radius:0; border-top-right-radius:0; border-top:1px solid #0060ae}
.flex_table2 .flex_table2 { flex: 1 1 0; min-width:0}
.flex_table2 .flex_table2 .thead{ margin-bottom:0}
.flex_table2 .flex_table2 .tr{ border:none; border-bottom:1px solid #ddd}
.flex_table2 .flex_table2 .tr:last-child{ border-bottom:none}

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

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

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

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

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



/*  */
.skill_tit {gap: 9em; margin-bottom: 1em;}
.skill_tit .li { width: 33.3%; font-size: 1.5em; text-align: center; color: var(--siteC); font-weight: 500;}

.skill_wrap ul:after{content: '';display: block;clear: both;}
.skill_wrap .wrap{padding: 0 32px}
.skill_wrap ul{position: relative;}
.skill_wrap ul:before{content: '';display: block;width: 100%;height: 1px;border-bottom: 1px dashed #c3c3c3;position: absolute;top: 50%;margin-top: -1px;}
.skill_wrap ul li{float: left;border-radius: 60px;height: 100px;background: #f8f8fa;width: 23.5%;margin-right: 12.5%;display: table;padding: 9px;position: relative;z-index: 2}
.skill_wrap ul li:nth-child(1):before{display: none}
.skill_wrap ul li:nth-child(3):after{display: none}
.skill_wrap ul li:before{content: '';display: block;width: 16px;height: 12px;position: absolute;top: 50%;margin-top: -5px;background: url(../images/sub/skill_dot01.png);left: 0}
.skill_wrap ul li:nth-child(2):before{background: url(../images/sub/skill_dot03.png);margin-top: -6px}
.skill_wrap ul li:nth-child(2):after{background: url(../images/sub/skill_dot04.png);margin-top: -5px;}

.skill_wrap ul li:after{content: '';display: block;width: 16px;height: 12px;position: absolute;top: 50%;margin-top: -6px;background: url(../images/sub/skill_dot02.png);right: 0}
.skill_wrap ul li:last-child{margin-right: 0}
.skill_wrap ul li > div{display: table-cell;vertical-align: middle;text-align: center;border: 1px solid #c9cedc;border-radius: 50px;}
.skill_wrap ul li > div strong{display: block;font-size: 1.25em;color: #565656; font-weight:600;}
.skill_wrap ul li > div p {display: block;font-size: 1.05em;color: #565656; font-weight:600;}

.join-divi {margin-bottom: 3em;}

.dot { position:relative;margin-left:1em;font-weight:500;}
.dot:before { position:absolute; content:""; width:3px; height:3px; background:#333;border-radius:5px;top:25%;left:-.65em;}
.underLine{ position:relative;}
.underLine:before { position: absolute;content: "";width: 110%;height: 0.7em;background: #1f5aa7;border-radius: 1em;top: 0.85em;left: -5%;z-index: -1;opacity: .15;}
.detali_box {padding: 1em 2em; background: #f4f4f4; margin-top: 2em;}

.con_box {}
.con_box .inn {border: 1px solid #0060ae; padding: 3em 1em; border-radius: .8em; margin-bottom: 1em;}
.con_box .inn:last-child {margin-bottom: 0;}
.con_box .inn .min_tit {font-size: 1.25em; color: #fff; background: #0060ae; padding: .5em 1em; border-radius: 3em; display: inline-block; margin-bottom: 2em;}
.con_box .inn .con .t1 {font-size: 1.5em; font-weight: 800; color: #0060ae;}
.con_box .inn .con .t2 {font-size: 1.125em; border: 2px dashed #0060ae; border-radius: .5em; display: inline-block; padding: .5em 1em; margin-bottom: 2em; font-weight: 600;}
.con_box .inn .con .t3 {font-size: 1.05em; margin-bottom: .5em;}
.con_box .inn .con .t3:last-child {margin-bottom: 0em;}
.con_box .inn .con .t4 {font-size: 1.25em; display: inline-block; font-weight: 600;}
.con_box .inn .con .con_img {gap: 1em;}
.con_box .inn .con.flex {gap: 2em;}
.con_box .inn .con.flex .left {width: 50%;}
.con_box .inn .con.flex .right {width: 50%;}
.con_box .inn .con .img_wrap {gap: .5em;}
.con_box .inn .con .img_wrap .img {border: 1px solid #ddd;}
.con_box .inn .t1 {font-size: 1.5em; font-weight: 800; color: #0060ae; margin-bottom: 2em;}

.invest_con1 {}
.invest_con1 .list {}
.invest_con1 .list .top_ti {font-size: 1.25em; font-weight: 600; margin-bottom: .5em; background: #333; color: #fff; padding: .3em 1em; display: inline-block; border-radius: 1em;}
.invest_con1 .list .con_box {padding: 2em 0;}
.invest_con1 .list .con_box.st1 {padding: 0 0;}
.invest_con1 .list .con_box.st1 .sec .inn {background: #0060ae; color: #fff;}
.invest_con1 .list .con_box .sec.s1 {width: 37.5%;}
.invest_con1 .list .con_box .sec.s2 {width: 26%;}
.invest_con1 .list .con_box .sec .tit {font-size: 1.25em; margin-bottom: 1em; text-align: center; font-weight: 600;}
.invest_con1 .list .con_box .sec .tit2 {font-size: 1.1em; margin-bottom: 1em; text-align: center; font-weight: 600;}
.invest_con1 .list .con_box .sec .inn {gap: 0.5em;}
.invest_con1 .list .con_box .xi {background: #333; border-radius: 50%; color: #fff; width: 2em; height: 2em; text-align: center; margin: 0 0.5em;}
.invest_con1 .list .con_box .xi i {font-size: 1.2em;}
.invest_con1 .list .con_box .circle {background: #333; width: 8em; height: 8em; text-align: center; border-radius: 50%; font-weight: 500;}
.invest_con1 .list .con_box .circle.w2 {margin: 0 auto;}
.invest_con1 .list .con_box .circle.s2 {background: #333; color: #fff;}
.invest_con1 .list .con_box .circle.s3 {background: var(--siteC); color: #fff;}
.invest_con1 .list .con_box .circle.s4 {background: #0068a5; color: #fff;}
.invest_con1 .list .con_box .circle.s5 {background: #c96804; color: #fff;}
.invest_con1 .list .con_box .circle.s6 {background: #21833f; color: #fff;}
.invest_con1 .list .con_box .circle.s7 {background: #38438f; color: #fff;}

.invest_con1 .list .list_top .div-container {width: 35%;}

/* 비전 */
.vision_top .vision_tit {position: relative;}
.vision_top .vision_tit::after {position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: .4em; background: #b4bfd1; opacity: .4; border-radius: 1em; z-index: -1;}

.vision_4t {background: #005bac; padding: 1em 2em; border-radius: 1em; color: #fff; font-size: 1.25em; width: 18%; margin: 0 auto;}

.sub_list{ display:flex; flex-wrap:wrap}
.sub_list > li{ flex:1 1 1%;}
.sub_list > li{ counter-increment: subListIdx;}
.sub_list > li .wrap_in .no:before{content:counter(subListIdx)}

.sub_list.st5 {gap: 0.5em;}
.sub_list.st5 li .in_top {margin-bottom:1em;}
.sub_list.st5 li .in_top .in {border-radius:50%; background:#fff; border:1px solid #005bac; padding:2.5em; width: 6em; height: 6em; margin:0 auto 1.5em;}
.sub_list.st5 li .in_top .in .ico { margin-bottom:.5em;}
.sub_list.st5 li .in_top .in .con { font-size:1.1em; font-weight:500; color:#005bac;}
.sub_list.st5 li .in_top .vision_t1 {padding: 1em; background: #005bac; color: #fff; border: 1px solid #005bac; margin-bottom: 0.5em;}
.sub_list.st5 li .in_top .vision_t2 {padding: 1em; background: #fff; color: #005bac; border: 1px solid #005bac;}
.sub_list.st5 li .down_ico { font-size: 1.5em; color: #005bac;}
.sub_list.st5 li .in_bott { padding:1em; background: #cbe7ff; margin-top:.5em; min-height: 3em;}
.sub_list.st5 li .in_bott .tt {font-size:1em; font-weight: 500; min-height: 5.2em;}
.sub_list.st5 li .in_bott .tt[data-ico]{ padding-left:1.3em; position:relative}
.sub_list.st5 li .in_bott .tt[data-ico]:before{ content:attr(data-ico); position:absolute; left:0; top:0}

.investor_bot {}
.investor_bot li {width: 30%;}
.investor_bot li.arrow {width: 2%; margin: 0 1em;}
.investor_bot li.arrow p {padding-bottom: 4.5em;}
.investor_bot li .page-tt {min-height: 3em; margin-top: 1em;}
.investor_bot li .page-tt span {font-weight: 700; vertical-align: baseline;}

.vision_list .list_wrap { text-align: center; gap: 1em;}
.vision_list .list_wrap .list_con {width: calc(48% - 1em); background: #dceaf7; border-radius: 9em; gap: 1em; padding: 1em;}
.vision_list .list_wrap .list_con.w1 {width: calc(100% - 1em); background: #f4f4f4; padding: unset;}
.vision_list .list_wrap .list_con .circle_wrap .circle { position: relative; width: 15.5em; height: 15.5em; background: #fff; border-radius: 50%; border: 1px solid #ddd; box-shadow: 0 0 0.5em rgb(0 0 0 / 10%); }
/* .vision_list .list_wrap .list_con .circle_wrap .circle:before { position: absolute; content: ""; width: 1px; height: 3.125em; background: #ddd; bottom: 0; } */

.vision_list .list_wrap .list_con .circle_wrap .circle_tt { position: absolute; }
.vision_list .list_wrap .list_con .circle_wrap .circle_tt img {background: #fff; padding: 1em; border-radius: 50%; border: 7px solid #ddd;}
.vision_list .list_wrap .list_con .circle_wrap .circle_tt .t1 { margin-top: 2em; text-transform: uppercase;}
.vision_list .list_wrap .list_con .circle_wrap .circle_tt .t2 { font-size: 1.25em; font-weight: 600; margin-top: 0.5em;}
.vision_list .list_wrap .list_con p { color: #000; }
.vision_list .list_wrap .list_con .t3 { font-size: 1.05em; width: 50%; font-weight: 500;}
.vision_list .list_wrap .list_con .t4 { font-size: 1.25em; font-weight: 600;}

.vision_list.st2 .list_wrap .list_con {width: calc(40% - 1em); border-radius: 9em; gap: 1em; padding: unset; background: #fff;}
.vision_list.st2 .list_wrap .list_con .circle_wrap .circle { position: relative; width: 15.5em; height: 15.5em; background: #fff; border-radius: 50%; border: 1px solid #ddd; box-shadow: 0 0 0.5em rgb(0 0 0 / 10%); }
/* .vision_list.st2 .list_wrap .list_con .circle_wrap .circle:before { position: absolute; content: ""; width: 1px; height: 3.125em; background: #ddd; bottom: 0; } */


.patent_flex {gap:4em; border: 2px dashed var(--siteC); padding: 1em 0;}
.patent_flex .patent {width: 20%; border:1px solid #ddd;}
.patent_flex .tit_box {width: 45%;}

.page_con {border-top: 1px solid #ddd; padding: 6em 0;}
.page_con.bg1 {background: #f0f4f9; border-top: unset;}

#captchaImg {width: 15em; flex: unset !important; margin-top: .5em;}
.captcha_btn {background: var(--siteC); border: 1px solid var(--siteC); width: 2.5em; height: 2.5em; display: block; flex: unset !important; text-align: center; line-height: 2.5em; color: #fff; border-radius: 1em; font-size: 1.5em; margin-left: .5em;}
.captcha_btn:hover {background: #fff; color:var(--siteC) ;}

/* popup */
.popup {border-radius: 1em; border: unset !important;}
.pop_bottom {}
.pop_bottom .left { padding: 0 1em .5em;}
.pop_bottom .left input {border: none; margin-left: .5em; vertical-align: bottom; width: 1.2em; height: 1.2em;}
.pop_bottom .right {padding: 0 1em .5em;}
.pop_bottom .right a {border: 1px solid #111; width: 4em; text-align: center; height: 2em; line-height: 2em; border-radius: .5em;}
.pop_bottom .right a:hover {background: #f4f4f4;}


/***** MAIN *****/
/**/
/* .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%}
.vod_wrap .layer.gra{ background: linear-gradient(0deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,.3) 100%);}

.visualSlide .el{ position: relative; overflow:hidden; height:100vh; background:#fff}
.visualSlide .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.2)}
.visualSlide .el .vod_wrap{ position:relative; height:100%}
.visualSlide .el.swiper-slide-active .vod_wrap:after,
.visualSlide .el.swiper-slide-duplicate-active .vod_wrap:after{ transition:2s; opacity:.2}
.visualSlide .el.swiper-slide-active .bg,
.visualSlide .el.swiper-slide-duplicate-active .bg{ transition:5s; transform:scale(1) rotate(.001deg)}
.visualSlide .el:nth-child(3n - 2) .bg{ height:110%; transform:scale(1)}
.visualSlide .el.swiper-slide-active:nth-child(3n - 2) .bg,
.visualSlide .el.swiper-slide-duplicate-active:nth-child(3n - 2) .bg{ transform:translateY(-9.0909%) rotate(.001deg)}
.visualSlide .el:nth-child(3n - 1) .bg{ width:110%; transform:scale(1)}
.visualSlide .el.swiper-slide-active:nth-child(3n - 1) .bg,
.visualSlide .el.swiper-slide-duplicate-active:nth-child(3n - 1) .bg{ transform:translateX(-9.0909%) rotate(.001deg)}

.visualSlideSlogan_wrap{ position:absolute; left:0; width:100%; bottom:0; box-sizing:border-box; z-index:10; color:#fff; height:100%}
.visualSlideSlogan_wrap .wrapIn{ display:flex; flex-direction:column; height:100%}
.visualSlide_wrap .slogan{ flex:1 1 0%; min-height:0; text-align:center; display:flex; flex-direction:column; justify-content:center}
.visualSlide_wrap .slogan .tLogo{ height:5.5em; margin-bottom:1.5em}
.visualSlide_wrap .slogan .tLogo path{ fill:#fff}
.visualSlide_wrap .slogan .t1{ font-size:5.5em; font-weight:900}
.visualSlide_wrap .slogan .t2{ font-size:2em; letter-spacing:.125em}
.visualSlide_wrap .slogan .point{ font-weight:700;}
.visualSlide_wrap .slogan .ani{ overflow:hidden}
.visualSlide_wrap .slogan .ani > i{ transform:translateY(200%); opacity:0}
.visualSlide_wrap .slogan .ani.on > i{ transform:translateY(0); opacity:1; transition:2s; transition-delay:.5s}
.visualSlide_wrap .slogan .ani > path{ transform:translateY(200%); opacity:0}
.visualSlide_wrap .slogan .ani.on > path{ transform:translateY(0); opacity:1; transition:2s; transition-delay:.5s}
 */

.visualSlide_control{ margin-top:2em; display:flex; align-items:flex-end; width:100%}
.visualSlide_control .control{ margin:0 0 1em auto}
.visualSlide_control .paging{ width:5em; text-align:center;}
.visualSlide_control .paging .swiper-pagination-current{ font-weight:700}

.mainScroll{ color:#fff}
.mainScroll .tt{ display:block; font-size:.875em; font-weight:500; margin:0 0 2.5em 0}
.mainScroll .tt .xi{ font-size:1.5em; margin-right:.25em; position:relative}

.main_wrap{ position:relative; margin-top:100vh; background:#fff}
.main_box{ padding:4em 0; overflow:hidden}
.main_box.bg1{ background:#f5f5f5}

.main_tit{ margin-bottom:2em; display:flex; flex-direction:column; align-items:flex-start; gap:1em}
.main_tit.hc{ align-items:center; text-align:center}
.main_tit.vc{ justify-content:center}
.main_tit .tit1{ font-size:3em; font-weight:900; letter-spacing:-.05em}

.main_more_menu{ display:flex; gap:1em; margin-top:4em}
.main_more_menu > li{ width:calc(16.66% - .6666em)}
.main_more_menu > li > a{ position:relative; display:block}
.main_more_menu > li > a .bg{ display:block; overflow:hidden}
.main_more_menu > li > a .bg .resize{ padding-bottom:133%}
.main_more_menu > li > a .bg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.5; transition:.3s}
.main_more_menu > li > a .con{ position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1em; color:#fff}
.main_more_menu > li > a .con .t1{ font-weight:700; font-size:1.375em}
.main_more_menu > li > a .con .more{ font-size:.875em}
.main_more_menu > li > a:hover .bg .resize{ transform:scale(1.2); transition:2s}
.main_more_menu > li > a:hover .bg:after{ opacity:.3}

.main_about{ position:relative; padding:5em 0 7em 0; color:#fff; overflow:hidden}
.main_about .wrapBg{ position:absolute; left:0; top:0; width:100%; height:100%; background-attachment:fixed}
.main_about .wrapBg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--siteC); opacity:.5}
.main_about .wrapIn{ position:relative; display:flex; flex-direction:column; align-items:center; justify-cotnent:center; gap:2em; text-align:center}
.main_about .wrapIn .t1{ font-weight:700; font-size:2.25em}
.main_about .wrapIn .t2{ font-size:1.125em; line-height:1.6}
.main_about .wrapTit{ position:absolute; left:0; bottom:-.5em; width:100%; overflow:hidden; line-height:1}
.main_about .wrapTit > i{ font-size:4.5em; text-transform:uppercase; font-weight:900; opacity:.3; mix-blend-mode:overlay}


.mainNews_wrap{}
.mainNews_wrap .wrap_in .cell .tt1{ white-space: wrap; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2}

.mainNewsSlide_wrap{ overflow:hidden; position:relative; z-index:10}
.mainNewsSlide_wrap .control{ margin-top:2em; gap:.25em}
.mainNewsSlide_wrap .control .paging{ margin-right:2em}
.mainNewsSlide{ overflow:visible !important}
.mainNewsSlide .el .wrap_in{ border-radius:1em; overflow:hidden; position:relative; color:#fff}
.mainNewsSlide .el .wrap_in .bg{ height:100%}
.mainNewsSlide .el .wrap_in .con{ position:absolute; left:0; bottom:0; box-sizing:border-box; padding:2em; display:flex; flex-direction:column; gap:.75em 0}
.mainNewsSlide .el .wrap_in .con .cate{ font-weight:700; text-transform:uppercase; font-size:.938em}
.mainNewsSlide .el .wrap_in .con .tit{ font-size:1.375em; font-weight:700}
.mainNewsSlide .el .wrap_in .con .tt{ font-size:1.063em; line-height:1.4; opacity:.8}
.mainNewsSlide .el:not(.bgNo) .wrap_in .con{ transform:translateY(100%); opacity:0}
.mainNewsSlide .el:not(.bgNo) .wrap_in:hover{ background:#000; transition:.3s}
.mainNewsSlide .el:not(.bgNo) .wrap_in:hover .con{ transform:translateY(0); opacity:1; transition:.3s}
.mainNewsSlide .el:not(.bgNo) .wrap_in:hover .bg{ opacity:.6; transition:.3s}
.mainNewsSlide .el.bgNo.c1 .wrap_in{ background:#fff; color:#111}
.mainNewsSlide .el.bgNo.c1 .wrap_in .con .cate{ color:#e31e26}
.mainNewsSlide .el.bgNo.c2 .wrap_in{ background:#e31e26}
.mainNewsSlide .el.bgNo .bg{ display:none}

.mainT{position:relative; z-index:10}
.scroll .visualSlide_wrap .visual_bottom{ width:100%}
.scroll .visualSlide_wrap .visual_bottom img{filter:brightness(0) invert(1)}
.scroll .mainT{ margin-top:-4em; transition:.3s}
.scroll .visualSlide_wrap .visual_bottom .control{ display:none}

.visualSlide_wrap.st1 .visual_bottom{ width:100%}
.visualSlide_wrap.st1 .visual_bottom img{filter:brightness(0) invert(1)}
.mainT.st1{ margin-top:-5vw}
.visualSlide_wrap.st1 .visual_bottom .control{ display:none}
.visualSlide_wrap.st1 .visualSlide .el{ height:77vh}

.mainNewsSlide_wrap.st1 .mainNewsSlide{ overflow:hidden !important}
.mainNewsSlide_wrap.st1 .mainNewsSlide .el .wrap_in{ display:flex; align-items:flex-end; color:inherit; border-radius:0; gap:1.5em}
.mainNewsSlide_wrap.st1 .mainNewsSlide .el .wrap_in .wrap_img{ width:45%; border-radius:1em; overflow:hidden}
.mainNewsSlide_wrap.st1 .mainNewsSlide .el .wrap_in .wrap_img .img{ transition:1s}
.mainNewsSlide_wrap.st1 .mainNewsSlide .el .wrap_in .con{ position:relative; transform:translateY(0); opacity:1; flex:1 1 0%; min-width:0; padding:.5em 0}
.mainNewsSlide_wrap.st1 .mainNewsSlide .el .wrap_in .con .cate{color:#e31e26; position:relative}
.mainNewsSlide_wrap.st1 .mainNewsSlide .el .wrap_in .con .cate:after{ content:""; position:absolute; width:0; height:1px; right:100%; margin-right:.5em; top:50%; background:#e31e26; transition:.3s}
.mainNewsSlide_wrap.st1 .mainNewsSlide .el .wrap_in:hover{ background:none}
.mainNewsSlide_wrap.st1 .mainNewsSlide .el .wrap_in:hover .wrap_img .img{ transform:scale(1.1)}
.mainNewsSlide_wrap.st1 .mainNewsSlide .el .wrap_in:hover .con .cate:after{ width:3em}

.main_cont{ display:flex; flex-wrap:wrap; gap:3em; margin-top:4em}
.main_cont.gap1{ gap:2em}
.main_cont .wrap_box{ box-shadow:0 0 2em rgba(0,0,0,.2); border-radius:1em; background:#fff; box-sizing:border-box; padding:4em; width:100%; position:relative; overflow:hidden}
.main_cont .wrap_box.w1{ width:calc(50% - 1.5em)}
.main_cont .wrap_box.w2{ width:calc(33.3333% - 1.3333em)}
.main_cont .wrap_bg{ position:absolute; left:0; top:0; width:100%; height:100%; transition:1s}
.main_cont .wrap_con{ display:flex; align-items:center; gap:0 4em}
.main_cont .wrap_con{ margin-top:1em}
.main_cont .wrap_box[onclick]:hover .main_more{ transform:translateX(.5em); transition:.3s}
.main_cont .wrap_box[onclick]:hover .wrap_bg{ transform:scale(1.1)}
.main_cont .count{ display:flex; width:28%; justify-content:space-between; padding:2em 0}
.main_cont .count > li .wrap_in{ display:flex; flex-direction:column; align-items:center}
.main_cont .count > li .wrap_in .ico{ height:3.5em; margin-bottom:1.75em}
.main_cont .count > li .wrap_in .tit{ color:#666; font-weight:500; font-size:1.063em}
.main_cont .count > li .wrap_in .no{ display:flex; align-items:center; justify-content:center; line-height:1; gap:0 .25em; margin-top:.25em; box-sizing:border-box; width:100%; min-width:8em}
.main_cont .count > li .wrap_in .no .t1{ font-size:1.5em; font-weight:900}
.main_cont .count > li .wrap_in .no .xi{ color:#e31e26; font-size:1em}


/****** main new  *****/
.mainTop{ 
  height: calc(100vh - var(--headerH));
  margin-top: var(--headerH);
  padding: 1.5em 0;
  box-sizing: border-box;
}
.mainTop .wrapIn{
  display: flex;
  flex-direction: column;
  gap: 1em;
  height: 100%;
}
.mainTop .mainTop_sec{ gap: 1em;}
.mainTop .mainTop_sec.sec1{
  height: 25%;
}
.mainTop .mainTop_sec.sec1 .link{}
.mainTop .mainTop_sec.sec1 .link > a{
  display: flex;
  flex-direction: column;
  width: 100%; 
  height: 100%;
  padding: 2.5em;
  background: var(--crGrad1);
  box-sizing: border-box;
}
.mainTop .mainTop_sec.sec1 .link > a.st2 {
  background: linear-gradient(to right, var(--gradC3), var(--gradC4));
}
.mainTop .mainTop_sec.sec1 .link:hover > a.st2 {
  background: var(--crGrad2);
  transition: .3s;
}
.mainTop .mainTop_sec.sec1 .link > a .tit{
  font-weight: 600;
  font-size: 2em;
  color:#fff;
}
.mainTop .mainTop_sec.sec1 .bgSlide_wrap{ height: 100%;}
.mainTop .mainTop_sec.sec1 .bgSlide2{ height: 100%;}
.mainTop .mainTop_sec.sec1 .bgSlide2 .bg{ height: 100%;}
.mainTop .mainTop_sec.sec2{
  order: -1;
  height: 75%;
}
.mainTop .mainTop_sec article{}
.mainTop .mainTop_sec article.w1{ width: calc((100% - 3em) / 4);}
.mainTop .mainTop_sec article.w2{ width: calc((100% - 1em) / 2);}
.mainTop .mainTop_sec article.rnd{ border-radius: 1em; overflow: hidden;}
.mainTop .mainTop_sec .imgBox .bgSlide{ height: 100%;}
.mainTop .mainTop_sec .about{ 
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: relative;
}
.mainTop .mainTop_sec .about::before{
  content: '';
  width: 100%; height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, .3), transparent) ;
  position: absolute;
  left: 0; bottom: 0;
}
.mainTop .mainTop_sec .about .cont_wrap{
  padding:0 2em 3em;
  position: relative;
  z-index: 1;
}
.mainTop .mainTop_sec .about .cont_wrap .tit{
  font-weight: 600;
  font-size: 3em;
  color:#fff;
  line-height: 1.2;
}
.mainTop .mainTop_sec .about .cont_wrap .btn{
  gap: 0.5em;
  margin-top: 1em;
}
.mainTop .mainTop_sec .about .cont_wrap .btn .tt{
  font-weight: 600;
  font-size: 1.25em;
  color:#fff;
}
.mainTop .mainTop_sec .about .cont_wrap .btn .xi{
  width: 2em; height: 2em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  font-size: 1.25em;
  text-align: center;
  line-height: 2em;
}
.mainTop .mainTop_sec .about .bgSlide_wrap{
  width: 100%; height: 100%;
  position: absolute;
  left: 0; bottom: 0;
  z-index: -1;
}
.mainTop .mainTop_sec .about .bgSlide_wrap .bgSlide{ height: 100%;}
.mainTop .mainTop_sec .about .bgSlide_wrap .bgSlide .el{ 
}
.mainTop .mainTop_sec .about .bgSlide_wrap .bgSlide .el .bg{ 
  height: 100%;
}
.mainTop .mainTop_sec .research{}
.mainTop .mainTop_sec .research > ul{ 
  gap:.5em;
  height: 100%;
}
.mainTop .mainTop_sec .research > ul > li{
  width: calc((100% - 1em) / 2);
  height: calc((100% - 1em) / 2);
}
.mainTop .mainTop_sec .research > ul > li.tit{}
.mainTop .mainTop_sec .research > ul > li.tit .in{
  height: 100%;
  padding: 2.5em 1em 1em;
  box-sizing: border-box;
}
.mainTop .mainTop_sec .research > ul > li.tit .in .t1{
  font-weight: 600;
  font-size: 2.5em;
  color:#111;
  letter-spacing: -1px;
}
.mainTop .mainTop_sec .research > ul > li.tit .in .t2{
  margin-top: 1em;
  color:#333;
}
.mainTop .mainTop_sec .research > ul > li.link{ 
  border-radius: 1em;
  background: var(--crGrad1);
}
.mainTop .mainTop_sec .research > ul > li.link:hover {
  background: linear-gradient(to bottom, var(--gradC2),var(--gradC1));
  transition: .3s;
}
.mainTop .mainTop_sec .research > ul > li.link .in{
  display: block;
  width: 100%; height: 100%;
  padding: 2.5em;
  box-sizing: border-box;
  position: relative;
}

.mainTop .mainTop_sec .research > ul > li.link .in .tit{
  font-weight: 600;
  font-size: 1.5em;
  color:#fff;
}
.mainTop .mainTop_sec .research > ul > li.link .in .icon{
  width: 3.5em; height: 3.5em;
  position: absolute;
  right: 2.5em; bottom: 2.5em;
}

.mainTop .mainTop_sec .imgBox{ position: relative;}
.mainTop .mainTop_sec .imgBox .linkMHR{ 
  gap:1em;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2.5em 4em;
}
.mainTop .mainTop_sec .imgBox .linkMHR .logo_mhr{ filter: var(--crWhitefil);}
.mainTop .mainTop_sec .imgBox .linkMHR .logo_mhr img{ height: 4em;}
.mainTop .mainTop_sec .imgBox .bgSlide_wrap{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.mainTop .mainTop_sec .imgBox .bgSlide_wrap::after{ 
  content:'';
  width: 100%;
  height: 100%; 
  background: linear-gradient(45deg, var(--siteC3), transparent);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.mainTop .mainTop_sec .imgBox .linkMHR:hover .logo_mhr{ filter: none; transition: all .3s;}
.mainTop .mainTop_sec .imgBox .linkMHR:hover + .bgSlide_wrap::after{ background:var(--crGrad2);}

/*  */
.main_btn{
  gap: 0.5em;
  margin-top: 1em;
}
.main_btn .tt{
  font-weight: 600;
  font-size: 1.25em;
  color:#fff;
}
.main_btn .xi{
  width: 2em; height: 2em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  font-size: 1.25em;
  text-align: center;
  line-height: 2em;
  transform: rotate(-45deg);
  transition: background .3s;
}
.main_btn:hover .xi{ background-color: var(--siteC); color:#fff;}

/* main new 2 */
/*메인*/
/* .section{ overflow:hidden; position:relative; background-repeat:no-repeat; background-position:center top} */
.section.bg_b{ position: relative;}
.section.bg_b:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: rgba(0,0,0,.25);}
.section_wrap{ position:relative; height: 100%; box-sizing: border-box; z-index: 9;}
.section_wrap.pt{ padding-top: 7em;}
.section_wrap .section_tit .m_tt{  font-size:2.4em; text-align:center;}
.section_wrap .section_tit .m_tw{ color:#555; font-size:1.125em; text-align:center; margin-top:20px;}

.br1{ border-radius:1em; 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)}

.main_more{ display: flex; justify-content: center; align-items: center;}
.main_more.st1{ border-radius: 50%; background-color: #fff;}
.main_more.st1.s1{ width: 50px; height: 50px; color:#111}
.main_more.st1.s2{ width: 40px; height: 40px; color:#777;}
.main_more.st2{ display: inline-flex; height: 1.875em; padding:0 1.125em; border:1px solid #ddd; border-radius: 2em; background:#fff; line-height: 1.875em; color:#777}
.main_more.st2 .tt{ margin-right: 0.5em;}
.main_more.st2 .xi{ font-size: 1em;}

/* main top */
.mainTop2 {margin-top: 7.5em;}
.mainTop2.top1 {margin-top: 4.5em;}
.mainTop2 .wrapIn{ display:flex; gap:1em; }
.mainTop2.h2 .wrapIn{ height: 80vh;}
.mainTop2 .wrapIn .visualCon{ width:78%; position: relative;}
.mainTop2 .wrapIn .visualCon.w2{ width: 70%;}
.mainTop2 .wrapIn .visualCon .resize{ padding-bottom:57.25%}
.mainTop2 .wrapIn .visualCon .resize .visualSlide_wrap{ position:absolute; left:0; top:0; width:100%; height:100%}
.mainTop2.h2 .wrapIn .visualCon .resize{ height: 100%; padding-bottom: 0;}

/* main top - banner */
.mainTop2 .wrapIn .topCon{ flex:1 1 0%; display:flex; flex-direction:column; gap:1em; position:relative; z-index:10}
.mainTop2 .wrapIn .topCon .wrap1{ height: calc((100% - 2em) / 3);}
.mainTop2 .wrapIn .topCon .banner{ display: flex; flex-direction: column; justify-content: space-between; padding:2.5em 2em 2em;}
.mainTop2 .wrapIn .topCon .banner .main_more{ transition: all .3s; }
.mainTop2 .wrapIn .topCon .banner .icon{ width: 4em; height: 3em; background-position: center bottom; position: absolute; right: 1.5em; bottom: 1.5em;}
.mainTop2 .wrapIn .topCon .banner .icon.st2{ filter: contrast(.6) sepia(.2);}
.mainTop2 .wrapIn .topCon .support{ width: 100%; height: 100%;  box-sizing: border-box; background: #dbeaf4;}
.mainTop2 .wrapIn .topCon .support1{ width: 100%; height: 100%;  box-sizing: border-box; background: #e8f4f0 /* #b9fdf7 */;}
.mainTop2 .wrapIn .topCon .cs{ width: 100%; height: 100%; box-sizing: border-box; background: #e2edec;}
.mainTop2 .wrapIn .topCon .gb{ width: 100%; height: 100%; box-sizing: border-box; background: #d8dee2;}
.mainTop2 .wrapIn .topCon .banner .tit_wrap{}
.mainTop2 .wrapIn .topCon .banner .tit_wrap .tit_top{ margin-bottom: 1.125em; font-weight: 500; font-size: 1.25em; color:#002e54}
.mainTop2 .wrapIn .topCon .banner .tit_wrap .tit{ padding-top: .8em; font-weight: 700; font-size: 1.625em; color:#111; position: relative;}
.mainTop2 .wrapIn .topCon .banner .tit_wrap .tit::before{content: ''; width: 1em; height: 3px; background-color: var(--siteC); position: absolute; left: 0; top: 0;}
.mainTop2 .wrapIn .topCon .banner:hover .main_more{ background-color: var(--siteC);}
.mainTop2 .wrapIn .topCon .banner:hover .main_more .xi{ color:#fff;}
.mainTop2 .wrapIn .con2_1 .btn4:hover .main_more{ background-color: var(--siteC);}
.mainTop2 .wrapIn .con2_1 .btn4:hover .main_more .xi{ color:#fff;}

.mainTop2 .wrapIn .topCon2{ flex:1; gap: 1em; height: 100%;}
.mainTop2 .wrapIn .topCon2 .wrap2{ flex:1; width: 100%; height: auto; padding: 3.5em 2em 6em; box-sizing: border-box; background: #e2edec; color:#111; position: relative;}
.mainTop2 .wrapIn .topCon2 .wrap2 .tit{ font-weight: 700; font-size: 1.675em;}
.mainTop2 .wrapIn .topCon2 .wrap2 .desc{margin-top: 1.5em;}
.mainTop2 .wrapIn .topCon2 .wrap2 .desc .tt{ font-size: 1.0625em; line-height: 1.3;}
.mainTop2 .wrapIn .topCon2 .wrap2 .desc .tt + .tt{ margin-top: 0.8em;}
.mainTop2 .wrapIn .topCon2 .wrap2::after{ content: ''; width: 50%; height: 2em; background: url(../images/inc/pink_icon.svg) no-repeat right center / contain; position: absolute; right: 2em;bottom: 1cap;}

.mainTop2 .wrapIn .topCon2 .wrap1{ height:11em;}
.mainTop2 .wrapIn .topCon2 .banner{ display: flex; flex-direction: column; justify-content: space-between; padding:2.5em 2em 2em;}
.mainTop2 .wrapIn .topCon2 .banner .main_more{ transition: all .3s; }
.mainTop2 .wrapIn .topCon2 .banner .icon{ width: 4em; height: 3em; background-position: center bottom; position: absolute; right: 1.5em; bottom: 1.5em;}
.mainTop2 .wrapIn .topCon2 .banner .icon.st2{ filter: contrast(.6) sepia(.2);}
.mainTop2 .wrapIn .topCon2 .support{ width: 100%; height: 100%;  box-sizing: border-box; background: #dbeaf4;}
.mainTop2 .wrapIn .topCon2 .banner .tit_wrap{}
.mainTop2 .wrapIn .topCon2 .banner .tit_wrap .tit_top{ margin-bottom: 1.125em; font-weight: 500; font-size: 1.25em; color:#002e54}
.mainTop2 .wrapIn .topCon2 .banner .tit_wrap .tit{ padding-top: .8em; font-weight: 700; font-size: 1.625em; color:#111; position: relative;}
.mainTop2 .wrapIn .topCon2 .banner .tit_wrap .tit::before{content: ''; width: 1em; height: 3px; background-color: var(--siteC); position: absolute; left: 0; top: 0;}
.mainTop2 .wrapIn .topCon2 .banner:hover .main_more{ background-color: var(--siteC);}
.mainTop2 .wrapIn .topCon2 .banner:hover .main_more .xi{ color:#fff;}




/* 메인비주얼 */
.visualSlide,
.visualSlide .el{ height:100%}
.visualSlide .el .bg{ position:absolute; left:-10%; top:0; width:110%; height:100%}
.visualSlide .el .vod_wrap{ position:relative; height:100%}
.visualSlide .el .vod_wrap:after{ background:rgba(0,0,0,.3)}
.visualSlide .el.swiper-slide-active .bg,
.visualSlide .el.swiper-slide-duplicate-active .bg{ transition:5s; left:0}
.visualSlide_wrap .slogan{ position:absolute; left:0; top:0; width:100%; height: 100%; box-sizing:border-box; padding:10% 30% 15% 8%; background:rgba(0,0,0,.2); z-index:10; color:#fff; display:flex; flex-direction:column; gap:1.8em}
.visualSlide_wrap .slogan .t1{ font-weight:700; font-size:3em; line-height: 1;}
.visualSlide_wrap .slogan .t2{ font-weight:500; font-size:1.25em;line-height:1.5}
.visualSlide_wrap .el .slogan .t1{ transform:translateY(1em); opacity:0}
.visualSlide_wrap .el .slogan .in{ display:block; overflow:hidden}
.visualSlide_wrap .el .slogan .in > i{ display:block; transform:translateY(100%); opacity:0}
.visualSlide_wrap .el.swiper-slide-active .slogan .t1{ transform:translateY(0); opacity:1; transition:1s}
.visualSlide_wrap .el.swiper-slide-active .slogan .in > i{ transform:translateY(0); opacity:1; transition:1s; transition-delay:.2s}
.visualSlide_wrap .el.swiper-slide-active .slogan .in:nth-child(2) > i{ transition-delay:.4s}
.visualSlide_wrap .el.swiper-slide-active .slogan .in:nth-child(3) > i{ transition-delay:.6s}

.visualSlide_wrap{ position:relative }
.visualSlide_control{ width: auto; position:absolute; right:0; bottom:0; background:var(--siteC); z-index:10; display:flex; align-items:flex-end; padding:.5em; border-bottom-right-radius: 1em;}
.visualSlide_control .control{ margin-bottom:1em}
.visualSlide_control .paging{ width:5em; text-align:center;}
.visualSlide_control .paging .swiper-pagination-current{ font-weight:700}

.fllH{ height: calc(100vh); box-sizing: border-box;}

/* main 공통 */
.main_sec{ padding:5em 0;}
/* main sec3 */
.main_sec.sec3{}
.main_sec.sec3 .boardList{ padding:1em; box-sizing: border-box;}

/* main sec2 */
.main_sec.sec2{ }

/* main new 2 end */