@charset "utf-8";
/* 공통 */
.sub-tab { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 60px; gap: 20px;}
.sub-tab li { width: 150px; height: 45px; display: flex; border-radius: 23px; align-items: center; justify-content: center; border: 1px solid #009dff; color: #009dff; font-size: var(--font-size-18); font-weight: 500; letter-spacing: -.03em; line-height: 1em; }
.sub-tab li a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.sub-tab li.active { background: #009dff; color: #fff;}
.sub-tab.auto { margin-top: 60px; }
.sub-tab.auto li { width: auto; }
.sub-tab.auto li a { padding: 0 44px;}
.subtit { font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1em; position: relative; color: #242424; padding-left: 30px; padding-bottom: 30px;}
.subtit::before { content: ""; position: absolute; left: 0; width: 20px; height: 20px; background: url(../images/sub/tit-bf.png) center no-repeat; background-size: contain; }
.subtit.bd { border-bottom: 1px solid #ddd;}
.subbox { margin-bottom: 100px;}
.subbox.mg { margin-bottom: 0; }
.subbox.mg2 { margin-bottom: 55px;}
.subtit2 { font-size: var(--font-size-30); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424; text-align: center; margin-bottom: 60px;}

/* 대표인사 */
.gt-txtbox { position: relative; padding-top: 45px;}
.gt-txtbox .ab-txt { position: absolute; right: -5px; top: -22px; font-size: 150px; font-weight: 900; color: rgba(0,0,0,0.03); line-height: 1em; z-index: -1;}
.gt-txtbox h2 { font-size: var(--font-size-40); font-weight: 500; line-height: 1.2em; letter-spacing: -.03em; color: #242424; margin-bottom: 40px;}
.gt-txtbox h2 span { color: #00316d; font-weight: 700; }
.gt-txtbox h3 { line-height: 1.4em; font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: #454545;}
.gt-txtbox p { font-size: var(--font-size-20); font-weight: 400; line-height: 1.5em; letter-spacing: -.03em; color: #454545; margin-top: 28px;}
.gt-txtbox .sign { display: flex; align-items: center; margin-top: 30px;}
.gt-txtbox .sign strong { display: inline-block; line-height: 1em; font-size: var(--font-size-18); font-weight: 600; letter-spacing: -.03em; color: #242424; padding-right: 30px;}

/* 연혁 */
.history {position:relative;}
.history .group {position:relative;}
.history .group:before {content:""; position:absolute; top:15px; height:100%; left:50%; bottom:0; width:1px; border:1px dashed #ddd; opacity:0.7;}
.history .group:last-child:before {display:none;}
.history .group .inner {position:relative; padding-bottom:70px;}
.history .group .bullet:after {position:absolute; content:""; width:26px; height:26px; top:30px; margin-top:-22px; left:50%; margin-left:-12px; background:url("../images/sub/dots.png")50% 50% no-repeat; background-size:contain;}
.history .group h3 {position:relative; color:#0e3c71; font-size:var(--font-size-40); letter-spacing:0; line-height:1.3em; font-weight:700; text-align:left; margin-bottom:30px; letter-spacing: -.02em;} 
.history .group ul {margin-bottom:-12px;}
.history .group ul li {display:flex; position:relative; color:#454545; font-size:var(--font-size-18); font-weight:400; line-height:1.75em; letter-spacing:-.02em; margin-bottom: 30px;}
.history .group ul li:last-child { margin-bottom: 0;}
.history .group ul li .month { font-size: var(--font-size-18); font-weight: 600; letter-spacing: -.02em; line-height: 1.75em; color: #242424;}
.history .group ul li p { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 10px;}
.history .group:last-child {padding-bottom:0;}
.history .group:first-child {margin-top:75px;}
.history .group:nth-child(odd) .inner {margin-left:50%; padding-left:50px;}
.history .group:nth-child(odd) .bullet:after {left:0;}
.history .group:nth-child(odd) .bullet:before {left:0;}
.history .group:nth-child(odd) p {font-size:var(--font-size-18); line-height:1.778em; color:#454545;}
.history .group:nth-child(even) h3 {text-align:right;}
.history .group:nth-child(even) p {font-size:var(--font-size-18); line-height:1.778em; color:#454545;}
.history .group:nth-child(even) {text-align:right;}
.history .group:nth-child(even) .inner {flex-direction:row-reverse; margin-right:50%; padding-right:50px;} 
.history .group:nth-child(even) .bullet:after {left:100%;}
.history .group:nth-child(even) .bullet:before {right:0}
.history .group:nth-child(even) ul li {flex-direction: row-reverse; }
.history .group:nth-child(even) ul li p { padding-left: 0; padding-right: 10px;}
.history .group .sb {color:#878787;}

/* 오시는 길 */
.lct-list { display: flex; border: 1px solid #ddd; border-top: none; margin-top: -10px;}
.lct-list li { width: calc(100%/3); border-right: 1px dashed #ddd; padding: 50px; position: relative; }
.lct-list li:last-child { border-right: none;}
.lct-list li .clr-tit { font-size: var(--font-size-18); font-weight: 700; letter-spacing: -.03em; line-height: 1em; color: #009dff; margin-bottom: 20px;}
.lct-list li .tit { line-height: 1.2em; font-size: var(--font-size-24); font-weight: 600; letter-spacing: -.03em; color: #242424; }
.lct-list li img { position: absolute; right: 0; bottom: 0;  z-index: -1;}

/* 파트너십 */
.pt-box { height: 790px; position: relative;}
.pt-box .map { z-index: -1; position: relative;}
.pt-pc { display: block;}
.pt-mobile { display: none;}
.pt-abbox { width: 220px; position: absolute;}
.pt-abbox h3 { color: #fff; font-size: 17px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; text-align: center; padding: 8px 5px; background: #0e3c71; border-radius: 20px 20px 0 0;}
.pt-abbox .txtbox { padding: 18px 20px; font-size: var(--font-size-14); line-height: 1.5em; letter-spacing: -.04em; font-weight: 500; color: #454545; background: #f8f8f8; border-radius: 0 0 20px 20px; word-break: break-all;}
.pt-abbox.pos1 { right: 0; top: 0;}
.pt-abbox.pos1::before { content: ""; position: absolute; width: 510px; height: 172px; background: url(../images/sub/sub1-5-line1.png) center no-repeat; background-size: contain; left: -510px; top: 40px; z-index: 111;}
.pt-abbox.pos2 { right: 6%; top: 37%; z-index: 1;}
.pt-abbox.pos2::before { content: ""; position: absolute; width: 450px; height: 36px; background: url(../images/sub/sub1-5-line2.png) center no-repeat; background-size: contain; left: -390px; top: 10px; z-index: 111;}
.pt-abbox.pos3 { bottom: 0; right: 28%;}
.pt-abbox.pos3 h3 { background: #009dff;}
.pt-abbox.pos3::before { content: ""; position: absolute; width: 124px; height: 131px; background: url(../images/sub/sub1-5-line3.png) center no-repeat; background-size: contain; left: -124px; top: -100px; }
.pn-sec2 { margin-top: 100px; padding: 100px 0; background: #f8f8f8;}
.pn-list { display: flex; gap: 30px; flex-wrap: wrap;}
.pn-list li { width: calc(100%/4 - 23px); text-align: center;}
.pn-list li a { display: block; position: relative; width: 100%; pointer-events: none;}
.pn-list li .thumb {position:relative; padding-bottom:30%; overflow:hidden; border-radius: 10px;}
.pn-list li .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:contain;}
.pn-list li .thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd; border-radius: 10px;}
.pn-list li .txt { margin-top: 15px; font-size: var(--font-size-18); font-weight: 400; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}

/* 성선줄기세포 대량 배양 및 보관 */
.sub2-txt { font-size: var(--font-size-20); font-weight: 500; letter-spacing: -.03em; line-height: 1.6em; color: #242424; margin-bottom: 50px; text-align: center;}
.sub2-img { text-align: center; }
.tp-list1 { display: flex; margin-top: 80px; gap: 30px; margin-bottom: 100px;}
.tp-list1 li { width: calc(100%/4 - 23px); text-align: center; position: relative; border: 1px solid #009dff;padding: 30px 20px; height: 250px; display: flex; align-items: center; justify-content: center; border-radius: 20px; }
.tp-list1 li .txt { line-height: 1.6em; font-size: var(--font-size-18); font-weight: 500; letter-spacing: -.03em; color: #454545; }
.tp-list1 li .num { position: absolute; left: 0; right: 0; margin: auto; width: 120px; height: 40px; top: -20px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #fff; line-height: 1em; font-size: 22px; font-weight: 700; letter-spacing: -.03em; background: #009dff;}
.tp-list1 li .num2 { font-size: 100px; position: absolute; right: 0; bottom: -10px; font-weight: 800; line-height: 1em; letter-spacing: -.03em; color: #eef6ff;  z-index: -1;}
.tp-list1 li.clr2 { border: 1px solid #007fe1;}
.tp-list1 li.clr2 .num { background: #007fe1;}
.tp-list1 li.clr2 .num2 { color: #eef4fc;}
.tp-list1 li.clr3 { border: 1px solid #0048a1;}
.tp-list1 li.clr3 .num { background: #0048a1;}
.tp-list1 li.clr3 .num2 { color: #eef1f6;}
.tp-list1 li.clr4 { border: 1px solid #00316d;}
.tp-list1 li.clr4 .num { background: #00316d;}
.tp-list1 li.clr4 .num2 { color: #eef0f3;}
.tp1-img { display: flex; gap: 33px; align-items: flex-start; margin-bottom: 100px; flex-wrap: wrap;}
.tp1-img img { display: inline-block; }

/* Real-time PCR 기반 중간엽줄기세포 항염증능 측정 키트 생산 */
.tp2-sec2 { background: #f8f8f8; padding: 100px 0; margin-top: 70px;}
.tp2-box { display: flex; gap: 20px;}
.tp2-left { width: 100%; display: flex; gap: 20px;}
.tp2-left>div { width: 31%;}
.tp2-left>div:last-child { width: 21%; margin-left: 13%; position: relative;}
.tp2-left>div:last-child::before { content: ""; position: absolute; left: -150px; top: 120px; width: 122px; height: 68px; background: url(../images/sub/sub2-2-right.png) center no-repeat; background-size: contain;}
.tp2-listbox h3 { font-size: var(--font-size-20); font-weight: 600; line-height: 1.2em; color: #fff; background: #00316d; text-align: center; padding: 15px 5px; height: 80px; display: flex; align-items: center; justify-content: center;}

/* 하이테크 반려동물 진단 기술 */
.tp-list3 { display: flex; margin-top: 120px; gap: 30px; flex-wrap: wrap;}
.tp-list3 li { width: calc(100%/3 - 20px); text-align: center; background: #fff; position: relative; padding: 20px; padding-top: 95px;}
.tp-list3 li .tit { display: inline-table; position: absolute; top: -25px; border-radius: 25px; color: #fff; padding: 14px 30px; font-size: var(--font-size-18); font-weight: 600; letter-spacing: -.03em; line-height: 1.25em; background: #00316d; z-index: 1; left: 0; right: 0; margin: auto; z-index: 2;}
.tp-list3 li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #00316d; border-radius: 20px;}
.tp-list3 li.pop { box-shadow: 0 0 20px rgba(0,0,0,0.1); border-radius: 20px; padding: 0; padding-top: 0;}
.tp-list3 li.pop a { padding: 50px; display: block; position: relative;}
.tp-list3 li.pop a::after {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #00316d; border-radius: 20px; z-index: 1;}
.tp-list3 li.clr3 { padding: 40px; padding-top: 95px;}
.tp-list3 li.clr3 .tit { border-radius: 40px;}
.tp-list3 li .txtbox p { line-height: 1.5em; letter-spacing: -.03em; position: relative; color: #454545; font-weight: 400; padding-left: 10px; text-align: left; margin-bottom: 4px;}
.tp-list3 li .txtbox p::before { content: ""; position: absolute; left: 0; top: 9px; width: 3px; height: 3px; border-radius: 100%; background: #00316d;}

/* sub3-1 공통 */
.sub3-tab { display: flex; border: 1px solid #ddd; margin-bottom: 100px;}
.sub3-tab li { flex: 1; border-right: 1px solid #ddd;}
.sub3-tab li:last-child { border-right: none;}
.sub3-tab li a { display: flex; align-items: center; justify-content: center; height: 60px; text-align: center; font-size: 17px; line-height: 1.2em; font-weight: 500; letter-spacing: -.03em; color: #929292;}
.sub3-tab li.active { border-right: 1px solid #00316d; background: #00316d;}
.sub3-tab li.active a { color: #fff; }
.sub3-txtbox { text-align: center; padding: 30px 10px; border: 1px solid #00316d; border-radius: 10px; margin-bottom: 60px;}
.sub3-txtbox h2 { font-size: var(--font-size-30); font-weight: 600; letter-spacing: -.03em; line-height: 1.3em; color: #00316d; margin-bottom: 12px;}
.sub3-txtbox p { line-height: 1.5em; font-size: var(--font-size-18); font-weight: 300; letter-spacing: -.03em; color: #00316d; }
.sub3-img { text-align: center; margin-bottom: 60px;}
.sub3-box { display: flex; align-items: center; border-radius: 15px; background: #009dff; position: relative; overflow: hidden;}
.sub3-left { width: 51.5%; padding-left: 50px; padding-right: 30px; color: #fff; }
.sub3-right { width: 48.5%; background: #fff; text-align: center; padding: 45px 30px; border: 1px solid #009dff; border-radius: 0 15px 15px 0;}
.sub3-info { padding-left: 33px; position: relative; z-index: 1;}
.sub3-info::before { content: ""; position: absolute; left: 0; width: 24px; height: 24px; background: url(../images/sub/sub3-1-1-sch.png) center no-repeat; background-size: contain; top: 1px;}  
.sub3-info h3 { font-size: var(--font-size-24); line-height: 1.25em; font-weight: 600; letter-spacing: -.03em; margin-bottom: 22px;}
.sub3-info p { line-height: 1.5em; font-size: var(--font-size-18); font-weight: 300; letter-spacing: -.03em;}
.sub3-sb { position: absolute; left: 25%; bottom: 0; z-index:0;}
.sub3-span { z-index: 1; position: relative; }
.sub3-span span { font-size: var(--font-size-18); line-height: 1.5em; font-weight: 300; letter-spacing: -.03em; position: relative; padding-left: 14px; display: block; margin-bottom: 8px;}
.sub3-span span:last-child { margin-bottom: 0;}
.sub3-span span::before { content: ""; position: absolute; left: 0; width: 3px; height: 3px; border-radius: 100%; background: #fff; top:11px;}
.sub3-right p { text-align: center; margin-top: 10px; line-height: 1.5em; font-size: var(--font-size-18); font-weight: 400; letter-spacing: -.03em; color: #00316d;}
.sub3-pd { padding: 0;}
.sub3-span span p { font-size: var(--font-size-18); font-weight: 300; letter-spacing: -.03em; margin-top: 5px;}

/* 유세포 분석 지원 서비스 */
.cell-sec1 { padding-bottom: 100px;}
.cell-sec2 { background: #f8f8f8; padding: 100px 0; }
.cell-img { text-align: center; position: relative; background: #fff; border-radius: 15px; text-align: center; padding: 35px 10px; border: 1px solid #ddd;}
.cell-sec3 { text-align: center; padding-top: 100px;}
.cell-sec3 h2 { font-size: var(--font-size-40); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; margin-bottom: 20px; color: #242424;}
.cell-sec3 p { font-size: var(--font-size-18); font-weight: 300; letter-spacing: -.03em; line-height: 1.5em; color: #454545; margin-bottom: 55px;}
.cell-tbl-wrap { margin-top: 60px; overflow: auto;}
.cell-tbl { width: 100%; border-collapse: collapse; border-top: 2px solid #242424; text-align: center;}
.cell-tbl tr {border-bottom: 1px solid #ddd;}
.cell-tbl tr th { border-right: 1px solid #ddd; font-size: var(--font-size-18); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424; background: #f8f8f8; padding: 18px 5px;}
.cell-tbl tr th:last-child { border-right: none;}
.cell-tbl tr td { border-right: 1px solid #ddd; font-weight: 300; letter-spacing: -.03em; line-height: 1.2em; color: #454545; padding: 18px 5px;}
.cell-tbl tr td:last-child { border-right: none;}
.cell-tbl tr td.fw { color: #242424; font-weight: 600; font-size: var(--font-size-18); }
.cell-tbl tr td.tl { text-align: left; padding-left: 20px;}

/* sub3-2 공통 */
.vitro-box { padding-left: 30px; padding-top: 25px;}
.vitro-box h3 { font-size: var(--font-size-18); font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; color: #242424; margin-bottom: 25px;}
.vitro-box p { font-weight: 400; letter-spacing: -.03em; line-height: 1.5em; margin-bottom: 5px; color: #454545; position: relative; padding-left: 12px;}
.vitro-box p::before { content: ""; position: absolute; left: 0; width: 4px; height: 4px; border-radius: 100%; background: #00316d; top: 9px;}
.vitro-txtbox { margin-bottom: 35px;}
.vitro-fx { display: flex; gap: 30px; flex-wrap: wrap;}
.vitro-fx>div { width: calc(100%/2 - 15px); border-radius: 15px; overflow: hidden; border: 1px solid #ddd;}
.vitro-fx>div h4 { text-align: center; background: #009dff; text-align: center; font-size: 22px; font-weight: 600; line-height: 1.2em; letter-spacing: -.03em; color: #fff; padding: 16px 5px;}
.vt-txtbox { padding: 35px; border-bottom: 1px dashed #ddd;}
.vt-txtbox h5 { font-size: var(--font-size-18); font-weight: 500; letter-spacing: -.03em; line-height: 1.5em; color: #242424; margin-bottom: 20px;}
.vt-txtbox .txtbox p {font-weight: 400; letter-spacing: -.03em; line-height: 1.5em; margin-bottom: 5px; color: #454545; position: relative; padding-left: 12px;}
.vt-txtbox .txtbox p:last-child { margin-bottom: 0;}
.vt-txtbox .txtbox p::before { content: ""; position: absolute; left: 0; width: 4px; height: 4px; border-radius: 100%; background: #009dff; top: 9px;}
.vt-img { text-align: center; padding: 30px 5px; display: flex; align-items: center; justify-content: center;}
.vt-img.pd { padding: 0;}
.vitro-fx>div.clr h4 { background: #00316d;}
.vitro-fx>div.clr .vt-txtbox { padding-bottom: 71px;}
.vitro-fx>div.clr .txtbox p::before { background: #00316d;}
.mc-fx .txtbox p { font-size: var(--font-size-18); font-weight: 500; color: #242424;}
.mc-fx .txtbox p::before { top: 11px;}
.mc-fx .txtbox p span { font-weight: 400; color: #454545; display: inline-block; padding-left: 20px;}
.mc-fx>div.clr .vt-txtbox { padding-bottom: 27px;}
.mc-fx .vt-img.pd { padding: 45px 5px;}

/* 화장품 유효성 평가 */
.cm-box { display: flex; gap: 30px; flex-wrap: wrap;}
.cm-box>div { width: calc(100%/2 - 15px); }
.cm-list li { padding: 45px 0; display: flex; border-bottom: 1px dashed #ddd;}
.cm-list li:first-child { padding-top: 0;}
.cm-list li:last-child { border: none; padding-bottom: 0;}
.cm-list li .num { width: 30px; height: 30px; border-radius: 100%; background: #00316d; display: flex; align-items: center; justify-content: center; color: #fff; line-height: 1em; font-weight: 700; letter-spacing: -.03em; }
.cm-list li .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 18px;} 
.cm-list li .txtbox.fx { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;}
.cm-list li .txtbox .tit { font-size: var(--font-size-24); font-weight: 600; letter-spacing: -.03em; line-height: 1.25em; color: #242424; margin-bottom: 20px;}
.cm-list li .txtbox .tit span { font-size: var(--font-size-20); font-weight: 500;}
.cm-list li .txtbox .txt { font-size: var(--font-size-18); font-weight: 400; letter-spacing: -.03em; line-height: 1.5em; color: #454545;}
.cm-list li .txtbox .txt2 { font-size: var(--font-size-20);}
.cm-list li .txtbox .txtin { margin-top: 20px;}
.cm-list li .txtbox .txtin p { font-weight: 400; letter-spacing: -.03em; line-height: 1.5em; margin-bottom: 5px; color: #454545; position: relative; padding-left: 12px;}
.cm-list li .txtbox .txtin p::before { content: ""; position: absolute; left: 0; width: 4px; height: 4px; border-radius: 100%; background: #00316d; top: 11px;}
.cm-right { border: 1px solid #ddd; border-radius: 15px; text-align: center; padding: 20px 5px;}
.cm-right img { margin-bottom: 25px;}
.cm-list li .txtbox.fx .imgbox { width: 800px; text-align: center; padding: 25px 5px; border: 1px solid #ddd; border-radius: 15px;}

/* 인간화 마우스를 이용한 면역항암제 효능평가 */
.ms-sec1 { padding-bottom: 100px;}
.ms-sec1 h2 { font-size: var(--font-size-40); font-weight: 600; line-height: 1.2em; letter-spacing: -.03em; color: #242424; margin-bottom: 55px; text-align: center;} 
.ms-sec1-box { border: 1px solid #00b1a9; border-radius: 10px; text-align: center; padding: 30px 0; margin-bottom: 60px;}
.ms-sec1-box h3 { font-size: 26px; font-weight: 600; letter-spacing: -.03em; margin: 25px 0; color: #242424; line-height: 1.2em;}
.ms-sec1-box h3 span { color: #00b1a9;}
.ms-sec1-box p { font-size: var(--font-size-18); font-weight: 400; letter-spacing: -.03em; line-height: 1.2em; color: #454545;}
.ms-sec1-list li { border: 1px solid #ccefee; display: flex; border-radius: 33px; padding: 7px; margin-bottom: 30px; align-items: center;}
.ms-sec1-list li:last-child { margin-bottom: 0;}
.ms-sec1-list li .num { width: 50px; height: 50px; border-radius: 100%; background: #00b1a9; display: flex; align-items: center; justify-content: center ; color: #fff; font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1em; }
.ms-sec1-list li .txt { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 19px; line-height: 1.4em; letter-spacing: -.03em; color: #454545; font-weight: 400; padding-top: 4px;}
.ms-sec2 h2 { font-size: var(--font-size-40); line-height: 1.2em; font-weight: 600; color: #242424; letter-spacing: -.03em; text-align: center; }
.ms-sec2 h2 span { color: #1ab9b2;}
.ms-sec2 .cell-tbl { border: none;}
.ms-sec2 .cell-tbl tr th { background: #1ab9b2; color: #fff;}
.ms-sec2 .cell-tbl tr td { background: #fff; }
.ms-sec2 .cell-tbl tr td.fw { color: #1ab9b2; line-height: 1.5em;}
.ms-sec2 .cell-tbl tr td.tl p { position: relative; padding-left: 11px; }
.ms-sec2 .cell-tbl tr td.tl p::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 100%; background: #1ab9b2;}

/* 동물용 의약품 */
.am-sec1 { padding-bottom: 100px;}
.am-box { display: flex; align-items: center; gap: 30px;}
.am-box>div { width: calc(100%/2 - 15px);}
.am-left { border-radius: 15px; overflow: hidden;}
.am-right { padding-left: 30px;}
.am-right p { font-size: var(--font-size-18); line-height: 1.5em; letter-spacing: -.03em; font-weight: 400; color: #454545; margin-bottom: 25px; position: relative; padding-left: 12px;}
.am-right p::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 100%; background: #00316d;}
.am-right p:last-child { margin-bottom: 0; }
.am-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 55px 0; margin-top: 50px;}
.am-list li { width: calc(100%/4); text-align: center;}
.am-list li .circle { width: 180px; height: 180px; background: #fff; display: flex; align-items: center; justify-content: center; border-radius: 100%; border: 6px solid #00316d;  margin: auto; position: relative;}
.am-list li .circle .step { display: block; line-height: 1em; font-size: var(--font-size-14); font-weight: 500; letter-spacing: -.03em; color: #009dff; margin-bottom: 13px; text-align: center;}
.am-list li .circle .tit { font-size: var(--font-size-20); font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.am-list li .circle.af::after { display: none;}
.am-list li .circle::after { content: ""; position: absolute; width: 17px; height: 28px; background: url(../images/sub/sub3-4-1-right.png) center no-repeat; background-size: contain; top: 0; bottom: 0; margin: auto; right: -45%;}
.am-list li .txt { font-weight: 400; letter-spacing: -.03em; line-height: 1.5em; color: #454545; margin-top: 25px;}

/* 반려동물 기능성 용품에 대한 필드 테스트 대행 */
.ts-txt { font-size: var(--font-size-20); font-weight: 500; letter-spacing: -.03em; line-height: 1.6em; color: #242424; margin-bottom: 55px; text-align: center;}
.ts-box img { border-radius: 15px;}
.ts-list { display: flex; flex-wrap: wrap; gap: 0;}
.ts-list li { width: calc(100%/2 - 5px); display: flex; padding: 60px 0; border-bottom: 1px dashed #ddd;}
.ts-list li.bd { border:none;}
.ts-list li .circle { width: 160px; height: 160px; border-radius: 100%; display: flex; align-items: center; justify-content: center; border: 7px solid #00316d;}
.ts-list li .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 45px; padding-top: 18px;} 
.ts-list li .txtbox .tit { font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: #242424; line-height: 1.2em; margin-bottom: 22px;}
.ts-list li .txtbox .txt p { position: relative; padding-left: 12px; font-weight: 400; letter-spacing: -.03em; color: #454545; line-height: 1.5em; margin-bottom: 5px;}
.ts-list li .txtbox .txt p::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 100%; background: #00316d;}
.ts-list li .txtbox .txt p:last-child { margin-bottom: 0;}

/* biocytogen */
.bt-sec1 { padding-bottom: 100px; }
.bt-sec1.pb { padding-bottom: 0; }
.bt-sec1-txtbox {border: 1px solid #ddd; text-align: center; border-radius: 10px; padding: 25px 5px; margin-bottom: 100px;}
.bt-sec1-txtbox h3 { font-size: var(--font-size-20); font-weight: 600; letter-spacing: -.03em; line-height: 1.4em; color: #242424; margin-bottom: 13px;}
.bt-sec1-txtbox h3 span { color: #00b1a9;}
.bt-sec1-txtbox p { font-size: 17px; line-height: 1.5em; letter-spacing: -.03em; font-weight: 400; color: #454545;}
.bt-sec2 { text-align: center;}
.bt-sec2 h2 { margin-bottom: 60px;}
.bt-sec3 { text-align: left;}
.bt-sec3 h2 { margin-bottom: 60px; text-align: center;}
.bt-tblbox { margin-bottom: 60px;}
.bt-tblbox.mg { margin-bottom: 0; }
.bt-tblbox .cell-tbl { border: none;}
.bt-tblbox .cell-tbl-wrap { margin-top: 0;}
.bt-tblbox .cell-tbl tr th { background: #1ab9b2; color: #fff; font-size: 22px;}
.cell-tbl tr th span { font-size: 16px; line-height: 1.2em; display: block; }
.bt-tblbox .cell-tbl tr td { border-right: none; }
.bt-tblbox .cell-tbl.tbl1 tr td { border-right: 1px solid #ddd; font-weight: 500; line-height: 1.5em; }
.bt-tblbox .cell-tbl.tbl1 tr td:last-child { border: none; }
.bt-tblbox .cell-tbl.tbl1 tr td.left { text-align: left; padding-left: 20px; color: #242424; font-weight: 600; }
.bt-tbl-inbox .tit{ font-size: 22px; text-align: center; background: #1ab9b2; color: #fff; line-height: 1.2em; padding: 18px 5px; font-weight: 600; letter-spacing: -.03em; display: flex; align-items: center; justify-content: center;}
.bt-tbl-imgbox { border: 1px solid #ddd; border-top: none; text-align: center; padding: 25px 0;}
.bt-tbl-inbox .tit2>div { width: calc(100%/2); position: relative;}
.bt-tbl-inbox .tit2 { position: relative;}
.bt-tbl-inbox .tit2::after { content: ""; position: absolute; left: 0; right: 0; top: 0; width: 2px; height: 100%; background: #fff; margin: auto;}

/* assessment */
.as-txtbox { display: flex; margin-bottom: 100px;}
.as-txtbox h2 { font-size: 28px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; color: #00316d; width: 240px; border-right: 2px solid #00316d;}
.as-txtbox h2 span { font-weight: 700; }
.as-txtbox .txt { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 65px; font-size: var(--font-size-18); line-height: 1.666em; letter-spacing: -.03em; color: #454545; font-weight: 400; padding-top: 10px;}   
.as-fx { display: flex; gap: 30px; flex-wrap: wrap;}
.as-fx>div { width: calc(100%/2 - 15px); border-radius: 15px; overflow: hidden; border: 1px solid #00316d;}
.as-fx>div h4 { text-align: center; background: #00316d; text-align: center; font-size: 22px; font-weight: 600; line-height: 1.2em; letter-spacing: -.03em; color: #fff; padding: 16px 5px;} 
.as-fx>div.clr { border: 1px solid #009dff;}
.as-fx>div.clr h4 { background: #009dff;}
.as-fx>div .txtbox { padding: 35px 40px;}
.as-fx>div .txtbox .text { margin-bottom: 30px; padding-left: 14px; position: relative;}
.as-fx>div .txtbox .text::before { content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 100%; background: #00316d;}
.as-fx>div .txtbox .text:last-child { margin-bottom: 0; }
.as-fx>div .txtbox .text h5 { font-size: var(--font-size-18); font-weight: 500; letter-spacing: -.03em; line-height: 1.3em; margin-bottom: 12px; color: #242424; }
.as-fx>div .txtbox .text p { line-height: 1.556em; letter-spacing: -.03em; font-weight: 300; color: #454545; position: relative; padding-left: 10px;}
.as-fx>div .txtbox .text p::before { content: ""; position: absolute; width: 5px; height: 1px; background: #454545; left: 0; top: 11px;}
.as-box { border: 1px solid #ddd; border-radius: 10px; padding: 24px 10px; display: flex; align-items: center; }
.as-txt {line-height: 1.5em; color: #454545; letter-spacing: -.03em; font-weight: 400; margin-bottom: 15px;}
.as-box .imgbox {width: 180px; text-align: center; border-right: 1px solid #ddd;}
.as-box .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 45px; display: flex; flex-wrap: wrap; }
.as-list { display: flex; flex-wrap: wrap; gap: 8px 0; width: 100%;}
.as-list li { width: calc(100%/3); position: relative; padding-left: 14px; font-weight: 400; letter-spacing: -.03em; color: #454545; }
.as-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 100%; background: #00316d;}
.as-list li strong { font-weight: 600; display: inline-block; padding-right: 3px;}

/* CDMO service */
.cd-sec1 { text-align: center; padding-bottom: 100px;}
.cd-sec1-txtbox {border: 1px solid #ddd; text-align: center; border-radius: 10px; padding: 25px 5px; margin-bottom: 40px;}
.cd-sec1-txtbox p { font-size: var(--font-size-18); line-height: 1.5em; letter-spacing: -.03em; font-weight: 400; color: #454545; margin-top: 20px;}
.cd-sec1-txtbox p span { color: #2fb052; font-weight: 600;}
.cd-box { display: flex; align-items: center;}
.cd-left { width: 69%;}
.cd-list { display: flex; gap: 30px; flex-wrap: wrap;}
.cd-list li {width: calc(100%/2 - 15px);}
.cd-right { width: 31%; padding-left: 50px;}
.cd-right p { position: relative; font-size: var(--font-size-18); line-height: 2em; letter-spacing: -.03em; color: #454545; padding-left: 12px;}
.cd-right p::before { content: ""; position: absolute; left: 0; top: 15px; width: 4px; height: 4px; border-radius: 100%; background: #00316d;}
.cd-sec3 { padding-top: 100px;}

/* sub5 공통 */
.sub5-list { display: flex; flex-wrap: wrap; gap: 30px; }
.sub5-list li { width: calc(100%/2 - 15px); border: 1px solid #ddd; background: #fff; border-radius: 25px;  height: 300px;}
.sub5-list.fx li { width: calc(100%/3 - 20px);}
.sub5-list li a { display: block; padding: 30px 35px; position: relative; height: 100%; width: 100%;}
.sub5-list li .tit { font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: #242424; margin-bottom: 18px; line-height: 1.3em; }
.sub5-list li .txt { font-weight: 400; letter-spacing: -.03em; line-height: 1.5em; color: #686868;}
.sub5-list li img { position: absolute; left: 40px; bottom: 30px;}
.sub5-list li .view { position: absolute; right: 40px; bottom: 30px; width: 52px; height: 52px; border: 1px solid #009dff; background: url(../images/sub/sub5-1-right.png) center no-repeat; background-size: 21px; border-radius: 100%;}
.sub5-list li:hover{ border: 1px solid #009dff; box-shadow: 0 0 20px rgba(0,0,0,0.07);}
.sub5-list li:hover .view{ background: #009dff url(../images/sub/sub5-1-right-w.png) center no-repeat;}

/* ========== 20260420 유지보수 (신규페이지 제작 4건) =========== */

/* 유전자 편집 플랫폼 */
.gene-tit { font-size: var(--font-size-18); color: #242424; line-height: 1.55em; font-weight: 500; padding: 25px 0 35px 32px; letter-spacing: -.03em;}
.gene-chk { padding: 25px 40px; border-radius: 10px; background: #f8f8f8; margin-top: 35px; }
.gene-chk p { position: relative; padding-left: 24px; font-size: var(--font-size-18); line-height: 1.22em; font-weight: 500; margin-bottom: 8px; }
.gene-chk p::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; background: url(../images/sub/bt-chk.png) center no-repeat; background-size: contain;}
.gene-chk p:last-child { margin-bottom: 0;}
.gene-fx { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 100px; }
.gene-fx .col { width: calc(100%/2 - 10px); padding: 50px; border-radius: 30px; color: #fff; background: #009dff; position: relative; }
.gene-fx .col img { position: absolute; right: 50px; bottom: 50px; }
.gene-fx .col.bg2 { background: #00316e; }
.gene-fx .col .info .num { line-height: 1em; font-size: 70px; font-weight: 700; letter-spacing: -.03em; }
.gene-fx .col .info h5 { font-size: var(--font-size-20); font-weight: 500; line-height: 1.5em; margin: 30px 0;}
.gene-fx .col .info .txt p { position: relative; padding-left: 12px; font-weight: 500; line-height: 1.5em; }
.gene-fx .col .info .txt p::before { width: 4px; height: 4px; border-radius: 4px; background: #fff; content: ""; position: absolute; left: 0; top: 9px; }

/* 다양한 인간화 마우스·세포주 모델 */
.mouse-list { display: flex; flex-wrap: wrap; gap: 20px 30px;}
.mouse-list li { width: calc(100%/3 - 20px); border-radius: 20px; background: #fff; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10); display: flex; justify-content: space-between; align-items: center; padding: 34px 40px;}
.mouse-list li .tt { font-size: var(--font-size-18); line-height: 1.66em; font-weight: 500; color: #242424; letter-spacing: -.03em;}
.mouse-list li .num { font-size: 32px; font-weight: 800; line-height: 1.31em; color: #009dff; letter-spacing: -.03em;}
.mouse-wrap { display: flex; flex-wrap: wrap; margin-top: 30px; gap: 30px; }
.mouse-wrap .col { width: calc(100%/3 - 20px); padding: 40px 10px; text-align: center; border-radius: 30px 30px 0 30px; background: #e6f6ff;}
.mouse-wrap .col h4 { font-size: var(--font-size-18); line-height: 1.66em; color: #242424; font-weight: 500; margin: 20px 0 10px; letter-spacing: -.03em;}
.mouse-wrap .col h3 { font-size: 32px; font-weight: 800; line-height: 1.31em; letter-spacing: -.03em; color: #009dff; }
.mouse-num { position: relative; }
.mouse-num .col { display: flex; align-items: flex-start; padding: 35px 0; border-bottom: 1px dashed #ddd;}
.mouse-num .col:first-child { padding-top: 0; }
.mouse-num .col .num { width: 30px; height: 30px; border-radius: 30px; display: flex; align-items: center; justify-content: center; color: #fff; background: #00316e; font-weight: 700; line-height: 1em; margin-right: 18px; }
.mouse-num .col .info { flex: 1 1 auto; min-width: 0; width: 1%; }
.mouse-num .col .info h3 { font-size: var(--font-size-24); font-weight: 600; line-height: 1.25em; color: #242424; margin-bottom: 20px; letter-spacing: -.03em; }
.mouse-num .col .info p { font-size: var(--font-size-18); line-height: 1.5em; color: #454545; font-weight: 500; letter-spacing: -.03em;}
.mouse-num .mouse-medal { position: absolute; right: 50px; bottom: 50px; filter: drop-shadow(4px 7px 20px rgba(0, 0, 0, 0.25)); }

/* 효능평가 서비스 */
.sv-dia { text-align: center; }
.sv-gray { display: flex; justify-content: center; padding: 25px 60px; border-radius: 10px; background: #f8f8f8; flex-wrap: wrap; gap: 12px 30px; margin: 35px 0 100px; }
.sv-gray span { position: relative; padding-left: 24px; font-size: var(--font-size-18); line-height: 1.22em; font-weight: 500; display: inline-block; }
.sv-gray span::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; background: url(../images/sub/bt-chk.png) center no-repeat; background-size: contain;}
.sv-list { display: flex; flex-wrap: wrap; gap: 20px; }
.sv-list li { width: calc(100%/5 - 16px); border-radius: 10px; overflow: hidden; border: 2px solid #1AB9B2;}
.sv-list li .tt { text-align: center; color: #fff; background: #1ab9b2; padding: 10px; font-size: var(--font-size-24); font-weight: 600; letter-spacing: -.03em; line-height: 1.25em; min-height: 105px; display: flex; align-items: center; justify-content: center; }
.sv-list li .txt { padding: 30px 20px; }
.sv-list li .txt p { position: relative; padding-left: 12px; font-size: var(--font-size-18); line-height: 1.5em; font-weight: 500; letter-spacing: -.05em;}
.sv-list li .txt p::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 4px; background: #454545; }
.sv-sec2 { padding: 100px 0; background: #f8f8f8; }
.sv-white { padding: 50px 64px; background: #fff; border-radius: 20px; border: 1px solid #ddd;}
.sv-white.mg { margin-bottom: 35px; }
.sv-white p { margin-top: 25px; font-size: var(--font-size-18); line-height: 1.5em; font-weight: 400; letter-spacing: -.05em;}
.sv-white.fx { display: flex; padding: 53px 45px; align-items: flex-start;} 
.sv-white.fx p { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 18px; }

/* GLP 독성평가 서비스 */
.glp-sec2 { background: #f8f8f8; padding: 100px 0;}
.glp-wrap { display: flex; flex-wrap: wrap; margin: 35px 0; gap: 20px; }
.glp-wrap .col { width: calc(100%/5 - 16px); border-radius: 14px; border: 1px solid #1AB9B2; background: #FFF; padding: 24px 20px;}
.glp-wrap .col h5 { font-size: 16px; font-weight: 500; line-height: 1.62em; color: #242424; letter-spacing: -.03em; } 
.glp-wrap .col h3 { font-size: 32px; font-weight: 800; line-height: 1.31em; color: #1ab9b2; letter-spacing: -.03em; margin-bottom: 14px;}
.glp-sec2-tit { font-size: var(--font-size-18); line-height: 1.22em; font-weight: 600; padding: 30px 10px; border-radius: 10px; background: #1AB9B2; box-shadow: 0 10px 20px 0 rgba(26, 185, 178, 0.30); text-align: center; color: #fff; letter-spacing: -.03em;}
.glp-sec3 { padding: 100px 0;}
.glp-chk .col { margin-bottom: 35px; border-radius: 20px; overflow: hidden; border: 2px solid #1AB9B2;}
.glp-chk .col:last-child { margin-bottom: 0; }
.glp-chk .col .tt { text-align: center; font-size: var(--font-size-24); line-height: 1.25em; font-weight: 700; color: #242424; padding: 34px 10px; background: #e9f8f8; }
.glp-chk .col .cnt { background: #fff; padding: 50px 48px; display: flex; flex-wrap: wrap; gap: 10px; }
.glp-chk .col .cnt>div { width: calc(100%/2 - 5px); padding: 14px 30px; border-radius: 6px;
background: #F8F8F8; }
.glp-chk .col .cnt>div p { position: relative; padding-left: 23px; font-size: var(--font-size-18); font-weight: 500; line-height: 1.5em; letter-spacing: -.09em;}
.glp-chk .col .cnt>div p::before { content: ""; position: absolute; left: 0; width: 13px; height: 10px; background: url(../images/sub/glp-chk1.png) center no-repeat; background-size: contain; top: 9px; }
.glp-chk .col.clr { border-color: #009DFF;}
.glp-chk .col.clr .tt { background: #e6f6ff; }
.glp-chk .col.clr .cnt>div p::before { background-image: url(../images/sub/glp-chk2.png);}
.glp-img-wrap { padding: 48px 73px; border-radius: 20px; border: 1px solid #DDD; background: #FFF; display: flex; gap: 40px; flex-wrap: wrap;}
.glp-img-wrap .col { width: calc(100%/2 - 20px); text-align: center; }
.glp-img-wrap .col .img { border-radius: 10px; overflow: hidden; position: relative; transition: .3s;}
.glp-img-wrap .col .img img { width: 100%; }
.glp-img-wrap .col .img::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 10px; border: 4px solid #009DFF; opacity: 0; transition: .3s;}
.glp-img-wrap .col .tt { margin-top: 21px; font-size: var(--font-size-18); font-weight: 500; line-height: 1.5em; color: #242424; transition: .2s;}
.glp-img-wrap .col:hover .img { box-shadow: 0 4px 30px 0 rgba(0, 157, 255, 0.40); }
.glp-img-wrap .col:hover .img::after { opacity: 1; }
.glp-img-wrap .col:hover .tt { color: #009DFF;}
.glp-sec4 { padding-top: 100px; }
.glp-circle { display: flex; gap: 90px; justify-content: center; }
.glp-circle .col { width: 332px; height: 332px; border-radius: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; border-radius: 166px; border: 3px solid #009DFF; background: #FFF; box-shadow: 17px 26px 40px 0 rgba(0, 157, 255, 0.30);}
.glp-circle .col::after { content: ""; position: absolute; right: -60px; top: 0; bottom: 0; margin: auto; width: 24px; height: 24px; background: url(../images/sub/glp-plus.png) center no-repeat; background-size: contain; }
.glp-circle .col:last-child::after { display: none; }
.glp-circle .col .num { font-size: var(--font-size-20); font-weight: 700; line-height: 1.5em; color: #242424; letter-spacing: -.03em;}
.glp-circle .col .num span { font-size: 50px;}
.glp-circle .col .tt { margin: 19px 0; font-size: var(--font-size-20); line-height: 1.5em; color: #242424; font-weight: 600; letter-spacing: -.03em;}