@charset "utf-8";
/* 공통 */
.sub-pd { padding: 150px 0;}
.sub-pd.first { padding-top: 0; padding-bottom: 150px;}
.sub-pd.last { padding-bottom: 0; padding-top: 150px;}
.subtit { font-size: 32px; font-weight: 600; color: var(--color-primary); line-height: 1.2em; margin-bottom: 35px; }

/* 회사비전 및 연혁 */
.gt { margin-top: 60px; }
.gt h4 { line-height: 1.2em; color: var(--color-primary); font-weight: 700; letter-spacing: 0.2em; }
.gt h2 { font-size: 48px; font-weight: 600; line-height: 1.2em; color: #121212; margin: 15px 0 35px;}
.gt p { font-size: 22px; padding-left: 150px; line-height: 1.6em; }
.history { background: url(../images/sub/hst-bg.jpg) center no-repeat; background-size: cover;}
.hst { position: relative; }
.hst::before { content: ""; position: absolute; left: 85px; top: 10px; background: #ccc; width: 1px; height: 100%; }
.hst .big { color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1.5em; font-weight: 700; width: 170px; height: 170px; margin: 0 0 20px; background: url(../images/sub/hst-logo-bg.png) center no-repeat; background-size: contain; position: relative; z-index: 1; }
.hst .group { width: 100%; position: relative; padding-left: 120px; z-index: 1; margin-bottom: 60px; }
/* .hst .group::before { content: ""; position: absolute; left: -10px; width: 20px; height: 20px; top: 7px; background: url(../images/sub/hst-dots.png) center no-repeat; background-size: contain; z-index: 2;} */
/* .hst .group::after { content: ""; position: absolute; left: 0; width: 60px; height: 1px; background: #ccc; top: 17px; } */
.hst .group .year { line-height: 1em; color: var(--color-primary); font-size: 32px; font-weight: 500; margin-bottom: 25px; letter-spacing: .03em;}
.hst .group p { color: #121212; line-height: 1.6em; margin-bottom: 12px; }
.hst .group p:last-child { margin-bottom: 0; }
.vs-list { display: flex; flex-wrap: wrap; gap: 20px; }
.vs-list li { width: calc(100%/2 - 10px); position: relative; }
.vs-list li img { width: 100%; }
.vs-list li .tit { position: absolute; left: 0; bottom: 0; line-height: 1em; color: #fff; font-weight: 600; background: linear-gradient(to left, var(--color-primary), var(--color-secondary)); padding: 15px 30px; }

/* 연구진소개 */
.rc { margin-top: 80px; }
.rc .row { display: flex; flex-wrap: wrap; gap: 20px; }
.rc .row .col { width: calc(100%/2 - 10px); border: 1px solid #ddd; padding: 35px 40px; min-height: 330px;}
.rc .row .col h3 { line-height: 1.2em; font-size: 24px; font-weight: 600; color: #121212; position: relative; }
.rc .row .col h3::after { content: ""; display: block; width: 30px; height: 3px; background: var(--color-primary); margin: 13px 0 25px;}
.rc .row .col p { position: relative; padding-left: 16px; margin-bottom: 12px; }
.rc .row .col p:last-child { margin-bottom: 0; }
.rc .row .col p::before { content: ""; position: absolute; left: 0; width: 6px; height: 6px; top: 11px; background: #ccc; border-radius: 6px; }
.rc .row .col p a { text-decoration: underline; text-underline-position: under; color: var(--color-primary);}

/* 채용정보 */
.rt .txt-wrap { padding: 80px 0; text-align: center; position: relative; margin-bottom: 60px; }
.rt .txt-wrap h2 { font-size: 40px; font-weight: 700; color: #121212; margin-bottom: 25px; line-height: 1.2em; }
[lang="en"] .rt .txt-wrap h2 { font-size: 30px; }
.rt .txt-wrap p { font-size: 24px; line-height: 1.5em; }
.rt .txt-wrap img {position: absolute; }
.rt .txt-wrap .dom-left { left: 0; top: 0; }
.rt .txt-wrap .dom-right { right: 0; bottom: 0; }
.rt-list { display: flex; flex-wrap: wrap; gap: 39px; }
.rt-list li { width: calc(100%/3 - 26px); text-align: center; }
.rt-list li img { width: 100%; }
.rt-list li .tit { line-height: 1em; font-size: 24px; font-weight: 600; color: #121212; margin: 25px 0 10px;}
.rt-list li .txt { line-height: 1.556em; }
.rt-list2 { display: flex; gap: 80px; flex-wrap: wrap;}
.rt-list2 li { width: calc(100%/5 - 64px); text-align: center; border-radius: 100%; border: 6px solid #7fadcf; height: 216px; padding-top: 40px; position: relative; }
.rt-list2 li::after { content: ""; position: absolute; right: -58px; top: 0; bottom: 0; margin: auto; width: 25px; height: 28px; background: url(../images/sub/sub1-3-right.png) center no-repeat; background-size: contain; }
.rt-list2 li:last-child::after { display: none; }
.rt-list2 li .tit { line-height: 1.2em; font-size: 16px; margin-top: 15px; color: #121212; font-weight: 600;}
.rt-list2 li .tit span { font-size: 14px; }
.rt-list2 li.clr2 { border-color: #689FC7;}
.rt-list2 li.clr3 { border-color: #518FBE;}
.rt-list2 li.clr4 { border-color: #3A81B6;}
.rt-list2 li.clr5 { border-color: #2272AD;}
.rt-list3 { border-top: 1px solid #121212; display: flex; flex-wrap: wrap;}
.rt-list3 li { width: calc(100%/2); padding: 45px 50px; display: flex; align-items: flex-start; min-height: 190px;}
.rt-list3 li.bg { background: #f9f9f9; }
.rt-list3 li .info { padding-left: 100px; }
.rt-list3 li .tit { font-size: 24px; font-weight: 600; color: #121212; line-height: 1.2em; margin-bottom: 15px; }
.rt-list3 li .txt { line-height: 1.556em; }
.rt-contact-btn { margin: 60px auto 30px; width: 200px; height: 60px; background: var(--color-primary); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; line-height: 1em; }
.rt-txt { text-align: center; color: #121212; }

/* 찾아오시는 길 */
.lct { margin: 35px 0 55px; display: flex; flex-wrap: wrap; }
.lct li { border-bottom: 1px solid #ddd; padding: 25px 0; display: flex; width: calc(100%/2); font-size: 18px; }
.lct li.bd { border: none; }
.lct li .tit { width: 90px; position: relative; font-weight: 600; color: #121212; padding-left: 15px; }
.lct li .tit::before { content: ""; position: absolute; left: 0; width: 6px; height: 6px; top: 9px; background: #ccc; border-radius: 6px; }
.lct li .txt { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 35px; }
.way { background: #f2f7fa; padding: 28px 30px; display: flex; font-size: 18px; }
.way .tit { width: 160px; position: relative; font-weight: 600; color: var(--color-primary); padding-left: 15px;}
.way .tit::before { content: ""; position: absolute; left: 0; width: 6px; height: 6px; top: 9px; background: #ccc; border-radius: 6px; }
.way .fx { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 35px; display: flex; gap: 68px; }
.way .fx span { position: relative; display: inline-block; }
.way .fx span::after { content: ""; position: absolute; width: 8px; height: 14px; top: 5px; right: -38px; background: url(../images/sub/lct-right.png) center no-repeat; background-size: contain; }
.way .fx span:last-child::after { display: none; }
.mapbox iframe { width: 100%; height: 650px; }
[lang="en"] .lct li { display: block; }
[lang="en"] .lct li .tit { width: 100%; }
[lang="en"] .lct li .txt { width: 100%; padding-left: 15px; margin-top: 15px; }
[lang="en"] .way .tit { width: 350px; }

/* 원천기술 소개 */
.tech-txt { font-size: 18px; line-height: 1.6em; margin: 45px 0 100px; }
.tech-tab { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 60px; }
.tech-tab li { width: calc(100%/2 - 5px); text-align: center;}
.tech-tab li a { display: flex; align-items: center; justify-content: center; background: #f4f4f4; font-size: 18px; font-weight: 600; height: 60px; }
.tech-tab li.active a { background: var(--color-primary); color: #fff; }
.tech-tab li a:hover { background: var(--color-primary); color: #fff; }
.tech-cnt .group { margin-bottom: 100px; }
.tech-cnt .group:last-child { margin-bottom: 0; }
.tech-cnt .group h4 { line-height: 1em; font-size: 20px; font-weight: 600; color: #121212; margin-bottom: 12px; }
.tech-cnt .group p { color: #121212; margin-bottom: 15px; line-height: 1.556em; }
.tech-cnt .group p strong { font-weight: 600; }
.tech-img { position: relative; text-align: center; }
.tech-img::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd;}

/* 지적재산권 */
.patent { display: flex; }
.patent .left { max-width: 220px; width: 100%; margin-right: 100px; }
.patent .left select.input { background: var(--color-primary) url(../images/sub/dropdown-ico.png) right 15px center no-repeat; border: none; color: #fff; padding: 10px 15px; margin-bottom: 10px; font-weight: 600; height: 50px; font-size: 16px;}
.patent .left .search { position: relative}
.patent .left .search .input { height: 50px; border: none; width: 100%; padding-right: 50px; background: #f4f4f4; border: 1px solid #ddd; font-size: 14px; }
.patent .left .search .input::placeholder { color: #878787; font-size: 14px; }
.patent .left .search button { position: absolute; right: 0; top: 0; width: 50px; height: 50px; background: transparent url(../images/main/vs-sch.png) center no-repeat; background-size: 24px; text-indent: -9999em; border: none; }
.patent .right { flex: 1 1 auto; min-width: 0; width: 1%;}
.patent-list li { margin-bottom: 20px; }
.patent-list li:last-child { margin-bottom: 0; }
.patent-list li a { display: flex; padding: 40px; position: relative; border: 1px solid #ddd; }
.patent-list li a::after { content: ""; position: absolute; right: 40px; top: 0; bottom: 0; margin: auto; width: 80px; height: 80px; border-radius: 100%; background: url(../images/sub/sub2-2-view.png) center no-repeat; background-size: 24px; transition: .2s;}
.patent-list li a .icon { width: 85px; height: 85px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.patent-list li a .icon.thesis { background-image: url(../images/sub/sub2-2-icon1.png);}
.patent-list li a .icon.patent { background-image: url(../images/sub/sub2-2-icon2.png);}
.patent-list li a .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 35px; padding-right: 85px; }
.patent-list li a .info .ctr { width: auto; height: auto; display: inline-block;  color: #fff; line-height: 1em; text-align: center; background: var(--color-primary); font-size: 12px; font-weight: 600; padding: 5px 10px;}

.patent-list li a .info .tit { font-weight: 600; color: #121212; font-size: 20px; margin: 10px 0; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.patent-list li a .info .fx { display: flex; }
.patent-list li a .info .fx strong { display: inline-block; color: #121212; font-weight: 600; font-size: 14px; margin-right: 15px; }
.patent-list li a .info .fx span { display: inline-block; flex: 1 1 auto; min-width: 0; width: 1%; font-weight: 400; color: #505050; font-size: 14px; }
.patent-list li a:hover { border-color: var(--color-primary); box-shadow: 0 5px 10px rgba(0,0,0,0.2);}
.patent-list li a:hover::after { background-color: var(--color-primary); background-image: url(../images/sub/sub2-2-view-w.png);}

/* 측정의뢰 */
.sub3-txt { font-size: 18px; line-height: 1.6em; }
.graybox { display: flex; justify-content: center; padding: 40px 15px; background: #f4f4f4; gap: 60px; text-align: center; margin-top: 40px; }
.graybox.mg { margin-bottom: 80px; }
.graybox .tit { text-align: center; margin-top: 15px; line-height: 1.5em; font-size: 18px; font-weight: 600; color: #121212; }
.sub3-txtbox p { position: relative; padding-left: 21px; font-size: 18px; line-height: 1.6em; margin-bottom: 10px; }
.sub3-txtbox.fz p { font-size: 16px; margin-bottom: 15px; }
.sub3-txtbox p:last-child { margin-bottom: 0; }
.sub3-txtbox p::before { content: ""; content: ""; position: absolute; left: 0; width: 6px; height: 6px; top: 11px; background: #ccc; border-radius: 6px; }
.sub3-txtbox.fz p::before { top: 10px; }
.sub3-txtbox p strong { font-weight: 600; color: #121212; }
.rq-list { display: flex; flex-wrap: wrap; gap: 20px; }
.rq-list li { width: calc(100%/4 - 15px); border: 1px solid var(--color-primary); padding: 40px 20px; }
.rq-list li .tit { line-height: 1em; font-weight: 700; font-size: 20px; color: #121212; margin-bottom: 15px; text-align: center; }
.rq-list li .img { text-align: center; }
.rq-list li .group { margin-top: 25px; }
.rq-list li .group .num { font-size: 18px; font-weight: 600; color: #121212; margin-bottom: 5px; }
.rq-list li .group .txt { font-size: 14px; color: var(--color-primary); position: relative; padding-left: 28px; }
.rq-list li .group .txt::before { content: ""; position: absolute; left: 0; width: 20px; height: 20px; background: url(../images/sub/sub3-1-view.png) center no-repeat; background-size: contain; top: 0; bottom: 0; margin: auto;}

/* 연구위탁 */
.cs-group { margin-top: 100px; }
.cs-group h3 { font-size: 20px; font-weight: 600; color: #121212; margin-bottom: 25px; }
.cs-list { display: flex; flex-wrap: wrap; gap: 60px; margin: 10px 0 20px; }
.cs-list li { width: calc(100%/4 - 45px); text-align: center; position: relative; color: #fff; padding: 20px 10px 17px; background: #689fc7;}
.cs-list li::after { content: ""; position: absolute; right: -38px; width: 14px; height: 16px; top: 0; bottom: 0; margin: auto; background: url(../images/sub/sub3-2-right.png) center no-repeat; background-size: contain; }
.cs-list li:last-child::after { display: none; }
.cs-list li .step { font-size: 14px; font-weight: 700; line-height: 1em; margin-bottom: 8px; }
.cs-list li .tit { font-weight: 400; line-height: 1.4em;}
.cs-list li.clr2 { background: #518FBE;}
.cs-list li.clr3 { background: #3A81B6;}
.cs-list li.clr4 { background: #2272AD;}
.cs-box { margin-top: 40px; }
.cs-box h5 { color: #878787; margin-bottom: 20px; line-height: 1.4em; font-size: 14px; font-weight: 400;}
.cs-box h5 strong { font-size: 16px; font-weight: 600; color: var(--color-primary);}
.op-list { display: flex; flex-wrap: wrap; gap: 30px 10px; }
.op-list li { width: calc(100%/6 - 9px); text-align: center; font-size: 14px; font-weight: 600; }
.op-list li .thumb { text-align: center; position: relative; margin-bottom: 10px; }
.op-list li .thumb::before { content: ""; position: absolute;left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd;}

/* 제품 - 분광모듈 */
.pd-big { position: relative; text-align: center; margin-top: 20px; }
.pd-big::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd;}
.pd-tbl-wrap { overflow: auto;}
.pd-tbl { border-collapse: collapse; width: 100%; border-top: 1px solid #121212;}
.pd-tbl tr { border-bottom: 1px solid #ddd; }
.pd-tbl tr th { background: #eee; font-weight: 600; color: #121212; line-height: 1.2em; padding: 18px 10px;font-size: 16px; }
.pd-tbl tr td { text-align: center; border-right: 1px solid #ddd; font-size: 14px; font-weight: 400; line-height: 1.2em; padding: 16px 10px; height: 60px; }
.pd-tbl tr td:last-child { border-right: none; }
.pd-tbl tr td.bd { border-right: 1px solid #ddd;}
.pd-tbl tr td.fw { font-weight: 600; background: #f9f9f9; color: #121212; }
.pd-tbl tr td.fw a:hover { text-decoration: underline; text-underline-position: under;}

/* 제품 - 분광모듈 상세 */
.pd-fx { display: flex; }
.pd-fx .image { max-width: 400px; width: 100%; margin-right: 80px; text-align: center;}
.pd-fx .image .thumb { position: relative; padding-bottom: 100%; overflow: hidden; display: block; margin-bottom: 20px; }
.pd-fx .image .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
.pd-fx .image .list-btn { background: var(--color-primary); color: #fff; font-weight: 600; line-height: 1em; padding: 8px 20px; display: inline-block; }
.pd-fx .info { flex: 1 1 auto; min-width: 0; width: 1%; display: flex; align-items: center; }
.pd-fx .info .cnt { width: 62%; padding-right: 20px; }
.pd-fx .info .cnt ul li { display: flex; margin-bottom: 22px; font-size: 18px; }
.pd-fx .info .cnt ul li:last-child { margin-bottom: 0; }
.pd-fx .info .cnt ul li .tit { color: #121212; font-weight: 600; width: 95px; }
.pd-fx .info .cnt ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; font-weight: 400; }
.pd-fx .info .document { width: 38%; background: #f4f4f4; }
.pd-fx .info .document h5 { text-align: center; color: #fff; background: #505050; font-size: 16px; font-weight: 600; padding: 15px 10px;}
.pd-fx .info .document .inner { border: 1px solid #ddd; border-top: none; padding: 15px 30px; }
.pd-fx .info .document .inner ul li { display: flex; border-bottom: 1px solid #ddd; padding: 15px 0;}
.pd-fx .info .document .inner ul li:last-child { border: none; }
.pd-fx .info .document .inner ul li .tit { flex: 1 1 auto; min-width: 0; width: 1%; color: #121212; }
.pd-fx .info .document .inner ul li a { width: 84px; height: 28px; display: flex; align-items: center; justify-content: center; background:var(--color-primary); color: #fff; line-height: 1em; font-size: 12px; font-weight: 500; }
[lang="en"] .pd-fx .info .cnt ul li .tit { width: 260px; }
[lang="en"] .pd-fx .info .document .inner ul li a { width: 80px; }

/* 제품 - 계측센서 */
.ss-list { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 35px; }
.ss-list li { width: calc(100%/3 - 14px); text-align: center; border: 1px solid #ddd;padding: 28px 10px; }
.ss-list li .tit { line-height: 1.556em; color: #121212; font-weight: 600; }
.ss-list li .tit span {color: var(--color-primary);}

/* 문의하기 */
.ct-wrap { padding: 33px 40px; background: #f4f4f4; }
.ct-wrap .inner { background: #fff; padding: 60px; }
.ct-wrap .inner .fx { display: flex; flex-wrap: wrap; gap: 60px 80px; }
.ct-wrap .inner .fx dl { width: calc(100%/2 - 40px); }
.ct-wrap .inner .fx dl dt { margin-bottom: 30px; line-height: 1em; font-size: 22px; font-weight: 600; color: #121212; }
.ct-wrap .inner .fx dl dt .required { background: var(--color-primary); width: 6px; height: 6px; border-radius: 6px; display: inline-block; margin-left: 5px; position: relative; top: -5px; }
.ct-wrap .inner .fx dl dd .input { border: none; border-bottom: 1px solid #ddd; height: 40px; padding: 6px 0; }
.ct-wrap .inner .fx dl dd .input::placeholder { color: #878787;}
.ct-wrap .inner .fx dl.w100 { width: 100%; }
.ct-wrap .item-fx { display: flex; flex-wrap: wrap; gap: 10px 50px;}
.ct-wrap .item-fx .radiobox label:before { width: 20px; height: 20px; background-color: transparent;}
.ct-wrap .item-fx .radiobox input:checked + label:before { background-image: url(../images/sub/radiobox.png); border: 1px solid var(--color-primary);}
.ct-wrap .file-upload .input { border: none !important;}
.ct-wrap .file-upload { position: relative; height: 50px; border-bottom: 1px solid #ddd; max-width: 560px;}
.ct-wrap .file-button {display:flex; justify-content:center; align-items:center; cursor: pointer; width: 64px; height: 28px; background: #f4f4f4; border: 1px solid #ddd; font-size: 12px; font-weight: 400; color: #505050; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; transition: .2s;}
.ct-wrap .file-button:hover {background:var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ct-wrap .file-name { padding-left: 75px; border: none; font-size: 13px; color: #121212; font-weight: 400; }
.ct-wrap .inner .captcha-wrap .input {max-width:400px; height: 50px !important; width: 100%; }
[lang="en"] .ct-wrap .file-button { width: auto; padding: 0 7px;}
[lang="en"] .ct-wrap .file-name { padding-left: 95px;}