@charset "utf-8"; @import "base.css"; @import "common.css";/* Layout */
 .inner { width: 1400px; position: relative; margin: 0 auto; } 
 .big_inner { margin: 0 120px; position: relative; } 
 
 @media (max-width:1440px){
 .inner { width: 94%; margin: 0 auto; } 
 .big_inner { width: 95%; margin: 0 auto; } 
 }

 @media (max-width:1000px){
 .big_inner { width: 94%; margin: 0 auto; } 
 }

/* 본문 바로가기*/
#skipToContent { position:absolute; overflow:hidden; width:100%; margin:0 auto; z-index:1000 } 
#skipToContent a { display:block; overflow:hidden; text-align:center; font-size:0; line-height:0; background:#333 } 
#skipToContent a:hover, #skipToContent a:active, #skipToContent a:focus { height:auto; padding:7px 0; font-size:0; font-size:1em; line-height:1; font-weight:bold; color:#fff; z-index:10000 } 


/* 헤더 */

#header { position: fixed; top: 0; left: 0; width: 100%; box-sizing: border-box; z-index: 100; border-bottom: none !important; background-color: rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: 0.3s ease-in; } 
#header.sub_header { } 


/* 원하는 고정 폭과 화면 여백만 여기서 조절 */
#navArea { --mega-w: 1280px; --side-gap: 40px; } 
#navArea { position: relative; } 

#navArea .flex_box { display: flex; align-items: center; justify-content: space-between; position: relative; } 
#navArea h1 { display:block; flex: 0 0 207px } 
#navArea h1 a { display:block; background:url(../images/common/logo_white.png) no-repeat; background-size:100%; width: 207px; height: 50px; padding-bottom: 20px; } 
#navArea ul.depth01 { display: flex; width: auto; justify-content: end; } 
#navArea ul.depth01>li { display: inline-block; } 
#navArea .site_map { display: block; width: 29px; height: 23px; background: url(../images/common/menu.png) no-repeat; z-index: 100; background-size: 100%; flex: 0 0 28px; } 
#navArea ul.depth01 > li a { position: relative; display: block; font-size: 20px; font-weight: 500; text-align: center; line-height: 1.2; padding: 32px 40px 34px; white-space: nowrap; color: #fff; } 
#header:hover #navArea ul.depth01 > li.active > a { color: #006a67; } 

#navArea ul.depth01 > li:first-of-type a:before { display: none; } 
#navArea ul.depth01 ul.depth02 { display: none; } 
#navArea ul.depth01 ul.depth02.active { position: absolute; top: 90px; left: 55%; transform: translateX(-50%); /* width: min(var(--mega-w), calc(100vw - var(--side-gap))); */ 
 width: 1000px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; padding: 30px 30px; box-sizing: border-box; z-index: 20; transition: all .2s ease; } 
#navArea ul.depth01 li:first-child ul.depth02 { border-left: none; } 
#navArea ul.depth01 ul.depth02 > li { text-align: center; position: relative; width: calc((100% - 60px) / 4); border: 1px solid #e9edf0; border-radius: 10px; background-color: #fff; box-sizing: border-box; } 

#navArea ul.depth01 ul.depth02 li { position: relative; overflow: hidden; z-index: 0; } 
#navArea ul.depth01 ul.depth02 li::before { content: ''; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: linear-gradient(37deg,#16325b ,#006a67); transition: width 0.3s ease; } 
#navArea ul.depth01 ul.depth02 li:hover::before { width: 100%; } 
#navArea ul.depth01 ul.depth02 li:hover { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05); color: white; } 

#navArea ul.depth01 ul.depth02 li > a { color: #333; word-break: keep-all; padding: 15px; text-align: left; font-size: 16px; font-family: 'Pretendard'; } 
#navArea ul.depth01 ul.depth02 li:hover > a { color: #fff; } 
#navArea ul.depth01 > li:hover ul.depth02, #navArea ul.depth01 > li:focus ul.depth02, #navArea ul.depth01 > li:active ul.depth02 { background-color: transparent; } 

#header .gnb_bg.on { border-top:1px solid #ddd; display: block; width: 100%; height: 182px; overflow: hidden; background: url(../images/common/menu_bg.png) no-repeat 120px 46% #fff; position: absolute; top: 90px; z-index: 10; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05); } 
#header .gnb_bg.sub.on { border-top:1px solid #ddd; display: block; height: 263px; overflow: hidden; background: url(../images/common/menu_bg.png) no-repeat 120px 46% #fff; position: absolute; top: 137px; z-index: 10; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05); } 


 #header.scrolled, #header:hover { background-color:#fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } 
#header.scrolled #navArea h1 a, #header:hover #navArea h1 a { background:url(../images/common/logo.png) no-repeat 0 0 / 100%; } 
#header.scrolled #navArea ul.depth01 > li > a, #header:hover #navArea ul.depth01 > li > a { color: #000; } 
#header.scrolled #navArea .site_map, #header:hover #navArea .site_map { background: url(../images/common/menu_on.png) no-repeat; } 


@media (max-width:1700px){
 #navArea ul.depth01 ul.depth02.active { left: 59%; } 
 #header .gnb_bg.on { background: url(../images/common/menu_bg.png) no-repeat 120px 46% / 200px #fff; } 
 }
@media (max-width:1440px){
 #navArea ul.depth01 ul.depth02.active { left: 61%; } 
 #header .gnb_bg.on { background: url(../images/common/menu_bg.png) no-repeat 40px 46% / 200px #fff; } 
 }
@media (max-width:1200px){
 #navArea ul.depth01 { display: none; } 
  #header { padding: 20px 0; } 
 }
 @media (max-width:1000px){
 #navArea h1 a { width: 150px; height: 36px; padding-bottom: 0; } 
 }


/* mobileMenu 모바일 메뉴 */
.mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:#000; opacity:0.2; z-index:50; } 
#header #mobileMenu .mb_control { position:relative; } 
#header #mobileMenu .mb_control .mb_open { display:none; position:absolute; right:0; background:url(../images/common/mobile_menu.png) no-repeat 50% 50% / 100%; } 
#header #mobileMenu .mb_control .mb_close { display:none; position: fixed; top: 28px; right: 20px; width: 20px; height: 20px; background: url(../images/common/x-mark.png) no-repeat; background-size: 100%; z-index: 60; } 
#header #mobileMenu .menu_area { display:none; position:fixed; top:0; right:0; bottom:0; width:60%; background: #f8fbff; z-index:55; overflow-y:scroll; } 
#header #mobileMenu .menu_area .depth01 > li.logo { background: url(../images/common/logo_white.png) no-repeat 20px center / 125px #16325b; width: 100%; height: 71px; } 
#header #mobileMenu .menu_area .depth01 > li { border-bottom:1px solid #e9edf0; } 
#header #mobileMenu .menu_area .depth01 li a { display:block; font-size:16px; font-weight:bold; line-height:15px; color:#333; padding: 20px; } 
#header #mobileMenu .menu_area .depth01 li.active > a,#header #mobileMenu .menu_area .depth01 li:hover > a { border-bottom: 1px solid #16325b; color: #16325b; } 
#header #mobileMenu .menu_area .depth02 { border-top:1px solid #e9edf0; display:none; background: #f8fbff; } 
#header #mobileMenu .menu_area .depth02 li a { font-size:14px; padding-left:20px; font-weight: 500; } 
#header #mobileMenu .menu_area .depth01 li.active .depth02 li a { background-color: #fff; } 
 #header #mobileMenu .menu_area .depth02 li:hover a { border-bottom: 1px solid #16325b; color: #16325b; } 
#header #mobileMenu .menu_area .depth02 li a:before { content:'-'; padding-right:7px } 
#header #mobileMenu .menu_area .depth01 li.active .depth02 { display:block; } 
#header #mobileMenu .menu_area .depth01 li.mypage { font-size:0; background-color:#fff; } 
#header #mobileMenu .menu_area .depth01 li.mypage ul { display: flex; align-items: center; } 
#header #mobileMenu .menu_area .depth01 li.mypage ul li { border-bottom:none; width:calc(100% / 3); } 
#header #mobileMenu .menu_area .depth01 li.mypage ul li:nth-child(2) { border-left:1px solid #e9edf0; } 
#header #mobileMenu .menu_area .depth01 li.mypage ul li.mypage_area a { color:#333; text-align:center; word-break: auto-phrase; padding: 20px 0; } 

/* @media (max-width:1200px){
 #header #mobileMenu .mb_control .mb_open { display: block; } 
 }*/
 
@media (max-width: 1200px){
 #navArea ul.depth01 > li a { padding: 26px 10px 26px; } 
 #headerTop_new { display: none; } 
 #header #mobileMenu { display: block; } 
 #header #mobileMenu .mb_control .mb_open { display: block; top: -29px; right: 3%; width: 22px; height: 22px; } 
 #navArea ul.depth01 { display: none; } 
 #navArea .site_map { display: none; } 
 .side_area { display: none; } 
 #header.scrolled #mobileMenu .mb_control .mb_open, #header:hover #mobileMenu .mb_control .mb_open { background: url(../images/common/mobile_menu_on.png) no-repeat 0 0 / 100%; } 
#header.sub_header, #header:hover { background-color:#fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } 
#header.sub_header #navArea h1 a, #header:hover #navArea h1 a { background:url(../images/common/logo.png) no-repeat 0 0 / 100%; } 
#header.sub_header #navArea ul.depth01 > li > a, #header:hover #navArea ul.depth01 > li > a { color: #000; } 
#header.sub_header #mobileMenu .mb_control .mb_open{ background: url(../images/common/mobile_menu_on.png) no-repeat 0 0 / 100%;}

 }


@media(max-width:640px){
 #header #mobileMenu .menu_area { width: 80%; } 
 }


/* 푸터 */
footer { background-color: #2d2e32; padding: clamp(30px, 5vw, 50px) 0; } 
footer .footer_flex { display: flex; gap: 100px; align-items: center; } 
footer .footer_flex .footer_logo { background: url(../images/common/logo_white.png) no-repeat 0 0 / 100%; width: 207px; height: 51px; } 
footer .footer_flex .right { display: flex; flex-direction: column; gap: 20px; flex-wrap: wrap; } 
footer .footer_flex .right ul { display: flex; gap: 20px; flex-wrap: wrap; } 
footer .footer_flex .right ul li { position: relative; } 
footer .footer_flex .right ul li::before { content: ''; position: absolute; width: 1px; height: 80%; background-color: #acacac; right: -11px; top: 50%; transform: translateY(-50%); } 
footer .footer_flex .right ul li:last-of-type::before { display: none; } 
footer .footer_flex .right li { color: #fff; font-size: clamp(14px, 1.5vw, 16px); } 

 @media (max-width:1290px) { footer .footer_flex { align-items: baseline; gap: 20px; flex-direction: column; } 
 }

 @media(max-width:640px){
footer .footer_flex .footer_logo {width: 150px; height: 36px; } 
footer .footer_flex .right,footer .footer_flex .right li:nth-of-type(2) ul{gap: 10px;}
 }
 /* 사이트맵 */

 /* 서브 레이아웃 */ 

#subVisualArea { width: 100%; aspect-ratio: 192 / 32; position: relative; } 
#subVisualArea.sub_company, #subVisualArea.sub_siteMap { background: url(../images/sub/sub_visual_01.jpg) no-repeat center 0 / cover; } 
#subVisualArea.sub_business { background: url(../images/sub/sub_visual_02.jpg) no-repeat center 0 / cover; } 
#subVisualArea.sub_esg { background: url(../images/sub/sub_visual_03.jpg) no-repeat center 0 / cover; } 
#subVisualArea.sub_cp { background: url(../images/sub/sub_visual_04.jpg) no-repeat center 0 / cover; } 
#subVisualArea.sub_support { background: url(../images/sub/sub_visual_05.jpg) no-repeat center 0 / cover; } 

#subVisualArea h2 { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; text-align: center; margin: 0; color: #fff; } 

 @media (max-width:1000px){
    #subVisualArea{margin-top: 76px;}
 }

 /* locationMenu */
 #locationMenu { background:#0c203e; /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */ } 
 #locationMenu .depth01 { border-left:1px solid #ffffff70; display: flex; } 
 #locationMenu .depth01 > li { border-right:1px solid #ffffff70; } 
 #locationMenu .depth01 > li > a { height:55px; line-height:55px; color:#fff; display: inline-block; font-size: clamp(13px, 1.3vw, 18px); box-sizing: border-box; } 
 #locationMenu .depth01 > li.menu { padding:0 20px; min-width:280px; position: relative; } 
 #locationMenu .depth01 > li.menu > a { position: relative; } 
 #locationMenu .depth01 > li.menu::before { position: absolute; content: ''; right: 20px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: url(../images/common/arrow_down.png) no-repeat; } 
 #locationMenu .depth01 > li > a.home { width: 64px; background: url(../images/common/home.png) no-repeat center center; } 
#locationMenu .depth02 { position:absolute; left:0; width:100%; background: #fff; z-index:10; display:none; border-top: 1px solid #ddd; top:59px; } 
#locationMenu .depth02 > li { border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; border-left: 1px solid #ddd; } 
#locationMenu .depth02 > li a { display:block; padding: 15px 20px; word-break: keep-all; } 
#locationMenu .depth02 > li > a:hover, 
#locationMenu .depth02 > li > a:focus, 
#locationMenu .depth02 > li > a:active { color:#6a1493; } 
.activeA { color :#6a1493 !important; } 
 #locationMenu .depth03 { top:55px; } 
 #locationMenu .depth03 > li a { padding:10px 20px; font-size:15px; } 
 
 

 @media (max-width:1000px){

 #locationMenu .depth01 > li.menu { min-width: 240px; } 

 }

 @media (max-width:750px){
 #locationMenu .inner { width: 100%; } 
 #locationMenu .depth01 { border-left:none; } 
 #locationMenu .depth01 > li.menu { width: calc((100% - 52px) / 2); min-width: auto; } 
 #locationMenu .depth01 > li:last-of-type { border-right: none; } 
 #locationMenu .depth01 > li > a.home { width: 50px; background: url(../images/common/home.png) no-repeat center center / 20px; } 
 }

 /* location */
#location p { padding: 20px; } 

 @media (max-width:450px){
    #locationMenu .depth02 > li a {font-size: clamp(13px, 1vw, 16px);}
 }

/* ============ 탭메뉴 ============ */

.tab_wrap { width: 100%; } 
.tab_btns { display: flex; justify-content: center; gap: clamp(10px, 2vw, 20px); margin-bottom: clamp(20px, 2.5vw , 50px); } 
.tab_btns.long { flex-wrap: wrap; } 

.tab_btns li { list-style: none; } 
.tab_btns li a { display: inline-block; font-size: clamp(16px, 1.5vw, 20px); padding: 15px clamp(30px, 3vw, 60px); border: 1px solid #ededed; border-radius: 10px; font-weight: 500; color: #333; transition: all .3s;background-color: #fff; } 
.tab_btns li.active a,
.tab_btns li a:hover { background: #1870da; color: #fff; border-color: #1870da; } 
.tab_con_wrap { position: relative; } 
.tab_con { display: none; animation: fadeUp .4s ease; } 
.tab_con.active { display: block; } 
 @media (max-width:450px){
 #locationMenu .depth01 > li.menu > a { display: inline-block;   max-width: clamp(80px, 30vw, 140px); text-overflow: clip; vertical-align: middle; word-break: keep-all;} 
 }

 @media (max-width:420px){
 .tab_btns.long li { width: 100%; } 
.tab_btns.long li a { width: 100%; text-align: center; } 
 }