@charset "utf-8";
/* 서브공통 */
.sub-com-tit {padding-bottom: var(--space-36); border-bottom: 1px solid #eee; margin-bottom: var(--space-36); font-size: var(--font-size-40); font-weight: 700; line-height: 1.4em; letter-spacing: -0.02em; color: #2c2c2c;}
.sub-com-tit:before {content: ""; display: block; width: 16px; height: 16px; margin-bottom: 12px; background: url(../images/sub/tit.svg) no-repeat center / contain;}

/********************* 회사소개 *********************/
/* 인사말 */
.greeting-content {gap: var(--space-100);}
.greeting-image {flex-shrink: 0; width: clamp(400px, calc(720 / var(--inner) * 100vw), 720px); border: 1px solid #eee; border-radius: var(--radius-24); overflow: hidden;}
.greeting-title {margin-bottom: var(--space-36); font-size: var(--font-size-32); font-weight: 500; line-height: 1.43em; color: #2c2c2c; letter-spacing: -0.02em;}
.greeting-title strong {font-weight: 700;}
.greeting-desc {gap: var(--space-32); font-size: var(--font-size-18); color: #505050; line-height: 1.777em; letter-spacing: -0.02em;}
.greeting-des strong {font-weight: 600;}

/* 비전 및 경영이념 */
/* 비전 및 경영이념 공통 */
.vision .cont-tit {display: flex; flex-direction: column; gap: var(--space-16); align-items: center; text-align: center;}
.vision .cont-tit .label {margin: 0; font-size: var(--font-size-18); font-weight: 600; line-height: 1.777em; letter-spacing: -0.02em; color: var(--color-primary);}
.vision .cont-tit .tit {margin: 0; font-size: var(--font-size-32); font-weight: 600; line-height: 1.4375em; letter-spacing: -0.02em; color: #2c2c2c}

.vision {display: flex; flex-direction: column; gap: var(--space-120);}
.vision .sec1 {display: flex; flex-direction: column; gap: var(--space-120); width: 100%; padding-bottom: var(--space-120); border-bottom: 1px solid #ddd;}
.vision .values {display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin: 0; padding: 0; list-style: none;}
.vision .values .item {flex: 1 1 0; min-width: 0;}
.vision .values .item.lift {padding-top: var(--space-56);}
.vision .values .pill {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-28); aspect-ratio: 1 / 1; padding: var(--space-20); border-width: 16px; border-style: solid; border-radius: 500px; background: #fff; box-sizing: border-box;}
.vision .values .pill.bor-primary {border-color: #DEE2EF;}
.vision .values .pill.bor-sub {border-color: #FEF8F5;}
.vision .values .item:nth-child(3) .pill, .vision .values .item:nth-child(5) .pill {border-color: #F4F5FA;}
.vision .values .ico {display: flex; height: clamp(50px, calc(66 / var(--inner) * 100vw), 66px); align-items: center; justify-content: center; margin: 0;}
.vision .values .ico img {height: 100%;}
.vision .values .name {margin: 0; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; letter-spacing: -0.02em; text-align: center;}
.vision .values .name.primary {color: var(--color-primary);}
.vision .values .name.sub {color: var(--color-sub);}
.vision .sec2 {display: flex; flex-direction: column; gap: var(--space-64); width: 100%;}
.vision .mgmt {display: flex; flex-wrap: wrap; gap: var(--space-40); margin: 0; padding: 0; list-style: none;}
.vision .mgmt .card {flex: 1 1 calc(50% - var(--space-20)); min-width: 280px; display: flex; flex-direction: column; align-items: stretch; border: 1px solid #eee; border-radius: var(--radius-24); overflow: hidden;}
.vision .mgmt .card .img.top {margin: 0; width: 100%;}
.vision .mgmt .card .img.top img { min-height: 200px; object-fit: cover;}
.vision .mgmt .box {display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-48) var(--space-36); background: #FAFAFA;}
.vision .mgmt .box .head {display: flex; flex-direction: column; gap: var(--space-12); align-items: flex-start;}
.vision .mgmt .box .num {display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-16); border-radius: 100px; font-size: var(--font-size-16); font-weight: 600; line-height: 1.875em; letter-spacing: -0.02em; color: #fff; background: var(--color-primary);}
.vision .mgmt .box .head .tit {margin: 0; font-size: var(--font-size-24); font-weight: 600; line-height: 1.583em; letter-spacing: -0.02em; color: #2c2c2c;}
.vision .mgmt .box .desc {margin: 0; font-size: var(--font-size-18); line-height: 1.777em; letter-spacing: -0.02em;}

/* 회사 연혁 */
.history {position: relative;}
.history .item {display:flex;}
.history .item h3 {font-size: var(--font-size-48); font-weight: 700; letter-spacing: -0.03em; line-height: 1.291em; color: #2c2c2c; text-align:left; width:clamp(150px, calc(280 / var(--inner) * 100vw), 280px);}
.history .item-box {flex:1 1 auto; min-width:0; width:1%; padding:10px 0 110px 150px; position:relative;}
.history .item-box .box {display: flex; position: relative; margin-bottom: var(--space-24);}
.history .item-box .box:last-child {margin-bottom: 0;}
.history .item-box .year {flex-shrink: 0; width: 72px; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; letter-spacing: -0.02em; color:#0F308F; text-align: left; }
.history .item-box:before {position:absolute; content:""; background:var(--color-primary); margin-left:-15px; top:11px; left:-1px; width:32px; height:32px; border-radius:100%; border:8px solid rgba(255, 255, 255, 0.90);}
.history .item-box.on:before {transform: translateY(0);}
.history .item-box:after {position:absolute; content:""; left:0; top:19px; width:1px; height:100%; background:#ddd; z-index:-1;}
.history .list li {position: relative; margin-bottom:5px; display:flex; font-size: 18px; line-height:1.77em; }
.history .list li:last-child {margin-bottom:0;}
.history .item:last-child .item-box {padding-bottom:0;} 

/* 찾아오시는길 */
.location-section .sub-com-tit {padding-bottom: var(--space-48); margin-bottom: var(--space-48);}
.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 560px !important;}
.map iframe {width: 100%; height: 560px;}

.location-section {gap: var(--space-120);}
.location-section .map {flex: 1; max-width: 840px; min-width: 0; border-radius: var(--radius-24); overflow: hidden;}
.location-section .lct-info {flex: 1; display: flex; flex-direction: column; max-width: 640px;}
.location-section .lct-head {margin: 0; font-size: var(--font-size-32); font-weight: 600; line-height: 1.4375em; letter-spacing: -0.03em; color: #242424;}
.location-section .lct-head .brand {color: var(--color-primary);}
.location-section .lct-list {gap: var(--space-24);}
.location-section .lct-list .row {display: flex; align-items: center; gap: var(--space-36);}
.location-section .ico-wrap {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: clamp(50px, calc(72 / var(--inner) * 100vw), 72px); height: clamp(50px, calc(72 / var(--inner) * 100vw), 72px);}
.location-section .txt {display: flex; gap: var(--space-40);}
.location-section .lbl {width: 46px; margin: 0; font-size: var(--font-size-18); font-weight: 600; line-height: 1.777em; letter-spacing: -0.02em; color: var(--color-primary);}
[lang="ja"] .location-section .lbl {width: 60px;}
.location-section .val {margin: 0; font-size: var(--font-size-18); line-height: 1.777em; letter-spacing: -0.02em; color: #505050;}
.location-section .val.tel {display: flex; align-items: center;}
.location-section .val.tel span {display: flex; align-items: center;}
.location-section .val.tel span:first-child:after {content: ""; display: block; width: 1px; height: 12px; background: #ddd; margin: 0 var(--space-12);}
.location-section .address {margin-bottom: var(--space-40);}
.location-section .address .val {font-size: var(--font-size-24); line-height: 1.583em;}

/********************* SMART SOLUTION 제품소개 *********************/
/* 전체보기 서브비주얼 */
.sub-visual.product-visual .bg {height: auto;}
.sub-top {background: #FAFAFA;}
.top-cont { display: flex;}
.top-item {display: flex; position: relative; width: calc(100%/4); height: 560px; overflow: hidden; color: #fff; transition: width 0.3s ease-in-out;}
.top-item .img { height: 100%; width: 100%; object-fit: cover;}
.top-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-item .img:before {content:""; position: absolute; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.72) 100%); transition: .3s;}
.top-item:hover { width: 75%;}
.top-item:hover .img:before {background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 30%, rgba(0, 0, 0, 0.72) 100%);}

/* SMART SOLUTION 전체보기 */
.top-txt {position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding: var(--space-32); text-align: left; opacity: 1;}
.top-txt span {display: block; color: #fff;}
.top-txt .tit {font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em;}
.top-item:hover .top-txt {opacity: 0;}
.top-item .hover {position: absolute; bottom: 0; padding: var(--space-80); opacity: 0; pointer-events: none;}
.top-item:hover .hover {opacity: 1; transition-delay: .2s; pointer-events: auto;}
.top-item .tit2 {display: block; font-size: var(--font-size-40); font-weight: 700; line-height: 1.4em; letter-spacing: -0.02em;}
.top-item .com-more {margin-top: var(--space-36);}

.solintro { display: flex; align-items: center; justify-content: 
space-between; gap: var(--space-40); }
.solintro .cont { display: flex; flex-direction: column; gap: var(--space-36); 
flex: 0 1 auto; min-width: 0; }
.solintro .tit {margin: 0; font-size: var(--font-size-40); font-weight: 500; line-height: 1.4em; letter-spacing: -0.02em; color:#2c2c2c; }
.solintro .tit span {display: inline-flex; align-items: flex-end; gap: 10px; position: relative; }
.solintro .tit span:after {content: ""; display: block; width: 8px; height: 8px; border-radius: 100%; background: var(--color-sub); margin-bottom: var(--space-40);}
.solintro .tit p { margin: 0; }
.solintro .tit strong { font-weight: 700; }
.solintro .desc { margin: 0; font-size: var(--font-size-18); line-height: 1.777em; letter-spacing: -0.02em; color: #505050; }
.solintro .img {width: clamp(400px, calc(780 / var(--inner) * 100vw), 780px); border: 1px solid #eee; border-radius: var(--radius-24); 
overflow: hidden; }
.solintro .img img { display: block; width: 100%; aspect-ratio: 780 / 535; 
object-fit: cover; }

/* 제품  */
.product-content .prod-item {display: flex; align-items: center; gap: var(--space-100); margin-bottom: var(--space-120);}
.product-content .prod-item:last-child {margin-bottom: 0;}
.product-content .prod-item:nth-child(even) {flex-direction: row-reverse;}
.product-content .prod-item .img {width: clamp(400px, calc(700 / var(--inner) * 100vw), 700px); border: 1px solid #ddd; border-radius: var(--radius-24); overflow: hidden;}
.product-content .cont { flex: 1; }
.product-content .cont .lead {font-size: var(--font-size-18); font-weight: 600; line-height: 1.777em; letter-spacing: -0.02em; color: #505050; margin-bottom: var(--space-24);}
.product-content .cont .desc { margin: 0; font-size: var(--font-size-18); line-height: 1.777em; letter-spacing: -0.02em; color: #505050; }
.product-content .cont .desc.dot p {position: relative; padding-left: 16px;}
.product-content .cont .desc.dot p:before {content: ""; display: block; position: absolute; left: 0; top: 13px; width: 4px; height: 4px; border-radius: 100%; background: var(--color-sub);}

/* 제품소개 전체보기 */
.prodall .cont {text-align: center; margin-bottom: var(--space-120);}
.prodall .tit { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0; font-size: var(--font-size-40); line-height: 1.4em; letter-spacing: -0.02em; color: #2c2c2c; font-weight: 500; margin-bottom: var(--space-32);}
.prodall .tit:before {content: ""; display: block; width: 56px; height: 54px; background: url(../images/sub/product-tit.svg) no-repeat center / contain; margin-bottom: var(--space-32);}
.prodall .tit strong { font-weight: 700; }
.prodall .desc { margin: 0; font-size: var(--font-size-18); line-height: 1.777em; letter-spacing: -0.02em; color: #505050; }
.prodall .desc p { margin: 0; }
.prodall .img { margin: 0; border-radius: var(--radius-24); overflow: hidden; }

/********************* 커뮤니티 *********************/


/********************* 고객센터 *********************/
/* qna */
.board-form .input {border-radius: 8px;}
.form-agree .scroll-box {border-radius: 8px;}
.btn-pack.xlarge.inq-btn { min-width: 160px !important; font-size: var(--font-size-16) !important; border-radius: var(--radius-8);}
.form-agree .checkbox label:before {border-radius: 4px;}
/* faq */
.faq li.active .tit {border-bottom: 1px solid #ddd;}
.faq .buttons {margin-top: 40px;}
.faq .btn-pack {border-radius: 8px;}