@charset "utf-8";

.vision .top .contain {display: flex;justify-content: space-between;align-items: center;}
.vision .top .tit h2 {position: relative; font-size: var(--font-size-60); font-weight: 800; letter-spacing: -.03em; line-height: 1.2em; color: #000; width: fit-content; padding-right: 30px;}
.vision .top .tit h2 span {color: var(--color-primary);}
/* .vision .top .tit h2::after {content: '';position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; border-radius: 100%; background-color: var(--color-primary);} */
.vision .top .tit p {margin: 25px 0 60px 0; font-size: var(--font-size-22); font-weight: 500; letter-spacing: -.03em; line-height: 1.64em;}
.vision .top .tit {color: #242424;}
.vision .top .version {display: flex; margin: 0 25px;}
.vision .top .version .ver {margin: 0 -25px;}
.vision .top .version .ver .box {display: inline-flex;align-items: center; justify-content: center; flex-direction: column; width: clamp(200px, calc( 300 / var(--inner) * 100vw ), 300px); height: clamp(200px, calc( 300 / var(--inner) * 100vw ), 300px); border-radius: 100%; text-align: center;}
.vision .top .version .ver .box h3 {margin-bottom: 15px; font-size: var(--font-size-28); letter-spacing: -.03em; line-height: 1.2em; color: #fff;}
.vision .top .version .ver .box p {font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.5em; color: #fff;}
.vision .top .version .ver01 .box{background-color: rgba(0,172,237,.9);}
.vision .top .version .ver02 .box{background-color: rgba(0,49,88,.9);}
.vision .top .version .ver03 .box{background-color: rgba(0,15,46,.9);}
.vision .top .img {text-align: center; margin-top: -67px;}
.vision .ctr {background-image: url(/images/sub/biz-bg.jpg); width: 100%; height: 100%; padding: 390px 0 100px; margin-top: -300px; background-position: 50%; background-repeat: no-repeat; background-size: cover;}
.vision .ctr p {font-size: var(--font-size-22); font-weight: 500; letter-spacing: -.03em; line-height: 1.64em; color: #fff;}
.vision .ctr p + p {margin: 25px 0 70px;}
.vision .btm {position: relative; padding: 100px 0; background-image: url(/images/sub/biz-bg2.jpg); width: 100%; height: 100%;  background-position: 50%; background-repeat: no-repeat; background-size: cover;}
.vision .btm::before {content: ''; position: absolute; right: 0; bottom: -21px; width: 1332px; height: 734px; background-image: url(/images/sub/biz-img4.png); background-position: 50%; background-repeat: no-repeat; background-size: contain;}
.vision .btm .tit {margin-bottom: 60px;}
.vision .btm .tit h2 {position: relative; font-size: var(--font-size-60); letter-spacing: -.03em; line-height:1.2em; color: #fff; width: fit-content; padding-right: 30px;}
.vision .btm .tit h2 span {font-size: var(--font-size-40);}
.vision .btm .tit h2 strong {color: var(--color-primary);}
/* .vision .btm .tit h2::after {content: '';position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; border-radius: 100%; background-color: var(--color-primary);} */
.vision .btm .lsit {margin: -15px 0;}
.vision .btm .lsit .year {padding: 15px 0;}
.vision .btm .year .box {position: relative; display: inline-flex; justify-content: center; flex-direction: column; border-radius: 40px; padding: 0 60px; min-width:340px; height: 80px; background-color: rgba(255,255,255,.1);}
.vision .btm .lsit .year .box::after {content: ''; position: absolute; left: 50%; transform: translateX(-50%);bottom: -21px; width: 21px; height: 12px; background-image: url(/images/sub/biz-arrow.png); background-repeat: no-repeat; background-size: contain;}
.vision .btm .lsit .year:last-child .box::after {display: none;}
.vision .btm .year .box .tt {margin-bottom: 3px; font-size: var(--font-size-16); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: var(--color-primary);}
.vision .btm .year .box .tt2 {font-size: var(--font-size-20); font-weight: 700; letter-spacing: -.03em; line-height: 1.2em; color: #fff;}

.introduction .doc-tit h2{font-size: var(--font-size-60); letter-spacing: -.03em; line-height:1.23em; color: #242424; font-weight: 600;}
.introduction .doc-tit h2 span {font-weight: 800; color: var(--color-primary);}
.introduction .doc-tit .txt {margin: 25px 0 50px; font-size: var(--font-size-18); letter-spacing: -.03em; line-height:1.72em; color: #242424; font-weight: 500;}
.introduction .items {display: flex; margin: 0 -15px;}
.introduction .items .item {width: 33.33%; padding: 0 15px;}
.introduction .items .box {position: relative; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 20px; width: 100%; height: 446px; background-position: 50%; background-repeat: no-repeat; background-size: cover; text-align: center;}
.introduction .items .box h3 {position: relative; z-index: 1;font-size:var(--font-size-40); letter-spacing: -.03em; line-height:1.2em; color: #fff; font-weight: 800;}
.introduction .items .box p {position: relative; z-index: 1;margin-top: 25px; font-size:var(--font-size-18); letter-spacing: -.03em; line-height:1.67em; color: #fff; font-weight: 500;}
.introduction .items .box01 {background-image: url(/images/sub/biz-img5.jpg);}
.introduction .items .box02 {background-image: url(/images/sub/biz-img6.jpg);}
.introduction .items .box03 {background-image: url(/images/sub/biz-img7.jpg);}
.introduction .items .box::after {content: ''; position: absolute; width: calc(100% - 20px); height: calc(100% - 20px); left: 10px; top: 10px; border: 1px solid #fff; background-color: rgba(0,0,0,.1); border-radius: 20px;}
.introduction .more {position: relative; z-index: 1;display: flex; align-items: center; margin-top: 75px; font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.67em;  color:#fff;}
.introduction .more .img {margin-left: 30px; background-image: url(/images/main/more.png); width: 80px; height: 60px; background-repeat: no-repeat; background-size: contain;}
.introduction .box:hover .more .img {background-image: url(/images/main/more-on.png);}

.sub-tab {margin-bottom:120px;}
.sub-tab .location-tab {display: flex; width: 100%; height: 50px;}
.sub-tab .location-tab li {position: relative; display: flex; padding: 0 10px; flex: 1; align-items: center; justify-content: center; text-align: center;font-size:var(--font-size-18); font-weight:600; letter-spacing:-0.03em; line-height:1.44em; color:#898989; background-color:#fafafa; border-top:1px solid #ddd;  border-bottom:1px solid var(--color-primary);}
.sub-tab .location-tab li:not(:first-child):before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 30px; background-color: #ddd;}
.sub-tab .location-tab li:nth-child(1) {border-radius: 20px 0 0 0; border-left:1px solid #ddd;}
.sub-tab .location-tab li:nth-child(3) {border-radius:0  20px 0 0; border-right:1px solid #ddd;}
.sub-tab .location-tab li.active {border-radius:20px 20px 0 0; border:1px solid var(--color-primary); border-bottom:none; background-color:#fff; color:var(--color-primary);}
.sub-tab .location-tab li.active::before {display: none;}
.sub-tab .location-tab li.active + li::before {display: none;}

.introduction-cnt .tit {position: relative; padding-bottom: 120px; text-align: center;}
.introduction-cnt .tit::before {content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); width: 1px; height: 120px; background-color: var(--color-primary);}
.introduction-cnt .tit h2 {font-size: var(--font-size-50); font-weight: 800; letter-spacing: -.03em; line-height: 1.2em; color: #000;}
.introduction-cnt .tit .tt {position: relative; width: fit-content; margin: 45px auto 25px; padding: 0 35px; font-size: var(--font-size-28); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.introduction-cnt .tit .tt::before {content: ''; position: absolute; top: 0; left: 0; background-image: url(/images/sub/biz-ico.png); width: 22px; height: 20px; background-repeat: no-repeat; background-size: contain;}
.introduction-cnt .tit .tt::after {content: ''; position: absolute; top: 0; right: 0; background-image: url(/images/sub/biz-ico2.png); width: 22px; height: 20px; background-repeat: no-repeat; background-size: contain;}
.introduction-cnt .tit .tt2 {font-size: var(--font-size-18); letter-spacing: -.03em; line-height: 1.75em;}
.introduction-cnt .doc-tit h3 {margin: 90px 0 37px; position: relative; font-size: var(--font-size-40); letter-spacing: -.03em; line-height: 0.8em; color: #242424; width: fit-content; padding-right: 30px;}
.introduction-cnt .doc-tit h3 span {color: var(--color-primary);}
.introduction-cnt .doc-tit h3::after {content: '';position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; border-radius: 100%; background-color: var(--color-primary);}
.introduction-cnt .more {position: relative; z-index: 1;display: flex; justify-content: center; align-items: center; margin-top:100px; font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.67em;  color:#242424;}
.introduction-cnt .more .img {margin-left: 30px; background-image: url(/images/sub/more.png); width: 80px; height: 60px; background-repeat: no-repeat; background-size: contain;}
.introduction-cnt .more:hover .img {background-image: url(/images/sub/more-on.png);}
.introduction-cnt .aam {position: relative; background-image: url(/images/sub/biz-img13.png); width: 100%; height: 800px; background-position: 50%; background-repeat: no-repeat; background-size: cover; border-radius: 30px;}
.introduction-cnt .major {position: absolute; left: 100px; top: 100px; padding: 60px; background-color: rgba(0, 0, 0, .6); border-radius: 30px; min-width: 540px; height: 600px; display: flex; flex-direction: column; justify-content: center;}
.introduction-cnt .major h4 {font-size: var(--font-size-60); letter-spacing: -.03em; line-height: 1.2em; color: #fff;}
.introduction-cnt .major ul {margin-top: 55px;}
.introduction-cnt .major ul li {display: flex; align-items: center; padding: 16px 20px; font-size: var(--font-size-18); font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; color: #fff; border-bottom: 1px solid rgba(255,255,255,.4);}
.introduction-cnt .major ul li:first-child {border-top: 1px solid #fff;}
.introduction-cnt .major ul li img {margin-right: 13px;}


.greetings .contain {display:flex;}
.greetings .col-l {width:46.5%;}
.greetings .col-l .img {margin-bottom:30px;}
.greetings .col-l .img img {border-radius: 100px 0 100px 0;}
.greetings .col-r {flex:1;}
.greetings .col-r .top {margin-bottom:35px;}
.greetings .col-r .top span {font-size:var(--font-size-16); line-height:1.2em; font-weight:600; color:var(--color-primary); letter-spacing:-.03em;}
.greetings .col-r .top .tt {margin: 10px 0 40px; font-size:var(--font-size-40); line-height:1.4em; font-weight:600; color:#242424; letter-spacing:-.03em;}
.greetings .col-r .top .tt strong {font-weight: 800;}
.greetings .col-r .top .tt2 {font-size:var(--font-size-24); line-height:1.4em; font-weight:600; color:#242424; letter-spacing:-.03em;}
.greetings .col-r .mid p {font-size: var(--font-size-18); margin-bottom:25px; line-height:1.67em; letter-spacing: -.03em;}
.greetings .col-r .mid p:last-child {margin-bottom:0;}
.greetings .col-r .bot {margin-top:60px;}
.greetings .col-r .bot p {font-size:var(--font-size-20); color:#242424; font-weight:500; letter-spacing:-.03em;}
.greetings .col-r .bot p span {margin-left: 10px; font-size: var(--font-size-24); font-weight: 600;}
.greetings .col-r .bot p img {margin:-15px 0 0 35px; vertical-align:middle;}
.book {margin-top: 150px; background-image: url(/images/sub/biz-bg4.jpg); width: 100%; height: 812px; background-position: 50%; background-repeat: no-repeat; background-size: cover;}
@font-face {
    font-family: 'Paperlogy-9Black';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy-6SemiBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy-4Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
.book .contain {display: flex; align-items: center; height: 100%; justify-content: space-between;}
.book .txt-wrap h3 {font-family: 'Paperlogy-9Black'; font-size: var(--font-size-60); letter-spacing: -.03em; line-height: 1.2em; color: #f7d307;}
.book .txt-wrap p {margin: 30px 0 20px; font-size: var(--font-size-30); font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; color: #fff;}
.book .txt-wrap p span {font-weight: 800;}
.book li {display: flex ; align-items: center; margin-bottom: 20px; font-family: 'Paperlogy-4Regular'; font-size: var(--font-size-20); font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; color: #fff;}
.book li span {font-family: 'Paperlogy-6SemiBold'; font-weight: 600;}
.book li:last-child {margin-bottom: 0;}
.book li img {margin-right: 10px;}
.book .img img {margin-right: 100px;}
.book .more {position: relative; z-index: 1;display: flex; align-items: center; margin-top:150px; font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.67em;  color:#242424;}
.book .more .img {margin-left: 30px; background-image: url(/images/sub/more.png); width: 80px; height: 60px; background-repeat: no-repeat; background-size: contain;}
.book .more:hover .img {background-image: url(/images/sub/more-on.png);}

@media (max-width: 1024px) {
	.greetings .contain {gap:0 50px;}
	.greetings .col-r .top {margin-bottom:20px;}
	.greetings .col-r .mid p {margin-bottom:15px; line-height:1.7em;}
}

@media (max-width: 900px) {	
	.greetings .contain {display:block;}
	.greetings .col-l {width:100%; margin-bottom:30px;}
	.greetings .col-l .logo img {height:80px;}
	.greeting-txt {letter-spacing:1.3em;}
	.greeting .col-r .bot p img {height:35px; margin-left:20px;}
}

@media (max-width: 640px) {
	.greetings .col-l .img {margin-bottom:20px;}
	.greetings .col-r .bot {margin-top:30px;}
	.greetings .col-r .bot p img {height:34px; margin:-10px 0 0 15px;}
}

.root_daum_roughmap {width: 100% !important; border-radius: 30px;}
.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 {display: flex; align-items: flex-end; justify-content: space-between;}
.directions .address-info .comp {margin-top: 50px; font-size: var(--font-size-16); font-weight: 500; line-height: 1.2em; color: var(--color-primary);}
.directions .address-info .box {margin: 10px 0 20px; display: flex; align-items: center;}
.directions .address-info .addr {font-size: var(--font-size-20); font-weight: 500; line-height: 1.2em; color:#242424;}
.directions .address-info .etc {margin-left: 10px; font-size: var(--font-size-16); font-weight: 500; line-height: 1.2em; color:#ababab;}
.directions .address-info .etc span + span {position: relative; padding-left: 10px; margin-left: 10px;}
.directions .address-info .etc span + span::before {content: ''; position: absolute; left: 0;  top: 0; width: 1px; height: 100%; background-color: #ddd;}
.directions .contact-info dl {display: flex;}
.directions .contact-info dt {font-size: var(--font-size-16); line-height: 1.2em; line-height: 1.2em; color: #242424;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:#ababab;}
.directions .contact-info dd {margin-left: 20px; font-size: var(--font-size-16); line-height: 1.2em; line-height: 1.2em;}
.directions .btn a {display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-16); letter-spacing: -.03em; line-height: 1.2em; font-weight: 600; color: #242424; width: 200px; height: 60px; background-color: #fff; border: 1px solid #242424; border-radius: 30px;}
.directions .btn span {margin-left: 10px;}


[lang=en] .vision .btm::before {background-image: url(/images/sub/en-biz-img4.png);}