@charset "utf-8";
/* *******************************************************
 * filename : content_responsive.css
 * description : 서브페이지 컨텐츠 반응형 CSS
 * date : 2022-03-14
******************************************************** */


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1220px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;/* margin-right:calc(-1* var(--area-padding)); */ cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.cm-scroll-drag-guide {display:flex; justify-content:flex-end; /* margin-right:var(--area-padding); */ }
	.cm-scroll-drag-guide .cm-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.cm-scroll-drag-guide .cm-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:#ccc; content:""; border-radius:5px;}
	.cm-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:moveScrollAni 3s both infinite; }
	.cm-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color: rgba(0, 0, 0, 0.7); border-radius:5px; opacity:1; }
	.cm-scroll-drag-guide .drag-tail .hand-icon{ font-size:30px; color:#aaa }
	@keyframes moveScrollAni {
		0%, 10% {
			left: 0;
			margin-left: 0px;
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1220px){
	.sub-tab-list-style .area{padding:0}
}
@media all and (max-width:1280px){
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:var(--header-height);}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:40px; }
	.sub-tab-list-style ul li a em{font-size:13px}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:40px; line-height:40px; font-size:15px; background-color:var(--main-color); box-sizing:border-box;}
	.sub-drop-open-btn-style span{color:#fff; }
	.sub-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; border:1px solid #ddd; border-top:0; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.sub-drop-menu-style ul li a em{font-size:13px;}
	.sub-drop-menu-style ul li.selected{background-color:transparent;}
	.sub-drop-menu-style ul li.selected a em{color:var(--main-color); font-weight:600; }
}
/* @media all and (max-width:480px){
	Tab Fixed Move	
	.sub-tab-list-style.top-fixed{top:var(--header-height);}
} */


/* ****************** 서브 공통 ********************** */
@media all and (max-width:800px){
	.cm-tit-box .tit  {font-size: 4.5rem;}
	.cm-tit-box .txt01 {font-size: 2rem;}
}

/* ****************** 03.Service ********************** */
@media all and (max-width:1280px){
	/* -------- CellBanking -------- */
	
}
@media all and (max-width:800px){
	/* -------- CellBanking -------- */
	.cellbanking-step-item .right-con {padding: 3.5rem 3rem 3rem}
	.cellbanking-step-item .right-con dl dt,
	.cellbanking-step-item .right-con dl dd {display: block;}
	.cellbanking-step-item .right-con dl dd {margin-top: 0.5rem;}
	.cellbanking-tech-con01 {margin-top: 4rem; padding: 3rem;}
	.cellbanking-tech-con01 dl dt,
	.cellbanking-tech-con01 dl dd {font-size: 1.4rem;}
	.cellbanking-tech-con02 .inner-con {padding: 3rem 3rem 4rem;}
	.cellbanking-why-con {padding: 2.5rem;}
}
@media all and (max-width:480px){
	.cellbanking-tech-con01 {flex-wrap: wrap;}
	.cellbanking-tech-con01 dl {width: 100%;}
	.cellbanking-why-con dl {display: block;}
	.cellbanking-why-con dl dt {    width: 4.5rem; height: 4.5rem; line-height: 4.5rem; font-size: 1.6rem;}
	.cellbanking-why-con dl dd {width: 100%; padding-left: 0; padding-top: 2rem;}
}



/* ****************** 04.R&D ********************** */
@media all and (max-width:1280px){
	.patents-con-list02 li {width: calc((100% - 1.4rem) / 3);}
}
@media all and (max-width:800px){
	/* -------- 줄기세포란? -------- */
	.rnd-top-banner {padding-top: 45%;}
	.rnd-top-banner .txt {font-size: 1.6rem; letter-spacing: 0.4em;}
	.stem-cells-video-box .video-cover-box .play-btn {width: 8rem; height: 8rem;line-height: 8rem; text-align: center; margin: -4rem 0 0 -4rem;}
	.stem-cells-list01 li {min-height: 0; padding: 3rem;}
	.stem-cells-list01 li .txt-box {padding-top: 2rem;}
	.stem-cells-list01 li .txt-box .tit strong,
	.stem-cells-list01 li .txt-box .tit span {display: block;}
	.stem-cells-list01 li .txt-box .tit strong {margin-right: 0; font-size: 2.2rem;}
	.stem-cells-list02 {margin: 0 -2rem;}
	.stem-cells-list02:before {display: none;}
	.stem-cells-list02 li { width: calc(33.33% - 4rem); margin: 0 2rem;}
	.stem-cells-list02 li:first-child {width: calc(100% - 4rem); margin: 0 2rem 4rem;}
	.stem-cells-list02 li:first-child .inner {width: 30%; padding-top: 30%; margin: 0 auto;}
	.stem-cells-list02 li:before { right: -3rem;}
	.stem-cells-list02 li:first-child:before {left: 50%; right: auto; top: auto; margin-top: 0; margin-left: -1rem; bottom: -3rem;    transform: rotate(0);}
	.stem-cells-list02 li .inner .txt-box strong {font-size: 1.5rem;}
	.stem-cells-con02 {padding: 4rem 3rem;}
	.stem-cells-con02 .txt02 {font-size: 1.6rem;}
	.stem-cells-list03 li {padding: 3rem;}
	.stem-cells-list03 li .txt-box .num {margin-bottom: 1.5rem;}
	.stem-cells-list03 li .txt-box .tit strong,
	.stem-cells-list03 li .txt-box .tit span {display: block;}
	.stem-cells-list03 li .txt-box .tit strong {font-size: 2.2rem; margin-right: 0;}
	.stem-cells-list03 li .top-content dd {margin: -0.5rem 0;}
	.stem-cells-list03 li .top-content dd .txt {margin: 0.5rem 0; width: 100%;}
	.stem-cells-list03 li .bottom-content dl {padding: 2.5rem;}
	.stem-cells-list03 li .bottom-content dl dt strong,
	.stem-cells-list03 li .bottom-content dl dt span {display: block;}
	.stem-cells-list03 li .bottom-content dl dt strong {margin-right: 0; margin-bottom: 0.5rem;}
	
	/* -------- 신의료기술 -------- */
	.new-medical-con01 {padding: 0; background-color: transparent;}
	
	/* -------- 연구소 -------- */
	.rnd-center-con01 {padding: 4rem 3rem;}
	.rnd-center-con01 .tit-box {margin-bottom: 5rem;}
	.rnd-center-con01 .tit-box:before {display: none;}
	.rnd-center-con01 .rnd-center-org {position: relative;}
	.rnd-center-con01 .rnd-center-org:before {position: absolute; content: ''; width: 1px; height: calc(100% + 5rem); bottom: 0; left: 50%; margin-left:-1px; border-left: 1px dashed var(--main-color);}
	.rnd-center-con01 .rnd-center-org dl {width: 100%; position: relative; z-index: 1;}
	.rnd-center-con01 .rnd-center-org dl dt {font-size: 2.2rem;}
	/* .rnd-center-list li {align-items: start;} */
	.rnd-center-list li .icon-box {width: 8rem; height: 8rem;}
	.rnd-center-list li .txt-box {width: calc(100% - 8rem); }
	.rnd-center-list li .txt-box .tit {font-size: 2rem;}
	.rnd-center-list-bottom {padding: 4rem 3rem;}
	.rnd-center-list-bottom .txt01 {font-size: 2.2rem;}
	
	/* -------- 특허 / 인허가 -------- */
	.patents-con .inner-box {padding: 2.5rem;}
	.patents-con .tit-box strong {font-size: 2.2rem;}
	.patents-con-list01 li {padding: 3rem;}
	.patents-con-list01 li .icon-box {width: 5rem;}
	.patents-con-list01 li .txt-box {width: calc(100% - 5rem); padding-left: 3rem;}
	.patents-con-list01 li .txt-box .tit {font-size: 2rem;}
	.patents-con-list02 li {width: calc((100% - 0.7rem) / 2);}
	.patents-con-list02 li strong {font-size: 1.6rem;}
	.patents-con04 {padding: 3rem;}
	.patents-con04 .txt {font-size: 1.8rem; padding-left: 3rem;}
	
}
@media all and (max-width:480px){
	.stem-cells-list01 {margin: -1rem 0;}
	.stem-cells-list01 li {width: 100%; margin: 1rem 0;}
}

/* ****************** 06.Customer Support ********************** */
@media all and (max-width:800px){
	/* -------- 논문 -------- */
	.rp-list li a { padding: 3.5rem 2.5rem;}
	.rp-list li a .tit {font-size: 1.8rem;}
	.rp-list li a .arrow {right: 2rem; width: 4.6rem; height: 4.6rem; top: 2rem; margin-top: 0; font-size: 1.6rem;}
	.rp-list li a .info-box span {display: block;}
	.rp-list li a .info-box span:before {display: none;}
}