@charset "utf-8";

.sub-tab {margin-bottom:var(--space-80);}
.sub-tab ul {display:flex; justify-content:center;}
.sub-tab ul li a {background:#F4F5F7; display:flex; align-items:center; justify-content:center; text-align:center; height:clamp(40px, calc(54 / var(--inner) * 100vw), 54px); padding:0 var(--space-40); font-size:var(--font-size-20); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:#999;}
.sub-tab ul li.active a {background:var(--color-primary); color:#fff;}

.overview {padding-bottom:var(--space-80);}
.overview .contain {display:flex; align-items:center; gap:0 var(--space-100);}
.overview .image {width:44.444%;}
.overview .content {flex:1;}
.overview .head {margin-bottom:var(--space-40); font-size:var(--font-size-28); font-weight:600; color:#222; letter-spacing:-.03em;}
.overview .head span {color:var(--color-primary);}
.overview .txt {margin-bottom:var(--space-40);  font-size:var(--font-size-16); line-height:1.875em; color:#484848; letter-spacing:-.03em;}

.competency {padding:var(--space-100) 0 var(--space-120); background:url('/images/sub/competency-bg.jpg') center center / cover no-repeat;}
.competency h2 {margin-bottom:var(--space-70); font-size:var(--font-size-40); font-weight:700; line-height:1.4em; letter-spacing:-.03em; color:#fff;}
.competency .items {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-24);}
.competency .item {background-color:rgba(255,255,255,0.08); background-repeat:no-repeat; background-position:right var(--space-35) bottom var(--space-48); gap:var(--space-40); min-height:367px; padding:var(--space-48); border:1px solid rgba(255,255,255,0.24); backdrop-filter:blur(4px);}
.competency .item h3 {margin-bottom:var(--space-30); font-size:var(--font-size-28); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:#fff;}
.competency .item1 {background-image:url('/images/sub/competency-ico1.png');}
.competency .item2 {background-image:url('/images/sub/competency-ico2.png');}
.competency .item3 {background-image:url('/images/sub/competency-ico3.png');}
.competency .item4 {background-image:url('/images/sub/competency-ico4.png');}
.competency .list ul {display:flex; flex-direction:column; gap:var(--space-15);}
.competency .list li {position:relative; padding-left:var(--space-15); font-size:var(--font-size-16); line-height:1.5em; letter-spacing:-.03em; color:rgba(255,255,255,0.8);}
.competency .list li::before {content:""; position:absolute; left:0; top:.6em; border-radius:50%; width:3px; height:3px; background:rgba(255,255,255,0.85);}

.history {position:relative; margin-top:var(--space-80);}
.history::before {content:""; position:absolute; left:clamp(140px, calc(270 / var(--inner) * 100vw), 270px); top:var(--space-20); bottom:var(--space-40); width:1px; background:#ddd;}
.history .group {position:relative; display:flex; align-items:flex-start; margin-bottom:var(--space-90);}
.history .group:last-child {margin-bottom:0;}
.history .year {position: relative; display:flex; justify-content:space-between; align-items:center; width:clamp(140px, calc(270 / var(--inner) * 100vw), 270px); font-size:var(--font-size-48); font-weight:700; line-height:1em; letter-spacing:-.03em; color:var(--color-primary);}
.history .year .dot-wrap {position: absolute; right:0; margin-right: -24px;}
.history .year .dot {display: block; position: relative; width:48px; height:48px; border-radius:50%; background:#F4F5F7;}
.history .year .dot:before {z-index: 2; content:''; position: absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:16px; height:16px; border-radius:50%; background:var(--color-primary);}
.history .year .dot:after {content:''; position: absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:32px; height:32px; border-radius:50%; background:#DEE1E6;}
.history .group:first-child .year .dot {background: #fff0f0;}
.history .group:first-child .year .dot:after {background: #ffc4c4;}
.history .group:first-child .year .dot:before {background: #ff0000;}
.history .list {padding-top:var(--space-10); flex:1; padding-left:var(--space-150);}
.history .list ul {display:flex; flex-direction:column; gap:var(--space-25);}
.history .list li {position:relative; padding-left:var(--space-15); font-size:var(--font-size-18); line-height:1.5em; letter-spacing:-.03em; color:#484848;}
.history .list li::before {position:absolute; left:0; top:.6em; content:""; width:4px; height:4px; border-radius:50%; background:#484848;}

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

.directions {display:flex;}
.directions .map-area {width:55%;}
.directions .info-area {padding:0 var(--space-45); display:flex; flex-direction:column; justify-content:center; flex:1; background:var(--color-primary);}
.directions .info-area .tit {font-size:var(--font-size-28); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:#fff;}
.directions .info-area .tit::after {content:""; display:block; width:48px; height:2px; margin:var(--space-20) 0; background:#fff;}
.directions .info-area .addr {margin-bottom:var(--space-35); font-size:var(--font-size-20); font-weight:500; line-height:1.5em; letter-spacing:-.03em; color:#fff;}
.directions .list ul {display:flex; flex-direction:column; gap:var(--space-24);}
.directions .list ul li {display:flex; align-items:center; gap:var(--space-16); font-size:var(--font-size-20); line-height:1.7em; letter-spacing:-.03em; color:#fff;}
.directions .list ul li img {height:clamp(33px, calc(50 / var(--inner) * 100vw), 50px);}