 @charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 520 / var(--inner) * 100vw ), 520px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 520 / var(--inner) * 100vw ), 520px) !important;}
.roughmap_lebel_text {display: none !important; line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {display: none !important; content:"위노베이트"; font-size:12px; line-height:15px;}
.roughmap_maker_label .roughmap_lebel_text,
.roughmap_maker_label:after  {display: none !important;}


.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;}

.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);}

.greet-wrap {position: relative; max-width: 1920px; margin:0 auto; z-index: 1; padding-bottom: var(--padding-70);}
.greet-wrap:after {position: absolute; content: ''; right: 0; bottom: 0; width: 80%;height:clamp(380px, calc( 800 / var(--inner) * 100vw ), 800px); background: #F5F5F5; z-index: -1;}
.greet-wrap .contain {display: flex;align-items: flex-end; gap:var(--padding-60); flex-wrap: wrap; overflow: hidden;}
.greet-wrap .imgbx {width: clamp(320px, calc( 680 / var(--inner) * 100vw ), 680px);}
.greet-wrap .textbx {flex: 1; letter-spacing: -0.5px;}
.greet-wrap .badge {display: inline-flex;align-items: center;justify-content: center; padding: 8px; line-height: 1; background: var(--color-primary); color: #fff; font-size: var(--font-size-15); font-weight: bold; border-radius: 4px;}
.greet-wrap .title {margin-top: var(--padding-35); font-size:var(--font-size-32); font-weight: 500;}
.greet-wrap .decbx {margin-top: var(--padding-35);}
.greet-wrap .decbx .dec {line-height:1.5; }
.greet-wrap .decbx .dec:not(:last-child) {margin-bottom: var(--padding-20);}
.greet-wrap .ceo {margin-top: var(--padding-55); font-size:var(--font-size-24); font-weight: bold; color: var(--color-body);}

.branch-list {display: flex;flex-wrap: wrap; gap:var(--padding-30);}
.branch-item {flex:1 0 calc((100% - 1 * var(--padding-30)) / 2); max-width: calc((100% - 1 * var(--padding-30)) / 2);}
.branch-list .map { height:clamp(250px, calc( 520 / var(--inner) * 100vw ), 520px);}
.branch-list .map iframe {height: 100%; width: 100%;}
.branch-list .branch-info {padding: var(--padding-25); margin-top:var(--padding-50); border-top: 2px solid #532325; letter-spacing: -0.5px;}
.branch-list .branch-info .title {margin-bottom:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-size:var(--font-size-24); font-weight: bold; line-height: 1.1;}
.infoitem {display: flex; gap: 13px; color: var(--color-body);}
.infoitem:not(:last-child) {margin-bottom: 13px;}
.infoitem .icn {width: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); aspect-ratio: 1 / 1;}
.infoitem .descbx {flex: 1; display: flex;gap: var(--padding-12); line-height: 1.6;}
.infoitem .name {font-weight: 500;}

.location-area .map { height:clamp(250px, calc( 520 / var(--inner) * 100vw ), 520px);}
.location-area .map iframe {height: 100%; width: 100%;}
.location-info {position: relative; max-width:1015px; margin:0 auto; transform: translateY(-50%); z-index: 5;}
.location-info .mapflx {display: flex;flex-wrap: wrap; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.14);}
.location-info .logobx {width: clamp(150px, calc( 260 / var(--inner) * 100vw ), 260px); background: var(--color-primary); display: flex;align-items: center;justify-content: center;padding:30px 20px;}
.location-info .logobx img {width: clamp(120px, calc( 168 / var(--inner) * 100vw ), 168px);}
.location-info .mapinfobx {flex: 1; padding:var(--padding-60) var(--padding-40); background: #fff;}
.location-info .infolist {display: flex;flex-wrap: wrap; gap: var(--padding-13) var(--padding-45) ;}
.location-info .infoitem:first-child {width: 100%;}

.prdtop-text {padding-bottom: var(--padding-70); text-align: center; max-width: 650px; margin:0 auto;}
.prdtop-text .tit {margin-bottom: var(--padding-30); font-size:var(--font-size-28); font-weight: bold; color: var(--color-primary);}
.prdtop-text .text {font-size: var(--font-size-18); color: var(--color-body); line-height: 1.55;}

.prd-img-slider {max-width:650px; margin: 0 auto;}
.prd-img-slider .thumb-img {position:relative; padding-bottom:69.23%; overflow:hidden;}
.prd-img-slider .thumb-img img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}
.prd-img-main {position: relative; margin-bottom: var(--padding-30);}
.prd-nav-btn {position: absolute; bottom: 0; right: 0; display: flex; gap: 0; z-index: 10; }
.prd-nav-btn button {margin-right: -1px; width: clamp(35px, calc( 70 / var(--inner) * 100vw ), 70px); height: clamp(35px, calc( 70 / var(--inner) * 100vw ), 70px); background: #fff; border: 0; color: #4C4C4C; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd;} 
.prd-nav-btn button svg {width: clamp(20px, calc( 38 / var(--inner) * 100vw ), 38px);  height: clamp(20px, calc( 38 / var(--inner) * 100vw ), 38px); }
.prd-nav-btn button:hover {background: var(--color-primary); border-color: var(--color-primary);}
.prd-nav-btn button:hover svg {stroke: #fff;}
.prd-img-thumbs {width: 100%;}
.prd-img-thumbs .thumb-img:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.prd-img-thumbs .swiper-slide-thumb-active .thumb-img:after {border: 2px solid var(--color-primary);}

.prd-tablewrap {margin-top: var(--padding-100);}
.prd-tablewrap .title {margin-bottom: var(--padding-40); padding-left: clamp(20px, calc( 24 / var(--inner) * 100vw ), 24px); font-size:var(--font-size-28); font-weight: bold; position: relative;}
.prd-tablewrap .title:after {position: absolute; content: ''; left:0; top: clamp(8px, calc( 12 / var(--inner) * 100vw ), 12px); width: clamp(8px, calc( 12 / var(--inner) * 100vw ), 12px); height: clamp(8px, calc( 12 / var(--inner) * 100vw ), 12px); background: url(../images/sub/dot.png) no-repeat 50% 50%; background-size: contain;}

.prd-tablewrap .table-responsive {overflow-x: auto;}
.prd-table {width: 100%; border-collapse: collapse; border-top: 2px solid #532325;}
.prd-table th {background: #FBF4F4; font-size: var(--font-size-18); font-weight: bold;}
.prd-table td {color: var(--color-body);}
.prd-table th ,
.prd-table td {padding: clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px) 10px; border-bottom: 1px solid #ddd; text-align: center; border-right: 1px solid #ddd; letter-spacing: -0.5px;}
.prd-table th:last-child ,
.prd-table td:last-child {border-right: 0;}

.sub3_text {margin-bottom:var(--padding-110); font-size:var(--font-size-24); line-height: 1.5; text-align: center; letter-spacing: -0.5px;}

.techlogic-list {display: flex;flex-direction: column;gap:var(--padding-60);}
.techlogic-item {display: flex; align-items: center; flex-wrap: wrap; gap: var(--padding-80);}
.techlogic-item .imgbx {width: clamp(300px, calc( 700 / var(--inner) * 100vw ), 700px);}
.techlogic-item .textbx {flex: 1; letter-spacing: -0.5px;}
.techlogic-item .numtxt {display: flex;align-items: center; gap:12px;}
.techlogic-item .numtxt .num {flex: 1 0 clamp(30px, calc( 43 / var(--inner) * 100vw ), 43px); max-width: clamp(30px, calc( 43 / var(--inner) * 100vw ), 43px); height: clamp(30px, calc( 43 / var(--inner) * 100vw ), 43px); display: flex;align-items: center;justify-content: center; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: var(--font-size-32); font-weight: 600; text-align: center; line-height: 1;}
.techlogic-item .numtxt .txt {flex:1 0 auto; width: 1%; font-size: var(--font-size-32); font-weight: 600;}
.techlogic-item .dec {margin-top: var(--padding-30); font-size: var(--font-size-24); line-height: 1.41; color: var(--color-body);}
.techlogic-item:nth-child(odd) {flex-direction: row-reverse;}
.techlogic-item:nth-child(odd) .textbx {padding-left: var(--padding-30);}

.sub3_bg {margin-top: var(--padding-100); padding: clamp(50px, calc( 130 / var(--inner) * 100vw ), 130px) 0; background: url(../images/sub/sub3-bg.jpg) no-repeat 50% 50%; background-size: cover; text-align: center; color: #fff;}
.sub3_bg .desc {margin-top: var(--padding-45); font-size: var(--font-size-24); line-height: 1.5; color: #fff;}

.sub4_bg {padding: var(--padding-80) var(--container-space); background: url(../images/sub/sub4-bg.jpg?v=2) no-repeat 50% 50%; background-size: cover; text-align: center; color: #fff;}
.sub4_bg .icn img {width:clamp(60px, calc( 140 / var(--inner) * 100vw ), 140px);}
.sub4_bg .textbx {padding-top:var(--padding-50); letter-spacing: -0.5px;}
.sub4_bg .textbx .title {margin-bottom: var(--padding-50); font-size:var(--font-size-32); font-weight: bold; color: #fff; }
.sub4_bg .textbx .desc {font-size:var(--font-size-20); line-height: 1.6;}
.sub4_bg .textlist {display:flex; flex-direction:column; gap: var(--padding-40);}
.sub4_bg .textitem {display:flex; flex-direction:column; gap:15px; font-size: var(--font-size-22);}
.sub4_bg .textitem .tit {font-weight: bold;}
.sub4_bg .textitem .dec {display:inline-block; padding-left: 0.7em;text-indent: -0.7em;}


.lab-bg {padding: clamp(50px, calc( 135 / var(--inner) * 100vw ), 135px) var(--padding-30) clamp(90px, calc( 195 / var(--inner) * 100vw ), 195px); background: url(../images/sub/lab-bg.jpg) no-repeat 50% 50%; background-size: cover;}
.lab-bg .cont {display: flex; flex-direction: column; align-items: center; gap: var(--padding-40); }
.lab-bg .desc {text-align: center; color: #fff; font-size: var(--font-size-24); line-height: 1.5; letter-spacing: -0.03em;}
.lab-bg .tit { font-size: var(--font-size-32); font-weight: 700; color: #fff; text-align: center; letter-spacing: -0.03em; line-height: 1.125;}
.lab-bg .list {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--padding-40);}
.lab-bg .item {display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; width: clamp(90px, calc( 120 / var(--inner) * 100vw ), 120px); height: clamp(90px, calc( 100 / var(--inner) * 100vw ), 100px); border: 1px solid #fff; border-radius: 8px; gap: 16px;}
.lab-bg .item .img {display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(35px, calc( 50 / var(--inner) * 100vw ), 50px);}
.lab-bg .item .img img {width: auto; height: auto; object-fit: contain;}
.lab-bg .item .txt {font-size: var(--font-size-16); font-weight: 500; color: #fff; text-align: center; letter-spacing: -0.03em; line-height: 1;}
