@import url("sub.css");

/**** S:: 회사소개 > CEO Messages ****/
#messages { display: flex; align-items: center; gap: 80px; }
#messages .txt_area { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 60px 0; box-sizing: border-box; }
#messages .txt_area .cont { display: flex; flex-direction: column; gap: 30px; }
#messages .txt_area .tit { color: var(--black); /* opacity: 0; transform: translateY(30px); transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;  */}
#messages .txt_area .tit span { color: var(--main); line-height: inherit; letter-spacing: inherit; }
#messages .txt_area .txt { display: flex; flex-direction: column; gap: 30px; /* opacity: 0; transform: translateY(30px); transition: opacity 0.9s ease 0.35s, transform 0.9s ease 0.35s;  */}
#messages .txt_area .txt .fs18 { color: var(--basic); line-height: 1.667; }
#messages .sign { display: flex; align-items: center; gap: 15px; /* opacity: 0; transform: translateY(20px); transition: opacity 0.9s ease 0.55s, transform 0.9s ease 0.55s;  */}
#messages .sign .fs18 { color: var(--black); font-weight: 600; line-height: 1.667; }
#messages .sign i { display: block; width: 1px; height: 10px; background: var(--border); flex-shrink: 0; }
#messages .sign figure { display: block; width: 150px; height: 77px; margin-left: 5px; flex-shrink: 0; overflow: hidden; }
#messages .sign figure img { width: 100%; height: 100%; object-fit: contain; display: block; }
#messages .img_area { position: relative; width: 35%; max-width: 530px; flex-shrink: 0; /* opacity: 0; transform: translateX(40px); transition: opacity 1s ease 0.25s, transform 1s ease 0.25s;  */}
#messages .img_area .main { display: block; width: 100%; overflow: hidden; }
#messages .img_area .main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* #messages.is-animated .txt_area .tit { opacity: 1; transform: translateY(0); }
#messages.is-animated .txt_area .txt { opacity: 1; transform: translateY(0); }
#messages.is-animated .sign { opacity: 1; transform: translateY(0); }
#messages.is-animated .img_area { opacity: 1; transform: translateX(0); } */
#messages.is-animated .img_area .main { animation: msgFloat 3.5s ease-in-out 1.2s infinite; }
@keyframes msgFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-15px); }
}
/**** E:: 회사소개 > CEO Messages ****/

/**** S:: 회사소개 > Locations ****/
#locations .tit_wrap { gap: 25px; padding-bottom: 50px; margin-top:-25px;}
#locations .tit_wrap .fsE60 { color: var(--black); }
#locations .tit_wrap .fs18 { margin-top: 0; }
#locations .cont { display: flex; gap: 20px; align-items: stretch; }
#locations .map { width: 71%; flex-shrink: 0; height: 600px; border: 1px solid var(--border); border-radius: var(--borderR20); overflow: hidden; background: var(--black); }
#locations .map iframe { width: 100%; height: 100%; border: 0; display: block; }
#locations .info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 50px; box-sizing: border-box; background: var(--grayBg); border-radius: var(--borderR20); }
#locations .info .top { display: flex; flex-direction: column; gap: 30px; }
#locations .info .head { display: flex; flex-direction: column; gap: 5px; padding-bottom: 30px; border-bottom: 1px solid var(--border); }
#locations .info .fsE12 { color: var(--black); opacity: 0.3; letter-spacing: 3.6px; text-transform: uppercase; font-weight: 600; line-height: 1.667; }
#locations .info .fs32 { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--black); }
#locations .info .fs32 span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; background: var(--white); border-radius: 100px; font-size: 20px; line-height: 1; color: var(--black); font-variation-settings: 'FILL' 1;}
#locations .info dl { display: flex; flex-direction: column; gap: 15px; }
#locations .info .addr, #locations .info .tel { display: flex; flex-direction: column; gap: 2px; }
#locations .info dt { display: flex; align-items: center; gap: 5px; color: var(--black); font-weight: 600; line-height: 1.667; }
#locations .info dt .material-symbols-outlined { font-size: 24px; line-height: 1; color: var(--main); flex-shrink: 0; font-weight: 600;}
#locations .info dd { color: var(--basic); line-height: 1.667; }
#locations .info > a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 60px; padding: 0 20px 0 30px; box-sizing: border-box; overflow: hidden; background: #4285f4; border: 2px solid #4285f4; border-radius: 100px; color: var(--white); font-weight: 600; line-height: 1.75; transition: color 0.4s ease, border-color 0.4s ease; }
#locations .info > a::after { content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 0; height: 100%; background: var(--white); border-radius: inherit; transition: width 0.4s ease; }
#locations .info > a:hover { color: var(--main); border-color: var(--main); }
#locations .info > a:hover::after { width: 100%; }
#locations .info > a .material-symbols-outlined { position: relative; font-size: 18px; line-height: 1; color: inherit; flex-shrink: 0; }
/**** E:: 회사소개 > Locations ****/

/**** S:: 회사소개 > Summary ****/
#summary { display: flex; gap: 80px; align-items: center; box-sizing: border-box; overflow: hidden; /*width: 100%; */}
#summary figure { flex: 1; min-width: 0; height: 500px; border-radius: var(--borderR20); overflow: hidden; background: var(--black); }
#summary figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
#summary .txt_area { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
#summary .tit { display: flex; flex-direction: column; gap: 12px; }
#summary .tit .fsE12 { color: var(--black); letter-spacing: 0; text-transform: uppercase; font-weight: 600; line-height: 1.667; transition: letter-spacing 1.2s cubic-bezier(0.25, 1, 0.5, 1); }
#summary .tit .fsE12.aos-animate { opacity: 0.3 !important; letter-spacing: 3.6px; }
#summary .tit .fs38 { color: var(--black); }
#summary .tit .fs38 span { color: var(--main); line-height: inherit; letter-spacing: inherit; }
#summary .txt_area > .fs18 { color: var(--basic); line-height: 1.667; }
#summary .txt_area ul { display: flex; flex-direction: column; gap: 5px; }
#summary .txt_area ul li { position: relative; padding-left: 10px; color: var(--basic); line-height: 1.667; }
#summary .txt_area ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 4px; height: 4px; border-radius: 50%; background: var(--main); }
#summary .txt_area ul li span { color: var(--main); font-weight: 600; line-height: inherit; letter-spacing: inherit; }
/**** E:: 회사소개 > Summary ****/

/**** S:: 회사소개 > Governance ****/
#governance { box-sizing: border-box; background: var(--grayBg); }
#governance .tit_wrap { max-width: 1560px; width: 90%; margin: 0 auto; padding-bottom: 60px; }
#governance .chart { position: relative; max-width: 1560px; width: 90%; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#governance .chart::before { content: ''; position: absolute; left: 0; top: 330px; bottom: 105px; width: 1px; background: var(--border); z-index: 0; }
#governance .legend { position: absolute; right: 0; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#governance .legend ul { display: flex; gap: 30px; }
#governance .legend li { display: flex; align-items: center; gap: 10px; }
#governance .legend li i { display: block; position: relative; width: 60px; height: 25px; box-sizing: border-box; border: 1px solid; border-radius: 5px; background: var(--white); }
#governance .legend li i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 52px; height: 17px; border-radius: 2px; transform: translate(-50%, -50%); }
#governance .legend li.fashion i { border-color: var(--sub); }
#governance .legend li.fashion i::after { background: var(--sub); }
#governance .legend li.medical i { border-color: var(--main); }
#governance .legend li.medical i::after { background: var(--main); }
#governance .legend li .fs16 { color: var(--black); font-weight: 600; line-height: 1.75; }
#governance .legend > .fs16 { color: var(--basic); line-height: 1.75; }
#governance .root { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 300px; height: 300px; margin: 0 auto; border-radius: 50%; background: url('/company/img/governance_root.svg') center / 100% 100% no-repeat; text-align: center; }
#governance .root .fsE12 { color: var(--white); opacity: 0.3; letter-spacing: 3.6px; text-transform: uppercase; font-weight: 600; line-height: 1.667; }
#governance .root .fsE18 { color: var(--white); line-height: 1.556; }
#governance .root .fsE18 br { display: inline; }
#governance .root::after { content: ''; position: absolute; left: 50%; bottom: -30px; width: 1px; height: 30px; background: var(--border); }
#governance .cols { display: flex; justify-content: flex-start; align-items: flex-start; gap: 30px; position: relative; flex-shrink: 0; min-width: 1260px; margin-top: 30px; padding: 30px 60px 0; box-sizing: border-box; }
#governance .cols::before { content: ''; position: absolute; left: 0; right: 192px; top: 0; height: 1px; background: var(--border); }
#governance .col { display: flex; flex-direction: column; align-items: center; position: relative; flex-shrink: 0; }
#governance .col::before { content: ''; position: absolute; left: 50%; top: -30px; width: 1px; height: 30px; background: var(--border); }
#governance .box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; width: 264px; padding: 15px; box-sizing: border-box; background: var(--white); border: 1px solid var(--sub); border-radius: var(--borderR10); text-align: center; }
#governance .box.medical { border-color: var(--main); }
#governance .box .fsE16 { color: var(--black); font-weight: 500; line-height: 1; }
#governance .box .fsE16 br { display: inline; }
#governance .box .fs16 { color: var(--black); font-weight: 600; line-height: 1.75; }
#governance .box .fs16 br { display: inline; }
#governance .box .bar { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 26px; padding: 2px 10px; box-sizing: border-box; overflow: hidden; border-radius: 5px; background: rgba(5, 16, 53, 0.2); }
#governance .box.medical .bar { background: rgba(0, 74, 249, 0.2); }
#governance .box .bar i { position: absolute; left: 0; top: 0; width: var(--pct, 100%); height: 100%; background: var(--sub); }
#governance .box.medical .bar i { background: var(--main); }
#governance .box .bar .fs12 { position: relative; z-index: 1; color: var(--white); font-weight: 700; line-height: 1.833; }
#governance .col > .box + .box { margin-top: 30px; }
#governance .col > .box + .box::before { content: ''; position: absolute; left: 50%; top: -30px; width: 1px; height: 30px; background: var(--border); }
#governance .col > .box { position: relative; }
#governance .pair { display: flex; gap: 30px; position: relative; margin-top: 30px; padding-top: 30px; }
#governance .pair::before { content: ''; position: absolute; left: 50%; top: -30px; width: 1px; height: 30px; background: var(--border); }
#governance .pair::after { content: ''; position: absolute; left: 132px; right: 132px; top: 0; height: 1px; background: var(--border); }
#governance .pair .box { position: relative; }
#governance .pair .box::before { content: ''; position: absolute; left: 50%; top: -30px; width: 1px; height: 30px; background: var(--border); }
#governance .rows { display: flex; flex-direction: column; gap: 30px; position: relative; flex-shrink: 0; min-width: 1260px; margin-top: 30px; padding-left: 60px; box-sizing: border-box; }
#governance .row { display: flex; align-items: center; position: relative; }
#governance .row::before { content: ''; position: absolute; left: -60px; top: 50%; width: 60px; height: 1px; background: var(--border); }
#governance .row .box { position: relative; flex-shrink: 0; }
#governance .row > .box + .box { margin-left: 30px; }
#governance .row > .box + .box::before { content: ''; position: absolute; left: -30px; top: 50%; width: 30px; height: 1px; background: var(--border); }
#governance .stack { display: flex; flex-direction: column; gap: 10px; position: relative; margin-left: 30px; padding-left: 30px; }
#governance .stack::before { content: ''; position: absolute; left: 0; top: 50%; width: 30px; height: 1px; background: var(--border); transform:translateX(-100%);}
#governance .stack::after { content: ''; position: absolute; left: 0; top: 50px; bottom: 50px; width: 1px; background: var(--border); }
#governance .stack .box { position: relative; }
#governance .stack .box::before { content: ''; position: absolute; left: -30px; top: 50%; width: 30px; height: 1px; background: var(--border); }
/**** E:: 회사소개 > Governance ****/

/**** S:: 회사소개 > History ****/
#history { box-sizing: border-box; overflow: hidden; width: 100%; }
#history .tit_wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 60px; text-align: center; }
#history .tit_wrap .fsE12 { color: var(--black); opacity: 0.3; letter-spacing: 3.6px; text-transform: uppercase; font-weight: 600; line-height: 1.667; }
#history .tit_wrap .fs50 { color: var(--black); }
#history .visual { position: relative; display: block; max-width: 1720px; width: 90%; aspect-ratio: 1720 / 500; margin: 0 auto; overflow: hidden; border-radius: var(--borderR20); background: var(--black) url('/company/img/history_visual.jpg') center / cover no-repeat; }
#history .visual figcaption { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 20px; width: 90%; color: var(--white); text-align: center; transform: translate(-50%, -50%); }
#history .visual .fsE40 { font-weight: 300; line-height: 1.25; }
#history .visual .fsE40 strong { font-weight: 700; }
#history .visual .fs18 { line-height: 1.667; }
#history .groups { position: relative; max-width: 1560px; width: 90%; margin: 0 auto; }
#history .group { display: grid; grid-template-columns: 32.05% 80px 1fr; column-gap: 40px; align-items: start; }
#history .cate { position: sticky; top: 120px; align-self: start; z-index: 3; display: flex; flex-direction: column; gap: 20px; padding-top: 0; box-sizing: border-box; }
#history .cate > div { display: flex; flex-direction: column; gap: 5px; position: relative; margin-top: 100px; }
#history .cate > div .fs18 { color: var(--main); font-weight: 600; line-height: 1.667; }
#history .cate .fs38 { color: var(--black); }
#history .cate > .fs18 { max-width: 504px; color: var(--basic); line-height: 1.667; }
#history .group > i { display: block; width: 80px; min-height: 100%; }
#history .groups > .line { position: absolute; left: calc(32.05% + 40px); top: 0; bottom: 0; z-index: 2; display: block; width: 80px; background: linear-gradient(90deg, transparent 39px, var(--border) 39px, var(--border) 41px, transparent 41px); pointer-events: none; }
#history .groups > .line::before { content: ''; position: absolute; left: 39px; top: 0; width: 2px; height: var(--fill, 0); background: var(--main); }
#history .groups > .line span { position: absolute; left: 0; top: var(--marker, 0); display: block; width: 80px; height: 80px; background: url('/company/img/history_line.svg') center / 100% 100% no-repeat; }
#history .list { display: flex; flex-direction: column; gap: 60px; padding: 100px 0; box-sizing: border-box; border-bottom: 1px solid var(--border); }
#history .group:last-child .list { border-bottom: 0; }
#history .list dl { display: flex; flex-direction: column; gap: 10px; }
#history .list .fsE36 { color: var(--black); line-height: 1.278; }
#history .list .fs18 { color: var(--basic); line-height: 1.667; }
#history .list .fs18 b { margin-right: 8px; color: var(--black); font-weight: 600; }
/**** E:: 회사소개 > History ****/

/**** S:: 회사소개 > Contact ****/
#contact .contact_in { display: flex; gap: 80px; align-items: flex-start; }
#contact .tBox { position: sticky; top: 120px; width: 38%; max-width: 590px; flex-shrink: 0; display: flex; flex-direction: column; gap: 30px; padding-top: 40px; box-sizing: border-box; }
#contact .tBox .fsE60 { color: var(--black); }
#contact .tBox > .fs18 { color: var(--basic); line-height: 1.667; }
#contact .info { display: flex; flex-direction: column; gap: 15px; }
#contact .info .fs20 { display: flex; align-items: center; gap: 8px; color: var(--black); font-weight: 600; line-height: 1.5; }
#contact .info .fs20 .material-symbols-outlined { font-size: 24px; line-height: 1; color: var(--main); flex-shrink: 0; }
#contact .info ul { display: flex; flex-direction: column; gap: 10px; }
#contact .info li { display: flex; align-items: center; gap: 10px; color: var(--basic); line-height: 1.667; }
#contact .info li .fs16 { display: flex; align-items: center; justify-content: center; min-width: 88px; padding: 3px 15px; box-sizing: border-box; background: rgba(0, 74, 249, 0.1); border-radius: 100px; color: var(--main); font-weight: 600; line-height: 1.75; text-align: center; flex-shrink: 0; }
#contact .contact_box { flex: 1; min-width: 0; padding-top: 40px; box-sizing: border-box; }
/**** E:: 회사소개 > Contact ****/

/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 

/**** S:: 회사소개 > CEO Messages ****/
#messages { gap: 50px; }
#messages .txt_area { padding: 40px 0; }
/**** E:: 회사소개 > CEO Messages ****/

/**** S:: 회사소개 > Locations ****/
#locations .info { padding: 40px; }
/**** E:: 회사소개 > Locations ****/

/**** S:: 회사소개 > Summary ****/
#summary { gap: 50px; }
#summary figure { height: 440px; }
/**** E:: 회사소개 > Summary ****/

/**** S:: 회사소개 > Contact ****/
#contact .contact_in { gap: 50px; }
/**** E:: 회사소개 > Contact ****/

}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 

/**** S:: 회사소개 > CEO Messages ****/
#messages { gap: 40px; }
#messages .img_area { width: 38%; }
/**** E:: 회사소개 > CEO Messages ****/

/**** S:: 회사소개 > Locations ****/
#locations .map { width: 65%; height: 520px; }
#locations .info { padding: 35px; gap: 30px; }
/**** E:: 회사소개 > Locations ****/

/**** S:: 회사소개 > Summary ****/
#summary { gap: 40px; }
#summary figure { height: 400px; }
#summary .txt_area { gap: 24px; }
/**** E:: 회사소개 > Summary ****/

/**** S:: 회사소개 > Governance ****/
#governance .tit_wrap { padding-bottom: 40px; }
#governance .root { width: 200px; height: 200px; }
#governance .chart::before { top: 230px; }
#governance .chart { padding-bottom: 10px; }
#governance .cols, #governance .rows { min-width: 1200px; }
#governance .cols { gap: 24px; }
/**** E:: 회사소개 > Governance ****/

/**** S:: 회사소개 > History ****/
#history .tit_wrap { padding-bottom: 40px; }
#history .cate > div { margin-top: 80px; }
#history .list { gap: 50px; padding: 80px 0; }
/**** E:: 회사소개 > History ****/

/**** S:: 회사소개 > Contact ****/
#contact .contact_in { gap: 40px; }
#contact .tBox { width: 42%; padding-top: 30px; }
#contact .contact_box { padding-top: 30px; }
/**** E:: 회사소개 > Contact ****/

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 

/**** S:: 회사소개 > CEO Messages ****/
#messages { flex-direction: column-reverse; gap: 50px; }
#messages .txt_area { width: 100%; padding: 0; }
#messages .img_area { width: 70%; max-width: 420px; margin: 0 auto; }
/**** E:: 회사소개 > CEO Messages ****/

/**** S:: 회사소개 > Locations ****/
#locations .tit_wrap { gap: 18px;}
#locations .cont { flex-direction: column; gap: 20px; }
#locations .map { width: 100%; height: 420px; }
#locations .info { width: 100%; padding: 40px; }
/**** E:: 회사소개 > Locations ****/

/**** S:: 회사소개 > Summary ****/
#summary { flex-direction: column; gap: 40px; }
#summary figure { width: 100%; height: auto; aspect-ratio: 740 / 500; }
#summary .txt_area { width: 100%; }
#summary .txt_area > .fs18 br { display: none; }
/**** E:: 회사소개 > Summary ****/

/**** S:: 회사소개 > Governance ****/
#governance .legend { position: static; align-items: flex-start; margin-bottom: 30px; }
#governance .legend ul { flex-wrap: wrap; gap: 15px 20px; }
#governance .root { width: 180px; height: 180px; gap: 6px; }
#governance .chart::before { top: 210px; }
#governance .cols, #governance .rows { min-width: 1100px; }
#governance .cols { gap: 20px; }
/**** E:: 회사소개 > Governance ****/

/**** S:: 회사소개 > History ****/
#history .visual { aspect-ratio: 16 / 7; }
#history .visual figcaption { gap: 12px; }
#history .groups { padding-left: 50px; box-sizing: border-box; overflow: hidden; }
#history .group { display: block; }
#history .cate { position: static; padding: 60px 0 30px; }
#history .cate > div { margin-top: 0; }
#history .group > i { display: none; }
#history .groups > .line { top: 0; left: 0; width: 40px; background: linear-gradient(90deg, transparent 19px, var(--border) 19px, var(--border) 21px, transparent 21px); }
#history .groups > .line::before { left: 19px; }
#history .groups > .line span { width: 40px; height: 40px; }
#history .list { gap: 45px; padding: 0 0 60px; }
/**** E:: 회사소개 > History ****/

/**** S:: 회사소개 > Contact ****/
#contact .contact_in { flex-direction: column; gap: 40px; }
#contact .tBox { position: static; width: 100%; max-width: none; padding-top: 0; }
#contact .tBox > .fs18 br { display: none; }
#contact .contact_box { width: 100%; padding-top: 0; }
/**** E:: 회사소개 > Contact ****/

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 

/**** S:: 회사소개 > CEO Messages ****/
#messages { gap: 35px; }
#messages .txt_area .cont { gap: 20px; }
#messages .txt_area .txt { gap: 15px; }
#messages .sign { flex-wrap: wrap; gap: 10px 6px; }
#messages .sign figure { width: 70px; height: 36px; margin-left: 0; }
#messages .img_area { width: 80%; max-width: 360px; }
#messages .img_area .ai { box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1), 8px 8px 12px rgba(0, 0, 0, 0.08); }
/**** E:: 회사소개 > CEO Messages ****/

/**** S:: 회사소개 > Locations ****/
#locations .tit_wrap { gap: 15px; padding-bottom: 30px; margin-top: -15px;}
#locations .map { height: 300px; }
#locations .info { padding: 25px 20px; gap: 20px; }
#locations .info .top { gap: 25px; }
#locations .info .head { padding-bottom: 20px; }
#locations .info .fs32 span { width: 36px; height: 36px; }
#locations .info > a { height: 46px; padding: 0 18px 0 24px; }
#locations .info dt .material-symbols-outlined {font-size:20px; font-weight: 500;}
/**** E:: 회사소개 > Locations ****/

/**** S:: 회사소개 > Summary ****/
#summary { gap: 30px; }
#summary .txt_area { gap: 20px; }
#summary .tit { gap: 8px; }
/**** E:: 회사소개 > Summary ****/

/**** S:: 회사소개 > Governance ****/
#governance .tit_wrap { padding-bottom: 30px; }
#governance .root { width: 130px; height: 130px; gap: 4px; }
#governance .root .fsE18 { font-size: 0.72rem; }
#governance .root .fsE12 { font-size: 0.55rem; letter-spacing: 2px; }
#governance .root::after { bottom: -20px; height: 20px; }
#governance .chart::before { top: 235px; bottom: 78px; }
#governance .legend li { gap: 6px; }
#governance .legend li i { width: 44px; height: 18px; }
#governance .legend li i::after { width: 36px; height: 10px; }
#governance .cols { margin-top: 20px; padding: 20px 40px 0; gap: 16px; }
#governance .cols::before { right: 140px; }
#governance .col::before { top: -20px; height: 20px; }
#governance .box { gap: 8px; width: 180px; padding: 10px; border-radius: var(--borderR5); }
#governance .box .fsE16 { font-size: 0.72rem; line-height: 1.35; }
#governance .box .fs16 { font-size: 0.72rem; line-height: 1.45; }
#governance .box .bar { height: 20px; padding: 0 8px; border-radius: 3px; }
#governance .col > .box + .box { margin-top: 20px; }
#governance .col > .box + .box::before { top: -20px; height: 20px; }
#governance .pair { gap: 16px; margin-top: 20px; padding-top: 20px; }
#governance .pair::before { top: -20px; height: 20px; }
#governance .pair::after { left: 90px; right: 90px; }
#governance .pair .box::before { top: -20px; height: 20px; }
#governance .rows { gap: 20px; margin-top: 20px; padding-left: 40px; }
#governance .row::before { left: -40px; width: 40px; }
#governance .row > .box + .box { margin-left: 16px; }
#governance .row > .box + .box::before { left: -16px; width: 16px; }
#governance .stack { gap: 8px; margin-left: 16px; padding-left: 16px; }
#governance .stack::before { width: 16px; }
#governance .stack::after { top: 36px; bottom: 36px; }
#governance .stack .box::before { left: -16px; width: 16px; }
#governance .cols, #governance .rows { min-width: 860px; }
/**** E:: 회사소개 > Governance ****/

/**** S:: 회사소개 > History ****/
#history .tit_wrap { gap: 8px; padding-bottom: 30px; }
#history .visual { aspect-ratio: 4 / 3; }
#history .visual figcaption { gap: 10px; }
#history .visual .fs18 { width: 90%; }
#history .groups { padding-left: 40px; }
#history .cate { padding: 50px 0 25px; gap:10px;}
#history .groups > .line { width: 32px; background: linear-gradient(90deg, transparent 15px, var(--border) 15px, var(--border) 17px, transparent 17px); }
#history .groups > .line::before { left: 15px; }
#history .groups > .line span { width: 32px; height: 32px; }
#history .list { gap: 40px; padding-bottom: 50px; }
#history .list dl { gap: 6px; }
/**** E:: 회사소개 > History ****/

/**** S:: 회사소개 > Contact ****/
#contact .contact_in { gap: 30px; }
#contact .tBox { gap: 20px; }
#contact .info .fs20 .material-symbols-outlined { font-size: 20px; }
#contact .info li .fs16 { min-width: 78px; padding: 2px 12px; }
/**** E:: 회사소개 > Contact ****/

}