@charset "utf-8";
/* ****************** Style :: 버튼 ********************* */
/* 헤더 유틸리티 버튼 */
.btn_link{
padding: 5px 10px;
width:100%;
font-size: 0.9rem;
font-weight:300;
color: #000;
border-radius: 15px;
border: 1px solid #000;
background-color: transparent;
cursor: pointer;
outline: none;
text-align: center;
position: relative;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.btn_link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: var(--primary);
transition: left 0.4s ease-in-out;
z-index: -1;
}
.btn_link:hover {
color: #fff;
border: 1px solid var(--primary);
}
.btn_link:hover::before {
left: 0;
}
.btn_link_white{
padding: 5px 10px;
width:100%;
font-size: 0.9rem;
font-weight:300;
color: #fff;
border-radius: 15px;
border: 1px solid #fff;
background-color: transparent;
cursor: pointer;
outline: none;
text-align: center;
position: relative;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.btn_link_white::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: var(--primary);
transition: left 0.4s ease-in-out;
z-index: -1;
}
.btn_link_white:hover {
color: #fff;
border: 1px solid var(--primary);
}
.btn_link_white:hover::before {
left: 0;
}
.btn_big{
padding: 10px 20px;
width:100%;
border: 1px solid #fff;
border-radius: 35px;
font-size: 1.3rem;
font-weight:500;
color: #fff;
background-color: transparent;
cursor: pointer;
outline: none;
text-align: center;
position: relative;
overflow: hidden;
transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out;
}
.btn_big::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(to right, #fff, var(--primary));
transition: left 0.4s ease-in-out;
z-index: -1;
}
.btn_big:hover {
color: #000;
}
.btn_big:hover::before {
left: 0;
}
/* 회전하는 둥근+ 버튼 : 메인 Stock Info*/
button.circlePlus{
cursor: pointer; overflow:hidden;
position:absolute;right:0;top:10px;
background-color:#fff; opacity:1.0; 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;
}
button.circlePlus a{display: inline-block; transition: transform 0.3s ease; color:var(--primary);font-size:2rem;font-wieght:900;}
button.circlePlus:hover{background-color:#fff;opacity:0.9;}
button.circlePlus:hover a{transform: rotate(90deg);}
/* 메인 파이프라인 그라데이션 버튼 : 현재 감춤처리 */
.btn-area{position:relative;overflow:hidden;z-index:2;}/*그라데이션 버튼이 들어가는 영역:반드시 필요*/
.btn-area li{margin-bottom:10px;}
.btn_gradient {
padding: 8px 20px;
width:100%;
border: none;
border-radius: 25px;
font-size: 1rem;
font-weight:500;
color: #000;
background-color: #fff;
cursor: pointer;
outline: none;
text-align: center;
position: relative;
overflow: hidden;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.btn_gradient::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--primary), #f4ad15);
transition: left 0.3s ease-in-out;
z-index: -1;
}
.btn_gradient:hover {
color: #fff;
background-color: transparent;
}
.btn_gradient:hover::before {
left: 0;
}
.btn_gradientB {
padding: 15px 20px;
width:100%;
border: none;
border-radius: 30px;
font-size: 1rem;
font-weight:500;
color: #fff;
background-color:var(--primary);
cursor: pointer;
outline: none;
text-align: center;
position: relative;
overflow: hidden;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.btn_gradientB::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--primary), #f4ad15);
transition: left 0.3s ease-in-out;
z-index: -1;
}
.btn_gradientB.purple{background-color:var(--purple);}
.btn_gradientB.purple::before {background: linear-gradient(to right, var(--purple), #a78dbc); }
.btn_gradientB:hover,.btn_gradientB.purple:hover {
color: #fff;
background-color: transparent;
}
.btn_gradientB:hover::before,.btn_gradientB.purple:hover::before {
left: 0;
}
.blur-button {
padding: 13px 30px;
min-width:200px;
font-family:'Poppins';
font-size: 1.0rem;
color: white;
border: 1px solid rgba(255, 255, 255, 0.3); /* 은은한 테두리 */
border-radius: 30px;
cursor: pointer;
outline: none;
transition: 0.3s;
background: rgba(63, 179, 0, 0.6);
backdrop-filter: blur(5px); /* 배경 흐림 처리 */
-webkit-backdrop-filter: blur(5px); /* 사파리 호환성 */
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 */
display: inline-block; /* a 태그일 경우 크기 적용을 위해 필요 */
text-decoration: none; /* 밑줄 제거 */
text-align: center;
}
.blur-button:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(5px); /* 살짝 오른쪽 */
}
/*
*/
/* ****************** 둥둥 떠다니는 애니메이션 : 메인 비주얼 ********************* */
.floating-image {
display:none;
position: absolute;
width:250px;
height: auto;
opacity:0.15;
top: 15%;
left: 3%;
animation: floatAnimation 4s ease-in-out infinite alternate; /* 둥둥 떠다니는 애니메이션! */
z-index: 10; /* 기준 이미지 위에 확실히 보이도록 z-index를 높게 설정 */
transform-origin: center center; /* 회전 기준점 설정 */
}
@keyframes floatAnimation {
0% { transform: translateY(0) scale(1); }
50% { transform: translateY(20px) scale(1.15); } /* 약간 커지면서 움직임 */
100% { transform: translateY(0) scale(1); }
}
.floating-image2 {
display:none;
position: absolute;
width: 154px;
opacity:0.3;
top: 60%;
left: 25%;
z-index: 10;
animation: floatAnimation2 5s ease-in-out infinite alternate;
}
@keyframes floatAnimation2 {
0% { transform: translateY(0) rotate(0deg); } /* 시작 위치 */
50% { transform: translateY(-30px) rotate(10deg); }/* 위로 20px, 약간 회전 */
100% { transform: translateY(0) rotate(0deg); } /* 다시 돌아옴 */
}
.floating-image3 {
display:none;
position: absolute;
width: 450px;
opacity:0;
top: 12%;
left: 58%;
z-index: 10;
animation: floatAnimation3 5s ease-in-out infinite alternate;
}
@keyframes floatAnimation3 {
0% { transform: translateY(0) scale(1); }
50% { transform: translateY(15px) scale(1.05); }
100% { transform: translateY(0) scale(1); }
}
.floating-image4 {
display:none;
position: absolute;
width:276px;
height: auto;
opacity:0.2;
top: 55%;
left: 80%;
animation: floatAnimation4 4s ease-in-out infinite alternate;
z-index: 10;
transform-origin: center center;
}
@keyframes floatAnimation4 {
0% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-50px) rotate(5deg); }
100% { transform: translateY(0) rotate(0deg); }
}
.floating-image5 {
display:none;
position: absolute;
width: 450px;
opacity:0;
top: 15%;
left: 5%;
z-index: 10;
animation: floatAnimation5 5s ease-in-out infinite alternate;
}
@keyframes floatAnimation5 {
0% { transform: translateY(0) rotate(0deg); } /* 시작 위치 */
50% { transform: translateY(-30px) rotate(10deg); }/* 위로 20px, 약간 회전 */
100% { transform: translateY(0) rotate(0deg); } /* 다시 돌아옴 */
}
.floating-image6 {
display:none;
position: absolute;
width: 250px;
opacity:0.3;
top: 18%;
left: 58%;
z-index: 10;
animation: floatAnimation6 5s ease-in-out infinite alternate;
}
@keyframes floatAnimation6 {
0% { transform: translateY(0) scale(1); }
50% { transform: translateY(15px) scale(1.05); }
100% { transform: translateY(0) scale(1); }
}
@media (min-width: 992px) {
.floating-image {opacity:0.15;}
.floating-image2 {opacity:0.3;}
.floating-image3 {opacity:0.15;}
.floating-image4 {opacity:0.2;}
.floating-image5 {opacity:0.15;}
.floating-image6 {opacity:0.3;}
}
/* ************************************ 버튼 오버시 이미지 변경 : 메인 '주요 파이프라인' ************************************ */
.btnTab{
display:block;
margin: 0px; padding: 0px;
}
.btnTab li{
/*display:inline-block;*/
margin: 10px 0;
padding:7px 25px;
border-radius:20px;
border:1px solid #fff;
background-color:#fff;
cursor: pointer;
font-weight:600;
-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
.btnTab li:hover{
border:1px solid var(--primary); background-color:var(--primary); color:#fff;
}
.tab-content{
display:none; position:absolute;top:0;left:0; width:100%;height:100%; border-radius:20px; border:1px solid #ddd; z-index:-5; overflow:hidden;
-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s
}
.tab-content.on{ display:inherit; }
.tab-content img{width: 100%; max-width:100%; height:auto;}
@media (min-width: 768px) {
.tab-content img{width: 100%; height: 100%; object-fit: fill;}
}
@media (min-width: 992px) {
.tab-content img{width:100%; max-width:600px; object-fit: cover;}
}
/* 관련사이트 Select */
#ext-link-pop{display:none;padding:5px 30px;border:1px solid #aaa;background:var(--primary);position:absolute;top:30px;right:30px;}
.ext-link-pop {
position:absolute; top:0; right:15px;
display: block;
width:calc(100% - 15px); max-width:170px;
padding: 5px 10px;
border: 1px solid #777;
background-color: #303030;
color: #fff;
font-size:0.9rem;
line-height: 1.5;
cursor: pointer;
outline: none; /* 클릭 시 외곽선 제거 */
transition: all 0.3s ease;
}
.ext-link-pop:hover, .ext-link-pop:focus {border-color: #fff;}
.ext-link-pop option {
background-color: #f9f9f9;
color: #333;
padding: 10px;
}
/* ************************************ Style :: 그리드 ************************************ */
/* ****************** 회사개요(business area) & 핵심기술 & 글로벌RND센터 & 줄기세포GMP센터 & 피부오가노이드 ****************** */
.gridContainer2 {
display: grid; width:100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-gap: 20px;
padding: 15px;
}
.gridContainer31 {
display: grid; width:100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-gap: 20px;
padding: 15px;
}
.gridContainer321 {
display: grid; width:100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-gap: 20px;
padding: 15px;
}
.gridContainer421 {
display: grid; width:100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-gap: 20px;
padding: 15px;
}
.gridContainer4 {
display: grid; width:100%;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-gap: 20px;
padding: 15px;
}
.gridBox {
background-color:#fff;
border:1px solid var(--border-color);
border-radius:15px;
overflow:hidden;
padding:30px 20px;
/* 텍스트 양에 상관없이 가로 너비를 유지하게 하는 핵심 */
width: 100%;
box-sizing: border-box;
word-break: break-word;
}
.gridBox.border{border:1px solid var(--border-color);}
.gridBox.sm{border-radius:15px;padding:25px 15px;}
.gridBox.trans{background-color:#fff;border:0px;padding:30px 20px;}
.gridBox2{
position:relative; width:100%;
display:flex;
background-color:#fff;
border:1px solid var(--border-color);
border-radius:10px;
padding:15px 10px;
}
.boxcontentsTit{font-size:1.2rem;font-weight:700;line-height:1.3;text-align:center;}
.boxcontentsTit.sm{font-size:1.2rem;font-weight:700;line-height:1.3;color:var(--primary);text-align:center;} /*첨단재생의료*/
.boxcontentsTit.en{font-size:1.5rem;font-weight:800;}
.boxcontentsTxt{font-size:1.0rem;font-weight:500;line-height:1.5;text-align:center;}
@media (min-width: 576px) {
.gridContainer321, .gridContainer2, .gridContainer421, .gridContainer4{grid-template-columns: repeat(2, minmax(0, 1fr));}
.gridBox{border-radius:20px;}
.boxcontentsTxt{font-size:1.0rem;}
}
@media (min-width: 768px) {
.gridContainer321, .gridContainer2,.gridContainer421{grid-gap:30px;}
.gridContainer4{grid-template-columns: repeat(4, minmax(0, 1fr));}
.gridContainer31{grid-template-columns: repeat(3, minmax(0, 1fr));}
.gridBox.sm{padding:30px 15px;}
.gridBox.trans{padding:50px 30px;}
.boxcontentsTit{font-size:1.5rem;}
}
@media (min-width: 992px) {
.gridBox{border-radius:25px; padding:50px 30px;}
.gridBox.border{border:1px solid #fff;}
.gridBox2{padding:30px 20px;}
}
@media (min-width: 1025px) {
.gridContainer31{grid-gap:30px;}
.gridContainer321{grid-template-columns: repeat(3, minmax(0, 1fr));}
.gridContainer421{grid-template-columns: repeat(4, minmax(0, 1fr));}
.gridBox.sm{padding:30px 20px;}
}
@media (min-width: 1200px) {
.gridBox.trans{padding:50px 50px;}
}
/* ************************************ Style :: 마우스 오버(Hover) 시 이미지 변환 ************************************ */
/* ****************** 회사개요 ****************** */
.image-container {
position: relative; /* 자식 요소의 absolute 기준점 */
width:100%; /* 이미지 너비와 동일하게 설정 */
height: auto; /* 이미지 높이와 동일하게 설정 */
padding:60px 40px;
}
.image-container01 img{
position: absolute; /* 두 이미지를 겹치게 함 */
top:90px;
left:calc(50% - 450px);
cursor: pointer;
transition: opacity 0.3s ease-in-out; /* 부드러운 전환 효과 */
}
.image-container02 img{
position: absolute; /* 두 이미지를 겹치게 함 */
top:90px;
left:calc(50% + 140px);
cursor: pointer;
transition: opacity 0.3s ease-in-out; /* 부드러운 전환 효과 */
}
.image-container03 img{
position: absolute; /* 두 이미지를 겹치게 함 */
bottom:90px;
left:calc(50% - 450px);
cursor: pointer;
transition: opacity 0.3s ease-in-out; /* 부드러운 전환 효과 */
}
.image-container04 img{
position: absolute; /* 두 이미지를 겹치게 함 */
bottom:90px;
left:calc(50% + 140px);
cursor: pointer;
transition: opacity 0.3s ease-in-out; /* 부드러운 전환 효과 */
}
.hover-image {
opacity: 0;
}
.image-container01:hover .initial-image,
.image-container02:hover .initial-image,
.image-container03:hover .initial-image,
.image-container04:hover .initial-image {
opacity: 0; /* 기본 이미지를 숨김 */
}
.image-container01:hover .hover-image,
.image-container02:hover .hover-image,
.image-container03:hover .hover-image,
.image-container04:hover .hover-image {
opacity: 1; /* 호버 이미지를 보이게 함 */
}
@media (min-width: 768px) {
.image-container {padding:120px 80px;}
}
@media (min-width: 1200px) {
.image-container {padding:250px 50px;}
}
/* ************************************ Style :: 탭 ************************************ */
/* ****************** 회사소개 (오시는 길) & 사업영역 (오가노이드) & 사업영역 (줄기세포 배양액 사업) ****************** */
.tabWrap{position:relative;width:100%;padding:0;margin:0 0;}
.tabBtn{display:flex; flex-wrap: wrap; justify-content:center;}
.tabBtn li{
flex:100%;
border:1px solid var(--border-color);border-radius:7px;background-color:#fff;
margin-left:0px; margin-bottom:5px;
list-style:none;
}
.tabBtn li:first-child {margin-left:0 !important;}
.tabBtn li a {
display:table;
position:relative;
width:100%;border-radius:7px;
height:40px;line-height:1.2;
text-align:center;
color:#000;
font-size:110%;
font-weight:500;
word-break:keep-all;
padding:5px 15px;
}
.tabBtn li a > span{display:table-cell; vertical-align:middle;}
.tabBtn li:hover{background-color:#f1f1f1;}
.tabBtn li a.active {background-color:#303030;color:#fff;}
.tabBtn:after {content:""; display:block !important; clear:both;}
.tabContent article{display:none; background:#fff; height:auto; overflow:hidden; }
.tabContent ul li{list-style-type: disc;}
.tabContent ol li{list-style-type: decimal;}
/* -------- TAB 스타일 :: 반응형 -------- */
@media (min-width: 576px) {
.tabBtn li{flex:30%;margin-left:5px;margin-bottom:0px;}
.tabBtn li:nth-child(3n+1){margin-left:0px;}
.tabBtn li:nth-child(2n+1){margin-left:5px;}
.tabBtn li > a{height:52px;}
}
@media (min-width: 768px) {
.tabBtn li{flex:30%;}
.tabBtn li:nth-child(3n+1){margin-left:0px;}
.tabBtn li:nth-child(2n+1){margin-left:5px;}
}
@media (min-width: 1025px) {
/*.tabBtn li{flex:23%;margin-left:10px;margin-bottom:10px;}
.tabBtn li:nth-child(4n+1){margin-left:0px}
.tabBtn li:nth-child(3n+1){margin-left:10px;}*/
.tabBtn li > a{font-size:120%;height:60px;}
}
/* ****************** 텍스트 밑줄 애니메이션 ********************* */
.highlighter {
/*background: linear-gradient(var(--primary) 0% 100%);*/
background: linear-gradient(rgba(255, 78, 0, 0.2) 0% 100%);
background-position: 0 calc(100% - 2px);
background-size: 0 8px;
background-repeat: no-repeat;
transition: background-size 1.0s;
animation: highlightAnimation 1.0s linear;
animation-delay: 1.0s;
animation-fill-mode: forwards;
}
@keyframes highlightAnimation {
0% {
background-size:0 8px;
}
100% {
background-size:100% 8px;
}
}
@media (min-width: 768px) {
.highlighter{background-size: 0 10px;}
@keyframes highlightAnimation {
0% { background-size:0 10px; }
100% { background-size:100% 10px; }
}
}
@media (min-width: 992px) {
.highlighter{background-size: 0 15px;}
@keyframes highlightAnimation {
0% { background-size:0 15px; }
100% { background-size:100% 15px; }
}
}
/* ****************** 오버레이 Box ********************* */
.overlayContainer {
width:100%;
display: grid;
grid-template-columns: auto;
grid-gap: 15px;
padding:0px 0px;
}
.overlayBox{
position: relative;
border:1px solid #f6f6f6;
border-radius:20px;
padding:0px 0px; text-align:center;
word-break:break-all;
}
.overlayBox .overlay {
opacity: 0.95;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #313131;
border-radius:20px;
overflow: hidden;
width: 100%;
height:0;
-webkit-transition: .5s ease;
transition: .5s ease;
margin:0 auto;
}
.overlayBox:hover .overlay {
height: 100%;
}
.overlayContents{padding:20px 20px;text-align:left;}
.overlayTxt {
width:100%;
color: #fff;
letter-spacing:0px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlayTxt .title{color:#fff;font-size:2.5rem;font-weight:600;line-height:1.3em;letter-spacing:-1px;padding-left:20px;padding-right:20px;margin-bottom:10px;}
.overlayTxt .description{color:#fff;font-size:1.2rem;font-weight:300;line-height:1.3em;padding-left:20px;padding-right:20px;margin-bottom:30px;}
@media (min-width: 576px) {
.overlayContents{padding:30px 30px;}
}
@media (min-width: 768px) {
.overlayContents{padding:40px 40px;}
}
@media (min-width: 1025px) {
.overlayContainer{grid-gap:20px;}
.overlayContents{padding:40px 60px;}
}