@charset "utf-8";

.sub-tab {margin-bottom:var(--space-50);}
.sub-tab ul {display:flex; border:1px solid #ddd; border-radius:var(--radius-10); overflow:hidden;}
.sub-tab ul li {flex:1; text-align:center;}
.sub-tab ul li a {font-weight:600; color:#333; letter-spacing:-.03em; line-height:1.4em; display:block; height:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px); display:flex; align-items:center; justify-content:center; text-align:center;}
.sub-tab ul li.active a {background:#2d2e4f; color:#fff; border-radius:var(--radius-10);}

.sub-tab-2 {margin-bottom:var(--space-40); border-top:2px solid #868686; border-bottom:2px solid #ddd;}
.sub-tab-2 ul li {flex:1; text-align:center;}
.sub-tab-2 ul li + li:before {content:""; position:absolute; top:50%; transform:translateY(-50%); left:0; width:1px; height:15px; background:#ddd;}
.sub-tab-2 ul li a {padding:0 8px; font-size:var(--font-size-15); font-weight:400; color:#999; letter-spacing:-.03em; line-height:1.4em; display:block; height:clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); display:flex; align-items:center; justify-content:center; text-align:center;}
.sub-tab-2 ul li.active a {color:var(--color-primary);}

.s-head {margin-bottom:var(--space-50); font-size:var(--font-size-30); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#333;}

.greeting-1 {margin-bottom:var(--space-150);}
.greeting-1 .contain {display:flex; align-items:center; gap:0 var(--space-140);}
.greeting-1 .image {width:40%;}
.greeting-1 .image .text {margin-bottom:var(--space-40);}
.greeting-1 .image .txt {margin-bottom:var(--space-20); font-size:var(--font-size-18); font-weight:500; letter-spacing:-.03em; line-height:1.4em; color:#999;}
.greeting-1 .image .tit {font-size:var(--font-size-24); font-weight:600; letter-spacing:-.03em; line-height:1.42em; color:#333;}
.greeting-1 .image .tit strong {font-weight:600; color:var(--color-primary);}
.greeting-1 .content {flex:1;}
.greeting-1 .content h3 {margin-bottom:var(--space-25); color:var(--color-primary); font-size:var(--font-size-20); font-weight:500; letter-spacing:-.03em; line-height:1.4em;}
.greeting-1 .content p {margin-bottom:var(--space-25); color:#454545; font-weight:400; letter-spacing:-.03em; line-height:1.63em;}
.greeting-1 .content p:last-child {margin-bottom:0;}
.greeting-1 .content .ceo img {vertical-align:middle; margin-left:var(--space-20);}

.greeting-2 {background:#f0f8e6; padding:var(--space-90) 0 var(--space-100);}
.greeting-2 .contain {display:grid; grid-template-columns:repeat(3,1fr); gap:0 var(--space-120);}
.greeting-2 .col {text-align:center;}
.greeting-2 .col p {margin-top:var(--space-45); font-size:var(--font-size-18); font-weight:400; letter-spacing:-.03em; color:#333;}

.history {background:url('/images/sub/history-bg.png') no-repeat center 34% / contain; position:relative;}
.history .group {display:flex; position:relative; padding-bottom:var(--space-40);} 
.history .group:first-child {padding-top:var(--space-20);}
.history .group:before {content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:#ccc;}
.history .group h2 {width:155px; text-align:center; position:relative; line-height:1.6em; font-size:var(--font-size-22); font-weight:700; z-index:2;}
.history .group h2:before {content:""; position:absolute; top:-.2em; width:48px; height:48px; background:url('/images/sub/history-dot.png') no-repeat center center;}
.history .group ul li {position:relative; color:#454545; line-height:2.25em; letter-spacing:-.03em;}
.history .group ul li:last-child {margin-bottom:0;}
.history .group ul li .month {font-size:var(--font-size-18); position:absolute; top:0; color:#333; font-weight:700;}
.history .group:nth-child(odd) {padding-left:50%;}
.history .group:nth-child(odd) h2:before {left:-24px;}
.history .group:nth-child(odd) ul li {padding-left:35px;}
.history .group:nth-child(odd) ul li .month {left:0;}
.history .group:nth-child(even) {flex-direction:row-reverse; padding-right:50%; text-align:right;}
.history .group:nth-child(even) h2:before {right:-24px; background-image:url('/images/sub/history-dot2.png');}
.history .group:nth-child(even) ul li {padding-right:35px;}
.history .group:nth-child(even) ul li .month {right:0;}

.concept {margin-bottom:var(--space-100);}
.concept .content {display:flex; border-bottom:1px solid #ddd; padding-bottom:var(--space-45);}
.concept .content .col {width:50%; padding:var(--space-40) 0 0 var(--space-40); position:relative;}
.concept .content .num {z-index:-1; position:absolute; top:0; left:0; font-size:var(--font-size-80); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#efefef; line-height:.8em;}
.concept .content h3 {margin-bottom:var(--space-20); font-size:var(--font-size-22); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#333;}
.concept .content p {font-size:var(--font-size-18); font-weight:400; letter-spacing:-.03em; color:#454545;}

.principle {overflow:hidden; padding-top:var(--space-55); position:relative;}
.principle:before {z-index:-2; content:""; position:absolute; top:0; left:0; right:25%; bottom:0; background:#f0f8e6; border-radius:0 var(--radius-100) 0 0;}
.principle .contain {display:flex; gap:0 var(--space-70);}
.principle .content {flex:1;}
.principle .content .title {margin-bottom:var(--space-50);}
.principle .content .title h2 {margin-bottom:var(--space-8); font-size:var(--font-size-40); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.principle .content .title h2 strong {font-weight:600; color:var(--color-primary);}
.principle .content .title p {font-size:var(--font-size-20); font-weight:400; letter-spacing:-.03em; line-height:1.5em; color:#454545;}
.principle .content .cnt {padding:var(--space-60) var(--space-70) var(--space-90) 0; position:relative;}
.principle .content .cnt:before {z-index:-1; content:""; position:absolute; top:0; left:-999em; right:0; bottom:0; background:#fff;}
.principle .content .desc dl:not(:last-child) {margin-bottom:var(--space-40);}
.principle .content .desc dl dt {margin-bottom:var(--space-12); padding:8px 0 0 14px; position:relative; font-size:var(--font-size-22); font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#333;}
.principle .content .desc dl dt:before {content:''; position:absolute; top:0; left:0; border-radius:100%; width:clamp(6px, calc( 10 / var(--inner) * 100vw ), 10px); height:clamp(6px, calc( 10 / var(--inner) * 100vw ), 10px); background:var(--color-primary);}
.principle .content .desc dl dd {font-size:var(--font-size-18); font-weight:400; letter-spacing:-.03em; line-height:1.56em;}
.principle .content .list {margin-bottom:var(--space-70);}
.principle .content .list ul {display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-25);}
.principle .content .list ul li {padding:3px 0 0 14px; position:relative; font-size:var(--font-size-18);}
.principle .content .list ul li:before {content:''; position:absolute; top:0; left:0; border-radius:100%; width:clamp(6px, calc( 10 / var(--inner) * 100vw ), 10px); height:clamp(6px, calc( 10 / var(--inner) * 100vw ), 10px); background:var(--color-primary);}
.principle .content .text {font-size:var(--font-size-20); font-weight:400; letter-spacing:-.03em; line-height:1.5em; color:#454545;}
.principle .content .text strong {font-weight:700; color:#454545;}
.principle .content .text strong span {color:var(--color-primary);}
.principle .image {width:35%;}
.principle.reverse:before {left:25%; right:0; border-radius:var(--radius-100) 0 0 0;}
.principle.reverse .contain {flex-direction:row-reverse;}
.principle.reverse .content .cnt {padding-left:var(--space-70);}
.principle.reverse .content .cnt:before {left:0; right:-999em;}
.principle.reverse .title {padding-left:var(--space-70);}

.effect {margin-top:var(--space-90); padding:var(--space-100) 0;}
.effect .content {display:flex;}
.effect .content .col {width:20%; text-align:center;}
.effect .content .col p {padding-top:var(--space-35); margin-top:var(--space-35); border-top:1px solid #ddd; font-size:var(--font-size-18); font-weight:400; letter-spacing:-.03em; color:#454545;}

.root_daum_roughmap_landing {width:100% !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 370 / var(--inner) * 100vw ), 370px) !important;}
.root_daum_roughmap .cont {display:none;}

.directions {display:flex;  justify-content:space-between; padding-top:var(--space-40); margin-top:var(--space-40); border-top:1px solid #ddd;}
.directions .col:nth-child(1) {width:55%;}
.directions dl {display:flex;}
.directions dl dt {margin-right:var(--space-20); font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.4em; color:#333;}
.directions dl dt img {vertical-align:middle; margin-right:var(--space-10);}
.directions dl dd {font-size:var(--font-size-18); font-weight:400; letter-spacing:-.03em; line-height:1.4em; color:#333;}