@charset "utf-8";

/* sub visual */
.subVisual{ overflow: hidden; display: flex; align-items: center; justify-content: center; position:relative; height:480rem; text-align:left; color: #fff; }
.subVisual .inr {padding-top: 5em;}
.subVisual::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
.subVisual.about::before{ background-image:url('/images/content/sub_visual01.jpg')}
.subVisual.certification::before{ background-image:url('/images/content/sub_visual05.jpg')}
.subVisual.business::before{ background-image:url('/images/content/sub_visual02.jpg')}
.subVisual.gallery::before{ background-image:url('/images/content/sub_visual03.jpg')} 
.subVisual.dataroom::before{ background-image:url('/images/content/sub_visual04.jpg')}
.subVisual.board::before{ background-image:url('/images/content/sub_visual05.jpg')}
.subVisual.common::before{ background-image:url('/images/content/sub_visual06.jpg')}
.subVisual h2{ font-size: var(--fs45); margin-bottom: 0.3em;}
.subVisual p {display: block; font-weight: 300; }
@media(prefers-reduced-motion:no-preference){
	.subVisual::before{ animation: subVisual_bg 1.8s both; }
	@keyframes subVisual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.subVisual .inr > *{ opacity: 0; animation: subVisualText .6s .2s both; }
	.subVisual .inr > *:nth-child(2){ animation-delay: .4s; }
	@keyframes subVisualText {
		0%{ transform: translateX(40rem); opacity: 0; }
		100%{ transform: translateX(0); opacity: 1; }
	}
}

/* lnb */
.lnb{ background: var(--white);border-bottom: 1px solid #e5e5e5; text-align:center; font-size:var(--fs18); font-weight: 500; color: #cacaca; z-index:5; }
.lnb ul{ margin: 0 auto; }
.lnb li{display:inline-block; padding: 0 35rem;}
.lnb a{ position: relative; display: flex; align-items: center; height: 76rem;}
.lnb a:hover,
.lnb a.on{ color: var(--primary); }
.lnb a.on::before{ content: ''; position: absolute; inset: 0; border-bottom: 2px solid currentColor; }
@media(max-width:767px){
	.lnb{ overflow: auto clip; white-space:nowrap; }
	.lnb ul{ display:table; margin:0 auto; table-layout:auto; overflow-y: hidden;}
	.lnb li{ display:table-cell; }
}

/* common content */
#content{ contain: content; min-height:300px; padding: clamp(80rem, calc( 94 / var(--inr) * 100vw ), 94rem) 0; }
.sub_title{
	&{ text-align: center; }
	.eng{ font: 600 17rem var(--font-exo); letter-spacing: .01em; color: var(--primary); }
	[data-menu-snb="2"]{ margin: 0.5em 0 1.28571429em; font: 700 var(--fs35) var(--font-exo); letter-spacing: -.015em; }
}

/* 회사소개 - 인사말 */
.sub.about{
	&{ position: relative; }
	.inr{ position: static; }
	.banner{ height: 300rem; background: #8b6157 url('/images/content/about-banner.webp') no-repeat 50% / cover; border-radius: 10rem; }
	.greating{
		&{ margin-top: 57rem; }
		p{ font-size: 17rem; line-height: 1.58823529; color: #555; }
		p + p{ margin-top: 1.47058824em; }
		.lead{ margin-bottom: 1.46666667em; font: 700 var(--fs30) var(--font-pre); color: var(--black); }
		.ceo{ margin-top: 54rem; font-weight: 500; letter-spacing: -.05em; }
		.name{ margin-left: 15rem; display: inline-block; font: 28rem var(--font-hss); letter-spacing: 0; vertical-align: middle; translate: 0 -3rem; }
	}
	.logo{ position: absolute; right: 0; bottom: clamp(52rem, calc( 100 / 1920 * 100vw ), 100rem); aspect-ratio: 1; width: clamp(90rem, calc( 381 / 1920 * 100vw ), 381rem); background: url('/images/content/about1-logo.svg') no-repeat 50% / contain; opacity: .15; }
	@media(min-width:768px){
		.logo{ translate: 12.335958%; }
		@media(max-width:1279px){
			.logo{ scale: .7; }
		}
	}
	@media(max-width:767px){
		.logo{ translate: -4vw; }
	}
}

/* 회사소개 - 개요 */
.sub.overview {}
.sub.overview .sub_title {text-align: left;}
.sub.overview .sub_title h2 {font-size: var(--fs40) !important;}
.sub.overview .sec1 {position: relative; padding: 100rem 0 100rem;}
.sub.overview .sec1 .inr {display: flex; justify-content: space-between;} 
.sub.overview .sec1 h3 {font-size: var(--fs40); font-weight: 700;}
.sub.overview .sec1::before{content:""; position:absolute; top:0; left:0; width:100%; height:100%;background:url("/images/content/overview_bg.jpg") no-repeat center left;z-index:-1;}
.overview__table {display: flex; flex-wrap: wrap; width: 65%; border-top: 2rem solid #111; border-bottom: 1rem solid #111; background: rgba(255, 255, 255, 0.2);}
.overview__table > li {flex: 1 50%;}
.overview__table > li+li {border-top: 1rem solid #ddd; }
.overview__table li:nth-child(n+7) {flex: 1 100%;}
.overview__table > li:nth-child(2), .overview__table > li:nth-child(4), .overview__table > li:nth-child(6) {border-left: 1rem solid #ddd; }
.overview__table dl {display: flex; align-items: center;}
.overview__table dt {min-width: 150rem; font-weight: 600; padding: 18rem 10rem; text-align: center;}
.overview__table dd {width: 100%; padding: 18rem 0 18rem 25rem; color: #444; border-left: 1rem solid #ddd;  }
.overview__table > li:nth-child(5) dd {padding: 35rem 0 35rem 25rem;}
.overview__table ul li+li {margin-top: 8rem;}
.overview__table ul li b {display: inline-block; margin-right: 10rem; width:30px;}
.overview__table .num_list {display: grid; grid-template-columns: repeat(3,1fr); gap: 5rem 15rem;}
.overview__table .num_list li::before {top: 4rem;}
.overview__table .num_list li+li {margin-top: 0;}
@media(max-width:1280px){
	.sub.overview .sec1 {padding: 50rem 0;}
	.sub.overview .sec1::before {opacity: 0.15;}
	.overview__table {width: 75%;}
	.overview__table > li {flex: 1 100%;}
	.overview__table > li:nth-child(2), .overview__table > li:nth-child(4), .overview__table > li:nth-child(6) {border-left: 0;}
	.overview__table .num_list {grid-template-columns: repeat(1,1fr); gap: 5rem 15rem;}
}

@media(max-width:768px){
	.sub.overview .sec1 {padding: 0;}
	.sub.overview .sub_title {text-align: center;}
	.sub.overview .sub_title h2 {font-size: var(--fs30) !important;}
	.overview__table {width: 100%;}
	.sub.overview .sec1 .inr {flex-direction: column;} 
	.overview__table dd {padding: 15rem 0 15rem 20rem;}
	.overview__table dt {min-width: 125rem; padding: 15rem 10rem;}
	.overview__table > li:nth-child(5) dd {padding: 15rem 0 15rem 20rem;}
}

/* .overview__table {width: 55%; border-top: 2rem solid #111; border-bottom: 1rem solid #111;}
.overview__table table {width: 100%;}
.overview__table tr {border-top: 1rem solid #e5e5e5;}
.overview__table th {font-weight: 600; padding: 15rem 15rem; }
.overview__table td {text-align: left; padding: 15rem 20rem; color: #444; border-left: 1rem solid #e8e8e8;}
.overview__table ul li+li {margin-top: 7rem;}
.overview__table ul li b {display: inline-block; margin-right: 10rem;}
.overview__table .num_list {display: grid; grid-template-columns: repeat(2,1fr); gap: 5rem 0;}
.overview__table .num_list li::before {top: 4rem;}
.overview__table .num_list li+li {margin-top: 0;} */

/* 회사소개 - 연혁 */
.sub.history{
	.inline-block{ display: inline-block; }
	.year-list{ contain: content; position: relative; display: grid; gap: 60rem; padding-bottom: 43rem; text-wrap: balance; }
	.year-list > li{ display: grid; align-items: center; gap: 40rem var(--gap); }
	.bar{ contain: content; position: absolute; inset: 0 auto 0; width: 1px; background: var(--primary); z-index: -1; }
	.img{ aspect-ratio: 59/38; background: no-repeat 50% / cover; border-radius: 8rem; }
	.img.i1{ background-image: url('/images/content/history-1.webp'); }
	.img.i2{ background-image: url('/images/content/history-2.webp'); }
	.img.i3{ background-image: url('/images/content/history-3.webp'); }
	.txt{ position: relative; }
	.txt::before{ content: ''; position: absolute; top: .6em; left: -14.5rem; translate: calc( var(--gap) / -2 ) -48%; aspect-ratio: 1; width: 27rem; background: var(--white); border: 1px solid var(--primary); border-radius: 50%; font-size: var(--fs40); }
	.txt::before{ background: radial-gradient(var(--primary) 3rem, #fff 4rem) }
	.year{ font: 800 var(--fs40) var(--font-pre); }
	.month-list{ margin-top: 40rem; display: grid; gap: 30rem; }
	.month-list > li{ position: relative; display: flex; gap: clamp(20rem, calc( 70 / var(--inr) * 100vw ), 70rem); font: 17rem var(--font-pre); }
	.date{ flex: 0 0 7ch; font-weight: 600; }
	@media(prefers-reduced-motion:no-preference){
		.bar{ background: #e8e8e8; }
		.bar::before{ content: ''; position: absolute; inset: 0 0 auto; width: 1px; height: var(--height); background: var(--primary); }
	}
	@media(min-width:768px){
		.year-list{ --gap: clamp(60rem, calc( 220 / var(--inr) * 100vw ), 220rem); }
		.year-list > li{ grid-template-columns: repeat(2, 1fr); }
		.bar{ top: 65rem; left: 50%; }
		.img{ max-width: 590rem; }
		.txt{ margin-top: 41rem; }
		.year-list > li:nth-child(even){ text-align: right; }
		.year-list > li:nth-child(even) .img{ order: 2; }
		.year-list > li:nth-child(even) .txt::before{ left: auto; right: -14.5rem; translate: calc( var(--gap) / 2 ); }
		.year-list > li:nth-child(even) .txt::after{ left: auto; right: -3.5rem; translate: calc( var(--gap) / 2 ); }
		.year-list > li:nth-child(even) .month-list > li{ flex-direction: row-reverse; }
	}
	@media(min-width:1280px){
		.year-list{ margin-top: 95rem; }
		.year-list > li{ align-items: start; }
	}
	@media(max-width:767px){
		.year-list{ --gap: 60rem; padding-left: var(--gap); }
		.bar{ left: calc( var(--gap) / 2 ); }
	}
}

/* 회사소개 - 인증현황 */
body:has(dialog[open]){ overflow: hidden; }
.sub.certi{
	.gallery{
		&{ --border: #e8e8e8; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); text-align: center; }
		button{ position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: clamp(30rem, calc( 64 / var(--inr) * 100vw ), 64rem) 20rem clamp(30rem, calc( 61 / var(--inr) * 100vw ), 61rem); background: var(--white); }
		figure{ width: min(220rem, 100%); }
		img{ max-width: 100%; width: 100%; height: auto; }
		.iso{ margin-top: 21rem; display: block; font-weight: 500; color: var(--primary); }
		.name{ margin-top: 11rem; display: block; font: 600 20rem var(--font-pre); }
	}
	dialog{
		&{ overflow: visible; margin: auto; padding: 0; background: 0; border: 0; text-align: center; font: 600 var(--fs25) var(--font-pre); color: var(--white); text-shadow: 0 0 10rem rgba(0, 0, 0, 0.2); }
		&::backdrop{ background: rgba(0, 0, 0, 0.6); }
		.close-btn{ position: absolute; aspect-ratio: 1; width: 65rem; background: var(--primary) url('/images/content/certi-close.svg') no-repeat 50% / 16rem; }
		img{ margin-bottom: 1em; max-width: 100%; width: 522rem; height: auto; }
	}
	@media(prefers-reduced-motion:no-preference){
		.gallery button::before{ transition: .3s; }
	}
	@media(hover){
		.gallery button::before{ content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8) url('/images/content/certi-cross.svg') no-repeat 50% / 73rem; }
		.gallery button:not(:hover)::before{ opacity: 0; }
	}
	@media(min-width:768px){
		.gallery{ grid-template-columns: repeat(3, 1fr); }
		.close-btn{ top: 0; left: 100%; }
	}
	@media(max-width:767px){
		.gallery{ grid-template-columns: repeat(2, 1fr); }
		.gallery::after{ content: ''; display: block; background: var(--white); margin: 0 -1px -1px 0; }
		dialog{ max-width: 92vw; }
		.close-btn{ right: 0; bottom: 100%; }
	}
}

/* 회사소개 - 조직도 */
.org .chart{
	&{ --border: #e8e8e8; padding-block: 79rem; border: 1px solid var(--border); text-align: center; }
	.head{ color: #fff; }
	[class*="dot-"]::before{ content: ''; position: absolute; left: 50%; aspect-ratio: 1; width: 7px; background: var(--primary); border: 2px solid #fff; border-radius: 50%; }
	.dot-bottom::before{ bottom: 0; translate: -50% 50%; }
	.dot-top::before{ top: 0; translate: -50% -50%; }
	.box{ position: relative; }
	.b1{ margin: 0 auto; display: grid; place-items: center; aspect-ratio: 1; width: 185rem; background: #115384 url('/images/content/org-logo.svg') no-repeat 117% 79% / 63.78378378%; border-radius: 50%; font: 600 22rem var(--font-pre); }
	.ul2 .box{ margin-inline: auto; display: grid; place-items: center; max-width: 250rem; width: 100%; height: 60rem; border-radius: 4rem; font: 18rem var(--font-pre); }
	.ul2 .head{ font-weight: 600; }
	.b2{ margin-top: 60rem; background: #2b2b2b; }
	.ul3{ position: relative; display: flex; justify-content: space-between; gap: 40rem 60rem; }
	.ul3::before{ content: ''; position: absolute; inset: -240rem 50% 100%; border-left: 1px solid var(--border); z-index: -1; }
	.ul3::after{ content: ''; position: absolute; inset: -60rem 125rem auto; border-top: 1px solid var(--border); z-index: -1; }
	.ul3 > li{ margin: 0 auto; max-width: 250rem; width: 100%; }
	.b3{ background: var(--primary); }
	.b3::after{ content: ''; position: absolute; inset: -60rem 50% 100%; border-left: 1px solid var(--border); z-index: -1; }
	.ul4{ margin-top: 10rem; display: grid; gap: 9rem; }
	.b4{ background: #f5f5f5; border: 1px solid #eee; }
	@media(min-width:768px){
		.ul3{ margin-top: 120rem; }
		.ul3 > li:first-child{ margin-left: 0; }
		.ul3 > li:last-child{ margin-right: 0; }
	}
	@media(min-width:1280px){
		&{ padding-inline: clamp(4vw, calc( 174 / var(--inr) * 100vw ), 174rem); }
	}
	@media(max-width:1279px){
		&{ padding-inline: 4vw; }
	}
	@media(max-width:767px){
		.ul3{ margin-top: 60rem; flex-direction: column; }
		.ul3::after, .b3::after{ display: none; }
	}
}


/* 회사소개 > 오시는 길 */
.locationMap{margin-bottom:50rem; width:100%; height:500rem; border-radius:10rem; overflow:hidden;}
.locationMap .root_daum_roughmap_landing{width:100% !important; height:100% !important;}
.locationMap .root_daum_roughmap .wrap_map{height:100% !important;}
.locationMap .root_daum_roughmap .map_border,
.locationMap .root_daum_roughmap .wrap_controllers{display:none;}
.locationInfo{display:flex; align-items:center; justify-content:space-between;}
.locationInfo_logo{display:block; height:40rem;}
.locationInfo_logo img{display:block; height:100%;}
.locationInfo_txt{display:flex; gap:8rem 40rem;}
.locationInfo_txt li{display:flex; font-size:17rem; color:#444;}
.locationInfo_txt em{display:inline-block; margin-right:10rem; color:#111; font-weight:bold;}
[lang="en"] .locationInfo{flex-direction:column; align-items:unset; gap:2ch;}
[lang="en"] .locationInfo_txt{flex-wrap:wrap;}
@media(max-width:1279px){
    .locationMap{margin-bottom:40rem; height:400rem;}
    .locationInfo{display:block;}
    .locationInfo_logo{margin-bottom:25rem;}
    .locationInfo_txt{column-gap:30rem;}
    @media(min-width:768px){
        [lang="en"] .locationInfo_txt li:nth-child(1){ flex: 1 100%; }
    }
}
@media(max-width:767px){
    .locationInfo_logo{margin-bottom:0;}
    .locationInfo_txt{flex-direction: column; margin-top:25rem;}
    .locationInfo_txt em{margin-right:0; width:50rem;}
    .locationInfo_txt a{width:calc(100% - 50rem);}
}


/* bisiness > 사업소개 */
.bisiness {}
.bisiness h3 {font-size: var(--fs25); font-weight: 700; width: 350rem;}
.bisiness .section {font-size: var(--fs18); font-weight: 300; line-height: 1.6; display: flex; margin-top: 55rem; padding-top: 55rem; border-top: 1rem solid #e8e8e8; }
.bisiness .box {width: 100%;}
.bisiness .sec3 .num_list {display: flex; flex-wrap: wrap; align-items: center; gap: 10rem 15rem;}
.bisiness .sec3 .num_list li+li {margin-top: 0;}
.bisiness .sec4 {margin-top: 50rem; padding-top: 50rem; border-top: 1rem solid #e8e8e8;}
.bisiness .sec4 h3 {margin-bottom: 30rem;}
.bisiness .img_list {display: grid; grid-template-columns: repeat(4,1fr); gap: 20rem 15rem; text-align: center;}
.bisiness.bu2 .img_list {grid-template-columns: repeat(5,1fr);}
.bisiness .img_list .img {width: 100%;}
.bisiness .img_list .img img {width: 100%; max-width: 100%; vertical-align: middle;}
.bisiness .img_list p {padding: 8rem; box-sizing: border-box; background: #111; font-size: 17rem;  color: #fff;}
.num_list {counter-reset: list-number;}
.num_list li {position: relative; padding-left: 25rem; counter-increment: list-number;}
.num_list li+li {margin-top: 6rem;}
.num_list li::before {content:counter(list-number); position: absolute; top: 6rem; left: 0; width: 16rem; height: 16rem; border-radius: 50%; font-size: 10rem; font-weight: 600; display: flex; align-items: center; justify-content: center; background: #111; color: #fff;}



@media(max-width:767px){
	.bisiness .section {flex-direction: column; gap: 20rem; margin-top: 35rem; padding-top: 35rem;}
	.bisiness .img_list, .bisiness.bu2 .img_list {grid-template-columns: repeat(2,1fr); gap: 8rem;}
	.bisiness .img_list p {font-size: 15rem;}

}