@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height: clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.root_daum_roughmap .wrap_map {height: clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px) !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:8px; line-height:1.3; font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:clamp(8px, calc( 11 / var(--inner) * 100vw ), 11px); width:3px; height: 3px; background:var(--color-primary); border-radius: 50%;}

.bg-gray {background:#f8f8f8;}
.bg-blue {background:#f3f4f8;}

.rodi lord-icon {width: clamp(45px, calc( 80 / var(--inner) * 100vw ), 80px); height: clamp(45px, calc( 80 / var(--inner) * 100vw ), 80px);}

.dotbox {text-align: center;}
.dotbox .dottt {font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: 600;}
.dotbox .dot {display: inline-block; margin:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px) 0; width: clamp(8px, calc( 12 / var(--inner) * 100vw ), 12px); height: clamp(8px, calc( 12 / var(--inner) * 100vw ), 12px); background:var(--color-secondary); transform: rotate(-45deg);}
.dotbox .desc {font-size: clamp(14px, calc( 20 / var(--inner) * 100vw ), 20px); color: #454545; line-height: 1.5;}

.greeting-img {margin-bottom:50px;}
.greeting {display:flex;}
.greeting .col-l {width:48%;}
.greeting .col-l .txt1 {margin-top:clamp(15px, calc( 26 / var(--inner) * 100vw ), 26px); display:block; font-weight:600; font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px);}
.greeting .col-l .txt2 {font-size:clamp(19px, calc( 36 / var(--inner) * 100vw ), 36px); line-height:1.47em; letter-spacing:-.03em; font-weight:800;}

.greeting .col-r {flex:1; line-height:1.63em; color:#454545; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); letter-spacing: -0.5px;}
.greeting .col-r .last {display: flex; align-items: center; font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); margin-top:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); line-height:1.56em; letter-spacing:-.02em; font-weight:600;}
.greeting .col-r .last .txt {display: inline-block; padding-right: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}

@media (max-width: 1024px) {
	.greeting {display:block;}
	.greeting .col-l {width:100%; margin-bottom:30px;}
	.greeting .col-l .txt2 br {display:none;}
}

@media (max-width: 640px) {
	.greeting-img {margin-bottom:30px;}
	.greeting .col-l {margin-bottom:20px;}
}

.rodiitem {display: flex; flex-wrap: wrap;}
.rodilist {flex: 1 0 25%; max-width: 25%; margin-left: -1px; border: 1px solid #ddd;}
.rodilist .inner {padding: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px) 15px; background: #fff; text-align: center; height: 100%; letter-spacing: -0.5px;}
.rodilist .num {display: block; padding-top:clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px); text-align: center; font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: bold;}
.rodilist:nth-child(odd) .num {color:var(--color-primary);}
.rodilist:nth-child(even) .num {color:var(--color-secondary);}
.rodilist .desc {padding-top:clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545; line-height: 1.5;}

.history {padding-top:50px; gap:0 20px; display:flex; border-top:2px solid #242424;}
.history .col-l {width:45%;}
.history .col-l h2 { margin-bottom:24px;  }
.history .col-l h2 span {display: inline-block; margin-left:15px; font-size:33px; letter-spacing:-.03em; font-weight:600;}
.history .col-l h2 img {width: clamp(90px, calc( 149 / var(--inner) * 100vw ), 149px);}
.history .col-l p {font-size:18px; line-height:1.56em; font-weight:500; color: #454545;}

.history .col-r {flex:1;}
.history .item {padding:0 0 45px 80px; position:relative;}
.history .item:before {top:8px; width:1px; position:absolute; content:''; left:0; background-color:rgba(14, 49, 120, .2); height:100%; bottom:0;}
.history .item:after {width:20px; height:20px; left:-10px; top:4px; background-image:url('../images/sub/history-dot.png'); background-size:contain; background-repeat:no-repeat; position:absolute; content:'';}
.history .item:last-child {padding-bottom:0;}
.history .item:last-child:before {display:none;}
.history .item .year {font-size:32px; margin-bottom:23px; line-height:1.1em; font-weight:600; letter-spacing:-.03em; color:#242424; position:relative;}
.history .item .year:before {left:-60px; top:14px; width:40px; height:1px; position:absolute; content:''; background-color:#ddd;}
.history .item ul li {margin-bottom:15px; display:flex;}
.history .item ul li:last-child {margin-bottom:0;}
.history .item ul li .month {width:40px; font-weight:600; color:#242424;}
.history .item ul li .cnt {padding-left:15px; position:relative; flex:1;}
.history .item ul li .cnt:before {position:absolute; content:''; width:5px; height:5px; top:7px; left:0; background-color:var(--color-secondary); border-radius:100%;}

@media (max-width: 1024px) {
	.history .col-l h2 {margin-bottom: 15px; font-size: 25px;}
	.history .col-l h2 span {font-size: 26px;}
	.history .item {padding: 0 0 40px 50px;}
	.history .item .year {font-size:22px;}
	.history .item ul li {margin-bottom: 10px;}
}

@media (max-width: 640px) {
	.history {padding-top:30px; display:block;}
	.history .col-l {margin-bottom: 30px; width:100%;}
	.history .col-l .img {display:none;}
	.history .col-l h2 {font-size: 20px;}
	.history .col-l h2 span {font-size: 20px;}
	.history .col-l p {font-size: 15px;}
	.history .item:after {width:18px; height:18px; left:0; top:2px;}
	.history .item:before {left:9px;}
	.history .item {padding:0 0 35px 50px;}
	.history .item .year:before {left:-40px; top:10px; width:30px;}
	.history .item ul li .month {width: 32px;}
    .history .item .year {margin-bottom: 15px; font-size: 20px;}
}

.patentwrap {max-width: 900px; width: 100%; margin: 0 auto;}
.patentitem {display: flex; justify-content: center; flex-wrap: wrap; margin:-15px;}
.patentlist {flex: 1 0 33.33%; max-width: 33.33%; padding:15px;}
.patentlist .images {margin-bottom: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);position: relative;}
.patentlist .images:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.patentlist .tit {display: inline-flex; align-items: center; justify-content: center; padding:0 clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); height:clamp(32px, calc( 34 / var(--inner) * 100vw ), 34px); background:var(--color-primary); border-radius: 17px; color: #fff; font-size: clamp(13px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 500;}

.direct ul {display:flex; border:1px solid #ddd;}
.direct ul li {position:relative; overflow:hidden; display:flex; align-items:center; width:33.33%; padding:0 50px; height:200px; border-left:1px dashed #ddd;}
.direct ul li:first-child {border:0;}
.direct ul li::before {content:''; position:absolute; width:160px; height:160px; right:0; bottom:0; background-repeat:no-repeat; background-size:contain;}
.direct ul li:nth-child(1):before {background-image:url(/images/sub/biz-img10.png);}
.direct ul li:nth-child(2):before {background-image:url(/images/sub/biz-img11.png);}
.direct ul li:nth-child(3):before {background-image:url(/images/sub/biz-img12.png);}
.direct ul li .box .tt {font-size:18px; letter-spacing:-.03em; line-height:1.2em; font-weight:700; color:var(--color-primary);}
.direct ul li .box .tt2 {margin-top:15px; font-size:20px; letter-spacing:-.03em; line-height:1.2em; font-weight:600; color:#242424;}
.direct ul li .box .ico {position: absolute; bottom: 0; right: 0; line-height:0; opacity: .03;}

@media (max-width: 1024px) {
	.root_daum_roughmap .wrap_map {height:300px !important;}
    .direct ul li:before {width:100px; height:100px;}
    .direct ul li {padding:0 30px; height:150px;}
	.direct ul li .box .tt {font-size:16px;}
	.direct ul li .box .tt2 {font-size:18px;}
	.direct ul li .box .ico svg {width:100px; height:100px;}
}

@media (max-width: 640px) {
	.root_daum_roughmap .wrap_map {height:250px !important;}
    .direct ul {flex-wrap:wrap;}
    .direct ul li {padding:0 10px; height:120px; width:100%; border-top:1px dashed #ddd; border-left:0;}
	.direct ul li .box .tt {font-size:14px;}
	.direct ul li .box .tt2 {font-size:16px;}
	.direct ul li .box .ico svg {width:80px; height:80px;}
}


.odmitem {display: flex; flex-wrap: wrap; padding-top:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.odmlist {flex: 1 0 25%; max-width: 25%; margin-left: -1px; position: relative; border: 1px solid #ddd; text-align: center; letter-spacing: -0.5px;}
.odmlist:after {position: absolute; content: ''; right: -20px; top: 50%; transform: translateY(-50%); width:40px; height: 40px; background: url(../images/sub/right.png) no-repeat; background-size: contain; z-index: 1;}
.odmlist:nth-child(odd) {background: #f8f8f8; }
.odmlist:last-child:after {right: 50%; top: initial; bottom: -20px; transform: translateX(50%) rotate(90deg);}
.odmlist .inner {padding: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); padding-top: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); height: 100%;}
.odmlist .name {padding-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: 600;}
.odmlist .subname {display: block; padding-top: 5px; color: #686868; font-size: clamp(13px, calc( 16 / var(--inner) * 100vw ), 16px);}
.odmitem.type2 {flex-direction: row-reverse;justify-content: flex-end; padding-top: 0; margin-top: -1px;}
.odmitem.type2 .odmlist:after {right: inherit; left: -20px; transform: translateY(-50%) rotate(180deg);}
.odmitem.type2 .odmlist:last-child:after {display: none;}
.odmitem.type3 .odmlist:after  {display: none;}

.sub2fix {display: flex;align-items: center;flex-wrap: wrap;}
.sub2fix .imgbx {flex:1 0 600px; max-width: 600px; margin-right:clamp(20px, calc( 70 / var(--inner) * 100vw ), 70px);}
.sub2fix .textbx {flex: 1 0 auto; width: 1%; letter-spacing: -0.5px;}
.sub2fix .name {display: block; font-size: clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: bold;}
.sub2fix .dec {padding-top:clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545; line-height: 1.5;}
.sub2fix .subname {display: block; padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; color: var(--color-primary);}
.sub2fix .bullet-item {padding-top:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.sub2fix.reverse {flex-direction: row-reverse;}
.sub2fix.reverse .imgbx {margin-right: 0; margin-left: clamp(20px, calc( 70 / var(--inner) * 100vw ), 70px);}

.imgtop + .dotbox {padding-top: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px);}
.numitem {border-top: 1px solid #242424;}
.numlist {padding: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) 0; border-bottom: 1px solid #ddd;}
.numlist .inner {display: flex; align-items: center; flex-wrap: wrap;}
.numlist .num {display: flex; align-items: center; justify-content: center; flex: 1 0 clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); max-width: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); height: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); margin-right:clamp(10px, calc( 28 / var(--inner) * 100vw ), 28px); background:var(--color-primary); color: #fff; font-size:clamp(14px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold;border-radius: 50%;}
.numlist .textbx {flex: 1 0 auto; width: 1%;}
.numlist .tit {font-size:clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600; }
.numlist .subtt {padding-top: 5px; color: #686868;}

.tblbx th {background: var(--color-primary); color: #fff; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600;}
.tblbx td {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545; line-height: 1.5;}
.tblbx th,
.tblbx td {padding:clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px) 10px; text-align: center; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.tblbx th:last-child,
.tblbx td:last-child {border-right: 0;}

.tabwrap {margin-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.tabitem {display: flex; justify-content: center; flex-wrap: wrap; margin:-10px;}
.tablist {padding: 10px;}
.tablist .link {display: inline-flex; align-items: center; justify-content: center; padding: 0 clamp(18px, calc( 25 / var(--inner) * 100vw ), 25px); min-width:clamp(85px, calc( 100 / var(--inner) * 100vw ), 100px); height: clamp(36px, calc( 48 / var(--inner) * 100vw ), 48px); border-radius: 24px; border: 1px solid var(--color-secondary); color: var(--color-secondary); font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600;}
.tablist .link.active {background:var(--color-secondary); border-color: var(--color-secondary); color: #fff;}

.resultlist  + .resultlist {margin-top: clamp(40px, calc( 75 / var(--inner) * 100vw ), 75px);}
.resultlist .imgbx {flex:1 0 350px; max-width: 350px;margin-right:clamp(10px, calc( 40 / var(--inner) * 100vw ), 40px);}
.resultlist .textbx {flex: 1 0 auto; width: 1%; }
.resultlist .images {position:relative; padding-bottom:85.7%; overflow:hidden;}
.resultlist .images:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.resultlist .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit: contain;}

.textlist {border-bottom: 1px solid #ddd;}
.textlist:first-child {border-top: 1px solid #ddd;}
.textlist .txtfix {display: flex;}
.textlist .txtfix .title {flex: 1 0 20%; max-width: 20%; text-align: center; background: #f8f8f8; font-weight: 600;} 
.textlist .txtfix .desc {flex: 1 0 auto; width: 1%; color: #454545; line-height: 1.69;}
.textlist .txtfix .title ,
.textlist .txtfix .desc {padding: clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px) clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}

.inquirybx .btn-pack.large {min-width: clamp(140px, calc( 230 / var(--inner) * 100vw ), 230px); border-radius: 30px; height: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px); line-height: clamp(38px, calc( 58 / var(--inner) * 100vw ), 58px); font-size: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px);}
.inquirybx input[type=file].input {padding:0 10px; line-height:clamp(40px, calc( 55 / var(--inner) * 100vw ), 55px);cursor:pointer;}
.inquirybx .filebx {position:relative;}
.inquirybx #deleteFile {padding:3px 5px; position:absolute; right:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); top:50%; transform:translatey(-50%);  background: transparent; border: 1px solid #ddd;font-size:clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px);}