@charset "utf-8";

.c-gradient {background: linear-gradient(to right, #1c1d57, #8284bd); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}

.intro .top {display: flex;align-items: flex-end;}
.intro .top > .img {width: 50%;}
.intro .txt {flex:1 1 auto; min-width:0; width:1%;}
.intro .txt .img,
.intro .top h2 {padding-left: 60px;}
.intro .top .box {padding:35px 60px; background-color: #f8f8f8;}
.intro .top h2 {margin: 15px 0 20px; font-size: var(--font-size-32); line-height: 1.2em; letter-spacing: -.03em; color: var(--color-primary);}
.intro .top p {margin-top: 25px; font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.5em; color: #454545;}
.intro .top p:first-child {margin-top: 0;}
.intro .cnt01 {margin: 55px 0 0px;}
.intro .cnt01 h3 {margin-bottom: 55px; font-size: var(--font-size-40); line-height: 1.2em; letter-spacing: -.03em; color: #242424; text-align: center;} 
.intro .cnt01 ul {display:flex; border: 1px solid #ddd;}
.intro .cnt01 li {border-left: 1px solid #ddd; width:25%; height: 280px;}
.intro .cnt01 li:first-child {border-left: none;}
.intro .cnt01 li .box {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;}
.intro .cnt01 li .box .tt {margin: 15px 0; font-size: var(--font-size-22); font-weight: 600; line-height: 1.2em; letter-spacing: -.03em; color: #242424;}
.intro .cnt01 li .box .tt2 {font-size: var(--font-size-17); line-height: 1.2em; letter-spacing: -.03em; color: #242424;}
.intro .cnt02 {padding: 0;}
.intro .group {display:flex; align-items:center; gap:35px; padding:0 clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); margin-bottom:clamp(40px, calc(100/ var(--inner) * 100vw ),100px);}
.intro .group:last-child {margin-bottom:0;}
.intro .group h3 {position:relative; width:210px; font-size:clamp(20px, calc(40/ var(--inner) * 100vw ),40px); line-height:1.2; font-weight:700; color:#242424;}
.intro .group h3:before {content:''; position:absolute; top:50%; right:0; width:clamp(25px, calc(50 / var(--inner) * 100vw), 55px); height:1px; border-bottom:1px dashed #ddd;}
.intro .group .inner {flex:1 1 auto; min-width:0; width:1%;}
.intro .gr1 .inner {padding:clamp(20px, calc(100/ var(--inner) * 100vw ),100px) 0; background:url('/images/sub/company-bg.png') no-repeat 50% 50%/contain; text-align:center;}
.intro .gr1 .inner p {font-size:clamp(16px, calc(28/ var(--inner) * 100vw ),28px); font-weight:600; line-height:1.2; color:#242424;}
.intro .gr2 .inner {padding:35px 15px; border:1px solid rgba(130,132,189,0.3); border-radius:100vh; text-align:center;}
.intro .gr2 .inner p {font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); line-height:1.5;}
.intro .gr3 {align-items:flex-start;}
.intro .gr3 .inner {padding-top:10px;}
.intro .gr3 .tt {margin-bottom:2em; font-size:var(--font-size-22); font-weight:500; line-height:1.2; color:#242424; text-align:center;}
.intro .gr3 .wrap {display:flex;}
.intro .gr3 .item {width:25%; padding:0 10px; text-align:center;}
.intro .gr3 .wrap .ico {margin-bottom:clamp(10px, calc(25 / var(--inner) * 100vw), 25px);}
.intro .gr3 .wrap .ico img {height: clamp(60px, calc( 100 / var(--inner) * 100vw ), 100px);}
.intro .gr3 .wrap p {line-height:1.6; color:#454545;}
.intro .gr3 .wrap p strong {display:block; margin-bottom:10px; font-size:var(--font-size-20); font-weight:600; color:#242424;}


.history {position: relative; width: 100%; }
.history:before {content: ''; position: absolute; left: 50%; top: 15px; width: 1px; height: calc(100% - 15px); border: 1px dashed #ddd; z-index: 0;}
.history .item {position: relative; width: 50%; box-sizing: border-box;}
.history .year {position: relative; font-size: var(--font-size-32); font-weight: 600; color: #242424; line-height: 1.2em; letter-spacing: -.03em;}
.history .year:before {content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height:20px; background-image: url('/images/sub/dot.png'); background-size: contain; background-repeat: no-repeat; z-index: 1;}
.history .year::after {content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height:1px; background-color: #ddd; z-index: 1;}
.history .desc p {position: relative; display: flex ; align-items: center;margin: 25px 0; padding-left: 15px; font-size:var(--font-size-16); letter-spacing: -.03em; line-height: 1.2em; color: #454545;}
.history .desc p:before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height:5px; background: var(--color-primary); border-radius: 50%; z-index: 1;}
.history .desc p span {font-weight: 500; color: #242424; width: 45px;}
.history .group {display: flex;}
.history .group .bin {width: 50%;}
.history .group:nth-child(even) {flex-direction: row-reverse;}
.history .group:nth-child(even) .item {text-align: right; }
.history .group:nth-child(even) .year,
.history .group:nth-child(even) .desc,
.history .group:nth-child(even) .img {padding-right: 90px;}
.history .group:nth-child(even) .year:before {left: auto; right: -10px;}
.history .group:nth-child(even) .year::after {left: auto; right: 30px;}
.history .group:nth-child(even) .desc p {padding-left: 0; padding-right: 15px; flex-direction: row-reverse;}
.history .group:nth-child(even) .desc p:before {left: auto; right: 0;}
.history .group:nth-child(odd) .year,
.history .group:nth-child(odd) .desc,
.history .group:nth-child(odd) .img {padding-left: 90px;}
.history .group:nth-child(odd) .year:before {left: -10px; right: auto;}
.history .group:nth-child(odd) .year::after {left: 30px; right: auto;}

/* 멤버 */
.member-list {padding:0 clamp(20px, calc( 45 / var(--inner) * 100vw ), 45px);}
.member-list .items {display:flex; flex-wrap:wrap; margin:calc(0px - 30px) calc(0px - 15px);}
.member-list .item {width:33.333%; padding:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px) clamp(5px, calc( 15 / var(--inner) * 100vw ), 15px);}
.member-list .inner {display:block; position:relative; border-radius:1em; overflow:hidden;}
.member-list .inner:before {content:''; position:absolute; z-index:1; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6) url('/images/sub/view.png') no-repeat 50% 50%; opacity:0; transition:0.2s all ease;}
.member-list .tit {position:absolute; left:0; bottom:0; width:100%; padding:1em 10px; background:rgba(0,0,0,0.6); font-size:var(--font-size-22); font-weight:700; line-height:1.2; color:#fff; text-align:center; opacity:1; transition:0.2s all ease;}
.member-list .thumb {position:relative; padding-bottom:120%; overflow:hidden;}
.member-list .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}

.member-list .inner:hover:before {opacity:1;}
.member-list .inner:hover .tit {opacity:0;}

.member-detail {display:flex; align-items:center; gap:clamp(45px, calc( 70 / var(--inner) * 100vw ), 70px); margin-bottom:clamp(40px, calc(100/ var(--inner) * 100vw ),100px); background:#fff; border-radius:1em; box-shadow:8px 8px 16px rgba(0,0,0,0.08); overflow:hidden;}
.member-detail .image {width:50%; max-width:500px;}
.member-detail .img {position:relative; padding-bottom:120%; overflow:hidden;}
.member-detail .img img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.member-detail .info {flex:1 1 auto; min-width:0; width:1%; padding:20px 0; max-width:490px;}
.member-detail .info .cate {margin-bottom:0.5em; font-weight:500; line-height:1; color:#0a3a86;}
.member-detail .info .name {margin-bottom:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-size:clamp(20px, calc(54/ var(--inner) * 100vw ),54px); font-weight:700; color:#242424; line-height:1;}
.member-detail .info .position {display:inline-block; margin-left:0.5em; font-size:clamp(14px, calc(24/ var(--inner) * 100vw ),24px); font-weight:600; color:#adadad;}
.member-detail .group {border-top:2px solid #242424;}
.member-detail .group>div {padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) 0; border-bottom:1px dashed #ddd;}
.member-detail .group>div:last-child {border-bottom:0;}
.member-detail .email a {position:relative; padding-left:2em; font-size:var(--font-size-18); line-height:1; color:#454545;}
.member-detail .email a:before {content:''; position:absolute; left:1px; top:0.2em; width:1.17em; height:0.89em; background:url('/images/sub/icon-mail.png') no-repeat 50% 50%/contain;}
.member-detail .email strong {display:inline-block; margin-right:18px; font-size:1.2em; font-weight:500; color:#242424;}
.member-detail .txt {min-height:175px;}

.member-detail-info {border-top:2px solid #242424;}
.member-detail-info .col {display:flex; padding:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px) clamp(45px, calc( 70 / var(--inner) * 100vw ), 70px); border-bottom:1px solid #ddd;}
.member-detail-info .col .tit {width:150px; font-size:clamp(18px, calc(32/ var(--inner) * 100vw ),32px); font-weight:700; line-height:1.2; color:#242424;}
.member-detail-info .col .inner {flex:1 1 auto; min-width:0; width:1%;}
.member-detail-info .col p {display:flex; position:relative; padding-left:1em; margin-bottom:10px; font-size:var(--font-size-18); font-weight:400;}
.member-detail-info .col p:last-child {margin-bottom:0;}
.member-detail-info .col p:before {content:''; position:absolute; left:0; top:0.6em; width:0.3em; height:0.3em; background:#0a3a86; border-radius:100%;}
.member-detail-info .col .year {width:194px; font-weight:600; color:#242424;}
.member-detail-info .col .txt {flex:1 1 auto; min-width:0; width:1%;}

.back-list a {display:inline-block; position:relative; padding:1.1em;min-width:220px; border-radius:8px; background:var(--color-primary); font-size:var(--font-size-18); font-weight:500; line-height:1; color:#fff;}
.back-list a:before {content:''; position:absolute; right:1em; top:1.4em; width:1.22em; height:0.33em; background:url('/images/sub/btn-dot.png') no-repeat 50% 50%/contain;}

.sub-tab ul{display: flex; justify-content: center; gap:20px; margin-bottom: 60px;}
.sub-tab a {display: inline-flex; align-items: center; justify-content: center; width: 130px; height: 44px; font-size:var(--font-size-18); font-weight:500; color:var(--color-primary); border-radius: 22px; border: 1px solid var(--color-primary);}
.sub-tab .on a {background:var(--color-primary); color:#fff;}

.promotion ul {display:flex; flex-wrap:wrap; gap:60px; justify-content: center; text-align: center;}
.promotion ul p {margin-top:20px; font-size:var(--font-size-20); font-weight:500; line-height:1; }

.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap .cont,
.root_daum_roughmap .border1,
.root_daum_roughmap .border2,
.root_daum_roughmap .border3,
.root_daum_roughmap .border4 {display: none;}
.directions ul {display: flex; margin-bottom: 60px;}
.directions li {width: 33.333%; text-align: center; padding: 0 15px; border-left: 1px solid #ddd;}
.directions li:first-child {border-left: 0;}
.directions .tt {margin: 15px 0 10px; font-size:var(--font-size-18); font-weight:600; letter-spacing: -.03em; line-height:1.2em; color:#242424;}

.cnt {padding: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px) 0;}
.cnt:first-child {padding-top: 0;}
.cnt.bg {background-color: #f8f8f8; }

.area .top-img {margin-bottom: 60px; border-radius: 40px; border: 1px solid #ddd; padding: 35px clamp(50px, calc( 135 / var(--inner) * 100vw ), 135px);}
.area01 .txt {text-align: center;}
.area01 .txt h2 {position: relative; padding-bottom: 40px; margin-bottom: 20px; font-size: var(--font-size-32); letter-spacing: -.03em; line-height: 1.2em; color: var(--color-primary);}
.area01 .txt h2:before {content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) rotate(45deg); width: 16px; height: 16px; background-color: rgba(28,29,87,0.2);}
.area01 .txt p {margin-top: 20px; font-size: var(--font-size-18); letter-spacing: -.03em; line-height: 1.56em;} 
.area01 .cnt02 h2 {margin-bottom: 60px; font-size: var(--font-size-40); letter-spacing: -.03em; line-height: 1.2em; color: #242424; text-align: center;}
.area01 .cnt02 .list {position: relative; display: flex; justify-content: center; flex-wrap:wrap; gap:clamp(15px, calc( 57 / var(--inner) * 100vw ), 57px) clamp(15px, calc( 95 / var(--inner) * 100vw ), 95px);}
.area01 .cnt02 .item {position: relative; width:calc(50% - clamp(7.5px, calc( 47.5 / var(--inner) * 100vw ), 47.5px)); /* 2열 배치, gap 고려 */ box-sizing: border-box;}
.area01 .cnt02 .box {position: relative;height:100%; text-align: center;}
.area01 .cnt02 .list p {display: inline-flex; align-items: center; justify-content: center; width:100%; max-width:360px; padding:6px 10px; font-weight: 700; font-size: var(--font-size-20); margin-bottom: 30px;  color: #fff; background-color: var(--color-primary); border-radius: 30px;}
.area01 .logo-img {position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; pointer-events: none;}

.area02 .cnt01 p {margin-bottom: 100px; font-size: var(--font-size-24); font-weight: 600; letter-spacing: -.03em; line-height: 1.67em; color: #242424; text-align: center;}
.area02 .cnt01 .img-box {display: flex; align-items: center; justify-content: center; gap: 90px;}
.area02 .cnt01 ul li {position: relative; margin-top: 20px; padding-left: 20px; font-size: var(--font-size-20); letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.area02 .cnt01 ul li span {font-weight: 600; color: var(--color-primary);}
.area02 .cnt01 ul li:before {content: ''; position: absolute; left: 0; top: 7px;  width: 5px; height: 5px; background-color: var(--color-primary); border-radius: 50%;}
.area02 .cnt01 ul li:first-child {margin-top: 0;}
.area02 .cnt02 ul {display: flex; gap: 30px; justify-content: center; text-align: center; margin-bottom:60px;}
/* .area02 .cnt02 ul li {width: 33.333%;} */
.area02 .cnt02 ul li .img {margin-bottom: 15px;}
.area02 .cnt02 ul li p {font-size: var(--font-size-20); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.area02 .tbl table {width: 100%;border-collapse: collapse; border-spacing: 0px; text-align: center;}
.area02 .tbl th {height: 60px; font-size: var(--font-size-20); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #fff; background-color: var(--color-primary); border: 1px solid #ddd; border-top: 0;}
.area02 .tbl td {height: 60px; font-size: var(--font-size-18); letter-spacing: -.03em; line-height: 1.2em; color: #242424; border: 1px solid #ddd;}
.area02 .tbl td:first-child,
.area02 .tbl th:first-child {border-left: 0;}
.area02 .tbl td:last-child,
.area02 .tbl th:last-child {border-right: 0;}
.area02 .tbl tr:nth-child(even) td{background-color: rgba(28,29,87,0.05);}

.rnd .cnt01,
.rnd .cnt02 {display: flex; align-items: center;}
.rnd .cnt02 {flex-direction: row-reverse;}
.rnd .cnt .img-box {display: flex; margin: 0 -15px;}
.rnd .cnt .img {padding: 0 15px;}
.rnd .cnt .txt {margin-left: 70px;}
.rnd .cnt02 .txt {margin-right: 70px; margin-left: 0 !important;}
.rnd .cnt h2 {margin-bottom: 20px; padding-bottom: 20px; font-size: var(--font-size-24); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424; border-bottom: 1px solid #ddd;}
.rnd .cnt p {font-size: var(--font-size-18); letter-spacing: -.03em; line-height: 1.56em;}

.management .cnt01 {text-align: center;}
.management .cnt01 .contain > .img img {height: clamp(120px, calc( 220 / var(--inner) * 100vw ), 220px);}
.management .cnt01 .txt {position: relative; padding-top: 45px; margin-top: 30px; font-size: var(--font-size-22); font-weight: 500; letter-spacing: -.03em; line-height: 1.64em; color: #242424;}
.management .cnt01 .txt::after {content: ''; position: absolute; left: 50%; top:0; transform: translateX(-50%) rotate(45deg); width: 12px; height:12px; background-color: var(--color-primary);}
.management .cnt01 .txt span {font-weight: 700; color: var(--color-primary); position: relative;}
.management .cnt01 .txt span::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height:14px; background-color:rgba(28,29,87,0.05);}
.management .cnt01 ul {display: flex; border: 1px solid #ddd; margin-top: 100px;}
.management .cnt01 li {width: 33.33%; border-right: 1px solid #ddd;}
.management .cnt01 li:last-child {border-right: 0;}
.management .cnt01 .box {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 50px 0;}
.management .cnt01 .t01 {margin:20px 0 5px; font-size: var(--font-size-22); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.management .cnt01 .t02 {font-size: var(--font-size-17); letter-spacing: -.03em; line-height: 1.53em;}
.management h3 {margin-bottom: 55px; font-size: var(--font-size-40); letter-spacing: -.03em; line-height: 1.2em; color: #242424; text-align: center;}

.ethics .cnt02 ul {max-width: 700px; margin: 0 auto;}
.ethics .cnt02 li {display: flex; align-items: center; padding: 40px 10px 40px 45px; border-bottom: 1px dashed #ddd;}
.ethics .cnt02 li:first-child {padding-top: 0;}
.ethics .cnt02 li .num {margin-right: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-22); font-weight: 700; letter-spacing: -.03em; width: 64px; height: 64px; border-radius: 100%; background-color: var(--color-primary); color: #fff;}
.ethics .cnt02 li p {font-size: var(--font-size-18); letter-spacing: -.03em; line-height: 1.67em; color: #242424;}
.ethics .cnt03 ul {display: flex; flex-wrap:wrap; justify-content: center; text-align: center;}
.ethics .cnt03 li {width: 20%;}
.ethics .cnt03 li img {height: clamp(100px, calc( 160 / var(--inner) * 100vw ), 160px);}
.ethics .cnt03 .tt {margin:25px 0 5px; font-size: var(--font-size-20); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.ethics .cnt03 .tt2 {font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.5em; color: #686868;}

.environment .pd-b0 {padding-bottom: 0;}
.environment .items {margin: -40px 0;}
.environment .item {display: flex; align-items: center; padding: 40px 0;}
.environment .item .img {flex:1 1 auto; min-width:0; width:1%;}
.environment .item .t-box {width: 50%;}
.environment .item .t01 {margin-bottom:20px; font-size: var(--font-size-32); font-weight: 700; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.environment .item .t02 {font-size: var(--font-size-18); letter-spacing: -.03em; line-height: 1.56em;}
.environment .item:nth-child(odd) .t-box {padding-left: 80px;}
.environment .item:nth-child(even) {flex-direction: row-reverse;}
.environment .item:nth-child(even) .t-box {padding-right: 30px;}