@charset "utf-8";

/* sub visual */
.area_subVisual{ overflow: hidden; display: flex; justify-content: center; align-items: center; position:relative; height: clamp(350rem, 42.85714286vw, 450rem); background: var(--black); text-align:center; color: #fff; }
.area_subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover; }
.area_subVisual.about::before{ background-image:url(/images/content/vis3.jpg); }
.area_subVisual.business::before{ background-image:url(/images/content/vis3.jpg); }
.area_subVisual.shop::before{ background-image:url(/images/content/vis3.jpg); }
.area_subVisual.service::before{ background-image:url(/images/content/vis3.jpg); }
.area_subVisual.common::before{ background-image:url(/images/content/vis3.jpg); }
.area_subVisual.care::before{ background-image:url(/images/content/vis3.jpg); }
.area_subVisual .inr{ display: flex; align-items: center; justify-content: center; padding-top: 3.2%; }
.area_subVisual h2{ font-size: var(--fs52); color: var(--black);}
@media(prefers-reduced-motion:no-preference){
	@keyframes sub_visual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	@keyframes sub_visual_text {
		0%{ transform: translateY(20px); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
	.area_subVisual::before{ animation: sub_visual_bg 1.8s both; }
	.area_subVisual :is(p, h2){ opacity: 0; animation: sub_visual_text .6s .2s both; }
	.area_subVisual p + h2{ animation-delay: .4s; }
}

/* lnb */
.lnb_wrap{ overflow: hidden; transform: translateY(-50%); }
.lnb{ display: flex; justify-content: flex-end; font-weight: 500; z-index:11;}
.lnb ul{ position: relative; padding: 0 59rem 0 43rem; display: inline-flex; background: var(--primary);; color: #fff; }
.lnb ul::before{ content: ''; position: absolute; inset: 0 -100vw 0 0; background:inherit; pointer-events: none; z-index: -1; }
.lnb li + li{ position: relative; }
.lnb li + li::before{ content: ''; position: absolute; inset: 0; margin: auto auto auto 0; width: 1px; height: 1em; background: currentColor; opacity: .3; }
.lnb a{ display: flex; align-items: center; height: clamp(5em, calc( 114 / var(--inner) * 100vw ), 114rem); padding: 0 clamp(0rem, 2.55714286vw, 35.8rem); }
.lnb a:not(:hover, .on){ opacity: .3; }
@media(prefers-reduced-motion:no-preference){
	.lnb_wrap{ animation: lnb_clip .8s linear .3s both; }
	@keyframes lnb_clip {
		0%{ clip-path: inset(0 100% 0 0); }
		100%{ clip-path: inset(0 -100vw 0 0); }
	}
	@media(min-width:768px){
		.lnb_wrap{ animation-duration: 1s; }
	}
	@media(min-width:1280px){
		.lnb_wrap{ animation-duration: 1.4s; }
	}
}
@media (max-width:767px){
	.lnb ul {padding-right: 0; display: flex; flex-wrap: wrap; }
	  .lnb ul li { width: 33%; }
	  .lnb li + li::before { display:none; visibility: hidden; }
	  .lnb ul a { height: 45rem !important; display: flex !important; width: 100% !important; }
}

/* common, sub title */
#container{ padding: 64rem 0 80rem; }
#container:not(:has(.sub_history)){ overflow: hidden; }
#content{/*font-size: 20rem;*/ font-weight: 300; color: #555; }
.sub_title{ margin-bottom: 34rem; text-align: center; font-weight: 700; }
.sub_title__eng{ text-transform: uppercase; font-size: 22rem; color: var(--secondary); }
.sub_title__kor{ margin-top: 10rem; font-size: 35rem; }

/* about */
.sub_about__p{ line-height: 1.8; }
.sub_about__p.p1{ text-align: center; padding-top:40px;}
.sub_about__img_wrap{ position :relative; margin-top: 51rem; }
.sub_about__img_wrap::before,
.sub_about__img_wrap::after{ content: ''; position: absolute; display: block; }
.sub_about__img_wrap::before{ right: 100%; bottom: 100%; aspect-ratio: 1/1; width: 157rem; background: #ededed; }
.sub_about__img_wrap::after{ top: 100%; left: 100%; width: 100vw; height: 230rem; background: var(--secondary); }
.sub_about__img{ display: block; width: 100%; min-height: 250rem; object-fit: cover; }
.sub_about__p.p2{ margin-top: 67rem; }

/**/
.vision_item{padding-top:130rem; text-align:center;}
.vision_item .desc{font-weight:700; font-size:22rem; color:var(--secondary);}
.vision_item .title{padding-top:46rem; font-size:35rem; font-weight:700; color:var(--black);}
.vision_item .title b{color:var(--primary);}
.vision_item .mission{padding-bottom:130rem;}
.vision_item .vision{padding:20rem 0; background:url(../images/content/bg_vision.gif) no-repeat center center;}
.vision_item .core_value{padding-top:130rem;}
.vision_item .core_value .desc{padding-bottom:50rem;}
.vision_item .core_value ul{display:flex; flex-direction:row; align-items:center; height:440rem; background:url(../images/content/bg_core_values.jpg) no-repeat center 80%; background-size:cover;}
.vision_item .core_value ul li{position:relative; width:25%; height:100%; text-align:center; font-size:26rem; color:#fff;}
.vision_item .core_value ul li::after{content:""; width:1px; height:100%; position:absolute; top:0; right:0; background:#fff; opacity:.4;}
.vision_item .core_value ul li img{width:64rem;}
.vision_item .core_value ul li .icon{padding-top:50%;}
.vision_item .core_value ul li .text{padding-top:10rem;}

/* history */
.sub_history{ margin-top: 50rem; display: grid; row-gap: 60rem; }
.sub_history__left{ position: relative; }
.sub_history__sticky{ position: sticky; top: 40rem; font-size: 35rem; font-weight: 700; }
.sub_history__period{ color: var(--primary); }
.sub_history__title{ margin-top: 17rem; line-height: 1.42857143; color: var(--black); }
.sub_history__ul{ position: relative; margin-top: 4rem; }
.sub_history__ul::before{ content: ''; position: absolute; inset: 23rem auto 23rem 0; width: 1px; background: #ddd; }
.sub_history__ul li{ position: relative; display: flex; align-items: baseline; line-height: 2; }
.sub_history__li{ padding-left: clamp(40rem, 5.52845528vw, 68rem); }
.sub_history__li + li{ margin-top: 30rem; }
.sub_history__li::before,
.sub_history__li::after{ content: ''; position: absolute; background: var(--secondary); border-radius: 50%; }
.sub_history__li::before{ top: 17rem; left: -6rem; width: 12rem; height: 12rem; }
.sub_history__li::after{ top: 9rem; left: -14rem; width: 28rem; height: 28rem; opacity: .14; }
.sub_history__year{ width: 133rem; font-size: 24rem; font-weight: 700; color: var(--black); }
.sub_history__date{ width: 119rem; font-size: 20rem; font-weight: 700; color: var(--black); }
@media(min-width:1280px){
	.sub_history{ grid-template-columns: 40.32520325% 1fr; }
}
@media(max-width:767px){
	.sub_history__ul{ margin-left: 14rem; }
	.sub_history li{ flex-wrap: wrap; }
	.sub_history__year,
	.sub_history__date{ width: 100%; }
}

@media(max-width:740px){
    .vision_item{padding-top:70rem; text-align:left;}
    .vision_item .desc{font-size:22rem;}
    .vision_item .title{padding-top:15rem; font-size:26rem; line-height:1.65;}
 
    .vision_item .mission{padding-bottom:35rem;}
    .vision_item .core_value{padding-top:35rem;}
    .vision_item .core_value .desc{padding-bottom:20rem;}
    .vision_item .core_value ul{flex-wrap: wrap;}
    .vision_item .core_value ul li{width:50%; flex: 1 1 40%; height:50%; font-size:20rem; border-bottom:1px solid rgb(255 255 255 / 27%);}
    .vision_item .core_value ul li:nth-child(3),
    .vision_item .core_value ul li:nth-child(4){border-bottom:0;}
    .vision_item .core_value ul li .icon{padding-top:30%;}

}

/* organizational chart */
.sub_org__img{ margin: 70rem 0 0 auto; display: block; max-width: 1216rem; width: 100%; }

/* location */
.sub_location{ margin-top: 43rem; }
.sub_location .root_daum_roughmap{ width: 100%; border: 1px solid #e8e8e8; box-sizing: border-box; }
.sub_location .root_daum_roughmap .wrap_map{ height: 100%; }
.root_daum_roughmap svg{ pointer-events: none; }
.map_border,
.wrap_controllers{ display: none }
.sub_location__info{ position: relative; margin-top: 30rem; }
.sub_location__a{ margin-left: auto; display: flex; align-items: center; justify-content: center; width: 15em; height: 4em; border: 2px solid #2c2c2c; border-radius: 5em; box-sizing: border-box; font-size: 16rem; font-weight: 600; z-index: 1; }
.sub_location__ul{ font-size: 20rem; }
.sub_location__li{ display: flex; }
.sub_location__li + li{ margin-top: 20rem; }
.sub_location__head{ flex: 0 0 clamp(80rem, 11.13821138vw, 137rem); font-weight: 700; }
@media(prefers-reduced-motion:no-preference){
	.sub_location__a{ transition: .4s; }
}
@media(hover:hover){
	.sub_location__a:hover{ background: #191919; border-color: #191919; color: #fff; }
}
@media(min-width:768px){
	.sub_location .root_daum_roughmap .wrap_map{ height: 530rem; }
	.sub_location__info{ margin-top: 52rem; }
	.sub_location__a{ float: right; position: relative; top: 7rem; }
}
@media(max-width:767px){
	.sub_location .root_daum_roughmap{ aspect-ratio: 1/1; }
	.sub_location__ul{ margin-top: 40rem; }
}


/* additional */
.bussines_area .sub_org__img {
	margin: 0 !important;
	max-width: 1270rem !important;
  }
  .area_subVisual .inr {
	z-index: 0 !important;
  }
  
@media(max-width:768px){
    .sub_care > .desc{font-size:18rem;}
    .sub_care table th, .sub_care table td{font-size:14rem;}
    .sub_care table .point{font-size:17rem;}
    .sub_care ul > li{height:auto; margin-bottom:40rem;}
    .sub_care ul > li > div{width:100%;}
    .sub_care ul > li > div.image{width:100%;}
    .sub_care ul > li .text_wrap{position:relative; bottom:initial; left:initial; padding:30rem 0 0 0;}
    .reward_item{padding-top:55rem;}
    .reward_item .title{font-size:30rem; padding-bottom:20rem;}
    .reward_item .title .desc{font-size:18rem; line-height:1.25;}
    .reward_item .content > ul{display:block; gap:initial;}
    .reward_item .content > ul > li{width:100%; margin-bottom:40rem;}
    .reward_item .content > ul .label{padding:20rem; font-size:20rem;}
    .reward_item .content > ul .content{padding:40rem 30rem; font-size:18rem;}
}


/* 사업분야 */
.sub_business > ul{display:flex; flex-wrap:nowrap; gap:20rem;}
.sub_business > ul > li{flex-basis:33.3%;} 
.sub_business > ul > li img{width:100%; border-radius:5rem;}
.sub_business .business_tit{text-align:center; padding-top:15rem; font-weight:600;}
@media (max-width: 860px){
    .sub_business > ul{flex-wrap:wrap;}
    .sub_business > ul > li{flex-basis: calc(50% - 10rem); margin-bottom:14rem;} 
    .sub_business > ul > li:nth-child(2n){margin-right:0;}
}