@charset "utf-8"; /* CSS Document */

/* header */

.allGnbOn { overflow-y:hidden } 
.allGnbOn body { overflow-y:scroll } 
.allGnbOn #header .all_wrap .allbtn { z-index:999; position:fixed; top:1em; right:1vw; width:2.5em; height:3em; filter:var(--crBlackfil) !important; } 
.allGnbOn #header .all_wrap .allbtn .ham { background:transparent !important; transition:0s; } 
.allGnbOn #header .all_wrap .allbtn .ham:before,
.allGnbOn #header .all_wrap .allbtn .ham:after { width:100% !important; top:50% !important; height:2px; } 
.allGnbOn #header .all_wrap .allbtn .ham:before { transform:rotate(45deg); } 
.allGnbOn #header .all_wrap .allbtn .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; } 

#header .all_wrap { color:#000; } 
#header .all_wrap .all { width:4.5em; } 
#header .all_wrap .allbtn { position:relative; display:block; width:2.5em; height:1.125em; margin-left:auto; } 
#header .all_wrap .allbtn .ham,
#header .all_wrap .allbtn .ham:before,
#header .all_wrap .allbtn .ham:after { display:block; width:100%; height:2px; background:#000; transition:.2s, background 0s; content: ''; } 
#header .all_wrap .allbtn .ham:before,
#header .all_wrap .allbtn .ham:after { content:""; position:absolute; left:0; } 
#header .all_wrap .allbtn .ham:before { top:calc(20% - 1px); width:100%; } 
#header .all_wrap .allbtn .ham:after { top:calc(85% - 2px); width:100%; } 
#header .all_wrap .allbtn:hover .ham:before { width:100%; } 
#header .all_wrap .allbtn:hover .ham:after { width:100%; } 

#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:32em; 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_in { gap:2em; padding:3em 3em; } 
#header .all_wrap .all_layer .all_inner > .mark { position: absolute; bottom: 0; right: 0; width: 16em; opacity: .15; } 
#header .all_wrap .all_layer .all_inner > .mark > img { width: 26.5em; } 

#header .all_wrap .all_layer .wrap_top a { transition:.2s; } 
#header .all_wrap .all_layer .wrap_top .all_logo { } 
#header .all_wrap .all_layer .wrap_top .all_logo .in { display:block; width:12.5em; } 
#header .all_wrap .all_layer .wrap_top .all_logo .in img { width:100%; } 
#header .all_wrap .all_layer .wrap_top .all_mem { gap:.25em; padding:2em 0 1em; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li > a { width: 100%; background: var(--siteC); text-align: center; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: .5em; font-size: 1.125em;} 
#header .all_wrap .all_layer .wrap_top .all_mem > li { flex: 1; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in .icon { position: absolute; left: .5em; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in { position:relative; height:2.25em; padding:0 1em; border:1px solid var(--siteC2); background:var(--siteC2); color: #fff; border-radius:.25em; line-height:normal; align-items: center; justify-content: center; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in .tt { font-size:.938em; font-weight:500; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in:hover { } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in:hover .icon { color: #fff; } 

#header .all_wrap .all_layer .wrap_middle { } 
#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 > a.layer { display: none; } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more > a.layer { display: block; } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more { } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more > a.link { display:none; } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more > a.layer { display:flex !important; padding-right:2.5em; display: block; } 
#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; font-weight: 600; 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.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 ul { padding:1em 1em; } 
#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 { height:4em; padding:0 1.5em; border:solid #ddd; border-width:1px 0; margin-bottom:-1px; align-content:center; align-items:center} 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt { font-size:1.05em; font-weight: 600; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li.act .dp1,
#header .all_wrap .all_layer .wrap_middle .gnb > li.on .dp1 { background-color: var(--siteC); color:#fff; } 
#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(--siteC2); 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 > a:hover { background: #f1f1f1; transition: .1s; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li.act > a { background:var(--crGray) } 
#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:var(--crGray2); } 
#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_bottom {}
#header .all_wrap .all_layer .wrap_bottom .tt {font-weight: 600;}
#header .all_wrap .all_layer .wrap_bottom .tt i {width: 1.5em; height: 1.5em; background: var(--siteC); color: #fff; font-size: 1.1em; line-height: 1.5em; text-align: center; border-radius: 50%; margin-right: .3em;}

#header .side_wrap .etcBtn { width:2em; height:2em; display:flex; align-items:center; justify-content:center } 
#header .side_wrap .etcBtn .ham,
#header .side_wrap .etcBtn .ham::before,
#header .side_wrap .etcBtn .ham::after {background: #fff;} 

#header:hover .side_wrap .etcBtn .ham,
#header:hover .side_wrap .etcBtn .ham::before,
#header:hover .side_wrap .etcBtn .ham::after,
.scroll #header .side_wrap .etcBtn .ham,
.scroll #header .side_wrap .etcBtn .ham::before,
.scroll #header .side_wrap .etcBtn .ham::after {background: #000;} 

.allGnbOn #header,
#header:hover { background: var(--crWhite); } 
.allGnbOn #header .logo > .in img,
#header:hover .logo > .in img { filter: none; } 
.allGnbOn #header .gnb_wrap .gnb > li .dp1,
#header:hover .gnb_wrap .gnb > li .dp1 { color: #111; } 
.allGnbOn #header .gnb_wrap .gnb { display: none; } 

.allGnbOn #header .all_wrap .all_btn { z-index:999; position:fixed; top:1em; right:2vw; width:2.5em; height:3em; filter: brightness(0) invert(0) !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; } 

/*ceo 인사말*/
.ttdot { position: relative; padding-left: 0.8em; } 
.ttdot:before { position: absolute; content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); top: 8.5px; left: 0; } 
.fs33{ font-size:2.4em !important}
html.pop .popWrap.privacy {width: 900px; margin: 0 auto;}

.base { vertical-align: baseline; } 
.greeting_Wrap { } 
.greeting_Wrap .Greeting_con { gap: 4em; padding-top: 4.5em; align-items: center; } 
.greeting_Wrap .Greeting_con .G_left { flex: 1 1 35%; } 
.greeting_Wrap .Greeting_con .G_left .img_con { width: 100%; height: 63.75em; } 
.greeting_Wrap .Greeting_con .G_left .img_con.h2 {height: 27em;}
.greeting_Wrap .Greeting_con .G_left .img_con > img { width: 100%; height: 100%; object-fit: cover; } 
.greeting_Wrap .Greeting_con .G-right { flex: 1 1 60%; } 
.greeting_Wrap .Greeting_con .G-right > .top_logo { width: 14.5em; margin-bottom: 1.25em; } 
.greeting_Wrap .Greeting_con .Top_ttl { position:relative; } 
.greeting_Wrap .Greeting_con .Top_ttl .gary_t { position: absolute; bottom: 4.5em; left: 25%; } 
.greeting_Wrap .Greeting_con .Top_ttl .gary_t > p { font-weight: 900; color: #e9e9e9; font-size: 4.45em; font-style: italic; opacity: .65; } 
.greeting_Wrap .Greeting_con .Top_ttl > p { font-size: 2.3em; font-weight: 500; } 
.greeting_Wrap .Greeting_con .Top_ttl > p > span { } 
.greeting_Wrap .Greeting_con .G_line { position:relative; border: 1px dashed #e9e9e9; width: 100%; margin: 2.25em 0; } 
.greeting_Wrap .Greeting_con .G_line:before { position: absolute; left: 0; width: 70px; height: 1px; background: var(--siteC); content: ''; } 
.greeting_Wrap .Greeting_con .G_btm { } 
.greeting_Wrap .Greeting_con .G_btm .page_tt { } 
.greeting_Wrap .Greeting_con .G_btm .page_tt > .tt { font-size: 1em; font-weight: 500; margin-top: 1em; line-height: 1.5; color: #444; } 
.greeting_Wrap .Greeting_con .G_btm .page_tt > .tt:first-of-type { margin-top: 0em; } 
.greeting_Wrap .Greeting_con .G_btm .ceo { margin-top: 1.5em; align-items: center; gap:1em;} 
.greeting_Wrap .Greeting_con .G_btm .ceo .sign{ width: 16em;}
.greeting_Wrap .Greeting_con .G_btm .ceo .ceo_t { text-align: right;} 
.greeting_Wrap .Greeting_con .G_btm .ceo .ceo_t > p { font-size: 1.125em; font-weight: 600; } 
.greeting_Wrap .Greeting_con .G_btm .ceo .ceo_t > p > span { font-size: 1.5em; } 

.process_img {background: #f4f4f4;}
.flex_box.flex {gap: 1em;}
.flex_box .fst5 {width: 33.3%;}
.flex_box .fst5:nth-child(2) {margin-top: 6em;} 
.flex_box .fst5 > li {} 
.flex_box .fst5 > li > .in {}
.flex_box .fst5 > li > .in img {border-radius: 1em;}

/* 오시는길 */

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


/* 전자스크랩 */

.business4_con {gap: 4em;}
.business4_con .wrapTit {width: 25%;}
.business4_con .wrapCon {flex: 1 1 0%; min-width: 0;}
.business4_con .wrapCon .esg_imgB {gap: 1em;}
.business4_con .wrapCon .con > .img_con{ position:relative; width: 100%; height: 20em; border-radius: 1.5em; overflow: hidden;}
.business4_con .wrapCon .con > .img_con:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .3); content: '';}
.business4_con .wrapCon .con > .img_con > img{ width: 100%; height: 100%; object-fit: cover;}
.business4_con .wrapCon .con > .img_con > .tbox{ }
.business4_con .wrapCon .con > .img_con > .tbox > .rt_tit{ position: absolute; top: 2rem; right: 3.5rem; font-size: 1.85em; color: #fff; font-weight: 800;}
.business4_con .wrapCon .con > .img_con > .tbox > .rb_txt{ position: absolute; bottom: 4rem; left: 3rem; font-size: 1.125em; font-weight: 800; color: #fff;}