@charset "utf-8";

.sub-tab {margin-bottom:var(--space-30);}
.sub-tab ul {display:flex; justify-content:center;}
.sub-tab ul li {width:auto; display:flex; align-items:center;}
.sub-tab ul li:after {margin:0 var(--space-20); content:'•'; font-size:var(--font-size-18); font-weight:600; color:#ddd;}
.sub-tab ul li:last-child:after {display:none;}
.sub-tab ul li a {display:block; font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.4em; color:#ddd;}
.sub-tab ul li.active a {color:var(--color-secondary);}

.sub-tab-2 {display: flex; align-items: center; position: relative; margin:0 auto var(--space-40); background:#eee; max-width:1400px; padding:var(--space-5); border-radius:50px; overflow:hidden;}
.sub-tab-2 .swiper {width: calc(100% - 50px);}
.sub-tab-2 ul li {width:auto; flex:1;}
.sub-tab-2 ul li a {padding:0 12px; border-radius:50px; display:flex; align-items:center; justify-content:center; height:40px; color:#686868; font-size:var(--font-size-18); font-weight:600; letter-spacing:-.03em; line-height:1.33em;}
.sub-tab-2 ul li.active a {background:var(--color-success); color:#fff; }
.sub-tab-2 .swiper-button-next, 
.sub-tab-2 .swiper-button-prev {width: 12px; height: 24px; position: static; margin:0;}
.sub-tab-2 .swiper-button-prev {background-image: url(/images/sub/port-prev.png);}
.sub-tab-2 .swiper-button-next {background-image: url(/images/sub/port-next.png);}
.swiper-button-next:after,
.swiper-button-prev:after {display:none;}


.greeting {display:flex; align-items:center; gap:var(--space-95);}
.greeting .content {width:51.5%; display:flex; flex-direction:column; gap:var(--space-40);}
.greeting .content h3 {font-size:var(--font-size-30); color:#242424; line-height:1.4em; letter-spacing:-.03em;}
.greeting .content p {font-size:var(--font-size-18); color:#454545; line-height:1.67em; letter-spacing:-.03em;}
.greeting .image {flex:1;}

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

.directions .info-items {display:flex; border:1px solid rgba(221,221,221,.4);}
.directions .info-items .item {flex:1; padding:var(--space-30) var(--space-40); border-right:1px solid rgba(221,221,221,.4); overflow:hidden; background-repeat:no-repeat; background-position:right 0 bottom 0; background-size:clamp(70px, calc(160 / var(--inner) * 100vw), 160px) auto;}
.directions .info-items .item:last-child {border-right:0;}
.directions .info-items .item1 {background-image:url(/images/sub/directions-bg1.png);}
.directions .info-items .item2 {background-image:url(/images/sub/directions-bg2.png);}
.directions .info-items .item3 {background-image:url(/images/sub/directions-bg3.png);}
.directions .info-items .ico img {width:clamp(32px, calc(50 / var(--inner) * 100vw), 50px);}
.directions .info-items .tit {margin:var(--space-20) 0 var(--space-8); font-size:var(--font-size-22); font-weight:600; color:#242424; line-height:1.27em;}
.directions .info-items .txt {font-size:var(--font-size-16); color:#454545; line-height:1.5em;}

.process-text {margin-bottom:var(--space-80); font-size:var(--font-size-18); color:#454545; line-height:1.78em; text-align:center;}

.process-items {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-30);}
.process-items .item {background:#f8f8f8; border-radius:16px; text-align:center; padding:var(--space-40) var(--space-20);}
.process-items .icon { display:inline-block; position:relative; }
.process-items .icon .img { display:flex; align-items:center; justify-content:center; width:clamp(44px, calc(80 / var(--inner) * 100vw), 80px); height:clamp(44px, calc(80 / var(--inner) * 100vw), 80px); background:#fff; border-radius:50%; box-shadow:0 1px 3px 0 rgba(75, 67, 67, 0.1), 0 1px 2px 0 rgba(0,0,0,0.1); }
.process-items .icon .img img { width:clamp(20px, calc(32 / var(--inner) * 100vw), 32px); height:clamp(20px, calc(32 / var(--inner) * 100vw), 32px); aspect-ratio:1; object-fit:contain; }
.process-items .icon .num { position:absolute; right:calc(var(--space-8) * -1); top:calc(var(--space-8) * -1); display:flex; align-items:center; justify-content:center; width:clamp(20px, calc(32 / var(--inner) * 100vw), 32px); height:clamp(20px, calc(32 / var(--inner) * 100vw), 32px); font-size:var(--font-size-14); font-weight:600; color:#fff; background:var(--color-secondary); border-radius:50%; }
.process-items .tit {margin:var(--space-40) 0 var(--space-20); font-size:var(--font-size-20); font-weight:600; color:#242424; line-height:1.4em;;}
.process-items .txt {font-size:var(--font-size-16); color:#454545; line-height:1.5em;}