@charset "utf-8";

/* ******************************************************  서브공통 ****************************************************** */
/* ****************** SUB PATH (breadcrumb) ****************** */
#subPath{
	position:relative; width:100%; 
	line-height:30px; height:30px; margin-top:60px; margin-bottom:0; 
	background:#fff; border-bottom:1px solid var(--border-color);
	font-size:0.9rem; color:#000;
}

/* ****************** SUB VIAUAL ****************** */
#subVisual{position:relative; overflow:hidden; width:100%; height:100%; min-height:100%; background:#fff; margin-top:0px; padding:30px 20px 0 20px; box-sizing: border-box;}
#subVisual .visualVideo{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
}
#subVisual .visualVideo > video{min-width:100%; min-height:100%; object-fit: cover;}
#subVisual .visualVideo > iframe{min-width:100%; min-height:100%;}
#subVisual .visualImg{
	position:absolute;
	top:-100px; 	
	right:10px;
	width:100%;
	height:100%; max-height:250px;
	background-size:contain !important;
	background-position:right top !important;
	-webkit-transition:transform 1500ms  cubic-bezier(0, 0.41, 0.58, 1) ;
	-moz-transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
	-o-transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
	-ms-transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
  transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
}
.imgTop{top:-100px !important;}
#subVisual .visualTxt{position:relative; z-index:9; width:100%; max-width:100%; height:auto; margin:0 auto;text-align:left; color:#000;}
/*#subVisual .visualTxtBox{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; padding:0px 15px;}*/
#subVisual .visualTxtBox{position:relative; width:100%; height:auto; padding-bottom:50px;}
#subVisual .visual-tit,
#subVisual .visual-txt{
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(30px); 
  -o-transform: translateY(30px); 
  -moz-transform: translateY(30px);
  -webkit-transform: translateY(30px); 
  transform: translateY(30px);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
}
#subVisual .visual-tit{
	font-size:1.8rem; 
	font-weight:700; 
	line-height:1.3;
	margin-bottom:15px;
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s;
}
#subVisual .visual-tit + .visual-txt{
	-webkit-transition-delay:0.5s;
	-moz-transition-delay:0.5s;
	-o-transition-delay:0.5s;
	-ms-transition-delay:0.5s;
	transition-delay:0.5s;
}
#subVisual .visual-txt{
	font-size:1.2rem; 
	font-weight:500; 
	line-height:1.5;
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s;
}
/* SubVisual :: active */
#subVisual.active .visualImg{
	-ms-transform: scale(100%) rotate(8deg);
  -o-transform: scale(100%) rotate(8deg);
  -moz-transform: scale(100%) rotate(8deg);
  -webkit-transform: scale(100%) rotate(8deg);
  transform: scale(100%) rotate(8deg);
}
#subVisual.active .visual-tit,
#subVisual.active .visual-txt{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateY(0px); 
  -o-transform: translateY(0px); 
  -moz-transform: translateY(0px);
  -webkit-transform: translateY(0px); 
  transform: translateY(0px);
}

/* ****************** subVisual TAB 스타일  ****************** */
#subVisual .tabBox{position:relative; width:100%; max-width:100%; height:auto; margin:0 auto 50px; text-align:left;}
#subVisual .tabBox h2{font-size:1.4rem; font-weight:700; margin-bottom:15px;}
#subVisual .tabs{
  display:block;
  margin: 5px 0px; padding: 0px;
}
#subVisual .tabs li{
  display:inline-block;
	width:auto; min-width:200px;
  margin: 3px 5px 3px 0;	
	border:1px solid #7b7b7b;
	background-color:#fff;
  padding:7px 15px; 
	cursor: pointer; 
	text-align:center;
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
#subVisual .tabs li a{font-size:1rem; color:#000; font-weight:500; }
#subVisual .tabs li:hover{
	background-color:var(--primary);border:1px solid var(--primary);
}
#subVisual .tabs li:hover a{color:#fff;}
#subVisual .tabs li:hover.active a{color:#fff;}
#subVisual .tabs li.active{border:1px solid var(--primary);}
#subVisual .tabs li.active a{color:var(--primary);}

@media (min-width: 576px) {
  #subVisual{min-height:300px; margin-top:0px; padding:50px 20px 0 20px;}
	#subVisual .tabs li{width:250px;}
	#subVisual .tabBox h2{font-size:2.0rem;}
	#subVisual .visual-tit{font-size:2.3rem;}
	#subVisual .visual-txt{font-size:1.4rem;}
}
@media (min-width: 768px) {
	#subPath{height:38px;line-height:38px;margin-top:80px;}
  #subVisual{min-height:400px; padding:50px 30px 0 30px;}	
	#subVisual .visualImg{top:-250px; right:20px; min-height:550px;}
	.imgTop{top:-250px !important;}
	#subVisual .visualTxtBox{width:60%; padding-bottom:100px;}
	#subVisual .visual-tit{font-size:2.7rem; margin-bottom:20px;}
	#subVisual .visual-txt{font-size:1.5rem;}
}
@media (min-width: 992px) {
  #subVisual{padding:60px 30px 0 30px;}
	#subVisual .tabs li{width:auto; padding:7px 30px;}
}
@media (min-width: 1025px) {
	#subPath{height:45px;line-height:45px;margin-top:100px;}
  #subVisual{min-height:450px; padding:70px 30px 0 30px;}
	#subVisual .visualImg{top:-250px; right:30px; min-height:600px;}
	.imgTop{top:-300px !important;}
	#subVisual .visualTxtBox{width:50%; padding-bottom:140px;}
	#subVisual .tabs li{padding:7px 50px;}
	#subVisual .tabBox h2{font-size:2.2rem;}
	#subVisual .visual-tit{font-size:3.2rem; margin-bottom:30px;}
	#subVisual .visual-txt{font-size:1.7rem; font-weight:600;}
}
@media (min-width: 1230px) {
  #subVisual{min-height:550px; padding:90px 30px 0 30px;}
	#subVisual .visualImg{top:-350px; left:320px; min-height:920px; background-size:auto !important; background-position:center top !important;}
	.imgTop{top:-400px !important;}
	#subVisual .tabBox{max-width:var(--inner-size-contents); margin:0 auto 100px;}
	#subVisual .visualTxt{max-width:var(--inner-size-contents);}
}

/* ****************** CONTENT  :: 컨텐츠 레이아웃 ****************** */
#content{padding:0 0 80px;}

@media (min-width: 576px) {
	#content{padding:0 0 100px}	
}
@media (min-width: 768px) {	
	#content{padding:0 0 150px;}
}
@media (min-width: 992px) {	
}
@media (min-width: 1025px) {	
	#content{padding:0 0 200px;}
}



/* ******************************************************  서브페이지 ********************************************************** */
/* ******************  Company : 인사말  ****************** */
.bannerCompany{
	position:relative; width:100%; height:auto; overflow:hidden; padding:40px 0px 60px; margin-bottom:50px; 
	background-repeat:no-repeat; background-position: 50% 50%; background-size:cover;
}
.bannerCompany.founder{background-image: url(/imgs/company/founder-bg-m.jpg);}
.bannerCompany.ceo{background-image: url(/imgs/company/ceo-bg-m.jpg);}
.bannerCompanyTxt{font-size:1.1rem; font-weight:500; line-height: 1.5;}
.bannerCompany img{display:block; width:100px; margin:0 0;}
.welcomeTit{font-size:1.4rem; font-weight:600;}

/* ******************  Company : 비젼 및 미선  ****************** */
.boxRound{
	background-color:#fff; 
	border:1px solid var(--border-color);
	border-radius:15px;
	padding:30px 20px 30px;
}
.boxRound ul li{padding:5px 0;border-bottom:1px solid var(--border-color);font-size:1rem;font-weight:500;}
.visionWrap{width:100%; text-align:center; padding:50px 30px;}
.visionWrap.bg{background:#f7f7f7 url(/imgs/company/bg-vision.jpg) no-repeat 50% 50%;background-size:cover;}
.colorTit{font-size:1.4rem; font-weight:700; color:var(--primary); margin-bottom:30px;}
.sloganTxt{font-size:1.6rem; font-weight:700; line-height:1.3; letter-spacing:-1.0px; margin-bottom:30px;}
.subDescription{font-size:1.1rem; font-weight:400; margin-bottom:30px;}
.subTit,.subBigTit{font-size:1.5rem; font-weight:700;}
.colorTxt{font-size:1.0rem; font-weight:700; color:var(--primary); margin-bottom:5px;}
.contentsTit{font-size:1.5rem; font-weight:700; margin-bottom:10px;}
.bigTxt{font-size:1.1rem; font-weight:600; margin-bottom:10px;}
/*다운로드*/
.btnDownload{display:inline-block;padding:10px 35px;margin-top:30px;background-color:var(--primary);}
.btnDownload.gray{background-color:#7c7d7d;}
.btnDownload a{font-weight:500; color:#fff;}
.btnDownload:hover{background-color:#ed831b; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.btnDownload.gray:hover{background-color:#0fa341;}

/* ******************  Company : 회사개요  ****************** */
/*.overviewWrap{width:100%; background-color:#fff; background-image: linear-gradient(to bottom, rgba(255, 78, 0, 0) 30%, rgba(255, 78, 0, 0.2) 70%);}*/
.overviewWrap{width:100%; background-color:#fff; background-image: linear-gradient(to bottom, rgba(229, 229, 229, 0) 30%, rgba(229, 229, 229, 0.9) 70%);}
.overviewTit{font-size:1.7rem; font-weight:700; margin-bottom:30px;line-height:1.3;}
.overviewTxt{font-size:1.2rem; font-weight:600; line-height:1.5; margin-bottom:20px;}
.businessAreaItem{position:relative; width:100%; height:100%; padding:0; margin:0; border:0; border-radius:0;}
.businessAreaItem p{font-size:1.3rem; font-weight:600; text-align:center; line-height:1.3; margin-bottom:20px;}
.businessAreaItem button{
	cursor: pointer;overflow: hidden;
	position:absolute;right:0;bottom:0;
	background-color:#000;width:40px;height:40px;border-radius:20px;	
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;
}
.businessAreaItem button a{display: inline-block; transition: transform 0.3s ease; color:#fff;font-size:2rem;font-wieght:900;}
.businessAreaItem button:hover{background-color:var(--primary);}
.businessAreaItem button:hover a{transform: rotate(90deg);}

/* ******************  Company : 오시는 길  ****************** */
.mapBox{width:100%;height:300px;margin-top:30px;border:1px solid #ddd;}
.tblMap{width:100%;border-collapse: collapse;}
.tblMap th{width:30%;padding:5px 0;font-size:1.0rem;font-weight:600;line-height:1.2;text-align:left;vertical-align:top;}
.tblMap td{width:70%;padding:5px 0 5px 15px;line-height:1.5;vertical-align:top;}

@media (min-width: 576px) {
	.boxRound{border-radius:20px;}
	.welcomeTit{font-size:1.6rem;}	
	.overviewTit{font-size:2.5rem;}
	.overviewTxt{font-size:1.7rem;}
	.sloganTxt{font-size:1.8rem;}
}
@media (min-width: 768px) {	
	.bannerCompany{padding:60px 0px 80px; margin-bottom:90px;}		
	.bannerCompany.ceo{background-image: url(/imgs/company/ceo-bg.jpg);}
	.bannerCompany img{width:130px;}
	.bannerCompanyTxt{font-size:1.3rem; font-weight:600;}
	.welcomeTit{font-size:1.8rem;}	
  .visionWrap{padding:90px 30px;}
	.colorTit{font-size:1.9rem; margin-bottom:50px;}
	.sloganTxt{font-size:2.7rem; margin-bottom:40px;}
	.subDescription{font-size:1.2rem; margin-bottom:50px;}
	.subTit{font-size:2.0rem;}
	.subBigTit{font-size:2.2rem;}
	.colorTxt{font-size:1.2rem; margin-bottom:10px;}
	.contentsTit{font-size:2.2rem; margin-bottom:20px;}
	.bigTxt{font-size:1.4rem; font-weight:700; margin-bottom:20px;}
	.tblMap th{padding:7px 0;font-size:1.1rem;font-weight:700;}
	.tblMap td{padding:7px 0 7px 0px;}
	.mapBox{height:500px;margin-top:50px;}
}
@media (min-width: 992px) {		
	.bannerCompany{margin-bottom:110px;}		
	.bannerCompany.founder{background-image: url(/imgs/company/founder-bg.jpg);}
	.bannerCompanyTxt{font-size:1.5rem;}
	.bannerCompany img{width:151px;}
	.welcomeTit{font-size:2.0rem;}
  .visionWrap{padding:120px 30px;}
	.colorTit{font-size:2.4rem; margin-bottom:90px;}
	.sloganTxt{font-size:3.5rem; margin-bottom:70px;}
	.subDescription{margin-bottom:90px;}
	.subTit{font-size:2.2rem;}
	.subBigTit{font-size:2.6rem;}
	.boxRound{border-radius:25px; padding:50px 50px;}
	.overviewTit{font-size:3.0rem;}
	.overviewTxt{margin-bottom:30px;}
}
@media (min-width: 1025px) {	
	.bannerCompany{padding:70px 0px; margin-bottom:150px;}
}

/* ******************  Company:history  ****************** */
.timeline {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}
/* The vertical ruler */
.timeline::after {
  content: '';
  position: absolute;
  width:1px;
  background-color: #ddd;
  top: 0;
  bottom: 0;
  left: 7px;
  margin-left:0px;
}
.containerTimeline {
  padding: 0px 15px 50px 30px;
  position: relative;
  background-color: inherit;  
	width: 100%;
}
.containerTimeline::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  right: -7px; /* Fix the circle for containers on the left side */
  background-color: white;
  border: 2px solid #ddd;
  top:0px;
  border-radius: 50%;
  z-index: 1;
}
.left::after {left: 0px;}
.right::after {left: 0px;}/* Fix the circle for containers on the right side */
.left {left: 0; text-align:left;}
.right {left: 0;}
.content {
  padding: 0px 0px;
  background-color:#fff;
  position: relative;
}
.hYear{font-size:2.0rem;font-weight:700;margin-bottom:15px;line-height:1.0;}
.content p{display:table; width:100%; margin-bottom:7px;}
.hMonth{display:table-cell; width:50px;font-size:1.1rem;font-weight:600;}
.hMonth.en{font-size:1.2rem;font-weight:700;}
.left .hMonth{display:table-cell; width:50px;font-size:1.1rem;font-weight:600;}
.left .hMonth.en{font-size:1.2rem;font-weight:700;}
.hTxt{display:table-cell; width:auto;}
.content img{display:block; max-width:100%; height:auto; margin-top:15px;}
.left .content img{float:left;}
@media (min-width: 576px) {
  .content img{margin-top:20px;}	
  .hYear{margin-bottom:20px;}
}
@media (min-width: 768px) {
  .timeline::after { left:50%; margin-left:-1px; }  
	.containerTimeline {width:50%; padding: 0px 30px 60px;} 
	.left {left: 0; text-align:right;}	
	.left::after {left: calc(100% - 8px);}
	.right::after {left: -8px;}
	.right {left: 50%;}
	.left .hMonth{display:inline-block; text-align:left; font-size:1.1rem;font-weight:600;}
	.left .hMonth.en{display:inline-block; text-align:left; font-size:1.2rem;font-weight:700;}
	.left .content img{float:right;}		
	.hYear{font-size:2.2rem;}
}
@media (min-width: 992px) {
  .content img{margin-top:30px;}		
}
@media (min-width: 1200px) {
	.containerTimeline {padding: 0px 40px 100px;} 
}


/* ******************  Business  ****************** */
.bannerInfo{
	position:relative; width:100%; height:auto; overflow:hidden; padding:40px 0px 50px; margin-bottom:15%; 
	background-repeat:no-repeat; background-position: 50% 50%; background-size:cover;
}
.bannerTxt{font-family:'Noto Serif'; font-size:1.5rem; font-weight:600; color:#fff; line-height:1.2; margin-bottom:15px;}
.flexTxtBox{display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:30px 20px;}
.flexboxTit{font-size:1.5rem;font-weight:600;line-height:1.5;color:#fff;}
.flexboxSubtit{font-size:1.4rem;font-weight:600;color:#fff;}
.flexboxDetail{font-size:1.2rem;font-weight:400;color:#fff;}
.boxRoundBlur{
	width:100%; height:100%;
	border-radius:15px;
	padding:30px 30px; 
	background-color: rgba(255, 255, 255, 0.8);
	/*backdrop-filter: blur(8px);*/
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.boxRoundBlur ul li{padding:7px 0;border-bottom:1px solid var(--border-color);font-size:1.0rem;font-weight:500;}
.boxRoundTit{font-size:1.2rem;font-weight:700;margin-bottom:20px;}
.articleTit{font-size:1.2rem;font-weight:700;margin-bottom:20px;line-height:1.5;}
.boxLineTxt{
	width:100%; margin:0 auto; padding:10px 15px; 
	border-top:2px solid var(--primary); border-bottom:2px solid var(--primary); 
	font-size: 1.0rem; font-weight:500; text-align:center;
}
.videoTit{font-size:1.1rem; font-weight:700; line-height:1.3; margin-top:0; margin-bottom:10px; text-align:center;}
.boxSmMarginTit{font-size:1.1rem; font-weight:600; line-height:1.3;}/* 피부오가노이드 */
.boxSmTit{font-size:1.1rem; font-weight:600; line-height:1.3; margin-top:0 !important; text-align:center;}/* 피부오가노이드 */

@media (min-width: 576px) {
	.flexboxTit{font-size:2.0rem;}
	.videoTit{margin-bottom:15px;}
}
@media (min-width: 768px) {	
}
@media (min-width: 992px) {	
	.flexTxtBox{padding:50px 50px;}
	.videoTit{font-size:1.4rem;}
	.boxSmMarginTit{font-size:1.2rem;}
	.boxSmTit{font-size:1.2rem;}
}
@media (min-width: 1025px) {
	.flexboxTit{font-size:2.5rem;}
	.flexboxSubtit{font-size:2.0rem;}
	.flexboxDetail{font-size:1.2rem;}
}



/* ******************  Business : 줄기세포치료제 & 오가노이드  ****************** */
.boxRoundsm{
	background-color:#fff;
	border:0;
	border-radius:15px;
	padding:20px 20px;
}
.boxRoundsm.Gray{background-color:#f7f7f7;}

.boxRoundGray{
	background-color:#f7f7f7;
	border:0;
	border-radius:15px;
	padding:20px 20px;
}
.boxRoundGray ul li{list-style: disc inside; color:var(--secondary); padding:0 0; font-weight:500;}
.boxRoundGray ul li span{color:#000;}
.boxRoundGray.paddingS{padding:20px 20px;}

.boxRoundWhite{
	position:relative;
	width:100%;height:auto;
	background-color:#fff;
	border:1px solid var(--border-color);
	border-radius:15px;
	padding:30px 20px;
}

.GradientGray{background-color:#fff; background-image: linear-gradient(to bottom, rgba(247, 247, 247, 1.0), rgba(255, 255, 255, 1.0));}
.GradientBlue{background-color:#fff; background-image: linear-gradient(to bottom, rgba(230, 240, 249, 1.0), rgba(255, 255, 255, 1.0));}
.boxRoundGray p{line-height:1.5;text-align:center;margin-top:15px;margin-bottom:10px;}
.gridBox2item{display:table;width:100%;height:auto;}
.gridBox2item .boxImg{display:table-cell;width:20%;vertical-align:middle;}
.gridBox2item .boxTxt{display:table-cell;width:80%;vertical-align:middle;padding-left:20px;}
.gridBox2item .boxTxt dt{font-size:1.2rem;font-weight:700;margin-bottom:10px;line-height:1.5;}
.gridBox2item .boxTxt dt.sm{font-size:1.2rem; line-height:1.3;}

.isletorganoidList{width:100%; padding-left:15px; list-style-position:outside; list-style-image: url('/imgs/common/dot_ksb.jpg');}
.isletorganoidList li{margin-bottom:5px; font-size:1.0rem;}


/* ******************  Business : 줄기세포 및 CDMO 사업  ****************** */
.juventasList{width:100%; padding-left:15px; list-style-position:outside; list-style-image: url('/imgs/common/dot_juv.jpg');}
.juventasList li{margin-bottom:5px; font-size:1.0rem;}
.featureTit{font-size:1.1rem;font-weight:700;line-height:1.5;margin-top:20px;text-align:center;}/*USCCM*/
.featureTxt{font-size:0.9rem;font-weight:500;line-height:1.5;margin-top:10px;text-align:center;}
.tblKit{position:relative;width:100%;overflow-x:auto;padding:0;margin:0;}
.tblKit th{padding:10px 10px;background-color:var(--primary);color:#fff;font-ssize:1.1rem;font-weight:600;}
.tblKit.pink th{padding:10px 10px;background-color:var(--pink);color:#fff;font-ssize:1.1rem;font-weight:600;}
.tblKit.orange th{padding:10px 10px;background-color:var(--orange);color:#fff;font-ssize:1.1rem;font-weight:600;}
.tblKit.purple th{padding:10px 10px;background-color:#662e91;color:#fff;font-ssize:1.1rem;font-weight:600;}
.tblKit td{padding:10px 10px;background-color:#fff; border-bottom:1px solid #ddd;border-right:1px solid #ddd;text-align:center;}
/*.tblKit td:nth-last-child(1){border-right:0px;}*/
.kitTxt{font-size:1.2rem; font-weight:600; line-height:1.5; margin-bottom:20px;}
.kitTxtSm{font-size:1.0rem; font-weight:500; line-height:1.5;}
.grayWrap{width:100%;padding:0 0 20%;background-color:#fff; background-image: linear-gradient(to bottom, rgba(229, 229, 229, 0) 20%, rgba(229, 229, 229, 0.4) 80%);}
/*.pinkWrap{width:100%;padding:0 0 10%;background-color:#fff; background-image: linear-gradient(to bottom, rgba(228, 112, 112, 0) 30%, rgba(228, 112, 112, 0.0) 70%);}
.orangeWrap{width:100%;padding:0 0 10%;background-color:#fff; background-image: linear-gradient(to bottom, rgba(235, 105, 17, 0) 30%, rgba(235, 105, 17, 0.1) 70%);}
.purpleWrap{width:100%; padding:0 0 10%; background-color:#fff; background-image: linear-gradient(to bottom, rgba(102, 46, 145, 0) 30%, rgba(102, 46, 145, 0.1) 70%);}*/
.orangeList{width:100%; padding-left:15px; list-style-position: outside; list-style-image: url('/imgs/common/dot_cryo.jpg');}
.orangeList li{margin-bottom:5px; font-size:1.0rem;}
.purpleList{width:100%; padding-left:15px; list-style-position: outside; list-style-image: url('/imgs/common/dot_purple.jpg');}
.purpleList li{margin-bottom:5px; font-size:1.0rem;}
.gridboxTop{position:relative; min-height:50px; padding:15px 20px; z-index:1; display:flex;justify-content:center;align-items:center;}/*align-content: stretch;*/
.gridboxTop.orange{background-color:var(--secondary);}
.gridboxTop.green{background-color:var(--tertiary);}
.gridboxTop p{font-size:1.3rem;font-weight:600;line-height:1.3;color:#fff;text-align:center;}
.gridboxList{position:relative; width:100%; padding:20px 20px 20px 30px;}
.gridboxList li{list-style-position: outside; margin-bottom:5px;}
.gridboxList.orangeDot{list-style-image: url('/imgs/common/dot_orange.png');}
.gridboxList.greenDot{list-style-image: url('/imgs/common/dot_green.png');}
.dotBarList{padding-top:5px;padding-left:10px;line-height:1.5;list-style-image: url('/imgs/common/dot_bar.png');list-style-position:outside;}
.btnDesignArea{position:relative;overflow:hidden;z-index:2;width:auto;max-width:300px;margin:20px auto 10px;}/*그라데이션 버튼이 들어가는 영역:반드시 필요*/

/* ******************  Business : 헬스&뷰티 사업  ****************** */
.flexGD11{position:relative;width:100%;max-width:800px;margin:0 auto;display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;}
.flexGD11-item{text-align:center;line-height:1.3;}
.flexGD11-item.fact{flex:45%;}
.flexGD11-item.plus{flex:10%;}
.flexGD11-item.effect{flex:45%;}
.flexGD11-item .lgTxt{color:#4f3429;font-size:2.5rem;font-weight:800;}
.flexGD11-item .smTxt{font-size:1.0rem;font-weight:500;}
.littlebigTxt{font-size:1.0rem;font-weight:400;}

@media (min-width: 576px) {
	.bannerInfo{padding:50px 30px;}
	.bannerTxt{font-size:1.8rem;}
	.boxRoundBlur{border-radius:20px; padding:40px 40px;}
	.boxLineTxt{width:90%; padding:15px 20px; font-size: 1.2rem; font-weight:600;}
	.boxRoundGray{padding:30px 50px;}
	.btnDesignArea{margin:20px 0;}
	.flexGD11{width:80%;}
}
@media (min-width: 768px) {	
	.bannerInfo{padding:50px 50px 60px; margin-bottom:10%;}
	.bannerTxt{font-size:2.5rem;}
	.articleTit{font-size:1.7rem; margin-bottom:40px;}
	.grayWrap{padding:0 0 15%;}
	.purpleList li{font-size:1.0rem;}
	.kitTxt{font-size:1.5rem;}
	.kitTxtSm{font-size:1.3rem;}
	.gridboxTop{padding:20px 20px;}
	.btnDesignArea{max-width:350px; margin:30px 0;}
	.flexGD11-item .lgTxt{font-size:3.3rem;font-weight:700;}
	.flexGD11-item .smTxt{font-size:1.2rem;}
	.littlebigTxt{font-size:1.1rem;font-weight:500;}
}
@media (min-width: 992px) {	
	.bannerInfo{padding:70px 0px; margin-bottom:150px;}
	.boxRoundBlur{border-radius:25px; padding:50px 50px;}
	.articleTit{font-size:1.9rem; margin-bottom:60px;}
	.boxRoundsm{border-radius:20px; padding:30px 30px;} 
	.boxRoundGray{border-radius:20px; padding:40px 70px;}
	.boxRoundGray.paddingS{padding:30px 30px;}
	.boxRoundGray p{margin-top:30px;}
	.boxRoundWhite{height:100%;padding:50px 30px;} 
}
@media (min-width: 1025px) { 
	.bannerTxt{font-size:2.9rem;}
	.boxLineTxt{width:80%;padding:20px 25px;font-size: 1.3rem;}
	.gridboxTop{min-height:80px;padding:25px 20px;}
	.grayWrap{padding:0 0 12%;}
	.flexGD11-item .lgTxt{font-size:3.8rem;}
	.flexGD11-item .smTxt{font-size:1.4rem;}
	.littlebigTxt{font-size:1.2rem;}
}
@media (min-width: 1230px) { 
	.boxRoundBlur{padding:70px 70px;}
}


/* ******************  R & D  ****************** */
.notoserifTxt{font-family:'Noto Serif';font-size:1.5rem;font-weight:600;letter-spacing:-0.5;text-align:center;margin-bottom:30px;}

@media (min-width: 576px) {
	.notoserifTxt{font-size:2.0rem;}
}
@media (min-width: 768px) {	
}
@media (min-width: 992px) {	
}
@media (min-width: 1025px) {
	.notoserifTxt{font-size:2.1rem; margin-bottom:80px;}
}


/* ******************  Investors : Stock  ****************** */
table.stock{border-collapse:collapse; width:100%;font-size:0.9rem;}
table.stock th,
table.stock td{padding:4px 8px;border:1px solid #ddd;border-left:0;border-right:0;}
table.stock th{background:#f7f7f7;}
table.stock.curr th,
table.stock.curr td{padding:10px 15px;font-size:1.3rem;text-align:center;}
table.stock.curr td:nth-child(1){width:24%;}
table.stock.curr td{width:19%; min-width:100px;}
table.stock.curr label{font-size:1rem;font-weight:500;display:inline-block;padding:10px 0;}
table.stock.info th,
table.stock.info td{padding:5px 15px;}
table.stock.hoga th,
table.stock.hoga td{padding:5px 15px;}
table.stock.member th,
table.stock.member td{padding:5px 15px;}
table.stock.daily th,
table.stock.daily td{padding:5px 15px;}
/*table.stock.realtime th,
table.stock.realtime td{padding:5px 38px;}*/
table.stock.en th,
table.stock.en td{padding:5px 15px;}



/* ******************  Contact Us  ****************** */
.form_container {
	border-top:2px solid #000;
	border-bottom:0px solid var(--border-color);
	background-color:#fff;
	box-shadow:none;  
	padding: 30px 10px 0px;  
	font-family: var(--body-font-family);
	font-size:1rem;
}
.rowF{margin-bottom:10px;}
.rowF:after {
  content: "";
  display: table;
  clear: both;
}
.col-20 {
  float: left;
  width: 100%;
  margin-top:0px;
}
.col-80 {
  float: left;
  width: 100%;
  margin-top:0px;
}
input[type=text], textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid var(--border-color);
  resize: vertical;	
	font-family: var(--body-font-family);
	font-size:1rem; font-weight:300;
	line-height:1.3;
}
::placeholder {color:#aaa;}
::-webkit-input-placeholder {color:#aaa;} /* Edge */
:-ms-input-placeholder {color:#aaa;} /* Internet Explorer 10-11 */
label {
  display: inline-block;
	padding: 7px 0px 5px;
	font-size:1rem;
	font-weight:500; 
}
input[class=submit] {
  width: 100%;
	background:#303030;border:1px solid #303030;
  color: #fff;
  cursor: pointer;
	padding:10px 0;
	margin-top:0px;
	font-size:1rem;font-weight:500;  
  border-radius:0;
}
input[class=submit]:hover {
	background:var(--primary); border:1px solid var(--primary);
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;
}
input[type=reset] {
  width: 100%;
	background-color: #fff;
  color: #1a1a1a;
  border: 1px solid #ddd;
  cursor: pointer;
	padding:10px 0;
	margin-top:10px;
	margin-left:0px;
	font-size:1rem;font-weight:500;
  border-radius:0;
}
input[type=reset]:hover {
	background-color:#999; border:1px solid #999; color: #fff;
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;
}
input[type=radio]{margin-top:9px;}
.formBtn{text-align:center;margin-top:30px;}
.checkWrap {
  display: inline-block;
  position: relative;
	padding-top:0px;padding-left: 35px;
  margin-bottom: 0px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size:1rem;
  font-weight:400;
}
.checkWrap input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 10;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border:1px solid var(--border-color);
}
.checkWrap:hover input ~ .checkmark {
  background-color: #fff;
}
.checkWrap input:checked ~ .checkmark {
  background-color:#303030;
  border:1px solid #303030;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checkWrap input:checked ~ .checkmark:after {
  display: block;
}
.checkWrap .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media (min-width: 768px) {
	.form_container {padding: 70px 50px 0px;background-color:#f9f9f9;}
	.col-20 {float:left; width:20%; margin-top:8px;margin-bottom:8px;}
	.col-80 {float:left; width:80%; margin-top:8px;margin-bottom:8px;}	
	.formBtn{text-align:right; margin-top:50px;}
	input[type=text], textarea {padding:8px;}	
	input[class=submit]{width:180px;}
	input[type=reset] {width:180px; padding:10px 0; margin-top:0px; margin-left:10px;}
}
@media (min-width: 992px) {
	.form_container {padding:90px 90px 10px;}
	label {font-size:1.1rem;}	
	.checkWrap {padding-top:10px;}
}
@media (min-width: 1025px) {
	input[class=submit]{padding:13px 0;}
	input[type=reset] {padding:13px 0;}
}



/* ******************  Privacy policy  ****************** */
.subDetailBig{font-size:1.1rem;font-weight:600;margin-bottom:10px;}



/* ANIMATION */
.animate {
  -webkit-animation-duration: 1s;
  animation-duration:1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animationTxt{
	animation: fadeIn;
	-webkit-animation-duration: 1s;
  animation-duration:1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
	animation-delay:0.3s;
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}