@charset "utf-8";

/* sub visual */
.area_subVisual{ overflow: hidden; display: flex; justify-content: center; align-items: center; position:relative; height: clamp(350rem, 42.85714286vw, 600rem); 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/vis1.jpg); }
.area_subVisual.shop::before{ background-image:url(/images/content/vis1.jpg); }
.area_subVisual.service::before{ background-image:url(/images/content/vis1.jpg); }
.area_subVisual.common::before{ background-image:url(/images/content/vis1.jpg); }
.area_subVisual.care::before{ background-image:url(/images/content/vis1.jpg); }
.area_subVisual .inr{ display: flex; align-items: center; justify-content: center; padding-top: 3.2%; }
.area_subVisual h2{ font-size: var(--fs52); }
@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: #0d4151; 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: 50rem; font-size: 35rem; }

/* about */
.sub_about__p{ line-height: 1.8; }
.sub_about__p.p1{ text-align: center; }
.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: #088cb4; }
.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: 129rem; 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; }
}


/* 서비스 유형별 비용 안내 */
.sub_service .desc{padding: 0 5rem 15rem 0; font-size:15rem; text-align:right; color:#888;}
.sub_service > table{margin-bottom:50rem;}
.sub_service > table tbody th{border-left: 1px solid #e5e5e5;}
.sub_service > table  tbody tr.even th{background-color: #f7f7f7;}
.sub_service > table  tbody tr{border-bottom: 1px solid #e5e5e5;}
.sub_service > table  tbody tr:nth-child(even) {background-color: #f7f7f7;}
.sub_service > table  tbody th,
.sub_service > table  tbody td{font-weight: unset; border-right: 1px solid #e5e5e5;}
.sub_service > table  th,
.sub_service > table  td {font-size: 16rem; line-height: 1.45; padding:15rem; position: relative; text-align: center;}
.sub_service > table  thead th {padding:20rem; font-weight: unset; font-size: 17rem; color: #fff; line-height: 1.25; text-transform: uppercase; background-color: #002933;}
.sub_service > table  tbody th:hover,
.sub_service > table  tbody td:hover {color: var(--primary); cursor:Default;}
.sub_service > table  tbody th:hover:before,
.sub_service > table  tbody td:hover:before {content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; pointer-events: none; border: 1px solid var(--primary);}
.sub_service > table  td:last-child{text-align: right;}

.service_desc_wrap{display:flex; border-top:1px dashed #e5e5e5;}
.service_desc{width:50%; padding-top:40rem;}
.service_desc .title{padding-bottom:12rem; padding-left:18rem; font-weight:700; color:#111;}
.service_desc .title .ex{display:inline-block; margin-right:6rem; margin-left:20rem; padding:0 6rem; line-height:1.45; vertical-align:middle; font-weight: 200; font-size:12rem; color:#fff; background-color:var(--primary); border-radius:2rem;}
.service_desc .title .desc{font-weight:400; font-size:17rem;}
.service_desc > ul > li{padding-bottom:10rem;}
.service_desc > ul > li::before{content:"·"; display:inline-block; padding:0 14rem 0 0;}
.service_desc > ul > li .tit{display:inline-block; font-weight:600;}
.service_desc > ul > li .tit::after{content:":"; display:inline-block; padding:0 10rem;}
.service_desc > ul > li .icon{display:inline-block; width:22rem; height:22rem; margin:0 6rem; text-align:center; vertical-align:middle; line-height:1.45; font-size:15rem; color:#555; border-radius:50%;; background-color:#e8e8e8;}
.service_desc.example > ul > li br{display:none;}
@media(max-width:1280px){
    .service_desc > ul > li{font-size:16rem;}
}
@media(max-width:768px){
    .service_desc_wrap{display:block;}
    .service_desc{width:100%;}
    .service_desc > ul > li{font-size:16rem;}
    .service_desc.example > ul > li br{display:block;}
    .service_desc.example > ul > li .tit::after{display:none;}
    .service_desc.example > ul > li .txt{padding-left:18rem;}
	.sub_title__kor {
		margin-top: 24rem;
		font-size: 28rem;
	  }
	  .vision_item .title {
		padding-top: 30rem;
		font-size: 26rem;
		line-height: 1.65;
		position: relative !important;
		top: 0% !important;
		transform: translateY(0) !important;
	  }
}


/* HP 프린트 케어팩 */
.sub_care > .desc{text-align:center; padding-bottom:70rem; font-size:22rem;}
.sub_care table{table-layout:fixed; width:100%; margin-bottom:70rem; border:1px solid #eaecf1;}
.sub_care table th,
.sub_care table td{padding:15rem 10rem; vertical-align:middle; text-align:center; font-weight:300; font-size:17rem; border:1px solid #eaecf1; color:#202020}
.sub_care table td.white{height:20rem; border-color:#fff;}
.sub_care table th{font-weight:500; }
.sub_care table thead th{color:#fff; background-color:#0d4151; border:0;}
.sub_care table .point{font-size:21rem; font-weight:600; color:#fff; background-color:#0d4151; border:0;}
.sub_care table .td_point{color:var(--primary); background-color:#fff; border-bottom:1px solid #eaecf1; border-left:1px solid #d97700; border-right:4px solid #d97700;}
.sub_care table .line_left{border-left:4px solid #d97700;}
.sub_care table td:nth-child(2){border-right:4px solid #d97700;}
.sub_care table tbody th,
.sub_care table td:nth-child(3){background:#f7f7f7;}
.sub_care table td.line_bottom{background-color:var(--primary); border-bottom:4px solid #d97700; color:#fff;}
.sub_care table td.line{background-color:var(--primary); border-top:4px solid #d97700; border-right:4px solid #d97700;}
.sub_care table .line{border-right:4px solid #d97700;}
.sub_care table .bg{background-color:var(--primary);}
.sub_care table .height td{height:15rem; padding:0;}
.sub_care table .icon_check{display:inline-block; width:19rem; height:17rem; background:url(../images/content/icon_check.png) no-repeat center center; background-size:cover;}
.sub_care table td:nth-child(3) .icon_check{background-image: url(../images/content/icon_check_point.png);}

.sub_care ul > li{position: relative; width: 100%; height:600rem; margin:0 auto 60rem auto;}
.sub_care ul > li > div{width:70%; position: relative; text-align:left; box-sizing:border-box;}
.sub_care ul > li > div.image{width:54%;}
.sub_care ul > li .text_wrap{position:absolute; bottom:0; left:38%; padding:50rem 0 0 50rem; background-color:#fff; z-index:1;}
.sub_care ul > li .text_item{padding-bottom:25rem;}
.sub_care ul > li .text_item p{display:block; color:#111;}
.sub_care ul > li .text_item p.tit{font-size:26rem; font-weight:600;}
.sub_care ul > li .text_item p.desc{display:inline-block; text-align:left; padding-bottom:10rem; font-size:18rem; color:#555;}
.sub_care ul > li .image img{position: relative; z-index: 1; max-width: 100%;}
.reward_item{padding-top:70rem; border-top:1px solid #ccc;;}
.reward_item .title{text-align:center; padding-bottom:60rem; font-size:35rem; font-weight:600; color:#111;}
.reward_item .title .desc{padding-top:10rem; font-weight:300; font-size:22rem; color:#555;}
.reward_item .content > ul{display:flex; gap:40rem;}
.reward_item .content > ul > li{width:50%; height:auto; margin:0; padding:0; border:1px solid #ccc; color:#111; cursor:default;}
.reward_item .content > ul > li:nth-child(2) .label{background-color:#d97700;}
.reward_item .content > ul .label{padding:25rem 50rem; text-align:center; font-size:26rem; font-weight:600; color:#fff; background-color:#0d4151;}
.reward_item .content > ul .content{padding:65rem 50rem;}

/* 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;}
}