@import url("sub.css");

/*** Technology ***/
/* TECHNOLOGY — INTRO */
.techIntro {position:relative;}
.techIntroBg {position:absolute; left:0; bottom:0; z-index:0; width:100%; max-width:none; height:500px; background:linear-gradient(to bottom, rgba(242,244,250,0), var(--grayBg)); pointer-events:none;}
.techIntroIn {position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:70px;}
.techIntroHead {display:flex; flex-direction:column; align-items:center; gap:30px; max-width:1070px; width:100%; text-align: center;}
.techIntroIco {display:flex; align-items:center; justify-content:center; width:70px; height:70px;}
.techIntroIco img {display:block; width:61px; height:61px;}
.techIntroTit {color:var(--black); font-weight: 700;}
.techIntroTit br {display:inline;}
.techIntroDesc {color:var(--light);}

/* TECHNOLOGY — VIDEO */
.techVideo {max-width: 1070px; width: 100%; margin: 0 auto; display: block;}
.techVideo-box{position:relative; display:block; width:100%; height: 0; padding-bottom: 56.25%; border-radius:var(--borderR20); overflow:hidden;}
.techVideo iframe{display:inline-block; position:absolute; left:0; top:0; width:100% !important; height:100% !important;}

/* TECHNOLOGY — DIFFERENTIATION */
.techDiff {background:var(--grayBg);}
.techDiffIn {display:flex; flex-direction:column; align-items:center; gap:50px;}
.techDiffTit {color:var(--black); font-weight: 700;}
.techDiffList {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:30px; width:100%;}
.techDiffItem {display:flex; align-items:center; gap:40px; padding:40px; box-sizing:border-box; background:var(--white); border-radius:var(--borderR20);}
.techDiffIco {position:relative; display:flex; align-items:center; justify-content:center; width:120px; height:120px; flex-shrink:0; border-radius:var(--borderR100); box-sizing:border-box;}
.techDiffIco img {position:relative; z-index:1; display:block; width:100%; height:100%; object-fit: contain;}
.techDiffTxt {display:flex; flex-direction:column; gap:8px; min-width:0; flex:1;}
.techDiffName {color:var(--black); font-weight: 700; line-height: 140%;}
.techDiffDesc {color:var(--basic); line-height: 170%;}




/*** Preclinical Device ***/
/* PRECLINICAL — WRAP */
.preclinIn {display:flex; flex-direction:column; align-items:center; gap:50px;}
.preclinList {display:flex; align-items:flex-start; gap:30px; width:100%;}
.preclinItem {flex:1; min-width:0; display:flex; flex-direction:column; gap:40px;}

/* PRECLINICAL — IMG */
.preclinImg {position:relative; aspect-ratio: 490/400; width:100%; overflow:hidden; box-sizing:border-box;}
.preclinImgLight {background:var(--white); border:1px solid rgba(17,17,17,0.1);}
.preclinImgDark {background:var(--black);}
.preclinImg img {display:block; width:100%; height:100%; object-fit:cover;}
.preclinImgLight img {object-fit:contain;}

/* PRECLINICAL — TXT */
.preclinTxt {display:flex; flex-direction:column; gap:5px; width:100%;}
.preclinName {color:var(--black);}
.preclinDesc {color:var(--basic);}
.preclinBtn {display:flex; justify-content:center;}



/*** Clinical Device ***/
/* CLINICAL — WRAP */
.clinItem {display:flex; align-items:flex-start; gap:60px;}
.clinImg {flex-shrink:0; width:490px; max-width:100%; aspect-ratio:490/650; overflow:hidden; box-sizing:border-box; background:var(--white); border:1px solid rgba(17,17,17,0.1);}
.clinImgLink {position:relative; display:block; width:100%; height:100%; background:var(--white); transition:background 0.4s;}
.clinImgLink img {display:block; width:100%; height:100%; object-fit:cover; transition:opacity 0.4s;}
.clinImgLink .more-btn {position:absolute; left:50%; top:calc(50% + 100px); z-index:2; transform:translate(-50%,-50%); opacity:0; pointer-events:none; transition:opacity 0.4s ease, top 0.45s cubic-bezier(0.215,0.61,0.355,1);}
.clinImgLink:hover,
.clinImgLink:focus-visible {background:var(--main); outline:none;}
.clinImgLink:hover img,
.clinImgLink:focus-visible img {opacity:0.2;}
.clinImgLink:hover .more-btn,
.clinImgLink:focus-visible .more-btn {top:50%; opacity:1; pointer-events:auto;}
.clinBody {flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:50px; align-self:stretch;}
.clinBlock {display:flex; flex-direction:column; gap:5px;}
.clinName {color:var(--black);}
.clinDesc {color:var(--basic);}
.clinDesc br {display:inline;}
.clinBtn {display:flex;}

/*******************************************************************************
    @media 1680px
*******************************************************************************/
@media all and (max-width:1680px){

}
/*******************************************************************************
	@media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/* TECHNOLOGY — INTRO */
.techIntroBg {height:400px;}
.techIntroIn {gap:50px;}
.techIntroHead {gap:24px;}
.techIntroIco {width:60px; height:60px;}
.techIntroIco img {width:52px; height:52px;}


/* TECHNOLOGY — DIFFERENTIATION */
.techDiffIn {gap:40px;}
.techDiffList {gap:24px;}
.techDiffItem {gap:30px; padding:30px; }
.techDiffIco {width:100px; height:100px;}


/* PRECLINICAL — WRAP */
.preclinList {gap:20px;}
.preclinItem {gap:30px;}

/* CLINICAL — WRAP */
.clinItem {gap:40px;}
.clinImg {width:400px;}
.clinBody {gap:40px;}

}
/*******************************************************************************
	@media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* TECHNOLOGY — INTRO */
.techIntroBg {height:320px;}
.techIntroIn {gap:40px;}
.techIntroHead {gap:20px;}
.techIntroIco {width:54px; height:54px;}
.techIntroIco img {width:46px; height:46px;}
.techIntroTit br {display:none;}

/* TECHNOLOGY — VIDEO */
.techVideo-box {border-radius:var(--borderR15);}

/* TECHNOLOGY — DIFFERENTIATION */
.techDiffIn {gap:30px;}
.techDiffList {grid-template-columns:1fr; gap:16px;}
.techDiffItem {gap:24px; padding:28px 24px; border-radius:var(--borderR15);}
.techDiffIco {width:88px; height:88px;}
.techDiffTxt {gap:6px;}


/* PRECLINICAL — WRAP */
.preclinIn {gap:40px;}
.preclinList {flex-direction:column; gap:40px;}
.preclinItem {gap:24px; flex:none; width: 100%;}

/* CLINICAL — WRAP */
.clinItem {gap:30px;}
.clinImg {width:280px;}
.clinBody {gap:30px;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* TECHNOLOGY — INTRO */
.techIntroBg {height:240px;}
.techIntroIn {gap:30px;}
.techIntroHead {gap:12px;}
.techIntroIco {width:48px; height:48px;}
.techIntroIco img {width:40px; height:40px;}

/* TECHNOLOGY — VIDEO */
.techVideo-box {border-radius:var(--borderR10);}

/* TECHNOLOGY — DIFFERENTIATION */
.techDiffIn {gap:20px;}
.techDiffList {gap:10px;}
.techDiffItem {gap:16px; padding:24px 20px; border-radius:var(--borderR10);}
.techDiffIco {width:72px; height:72px;}
.techDiffTxt {gap:5px;}


/* PRECLINICAL — WRAP */
.preclinIn {gap:30px;}
.preclinList {gap:30px;}
.preclinItem {gap:20px;}

/* CLINICAL — WRAP */
.clinItem {gap:24px; flex-direction:column; }
.clinImg {width:100%;}
.clinBody {gap:24px;}


}