@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 440 / var(--inner) * 100vw ), 440px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 440 / var(--inner) * 100vw ), 440px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"바로시스템"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:15px; margin-top:10px; line-height:1.3;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:3px; height: 3px; background:var(--color-primary); border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}
.bulletitem2 { padding-left: 0.6em; text-indent: -0.6em;}

.bg-gray {background:#fafafa;}
.overhidden {overflow: hidden;}
.subsec-pd {padding: clamp(50px, calc( 150 / var(--inner) * 100vw ), 150px) 0;}
.contain2 {max-width: 1400px; width: 100%; margin: 0 auto;}

.radiobx {display: flex; flex-wrap: wrap;}
.radiobx .item {display: flex;align-items: center; min-height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px);}
.radiobx .item:not(:last-child) {margin-right: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}

.titlelnb-contain {display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: var(--padding-90); margin-bottom: var(--padding-120); border-bottom: 1px solid #8F8F8F;}

.product-flxWrap {display: flex;align-items: center;flex-wrap: wrap;gap:var(--padding-70); margin-bottom: var(--padding-80);}
.product-flxWrap .imgbx {width:clamp(300px, calc( 660 / var(--inner) * 100vw ), 660px);}
.product-flxWrap .iamges {position:relative; padding-bottom:66.96%; overflow:hidden;}
.product-flxWrap .iamges img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}
.product-flxWrap .textbx {flex: 1; letter-spacing: -0.6px;}
.product-flxWrap .title {margin-bottom:var(--padding-40); font-size: var(--font-size-40); line-height:1.5; font-weight:600;}
.product-flxWrap .text {font-size: var(--font-size-20); line-height:1.5; color: var(--color-body);}

.product-function {display: grid; grid-template-columns: repeat(3, 1fr); gap:30px var(--padding-22); letter-spacing: -0.6px;}
.function-item .head {display: flex;align-items: center;gap: var(--padding-20); margin-bottom: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); padding-bottom: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); border-bottom: 1px solid #ddd;}
.function-item .head .icn {width:clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px);}
.function-item .head .titbx {display: flex;align-items: center;gap: var(--padding-14); line-height: 1.5;}
.function-item .head .txt1 {font-size:var(--font-size-24); font-weight: bold;}
.function-item .head .txt2 {font-size:var(--font-size-15); color: #8F8F8F; font-weight: 500;}
.function-item .body {display: flex;flex-direction: column;gap:var(--padding-20);}
.function-item .body-item {display: flex; line-height: 1.5;}
.function-item .body-item .name {width: 160px; font-weight: bold;}
.function-item .body-item .dec {flex: 1; color: var(--color-body);}
.function-item:nth-child(1) .body-item .name {width:105px;}

.prdlist-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap:var(--padding-24); margin-top: var(--padding-100);}
.prdlist-grid .images {position:relative; padding-bottom:66.86%; overflow:hidden;}
.prdlist-grid .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}

.locinfo {display: flex; flex-direction: column; gap:40px; align-items: center; margin-top: var(--padding-40);}
.locinfo .head {display: flex; align-items: center; justify-content: center; gap:12px;}
.locinfo .head .img {width: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); height: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); flex-shrink: 0;}
.locinfo .head .img svg {width: 100%; height: 100%; object-fit: contain;}
.locinfo .head .tit {font-size: var(--font-size-22); font-weight: 600; line-height: 1.36; letter-spacing: -0.66px; color: #242424;}
.locinfo .cont {display: flex; align-items: stretch; gap: var(--padding-60); flex-wrap: wrap; width: 100%;}
.locinfo .item {flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; font-size: var(--font-size-17); letter-spacing: -0.51px; line-height: 1.59;}
.locinfo .item .tit {font-weight: 600; color: var(--color-primary);}
.locinfo .item .desc {color: #242424;}
.locinfo .item .desc.sub {color: #454545;}
.locinfo .line {width: 0; flex-shrink: 0; align-self: stretch; border-left: 1px solid #e0e0e0;}

.greet-top {display: flex;flex-direction: column;gap: var(--padding-24); margin-bottom: var(--padding-100); padding-bottom: var(--padding-150); background:url(../images/sub/greet-logo.png) no-repeat bottom center / contain; background-size: clamp(300px, calc( 502 / var(--inner) * 100vw ), 502px) auto; text-align: center;} 
.greet-top .txt1 {font-size:var(--font-size-30); font-weight: bold; line-height: 1.5;}
.greet-top .txt2 {font-size: var(--font-size-20); line-height: 1.5; color: var(--color-body);}

.greet-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--padding-100) var(--padding-40);  line-height: 1.5;}
.greet-grid .item {display: flex; flex-direction: column; gap: var(--padding-24);}
.greet-grid .head {display: flex; align-items: center; gap: var(--padding-24);}
.greet-grid .head .img {width: clamp(24px, calc( 48 / var(--inner) * 100vw ), 48px); height: clamp(24px, calc( 48 / var(--inner) * 100vw ), 48px); flex-shrink: 0;}
.greet-grid .head .img img {width: 100%; height: 100%; object-fit: contain;}
.greet-grid .head .tit {font-size: var(--font-size-24); font-weight: 600; letter-spacing: -0.72px; color: #242424;}
.greet-grid .line {height: 1px; background: #d9d9d9;}
.greet-grid .cont {display: flex; flex-direction: column; gap: 10px;}
.greet-grid .cont .desc {font-size: var(--font-size-18); letter-spacing: -0.54px; color: #454545;}
.greet-grid .bar {width: 0; height: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); border-left: 1px solid #d9d9d9;}
.greet-grid .cont .quote {font-size: var(--font-size-18); font-weight: 600; letter-spacing: -0.54px; color: var(--color-primary);}

.insec-top {margin-bottom: var(--padding-100); text-align: center;}
.insec-top .txt1 {font-size:var(--font-size-30); font-weight: bold; line-height: 1.5;}

.goal-sec {display: flex; flex-direction: column; gap: var(--padding-40);}
.goal-sec .item {display: flex; align-items: stretch; flex-wrap: wrap; background: #fff; border-radius: 20px; box-shadow: 0 10px 50px rgba(0,0,0,0.2); overflow: hidden;}
.goal-sec .img {width: clamp(300px, calc( 600 / var(--inner) * 100vw ), 600px);}
.goal-sec .img img {width: 100%; height: 100%; object-fit: cover;}
.goal-sec .cont {flex: 1; display: flex; flex-direction: column; gap: var(--padding-24); padding: var(--padding-110) var(--padding-60); min-width: 0;}
.goal-sec .tit {font-size: var(--font-size-28); font-weight: 600; color: #242424;}
.goal-sec .list {list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--padding-20);}
.goal-sec .list li {position: relative; padding-left: clamp(16px, calc( 25 / var(--inner) * 100vw ), 25px);  letter-spacing: -0.48px; line-height: 1.5; color: #454545;}
.goal-sec .list li::before {position: absolute; content: ''; left: 0; top: 9px; width: clamp(4px, calc( 6 / var(--inner) * 100vw ), 6px); height: clamp(4px, calc( 6 / var(--inner) * 100vw ), 6px); background: var(--color-primary);}
.goal-bg {margin-top: var(--padding-100); padding: var(--padding-100) 0; background: url(../images/sub/goal-bg.jpg) no-repeat center center / cover; }
.goal-bg .titbox {display: flex;flex-direction: column;gap: var(--padding-40); text-align: center; color: #fff; letter-spacing: -0.5px;} 
.goal-bg .title {font-size:var(--font-size-40); font-weight: bold;}
.goal-bg .dec {font-size: var(--font-size-20); line-height: 1.5; color: #fff; font-weight: 600;}

.cert-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--padding-50) var(--padding-40); }
.cert-list .item {display: flex; flex-direction: column; gap: var(--padding-20); align-items: center;}
.cert-list .img {border: 1px solid #ddd; overflow: hidden;}
.cert-list .img img {width: 100%; height: 100%; object-fit: cover;}
.cert-list .txt {font-weight: 500; line-height: 1.6; letter-spacing: -0.48px; color: #242424; text-align: center;}

.prdpart-list {display: grid; grid-template-columns: repeat(2, 1fr); gap:var(--padding-65) var(--padding-30); padding-top: var(--padding-40); border-top: 2px solid #898989;}
.prdpart-item {display: flex; gap:var(--padding-30); flex-wrap: wrap;}
.prdpart-item .imgbx {width:clamp(300px, calc( 340 / var(--inner) * 100vw ), 340px);}
.prdpart-item .images {position:relative; padding-bottom:100%; overflow:hidden;}
.prdpart-item .images img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.prdpart-item  .prdinfobx {flex: 1; letter-spacing: -0.5px;}
.prdinfobx {display: flex; flex-direction: column; gap: var(--padding-24); line-height: 1.5;}
.prdinfobx .head {display: flex; flex-direction: column; gap: 8px;}
.prdinfobx .head .tit {font-size: var(--font-size-28); font-weight: 600; letter-spacing: -0.84px; color: #242424;}
.prdinfobx .head .desc {font-size: var(--font-size-17); font-weight: 500; letter-spacing: -0.48px; color: #8F8F8F;}
.prdinfobx .spec .row:first-child {border-top: 1px solid #e0e0e0;}
.prdinfobx .spec .row {display: flex; align-items: center; gap: var(--padding-30); padding: var(--padding-15) 0;  border-bottom: 1px solid #e0e0e0; font-size: var(--font-size-17); letter-spacing: -0.48px;}
.prdinfobx .spec .name {font-weight: 600; color: #242424;}
.prdinfobx .spec .val {color: #454545;}
.prdinfobx .acts {display: flex; flex-direction: column; gap: var(--padding-12); width: 100%;}
.prdinfobx .acts .download,
.prdinfobx .acts .btn {display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; padding: 8px 16px; border-radius: 64px; font-size: var(--font-size-15); font-weight: 500; letter-spacing: -0.45px; text-decoration: none; line-height: 1.5;}
.prdinfobx .acts .download {background: #fff; border: 1px solid var(--color-primary); color: var(--color-primary);}
.prdinfobx .acts .btn {background: var(--color-primary); border: 1px solid var(--color-primary); color: #fff;}
.prdinfobx .acts .img {width:  clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px); height:  auto; }
.prdinfobx .acts .img img {display: block; width: 100%; height: 100%; object-fit: contain;}

.dep3-wrap {max-width:950px;width:100%; margin:0 auto;overflow-x:auto;margin-bottom:var(--padding-65);}
.dep3list {display:flex;gap:8px;}
.dep3item {flex:1;}
.dep3item .link {display:inline-flex;align-items:center;justify-content:center;padding:0 20px; border:1px solid #242424; text-align:center; width:100%;height:clamp(44px, calc( 64 / var(--inner) * 100vw ), 64px);font-weight: 500;}
.dep3item.active .link {border-color: var(--color-primary); color:var(--color-primary);font-weight: 600;}