@charset "utf-8"; 


/* ******************************************************* */
/* 기업개요 */
.sub01-pg01 .cont1 .sub-cmn-titBx .txt { font-size: var(--fontSize-22); line-height: 44px; } 
.sub01-pg01 .sub-cmn-titBx { padding-bottom: 2.5rem; } 
.sub01-pg01 .ceo-bx { gap: 1.5rem; justify-content: flex-end; } 
.sub01-pg01 .ceo-bx span { display: inline-block; font-size: var(--fontSize-18); line-height: 36px; } 

.sub01-pg01 .cont2 .sub-cmn-titBx .tit { color: #fff; } 
.sub01-pg01 .icon-list { background: url(/theme/basic/img/sub/sub01/sub01_pg1_cont2_bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: var(--radius-30); overflow: hidden; padding: 11.9rem 0 } 
.sub01-pg01 .icon-list > li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; border-right: 1px solid rgba(255, 255, 255, 0.40); margin: 2.2rem 0 } 
.sub01-pg01 .icon-list > li:last-child { border-right: 0; } 
.sub01-pg01 .icon-list .icon { } 
.sub01-pg01 .icon-list strong { display: block; font-size: var(--fontSize-30); color: #fff; text-align: center; line-height: 43px; } 
.sub01-pg01 .cont2 .txt { color: #fff; font-size: var(--fontSize-20); line-height: 33px; text-align: right; margin-top: 5rem; } 


.sub01-pg01 .cont3 .info-wr { position: relative; padding-top: 7.9rem; } 
.sub01-pg01 .cont3 .info-wr .img { margin: 0 auto } 
.sub01-pg01 .cont3 .info-wr .mo-img { display: none; } 
.sub01-pg01 .info-list > li { position: absolute; display: flex; flex-direction: column; } 
.sub01-pg01 .info-list strong { display: block; font-size: var(--fontSize-20); line-height: 24px; } 
.sub01-pg01 .info-list .txtBx { margin-top: 1rem; } 
.sub01-pg01 .info-list .txtBx > li { position: relative; margin-left: 2.5rem; line-height: 23px; display: flex; align-items: center; gap: 6px } 
.sub01-pg01 .info-list .txtBx > li span { font-weight: 700; font-size: var(--fontSize-20); } 
.sub01-pg01 .info-list > li.list1 { align-items: flex-end; left: 13rem; bottom: 4rem; } 
.sub01-pg01 .info-list > li.list1 .txtBx { justify-items: right; } 
.sub01-pg01 .info-list > li.list2 { align-items: center; left: 50%; transform: translateX(-50%); top: 0; } 
.sub01-pg01 .info-list > li.list3 { align-items: flex-start; right: 22rem; bottom: 8rem; } 


@media all and (max-width:1500px) { 
 .sub01-pg01 .info-list > li.list1 { left: 11rem; } 
 .sub01-pg01 .info-list > li.list3 { right: 19rem; } 
 } 
@media all and (max-width:1400px) { 
 .sub01-pg01 .cont1 .sub-cmn-titBx .txt { font-size: var(--fontSize-20); line-height: 35px; } 
 .sub01-pg01 .cont1 .sub-cmn-titBx .txt br.br_pc { display: none; } 
 .sub01-pg01 .cont2 .sub-cmn-titBx .tit br { display: none; } 
 .sub01-pg01 .icon-list { padding: 7rem 0; } 
 .sub01-pg01 .icon-list strong { font-size: var(--fontSize-23); line-height: 35px; } 
 .sub01-pg01 .icon-list .icon { width: 12rem; } 
 .sub01-pg01 .info-list > li.list1 { left: 0; } 
 .sub01-pg01 .info-list > li.list2 { top: 2rem; } 
 .sub01-pg01 .info-list > li.list3 { right: 8rem; } 
 .sub01-pg01 .cont3 .info-wr { padding-top: 9rem; } 
 .sub01-pg01 .cont3 .info-wr .img { width: 50rem; } 
 } 
@media all and (max-width:960px) { 
 .sub01-pg01 .icon-list { padding: 5rem 0 } 
 .sub01-pg01 .icon-list .icon { width: 10rem; } 
 .sub01-pg01 .icon-list strong { font-size: var(--fontSize-20); line-height: 28px; } 
 .sub01-pg01 .cont2 .txt br.br_pc { display: none; } 
 .sub01-pg01 .info-list .txtBx > li { margin-left: 0; } 
 .sub01-pg01 .cont3 .info-wr .img { width: 37rem; } 
 .sub01-pg01 .info-list > li.list1 { bottom: 1rem; } 
 .sub01-pg01 .info-list > li.list3 { bottom: 3rem; } 
 } 
@media all and (max-width:768px) { 
 .sub01-pg01 .cont1 .sub-cmn-titBx .txt { font-size: var(--fontSize-16); line-height: 28px; } 
 .sub01-pg01 .ceo-bx span { font-size: var(--fontSize-16); } 
 .sub01-pg01 .ceo-bx .icon { width: 9rem; } 
 .sub01-pg01 .icon-list { grid-template-columns: 1fr; padding: 2rem } 
 .sub01-pg01 .icon-list > li { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.40); gap: 2rem; padding: 3.5rem 0; margin: 0 } 
 .sub01-pg01 .icon-list > li:last-child { border-bottom: 0; } 
 .sub01-pg01 .icon-list .icon { width: 8rem; } 
 .sub01-pg01 .icon-list strong { font-size: var(--fontSize-18); } 
 .sub01-pg01 .cont2 .txt { font-size: var(--fontSize-16); line-height: 28px; } 

 .sub01-pg01 .cont3 .info-wr { padding-top: 2rem; display: flex; align-items: flex-start; justify-content: space-between; } 
 .sub01-pg01 .cont3 .info-wr .pc-img { display: none; } 
 .sub01-pg01 .cont3 .info-wr .mo-img { display: block; width: 28rem !important } 
 .sub01-pg01 .info-list { display: none; } 
 .sub01-pg01 .info-list > li { position: inherit; } 

 } 

@media all and (max-width:400px) { 
 .sub01-pg01 .cont3 .info-wr .img { width: 23rem !important } 
 } 





/* ******************************************************* */
/* 비전 */
/* ===== 기본 레이아웃 ===== */
.sub01-pg02 .sub-cmn-titBx .tit i { font-weight: 700 } 
.sub01-pg02 .activeBg-wr { display:grid; grid-gap:3rem } 
.sub01-pg02 .activeBg-wr > li { position:relative; min-height:10rem; border-radius:var(--radius-20); overflow:hidden; background-repeat:no-repeat; background-position:center; background-size:cover; padding:0; transition: min-height .35s ease, padding .35s ease; will-change: min-height, padding; } 
.sub01-pg02 .activeBg-wr > li.bg-1 { background:url(/theme/basic/img/sub/sub01/sub01_pg2_cont1_bg1.jpg); } 
.sub01-pg02 .activeBg-wr > li.bg-2 { background:url(/theme/basic/img/sub/sub01/sub01_pg2_cont1_bg2.jpg); } 
.sub01-pg02 .activeBg-wr > li.bg-3 { background:url(/theme/basic/img/sub/sub01/sub01_pg2_cont1_bg3.jpg); } 
.sub01-pg02 .activeBg-wr .i-bx { display:grid; grid-gap:1.5rem } 
.sub01-pg02 .activeBg-wr .i-bx strong,
.sub01-pg02 .activeBg-wr .i-bx p { color:#fff; } 
.sub01-pg02 .activeBg-wr .i-bx strong { display:block; font-size:var(--fontSize-48); line-height:57px; letter-spacing:-0.96px; } 
.sub01-pg02 .activeBg-wr .i-bx p { font-size:var(--fontSize-24); line-height:36px; font-weight:700; } 
.sub01-pg02 .activeBg-wr .i-bx { max-height:0; opacity:0; overflow:hidden; transition:max-height .45s ease, opacity .35s ease; will-change: max-height, opacity; } 
.sub01-pg02 .activeBg-wr > li.bg-1 { min-height:50rem; padding:16rem 6rem; } 
.sub01-pg02 .activeBg-wr > li.bg-1 .i-bx { max-height:20rem; opacity:1; } 
.sub01-pg02 .activeBg-wr:hover > li.bg-1 { min-height:10rem; padding:0; } 
.sub01-pg02 .activeBg-wr:hover > li.bg-1 .i-bx { max-height:0; opacity:0; } 
.sub01-pg02 .activeBg-wr > li:hover { min-height:50rem; padding:16rem 6rem; } 
.sub01-pg02 .activeBg-wr > li:hover .i-bx { max-height:20rem; opacity:1; } 
.sub01-pg02 .activeBg-wr > li.bg-1:hover { min-height:50rem; padding:16rem 6rem; } 
.sub01-pg02 .activeBg-wr > li.bg-1:hover .i-bx { max-height:20rem; opacity:1; } 

.sub01-pg02 .cont2 { padding-top: 0; } 
.sub01-pg02 .card-list { grid-gap: 3.2rem; } 
.sub01-pg02 .card-list > li { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background-color: #F0F5FA; border-radius: var(--radius-20); padding: 5.8rem 3rem 4.2rem } 
.sub01-pg02 .card-list .titBx { display: grid; grid-gap: .5rem; margin-top: 3rem; } 
.sub01-pg02 .card-list .titBx .num,
.sub01-pg02 .card-list .titBx .cate { font-size: var(--fontSize-26); font-weight: 700; line-height: 31px; color: var(--color-point); text-align: center; } 
.sub01-pg02 .card-list .txt { color: var(--color-txt); text-align: center; margin-top: 2.5rem; } 



@media all and (max-width:960px) { 
 .sub01-pg02 .activeBg-wr > li.bg-1,
 .sub01-pg02 .activeBg-wr > li:hover,
 .sub01-pg02 .activeBg-wr > li.bg-1:hover { padding: 10rem 4rem; min-height: 30rem; } 

 .sub01-pg02 .card-list { grid-gap: 2rem } 
 .sub01-pg02 .card-list > li { padding: 4rem 2rem } 
 .sub01-pg02 .card-list .icon { width: 12rem; } 
 } 
@media all and (max-width:768px) { 
 .sub01-pg02 .activeBg-wr { gap: 1.5rem } 
 .sub01-pg02 .activeBg-wr .i-bx strong { font-size: var(--fontSize-20); line-height: 32px; } 
 .sub01-pg02 .activeBg-wr .i-bx p { font-size: var(--fontSize-17); line-height: 26px; } 
 .sub01-pg02 .activeBg-wr .i-bx p br.br_pc { display: none; } 
 .sub01-pg02 .activeBg-wr > li { min-height: 8rem; } 
 .sub01-pg02 .activeBg-wr > li.bg-1,
 .sub01-pg02 .activeBg-wr > li:hover,
 .sub01-pg02 .activeBg-wr > li.bg-1:hover { padding: 5rem 2rem; min-height: 25rem; } 

 .sub01-pg02 .card-list { grid-template-columns: 1fr; grid-gap: 1.5rem } 
 .sub01-pg02 .card-list > li { padding: 3rem 2rem } 
 .sub01-pg02 .card-list .icon { width: 8rem; } 
 .sub01-pg02 .card-list .titBx { margin-top: 1rem; } 
 .sub01-pg02 .card-list .titBx .num,
 .sub01-pg02 .card-list .titBx .cate { font-size: var(--fontSize-18); line-height: 25px; } 
 .sub01-pg02 .card-list .txt { margin-top: 1.5rem; } 
 .sub01-pg02 .card-list .txt br.br_pc { display: none } 
 .sub01-pg02 .card-list .txt br.br_mo { display: inline-block; } 


 } 







/* ******************************************************* */
/* 연혁 */
.sub01-pg03 .bx-img { height: 40rem; } 

.history-con { position: relative; margin-top: 12rem; } 
/* 가운데 바 */
.history-percent-bar { position: absolute; left: 43rem; border-radius: 2px; margin-left: -0.2rem; width:4px; height: 100%; background: #eee; } 
.history-percent-bar .percent-bar-child { position: absolute; content: ""; width: 100%; height: 0; background-color: #FF5E24; z-index: 1; border-radius:2px 2px 0 0; } 
.percent-bar-child .point { display: flex; align-items: center; justify-content: center; position: absolute; bottom: -3rem; left: 50%; content: ""; z-index: 10; width: 4.4rem; height: 4.4rem; border-radius: 50%; background-color: #FF5E24; box-shadow: 0.5rem 0.5rem 2.5rem rgba(156,0,92,0.3); transform: translate(-50%, 0); } 
.percent-bar-child .point i { font-size: 2.2rem; color: #fff; } 
/* 연혁 영역 */
.history-year-group-box { position: relative; display: flex; padding-bottom: 15rem; --month-wi:4rem; } 
.history-year-group-box:last-of-type { padding-bottom: 0; } 
/* 왼쪽 연대 */
.history-year-group-box .history-year-group-tit-box { width: 43rem; padding-right: 11rem; box-sizing: border-box; } 
.history-year-group-box .history-year-group-tit { position: relative; top: -3rem; font-size: 8rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1.1; transition: all 0.3s; } 
.history-year-group-box.active .history-year-group-tit { color: #FF5E24; } 
/* 오른쪽 연도+내용 */
.history-year-group-box .history-year-list-box { width: calc(100% - 43rem); padding: 0 0 0 11rem; box-sizing: border-box; } 
.history-year-group-box .history-year-item { display: flex; margin-bottom: 5rem; } 
.history-year-group-box .history-year-item:last-of-type { margin-bottom: 0; } 
.history-year-group-box .history-year-item .history-year { display: block; width: 11.5rem; } 
.history-year-group-box .history-year-item .history-year strong { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: #222222; line-height: 1.2; } 
.history-year-group-box .history-year-item .history-month-item { display: flex; margin-bottom: 5rem; } 
.history-year-group-box .history-year-item .history-month-item:last-child { margin-bottom: 0; } 
.history-year-group-box .history-year-item .history-month-item .history-month { width: 11rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.025em; color: #000; padding-right: 0.5rem; box-sizing: border-box; } 
.history-year-group-box .history-year-item .history-month-item .history-detail-txt-con { width: calc(100% - 11rem); } 
.history-year-group-box .history-year-item .history-month-item .history-detail-txt { display: flex; font-size: 1.6rem; line-height: 1.5; font-weight: 400; letter-spacing: -0.05em; color: #555; } 
.history-year-group-box .history-year-item .history-month-item .history-detail-txt .txt { width: calc(100% - var(--month-wi)); margin-top: -0.2rem; font-size: 2rem; line-height: 1.5; } 
.history-year-group-box .history-year-item .history-month-item .history-detail-txt .month { display: inline-block; width: var(--month-wi); color: #000; font-size: 2rem; font-weight: 600; line-height: 1.3; } 
.history-year-group-box .history-year-item .history-month-item .history-detail-txt + .history-detail-txt { margin-top: 1rem; } 
/* active */
.history-year-group-box.active .history-year-group-tit { top: -5rem; font-size: 10rem; color: #FF5E24; } 

@media all and (min-width:801px) { 
.history-year-group-box.reverse { flex-direction: row-reverse; } 
.history-year-group-box.reverse .history-year-group-tit-box { padding-right: 0; padding-left: 11rem; text-align: left; } 
.history-year-group-box.reverse .history-year-list-box { padding: 0 11rem 0 0; } 
.history-year-group-box.reverse .history-year-item { justify-content: flex-end; } 
.history-year-group-box.reverse .history-year-item .history-year,
.history-year-group-box.reverse .history-year-item .history-month-box,
.history-year-group-box.reverse .history-year-item .history-month-item .history-detail-txt { text-align: right; } 
.history-year-group-box.reverse .history-year-item .history-month-item { flex-direction: row-reverse; } 
.history-year-group-box.reverse .history-year-item .history-month-item .history-month { text-align: right; padding-right: 0; padding-left: 0.5rem; } 
 } 
@media all and (max-width:800px) { 
.history-page { padding-bottom: 9rem; } 
.history-con { margin-top: 8rem; } 
.history-percent-bar { left: 3.5rem; } 
.history-year-group-box { position: relative; flex-wrap: wrap; padding: 4rem 0 10rem 8rem; } 
.history-year-group-box .history-year-group-tit-box { text-align: left; width: 100%; padding-right: 0; } 
.history-year-group-box .history-year-group-tit { position: absolute; font-size: 5rem; } 
.history-year-group-box .history-year-list-box { width: 100%; padding: 2rem 0 0 0; } 
.history-year-group-box .history-year-item .history-year { width: 11rem; } 
.history-year-group-box .history-year-item .history-month-box { width: calc(100% - 11rem); } 

/* active */
.history-year-group-box.active .history-year-group-tit { top: -5rem; font-size: 7rem; } 
 } 
@media all and (max-width:640px) { 
.history-year-group-box .history-year-item { flex-wrap: wrap; margin-bottom: 4rem; } 
.history-year-group-box .history-year-item .history-year { width: 100%; margin-bottom: 1rem; } 
.history-year-group-box .history-year-item .history-month-box { width: 100%; } 
 } 













/* ******************************************************* */
/* 오시는 길 */
.sub01-pg04 .map-wr { display: grid; grid-gap: 7.9rem } 
.sub01-pg04 .map-bx { position: relative; border-radius: var(--radius-20); overflow: hidden; border: 1px solid #326BB4 } 
.sub01-pg04 .map-bx,
.root_daum_roughmap_landing { width: 100% !important; height: 50rem !important; } 
.sub01-pg04 .map-wr .i-bx { justify-content: space-between; position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 2; background-color: var(--color-bg); padding:.8rem .8rem .8rem 4rem; border-radius: 12rem; width: calc(100% - 6rem); } 
.sub01-pg04 .map-wr .i-bx .flex { gap: 2rem; } 
.sub01-pg04 .map-wr .i-bx.mo-bx { display: none; position: relative; bottom: inherit; left: inherit; transform: inherit; border-radius: var(--radius-20); padding: 2rem; margin-top: 1.5rem; } 
.sub01-pg04 .map-wr .i-bx strong { font-size: var(--fontSize-26); color: #fff; line-height: 31px; } 
.sub01-pg04 .map-wr .i-bx p { line-height: 36px; color: #fff; } 
.sub01-pg04 .map-btn { gap: 0.5rem !important; padding: .8rem 2rem; background: #fff; border-radius: 5rem; } 
.sub01-pg04 .map-btn span { color: #0B3060; font-weight: 600; } 
.sub01-pg04 .map-btn path { fill: #0B3060; } 



@media all and (max-width:960px) { 
 .sub01-pg04 .map-wr .i-bx { padding: 1.5rem 3.5rem } 
 .sub01-pg04 .map-wr .i-bx strong { font-size: var(--fontSize-22); } 
 .sub01-pg04 .map-wr .i-bx p { line-height: 30px; } 
 } 
@media all and (max-width:800px) { 
 .sub01-pg04 .map-bx,
 .root_daum_roughmap_landing { height: 30rem !important; } 
 .sub01-pg04 .map-wr { grid-gap: 5rem } 
 .sub01-pg04 .map-wr .i-bx.mo-bx { display: inline-flex; flex-direction: column; align-items: flex-start; width: 100%; } 
 .sub01-pg04 .map-wr .i-bx.mo-bx .map-btn { margin-top: 1rem; padding: .5rem 1rem; } 
 .sub01-pg04 .map-wr .i-bx.mo-bx .map-btn svg { height: 1.5rem; } 
 .sub01-pg04 .map-wr .i-bx.mo-bx .map-btn span { font-size: var(--fontSize-14); } 
 .sub01-pg04 .map-wr .i-bx.pc-bx { display: none; } 
 .sub01-pg04 .map-wr .i-bx strong { font-size: var(--fontSize-18); } 
 .sub01-pg04 .map-wr .i-bx p { line-height: 26px; } 

 }