@import url("sub.css");



/* Exosome */
.exosome_list {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin:80px 0 0;}
.exosome_list li {display:flex; flex-wrap:wrap; align-content:center; justify-content:center; text-align:center; flex:1; border-radius:100%; margin:0 -20px; border-radius: 400px; border: 10px solid var(--main); background: var(--white); border-radius:100%; box-sizing:border-box; aspect-ratio: 1 / 1;}
.exosome_list li .ico {display:block; width:100%; margin:0 0 20px;}
.exosome_list li .fs18 {font-weight: 600; color:var(--black);}
.exosome_list li:nth-of-type(2n) {background: rgba(67, 150, 76, 0.90); backdrop-filter: blur(5px); border-color:transparent;}
.exosome_list li:nth-of-type(2n) .fs18 {color:var(--white);}

.jarallax {position:relative; display:block;  aspect-ratio: 1200 / 380; width:100%; max-width:1200px; margin:80px auto 0;}

.fepc_exosome_wrap {text-align:center;}
.fepc_exosome_wrap img {max-width:100%;}
.fepc_exosome_wrap .sub_titbox {margin-bottom:80px;}
.fepc_exosome_wrap .sub_titbox .fs40.light {margin:20px 0 0;}
/* Exosome */



.manufacturing_list {display:flex; flex-wrap:wrap; gap:30px;}
.manufacturing_list dl {flex:1; position:relative; z-index:10;}
.manufacturing_list dl::after {content:''; width:100%; height:100%; border-radius:15px; border:1px solid var(--border); box-sizing:border-box; position:absolute; top:0; left:0; z-index:-1;}
.manufacturing_list dl dt {padding:15px; box-sizing:border-box; border-radius: 15px; background:var(--main); text-align:center;}
.manufacturing_list dl dt .fs24 {color:var(--white);}
.manufacturing_list dl dt .fs16 {color:var(--white); opacity:0.7;}
.manufacturing_list dl dd {padding:35px 30px; box-sizing:border-box; text-align:center; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; min-height:calc(100% - 90px);}
.manufacturing_list dl dd img {max-width:100%;}

.Production_process_wrap {text-align:center; position:relative; }
.Production_process_wrap .prd_center {position:absolute; top:42%; left:48%; transform:translate(-50%,-50%);}
.Production_process_wrap .prd_center .fs16 {margin:10px 0 0;}
.Production_process {display:inline-flex; flex-wrap:wrap; gap:0 300px; justify-content:center; align-items:center; position:relative; z-index:10;}
.Production_process::after {content:''; width: 658px; height: 398px; background: url("/eng/rnd/img/process_gra.svg")no-repeat center / 100% auto; position:absolute; top:-5px; left:170px; z-index:-1;}
.Production_process dl {text-align:center;}
.Production_process dl dd {margin:30px 0 0; color:var(--black);}


.upgrade_box {padding:40px; border:1px solid var(--border); box-sizing:border-box;}
.upgrade_box .grayBg {margin:0 0 30px; padding:60px 40px; box-sizing:border-box; display:flex; justify-content:center; flex-wrap:wrap; gap:0 140px; align-items:center;}
.upgrade_box .grayBg dl {text-align:center; position:relative; max-width:200px; flex:1;}
.upgrade_box .grayBg dl .ico {width:60px; aspect-ratio: 1 / 1; background:rgba(67,150,76,0.2); position:absolute; top:50%; right:-100px; transform:translateY(-50%); font-family:var(--icon); font-size:24px; color:var(--main); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:100%; font-style:normal;}
.upgrade_box .grayBg dl .ico::before {content:''; width:calc(100% - 20px); height:calc(100% - 20px); border-radius:100%; box-shadow: 0 10px 20px 0 rgba(63, 172, 75, 0.20); border-radius:100%; background:var(--white); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.upgrade_box .grayBg dl .ico::after {position:relative; z-index:10;}
.upgrade_box .grayBg dl:nth-of-type(1) .ico::after {content:'\e145'; }
.upgrade_box .grayBg dl:nth-of-type(2) .ico::after {content:'\f77b'; }
.upgrade_box .grayBg dl dt {}
.upgrade_box .grayBg dl dt img {max-width:100%;}
.upgrade_box .grayBg dl dd {margin:20px 0 0; color:var(--black); font-weight:bold;}



.drug_delivery_box {background:url("/eng/rnd/img/engineering_bg.jpg")no-repeat center / cover;}
.drug_delivery_box .fs40 {color:var(--white);}
.drug_delivery_box .fs40 .fs20 {display:block; margin:15px 0 0;}
.drug_delivery_box .fs18 {color:rgba(255,255,255,0.7); margin:30px 0 0;}




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

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



.Production_process {gap:0 160px;}
.Production_process::after {width:450px; height:300px; top:10px;}
.Production_process dl:nth-of-type(1) dt img {max-width:280px;}
.Production_process dl:nth-of-type(2) dt img {max-width:320px;}
.Production_process_wrap .prd_center {width:150px;}
.Production_process_wrap .prd_center br {display:none;}



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


/* Exosome */
.exosome_list {margin:50px 0 0;}
.exosome_list li {flex:33.33% 0 0; }

.exosome_list li .ico {margin:0 0 10px;}
.exosome_list li:nth-of-type(4), .exosome_list li:nth-of-type(5) {margin-top:-40px;}
/* Exosome */



.manufacturing_list {gap:15px;}
.manufacturing_list dl dd {padding:20px;}

.Production_process {gap:0 140px;}
.Production_process::after {width:245px; height:138px; top:20px; left:90px;}
.Production_process dl:nth-of-type(1) dt img {max-width:140px;}
.Production_process dl:nth-of-type(2) dt img {max-width:180px;}
.Production_process_wrap .prd_center {width:130px; top:35%;}


.upgrade_box {padding:25px;}
.upgrade_box .grayBg {padding:30px; gap:0 60px;}
.upgrade_box .grayBg dl .ico {width:50px; right:-55px; font-size:21px;}



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

/* Exosome */
.exosome_list {margin:30px 0 0;}
.exosome_list li {flex:100% 0 0; margin:-40px 0 0 !important;}
.exosome_list li:first-of-type {margin:0 !important;}
.exosome_list li:nth-of-type(4), .exosome_list li:nth-of-type(5) {margin-top:0;}

.jarallax {margin:40px auto 0;}

.fepc_exosome_wrap .sub_titbox {margin-bottom:40px;}
.fepc_exosome_wrap .sub_titbox .fs40.light {margin:10px 0 0;}
/* Exosome */



.manufacturing_list dl {flex:100% 0 0;}


.Production_process {display:block;}
.Production_process::after {width: 210px;height:138px;top: 90px;left: -35px;transform: rotate(90deg);}

.Production_process dl {display:flex; flex-wrap:wrap; align-items:center; gap:0 20px;}
.Production_process dl+dl {margin:100px 0 0;}
.Production_process dl dt {width:140px;}
.Production_process dl:nth-of-type(1) dt img {max-width:100px;}
.Production_process dl:nth-of-type(2) dt img {max-width:140px;}
.Production_process dl dd {margin:0; flex:1; text-align:left;}
.Production_process dl dd br {display:none;}

.Production_process_wrap .prd_center {width:140px; top:32%; transform:translate(0,0); left:0;}
.Production_process_wrap .prd_center .fs16 {margin:0;}


.upgrade_box {padding:15px;}
.upgrade_box .grayBg {gap:80px 30px; padding:15px; margin:0 0 20px;}
.upgrade_box .grayBg dl {flex:none; width:calc(50% - 15px); max-width:100%;}
.upgrade_box .grayBg dl:last-of-type {width:100%;}
.upgrade_box .grayBg dl dt img {max-height:80px;}
.upgrade_box .grayBg dl .ico {width:40px; right:-36px; font-size:20px; top:50%; transform:translate(0,-50%);}
.upgrade_box .grayBg dl .ico::before {width:calc(100% - 10px); height:calc(100% - 10px);}
.upgrade_box .grayBg dl:nth-of-type(2) .ico {top:auto; bottom:-58px; transform:translate(50%,0); right:calc(100% + 12px);}


.drug_delivery_box .fs40 .fs20 {margin:10px 0 0;}
.drug_delivery_box .fs18 {margin:15px 0 0;}



}